2020-2021 Teacher Fellows

Accessibility Adjustments Help

Toggle High Contrast

This button will darken the page's background color to black while making all text white. This high contrast will make it easier to read the website's content.

Toggle Page Zoom

This button will increase the size of all elements on the page.

Toggle Focus State

This button adds a visible focus state to all interactive elements when using the keyboard. This allows the user to know exactly where they are on a site while tabbing through with a keyboard. Note: this will only affect sites that do not currently have visible focus states.

Toggle Link Highlights

This button will add an outline to all links and buttons on a page that a user can interact with.

Accessibility Checker Help

Check Images

This triggers a check of all images on a page for either an 'alt', 'title', or an 'aria-label' attribute. Images that are purely decorative or do not include any information to convey to the user do not need alt text. In these cases, the alt attribute should still be present but should be left empty. Our checker will still flag empty alts as an error just in case.

Check Color Contrast

This triggers a check of all text to ensure that it's color has a high enough contrast against the color of the background it is on. In some cases our checker will flag contrast errors for text that is on top of an image or when either the text or the background element has a position of 'absolute'. In these cases it is up to the site administrator's discretion to determine if the text is legible.

Check Links & Buttons

This triggers a check of all the page's links and buttons. Links and buttons without text or an aria-label describing what the link or button accomplishes will fail. Without text (including hidden screen reader only text) or an aria-label, assistive technology will not be able to determine the purpose of the link/button.

Check For Duplicate IDs

This triggers a search for all IDs on a page. Duplicate IDs will be flagged as an error. Duplicate ID errors are known to cause problems for assistive technologies when they are trying to interact with content. SVGs tend to be a major source of this failure. It's beneficial to remove all IDs from SVGs before placing them on a page.