You must first become a master ninja before moving on to the next course.
Summary
Each time new content is created, or existing content is updated, it must be made accessible. For this reason, we've put together a checklist of the most common, content related, accessibility issues and how to fix them. Below you will also find a few links to tools that will aid with detecting accessibility issues. The expectation is that these tools will become part of your workflow and simply be one additional step to take when adding, or updating, web content.
Checklist
Headings, and other structural elements (such as lists), help to build a document outline and provide context to the content which is used by assistive technology.
- Headings should be used to build a document outline, and heading levels should not be skipped (don't use a heading level 2 followed by a heading level 4).
- Use headings properly by applying a heading level to heading text rather than applying a style or format to text (such as bold).
For additional details see the Accessibility: Headings guide.
Links are what allow website visitors to navigate the website and find the content they need. Most web browsers and assistive technology (such as screen readers) allow users to skip around the content of the page and read the text for each link.
- Ensure that the link text makes sense when read by itself. There should never be links or buttons with the text of "Click Here" or "Read More" as this will be read aloud by a screen reader and provide no context as to what "Click Here" does.
For additional details see the Accessibility: Links guide.
Images are great for design and can provide a lot of information, however on their own they're useless for those with a vision disability.
- All images need alt (alternative) text descriptions. These descriptions should be short, concise, meaningful, and relate to the context in which the image is being used.
For additional details see the Accessibility: Images guide.
Videos are increasingly being used for design and can improve a websites engagement, however they pose challenges to both individual with vision and hearing disabilities.
- All audio must have an accompanying transcript.
- All video must be captioned. This includes 3rd party videos placed on your website. Also, this takes time and is an added expensive if contracted-out (such as 3Play Media), so plan accordingly.
- We recommend using YouTube for all videos as their captioning and transcript tools and features are well established.
For additional details see the Accessibility: Audio and Video guide.
Color is an important part of design and part of what sets the mood and tone of a website, however color alone must not be used to convey meaning, or the only source of context. There must also be adequate levels of contrast between foreground colors (text) and background colors.
- When using color to convey meaning, or provide context, be sure there is a text description also available.
- Check for adequate levels of contrast between foreground (text) and its background. For example, there should never be light-gray text on a white background. The Accessibility Checker tool can help to identify these problems and ensure proper levels of contrast.
For additional details see the Accessibility: Colors guide.
In addition to the other types of content, uploaded documents, such as PDFs, Word documents, PowerPoint presentations, and Flash material all must be accessible.
- Only upload and link to documents that have first been verified to be accessible.
For additional details see the CSU Accessibility by Design: Tools page.
Resources
Siteimprove Accessibility Checker
- Install Siteimprove Accessibility Checker. Note that this is only available as a Google Chrome browser extension.
- Ensure that your page (or post/event) is published.
- Navigate to the web page you want to scan and then click the Siteimprove Accessibility Checker button (in the top, right, corner of your screen). Note that if this is the first time using the Accessibility Checker it will pop-up a sign-up form, which can be skipped, and you will need to click the button again to open the actual Accessibility Checker.
- If this is the first time opening the Accessibility Checker follow the sub-bullets below, otherwise skip this step.
- Click on "Choose Filters" and select the following options
- Choose conformance level: "AA conformance"
- Choose severity: "Error" and "Warning"
- Choose responsibility: "Editor" (and occasionally "Developer", explained below)
- Check to see if there are any Issues, and if so click on the individual issue to find the cause and see what to do to fix it.
- If the font color (for links or regular copy), or a background color, was changed check the "Developer" Filter under Choose Responsibility, and check if there are any "Contrast (Minimum)" issues. If so then there is too little contrast between the text (foreground) and the background color.
- Repeat steps 5 and 6 for each issue. Ideally all issues should be fixed, however there are times when it's not possible or it's a false positive.
If you encounter any issues that you're unsure of how to fix, or unable, please submit a web support request with the URL to the page and mention the exact error or alert in question.