Applying Principles

Now that you’ve learned about common accessibility issues, review the categories below to see potential solutions.

  • Enable sticky links
  • Activate all navigation items on tab or enter
  • Show visual focus through borders

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

  • 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

  • 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

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