Web Content Accessibility Guidelines (WCAG) Checklist

This is a simplified guide for our clients to use. This does not serve to replace or advise on the complete set of Web Content Accessibility Guidelines (WCAG). This is simply a guide to help our clients better implement, maintain and troubleshoot common content issues that affect accessibility.

Content Review Guide

Images

If the image contains text, use the alt attribute to include the text of the image.
If the image is linked, use the alt attribute to communicate the link destination.
If the image does not contain text, it is not linked and it is purely decorative use an empty alt attribute.
If the image is not purely decorative and contains information you want to convey to non-sighted user, use the alt attribute to communicate the content of the image.

→ The Alt Decision Tree is a tool that will help you decide if you should assign your image alt text.
→ To add, edit or remove alt text from an image you can either;

Navigate to your Media Library and find your image. When you click on the image you will see the “Attachment Details” where you can add/edit Alternative Text. You can also remove the image “Title” as this can cause redundancy.
If your image was placed using a WYSIWG editor, edit the page where the image is used. Open your editor tool and click on the image and then click on the pencil icon. The image details will appear in a dialog box where you can edit the image Alternative Text.

Semantic Content Formatting

All pages should have one H1 – this should always be the page title and is usually output automatically on each page. If the page title is not output on the page then the first heading on the page should be formatted as an H1.
Headings should be used within the content area in a logical reading order from H2 and down (H3, H4, H5) as necessary.
Bullet lists are formatted using <ul> list element (WYSIWYG formatting does this).
Numbered lists are formatted using <ol> list element (WYSIWYG formatting does this).

