Use Unique and Descriptive Link Names
Links to Documents or web pages must be unique and descriptive for ADA Compliance.
Make sure that the link text properly describes the link destination and makes sense out of context. Telling a reader to ‘click here’ is not descriptive, and is ineffective for a screen reader user.
Assistive technology, including screen readers, compiles a link list for the user to quickly scan all the links on the page. Using descriptive text properly explains the context of the link.
For example, when pointing readers to a page called “About Us”:
Avoid: “Click here to read about our district.”
Instead use: “To learn more about our District, read About Us.” or "Learn more about our District"
Use Headings to Organize the Structure of your Content
Headings, when used correctly, outline the content on the page and is required for ADA Compliance.
Heading Levels
| Heading 1 (Page Title) | H1 |
| Heading 2 (Heading) | H2 |
| Heading 3 (Subheading) | H3 |
| Heading 4 | H4 |
| Heading 5 | H5 |
| Heading 6 | H6 |
Proper use of Headings is required for Assistive Technology to navigate the page. This also allows the visitor to quickly review the content on the page. Heading styles are designed to be used in order (see example below).
Heading 1 Requirement
- Every Page of the website must have an H1 (Heading 1 or Page Title)
- Heading 1 should only be used once on each page.
- The Heading 1 should be descriptive of the page content.
- Most Foxbright websites have an automatic Heading 1 placed on the page and the top-level heading in the editor format drop list is Heading 2.
Use Headings to Outline Content
Adding Screen Reader Text to Links and Icons
When linking a Font Awesome icon, or if the preferred link text isn't descriptive enough for those using screen readers, screen reader only text can be applied so that the text is not visible on a page but is available to screen readers.
An example of this is wanting
to create a link written as "Learn More" which makes sense when viewing
the other content on the page, but might not be descriptive enough for
screen readers. Additional text could be added to the link such as
"Learn More about our school" with "about our school" having Screen Reader Only formatting applied so it isn't visible.
Adding Screen Reader Text to Normal Links
- Type the full link text, including the portion that will be made invisible, in a rich text editor.
- Highlight all the text and click the link option corresponding to the type of link being added. Add the link in the same way links would be added traditionally.
- Highlight any of the link text
and spaces that should be visually hidden then select the Screen Reader
Text option in the Paragraph Menu drop down.
- Save and Preview to verify
only the desired link text is visible with the link. Both the visible
and hidden portions of the link text will be read by screen readers.
Adding Screen Reader Text to Font Awesome icons
Font Awesome icons can be used by themselves as a button to link to a social media account, or elsewhere. If link text isn't used in conjunction with the linked icon, the 'button' won't be ADA compliant as Font Awesome doesn't have a way to add alt text, like other image-based graphics do. To make Font Awesome links compliant, screen reader text needs to be added to the link. The screen reader text is invisible to visitors viewing the website.
- Place your cursor before the Font Awesome icon.
- Type Screen Reader Text. (i.e. Like us on Facebook, Follow us on Twitter)
- Double click the Font Awesome Icon and copy the existing social media URL or if it is a newly inserted icon, copy the URL from the social media account.
- Highlight the link text and Font Awesome Icon linking it to the social media URL as one link
- Highlight the link text and any spaces that show the link color then select the Screen Reader Text option in the Paragraph Menu drop down. Highlighting both the text and spaces will make it so they don't show when the page is published but screen readers will be able to read the added text. The screen reader text will still be visible when viewing it in the editor.
- Save and Preview to verify the icon displays as desired.
Screen Reader Text Examples:
- Like us on Facebook
- Follow us on Instagram
- Follow us on Twitter
Font Awesome Color codes
- Facebook: #6666ff
- Twitter: #0099ff
Using the Language Tag to Identify Non-English Text
A language tag menu helps screen readers identify foreign language text. This is a common error flagged on ADA
compliance reports when non-English languages are used. Setting the
language tag also helps translator tools properly translate non-English
text.
To add a language tag to areas of text, highlight the text, click the Set Language drop-down and choose the appropriate language for the text.
Using Tables to Display Content
For ADA Compliance, please follow these rules when using tables for your website page content.
Layout Tables
Layout tables are used to format content and do not require special tags to be accessible. A popular use of layout tables is to split a list into two columns. As long the columns don’t have titles, and it doesn’t matter what order the items are read in, nothing needs to be done to make the content accessible. The Foxbright CMS automatically adds the required 'presentation' tag to tables which don't have header column/rows set.
If the order of content in the table matters makes sure that the content is linearized. Learn more about Layout Table Linearization.
Data Tables
The purpose of data tables is to present tabular information in a grid and to have column or rows that show the meaning of the information in the grid.
When creating a data table, it must be marked up to include the scope or id/headers attributes. Adding headers will help a user understand the table more completely. The table properties window provides an option to select the first row, column, or both as headers. For more complete details, visit WebAIM's Creating Accessible Tables Guide.