Skip to content

Accessibility

Jump to bottom
Rachel Rine edited this page Nov 19, 2018 · 2 revisions

Paraphrased from the Web Content Accessibility Guidelines (WCAG) 2.0 and section 508 of the Rehabilitation Act, article 1194.22 of the Code of Federal Regulations, “Web-based intranet and internet information and applications”.

Colors

  • Must pass contrast checks.
  • Information conveyed through color must also be conveyed through context or markup (links underlined, form errors described, etc).

Structure

  • A method shall be provided that permits users to skip repetitive navigation links.
  • Documents shall be organized so they are readable without requiring an associated style sheet.
  • H tags must be used in numerical order, with a single H1 required on every page.
  • Row and column headers shall be identified for data tables.
  • Don't get hacky - use <table> for tables, <h*> for headers, and <a> for links.

Regions/Landmarks

  • role="main" or <main> required, everything between header and footer usually
  • role="contentinfo" copyright, legal, bottom of page
  • role="complimentary", a sidebar or some other complimentary content
  • everything on page should be in a container with a role or landmark

Images and Video

  • Images must include descriptive alt text.
  • Videos must provide captions. Youtube is pretty good as a player, default captions can be spotty.
  • Icons used to convey information must have a text description.
  • Don't use a background image if the image is important to the content of the page.
  • Images with specified alt="" will not announce to screen reader. Can use if an image and text/heading are wrapped in the same <a> tag.

Forms

  • All input fields must have an associated label.
  • Directions and error messages should be clear and prominent.

Links & Buttons

  • All buttons & links must have real text (social media, icon buttons need text description).
  • In paragraph links should be underlined.
  • Links and buttons should be tabbable in an order that makes sense visually.
  • Links and buttons should have a focus state with appropriate contrast. A custom focus state is best, since the default can be hard to see depending on the background.

Functionality & Third Party

  • Focus should move to content that pops up, like a video player or modal.
  • When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology (beware: ajax, try: aria-live property to alert screen readers of content change).
  • When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to the plug-in or applet.
  • A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content).
  • When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required.
  • iFrames suck and the stuff in them will count against you.

Resources

Clone this wiki locally