→ You can see the semantic structure of your page using the WAVE tool. This is covered in the section below “Testing with WAVE Tool” (item #9).
→ This Semantic Structure article outlines the basics of semantic web content formatting.

Link Text and Link Purpose

Use clear link text so users can determine the purpose of a link or button. Vague or redundant words such as “here” “click here” or “this link” – do not tell the user what action they are taking or where they will go.
Tip! Often the surrounding words before or after a “click here” is used makes for a better link (e.g. “register” or “buy event tickets”).

Color Contrast

Text (and images of text) should have a contrast ratio of at least 4.5:1.
Large text – at least 18 point (typically 24px) or 14 point (typically 18.66px) and bold – should have a contrast ratio of at least 3:1.
Links should appear visually distinct from text content and should not be distinguished by color alone unless the ratio is 3:1 or above. An underline can be helpful to help distinguish links in addition to a color change if the 3:1 ratio is not met by link color.

→ For full details on how to test your text and link contrast read the section below “Testing with WAVE Tool” (item #10).

Forms

All form buttons should use descriptive text.
All form fields should have text labels.
Form input fields should have an appropriate autocomplete attribute defined.

→ Adding autocomplete attributes to your web forms is not something that is easy to implement without the assistance of a web developer. If you have questions or concerns about meeting this guideline please contact MIGHTYminnow.
→ If your forms do not have labels the WAVE tool (outlined below) will alert you to this and report it as an error. The solution to resolve the error will depend on the form tool you are using and may require the assistance of a developer. You can contact MIGHTYminnow with your questions about this.

Videos

Videos should have closed captioning enabled. Consider using YouTube’s automatic closed captioning feature. Captions provide a text alternative to the video content.

→ Video content and accessibility is a complex topic with considerations unique to each video use case. In general, if you want to meet WCAG guidelines you ideally can turn on closed captioning (CC). This serves as a text alternative to the video. Additionally, or alternatively, you could provide your own text alternative for the video content. A text alternative of the video content outlines in plain text, which all users can access, the content of the video. For example, if your video is a tutorial, you could write out the steps shown in the video tutorial in a text format so that the content is accessible to all users.

iFrames and Embedded Content

All iframes and embedded content should have a title attribute.

→ If your iframe is missing a title attribute an error will be reported in the WAVE tool. See the section below “Testing with WAVE Tool” for more details.
→ When an iframe is added to the site you paste in a snippet of code onto your page. You can check for the title attribute by looking at the iframe code on your page. You may need the assistance of a developer to resolve a missing title. This resource has more information on iframes and title attributes https://www.w3.org/TR/WCAG20-TECHS/H64.html

Keyboard Navigation

User should be able to navigate the site using only their keyboard.
User should be able to submit forms using their keyboard.
Create navigation shortcuts such as “skip to main content” or “skip navigation.”
Check that keyboard navigation does not trap or lock the user in an element (e.g. a pop-up box).
Ensure page elements in focus are visually clear. Generally default browser focus styles are best to leave in place. The “focus” state is when the link/element is actively selected with your tab key.

→ You can test keyboard navigation by using the tab key. Load the page and click the tab key, you should see a focus state indicating visually with a highlight/outline that a link on the page is selected. Hit the Tab key again and your focus state should move to the next link on the page. This tabbing should take you through the menu and through links in the page content.
Tab – navigates the user from one link to the next
Shift + Tab – navigates the user back to previous link(s)
Enter/Return – selects (clicks) link currently in focus

PDF Accessibility

PDFs should also be made accessible. The best first step to ensure PDF accessibility is to make sure the source document (where the content is created) is formatted with headings just as you would on the web page (as outlined above). This will help ensure the PDF document is properly organized with tags in the next step. Once your document has been created you will want to export the file as a PDF.
This step requires Acrobat Pro software. Follow the steps outlined here:
https://helpx.adobe.com/acrobat/using/create-verify-pdf-accessibility.html#make_PDFs_accessible Once you have finished steps 1-5, save your updated PDF, upload to your site and link to it.

Sliders

Sliders are a commonly desired design element, but they can also pose accessibility issues. If the slider is simply a rotating carousel of decorative images and do not convey informative content the slider most likely does not pose any accessibility concerns. However, most often sliders do present content to users and therefor the following considerations would apply.

If the slider moves/advances automatically the user must have controls to pause, stop, navigate or hide it.
The slider controls should be keyboard accessible with proper semantic markup and alt text. You can test this by using your keyboard (as outlined above in the “Keyboard Navigation” section) to navigate and control the slider.

Testing with WAVE Tool

WAVE https://wave.webaim.org/ is a tool that allows you to enter/paste a page URL and scan it for accessibility issues. Below is an overview of how to use the tool. WebAIM has also created a great intro video about the tool which is helpful for understanding the tool’s interface.
→ Watch WebAIM Video about WAVE Evaluation Tool

Copy the URL of the page you added/edited and want to test.
Navigate to https://wave.webaim.org/
Paste in the URL and click enter or the arrow button
When the page loads there will be a left side panel with a Summary of the report findings.
To view the result details click on the “Details” icon/tab or “View details” button.
Errors – Ideally you want to achieve 0 Errors. If an error is reported review it to see if you can resolve it in the content of the page or post. Examples of common errors that can be fixed easily through content include: linked images missing alternative text, empty links, and empty headings. The link errors can be fixed by adding alt text to the linked images. Empty headings can be cleared by looking carefully at the page content and cleaning out extra empty spaces.
Alerts – Alerts are common and should be reviewed for anything that can be resolved. Some alerts are just notices and do not necessarily require attention. A common example of an alert you can likely ignore is the alert you will see if your page links to a PDF file. Examples of common alerts that can be easily fixed in through content include: suspicious link text (e.g.g click here), or skipped heading level (e.g. if an H2 is followed by an H4 instead of an H3 or another H2).
Features – Review the features to make sure everything looks correct and logical. For example, if an image has alt text it will appear in this feature list, but this is a good time to review the alt text to make sure it is the best and most logical alt text for the image. For example, if the imager alt text is “farm-01-3456” it should be edited to be clear and descriptive. Or, if the image is decorative you might consider removing the alt text.
Structure – This outlines the structure of the page. Use this view to make sure that the structure is logical. You will see your headings, lists and other structure elements labeled.
Contrast – We have found that the contrast checking this tool provides is not always reliable. This is likely due to the css (styling) not loading in the tool as it does when the page is rendered in a browser. If you find instances where contrast errors are reported you may want to verify the results using the contrast checker tool or the link contrast checker tool. Both of these tools require that you enter the hexadecimal (hex) color code of your background and foreground colors. It also allows you to adjust your colors if you want to adjust to a color that meets contrast requirements.
→ How do I find my hex color(s)?
If your site is built using a multipurpose theme (e.g. Jupiter) you can easily find your hex colors for text, headings, links, etc… in your theme options. Otherwise you will need to use a tool such as ColorZilla (a Chrome extension) or the Inspector (chrome functionality). ColorZilla allows you to sample a color using an eyedropper tool – but that can be hard for users when trying to select text color on small text. To use the Chrome Inspect tool you the element you want to find the color for (ext, heading, etc…), then Right Click > Inspect > Right Panel > Styles > Color.
Test Again and Review – After reviewing/fixing any content issues you can update the page and then run the page through the tool again to make sure the error has been cleared.
Note – the Wave tool can sometimes cache your page which can delay your ability to see your fixes rendered in their tool. If necessary you can try clearing your server cache, or checking again the following day. If you are experiencing errors that you would like MIGHTYminnows help resolving you can contact us.