These are the most common issues we find when testing web accessibility:
Inadequate use of headings in the content of the pages
The software used by people with sight disabilities, called page readers, reads the content of a website according to the meaning of its HTML code. In plain English, HTML offers different types of elements like headings (H1, H2, H3, etc), font attributes like bold, italics, underline, etc, and usually, content managers who haven’t received basic training in HTML and 508 compliance don’t know what H1 (or heading 1) means, and they will probably choose the font attributes to make a text look like a heading instead of the proper HTML code, and this is when accessibility gets impacted.
To facilitate the readability of your website, it is recommended to use the proper HTML elements in your content. These are some tips:
- Use only one H1 (or Heading 1) per web page, and ensure that’s the main heading of that page. Normally, content management systems (CMS) like Drupal or WordPress assign the H1 tag to the title of your page, if that’s the case, avoid using the H1 element in the headings of your content, and ask your web developer if he/she can remove that option from the editor.
- Use H2 (or Heading 2) on the secondary headings of your content. Likewise, use H3 for the tertiary headings, and so forth.
- Do not use the bold attribute in headings. Instead, use that option if you want to highlight something important in your content.
Missing “Skip Navigation” link
Page readers read every piece of information that is displayed in a web page, including navigation bars, header and other elements of your website that are not necessarily part of the content. Therefore, it is recommended to implement an option to skip all those elements in the screen and jump directly to the content so it’s read right away.
The implementation of this link is very simple:
- Ensure that all the pages of your website contain an ID in the beginning of the content, say: <div id=”content”>.
- Include an anchor link in all the pages of your site pointing to that ID, but make sure that link is the very first element to render in your site, before all the header elements, so you can skip them. I.e.: <a href=”#content”>Skip to content</a>.
Missing labels in web forms
Often, form fields are not labeled properly in the HTML code, and screen readers can’t read them well, and sometimes skip them. There are several options to label those fields properly, using native HTML attributes and tags, or using the Accessible Rich Internet Applications (WAI-ARIA) specification, commonly known as ARIA, which is a set of additional attributes designed to enhance the web accessibility. These are some common options:
- Using the label HTML tag (<label for=”field-id”>).
- Using the title HTML attribute, when you don’t want to display a label for the field – commonly used in search fields. Example: <input title=”Enter the terms you wish to search for” type=”text”>.
- Using the aria-label attribute when label is not visible. Example: <input aria-label=”Enter the terms you wish to search for” type=”text”>.
- Using the aria-labelledby ARIA attribute – when label is visible in the screen in a different element. Example: <input aria-labelledby=”another-element-id”>. This convention works great when you want a field to be labeled by two different elements, say in a table, to associate the row and column headers.
- Using the aria-describedby ARIA attribute, when you are already using a label for the field but you want to link more information to that field that is written in a separate HTML element. Example: <input title=”Enter keywords” type=”text” aria-describedby=”search-description”><div id=”search-description”>Enter the keyword phrase you wish to search for. Keywords need to be at least 3 characters long.</div>.
Non-accessible Tables
Tables are often hard read by screen readers if they are not built properly. These are common best practices:
- Use a caption HTML tag to describe the table, specially if the table is large or complex.
- Specify the headers of the table with the th HTML tag. Example: <table><caption>This is the description of the table</caption>
- Ensure that the cells within the table are associated to the corresponding headers. You can do this by using these options:
- The scope HTML attribute. I.e.: <th scope=”col”>Phone number</th>, or <th scope=”row”>Organization</th>.
- The headers and id attributes, but this is not efficient for complex data tables. Example: Define the headers like <th id=”orgname”>Organization</th>, and then associate the cells with the IDs of the corresponding headers <td headers=”orgname”>Agileana</td>.
“Read more” links
Using repetitive “Read more” links for every item in a list of articles is a very common practice. This convention is not accessible and often which confuses screen reader users.
This can be improved by:
- Ensuring that “Read more” links are all different, i.e. “Read more about our company”, “Read more about our services”, etc.
- Using specific and meaningful title HTML attributes for each of those repetitive links, like <a href=”#” title=”read more about 508 compliance”>Read more</a>. The page reader will read the title attribute instead of the link.
- Avoiding “Read more” links. Instead, use the title of the listing for that link.
