How do you make your content easier to read? More accessible? Organized and clear?
Let’s walk through some points to consider as we figure out the answers to these questions.
1. Assign a Language
Why? Knowing the language a page is in will help a screen reader understand and relay the information in the correct language.
Every web page on your web site should have a language assigned to it at the template level. Check with your developer to make sure that your templates have the appropriate language assigned to them.
If you have blocks of text on your page that are in another language, you will need to tag those blocks of text accordingly so that the screen reader is aware of the change in language.
2. Page Title
Why? Sites with multiple pages that have the same title are confusing, especially for users of screen readers. Also, search engines tend to lower your ranking since it sees the titles as duplicate pages.
Make sure that every page has a unique title that also provides a concise description of the page’s purpose. The ideal length of your title is fewer than 60 characters.
3. Headings
Why? Screen readers use headings to allow the users to logically skim the content and understand the structure and level of importance given to each section of the material.
Make sure to use headings correctly though! The structure should be in the correct order from <h1> (most important) through <h6> (least important). There should only be one <h1> per page. Check with your developer as sometimes the <h1> tag is built into the template automatically.
Other Benefits of Headings:
- Structure and meaning is leveraged by search engines and can increase page traffic
- All users can more easily scan a page to find what they are looking for
- Consistent use of headings across your site can provide clear structure and convey the order and importance of your content
4. Lists
Why? Improved readability for all users!
When text is broken into scannable, manageable bits of information … it’s just easier to read.
When you format them correctly, a screen reader can recognize the list, announce the presence of the list to the end-user, and even tell them how many items are in the list.
Keep in mind that you should use the list formatting tool in your web site’s authoring environment. Do not add bullets or number your lists manually.
Types of lists:
- Bulleted – or Unordered – use when the order doesn’t matter
- Numbered – or Ordered – use when there is a sequence
Note: there are other types of lists available, but these are the most commonly used list types.
5. Spacing
Why? Extra spaces and paragraphs get read aloud by screen readers – it’s really annoying.
- Do not use enter or blank returns to add spacing between paragraphs.
- Do not use the space bar to align text.
- Do use CSS styles to add paragraph line spacing.
- Do use CSS or page breaks to move to the next page.
- Do use CSS or tabs to align text.
Alignment
Using text alignment can be a great way to create visual interest – but it can also make the text harder to read.
- Full justification can create inconsistent gaps between words. This can contribute to lower reading comprehension by some people, such as persons with dyslexia or low version.
- Centering text is not always ideal. If a user needs to zoom in (such as someone on a mobile device or someone with low vision), the content can be positioned off-screen.
- Left justification is the most accessible – the lines begin in a consistent location, and the staggering at the end of each line allows the eyes an opportunity to rest.
6. Descriptive Links
Why? Screen readers may pull links out of context to present to the users. If the links only say “click here” it will not make much sense to the users.
Make sure the wording you pair with your links makes sense if it is read out of context. Use a description that identifies the link’s destination – such as the title of the page you are linking to.
If you are linking to a file, it is best practice to include that information in the link text so that the end-users know what to expect. For example, “Download the campus map PDF”.
Typically you will not need to be concerned with the appearance of the links on your site, as your site’s CSS should be styling your links. However, it is good to know that your links should be a different color from the surrounding text. A good practice is for links to be underlined and bold in order to draw the user’s attention to them. If they are not underlined, be sure that they have sufficient color contrast with the surrounding text (3:1). If your links do not follow best practices, you may want to discuss this issue with your developers.
7. Using Color
Why? Color blindness affects approximately 1 in 12 men and 1 in 200 women worldwide.
Other issues to be concerned with are users with cataracts, low vision, or are in poor lighting situations.
- Color in Choices –
Do not provide just a color for them to select, instead, include a label for each of the colors. - Color in Tables –
Color-banded rows in tables can cause problems when the background and foreground don’t have a high enough contrast ratio.Keep in mind that colors might not be recognized by some users when you use it as an indicator in the table.Make sure that if the color were to be removed from the table, that the meaning of the information would still be conveyed.
- Color in Graphs –
Monochromatic color palettes can be a problem for users because the sections may not appear distinguishable if they have color deficiencies.Solution 1: Use patterns or various shades so that color-blind users can distinguish them.
Solution 2: Add a legend or labels near each element. - Referring to Colors –
Do not refer to the color of an object as the only attribute.Bad Example: Select the Green Button
Good Example: Select the Green Play Button - Color in Branding –
According to WCAG, the contrast ratio between text and background should be at least 4.5 to 1.Color combinations, including your company’s branding, should have the appropriate high-level contrast between text and background. The best option is a dark color font on a light background.Use a color contrast checker to test your color combinations. Many tools will allow you to enter your color values and will calculate the contrast ratio automatically. They will even tell you whether it’s WCAG compliant.
I personally recommend the Colour Contrast Analyser (CCA) by The Paciello Group.
I’ve even put together a video on Using Colour Contrast Analyser.
7. Referring to Location
Why? Some users may not be able to see a shape or location. It may be due to a disability or it may be due to screens/windows being resized – items don’t always stay in the same place on your page.
Instead of saying “Click the small round button,” try saying “Select the round Accept button.”
I hope this article has helped you gain a clearer insight into the requirements of formatting your content to ensure accessibility on your pages. There is an abundant amount of information on the web that can aid in assisting you as a progress into this field. So do not be afraid to research and look for more resources.
Stay tuned for future articles!
Content partially curated from SiteImprove’s Course: Accessibility for Content Contributors (Premium) and is not available for sale.