Applying Principles

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