Now that you've learned about common accessibility issues, review the categories below to see potential solutions.
Navigation
- Enable sticky links
- Activate all navigation items on tab or enter
- Show visual focus through borders
Forms, frames, and Images
- Declare names, roles, states, and values if using ARIA attributes: Provides information a sighted user would see to screen readers
- Otherwise can use ALT for images
- What you see is also in the code: Visual and programmatic labels should match
- Set labels using ARIA attributes or through fieldset and label
- Set accurate titles for any frame or iframe
Language
- Declare the document's language: Signals screen readers to choose an appropriate voice and accent
- If a language other than the document's default is used, declare the appropriate language
No CSS
- Keep the page "clean" and usable even when CSS is disabled: Some users disable a site's CSS and impose their own stylesheet for easier viewing
- Example: On some pages, when CSS is disabled, a toggle navigation button appears; the toggle navigation was designed for mobile viewing but could be confusing on a web page
- Example: When CSS is disabled, image carousels tile images and loop the user back to the section of the page where the images are displayed on every image change
- An accessible stylesheet is available and can be applied to any site
Widgets and Plugins
- Many widgets and plugins are not accessible
- Example: All Flickr widgets are inaccessible
- Necessary to test each widget or plugin in a particular site: They can have behavior that spreads throughout a site
- Example: Countdown widgets' behavior has to be displayed in a page to fully test for accessibility
- ITS has a list of approved widgets and plugins, which have been tested for accessibility
Last modified October 3, 2018