accessibility

WCAG vs Section 508

Section 508, which is a part of the Rehabilitation Act, outlines online accessibility standards that federal agencies, contractors and employers must meet. While it does not explicitly address colleges and universities, they would be affected if they receive any funding from the federal or state government.

The Web Content Accessibility Guidelines (WCAG) are a set of universally accepted technical requirements produced by the World Wide Web Consortium (W3C) that explains how to make web content more accessible to people with disabilities. The most recent version is v2.2.

General best practices

  • whenever possible avoid using javascript powered widgets such as carousels and modal boxes. if you must use these be sure there are keyboard-operable controls and that they handle focus correctly
  • don’t overdo it with ARIA attributes - see https://www.w3.org/WAI/ARIA/apg/patterns/ for ARIA tips
  • look at https://www.gov.uk/ for inspiration

links buttons images colors fonts videos heading tags forms testing resources

  • linked items that don’t display a link title (i.e. a linked image) should still have hidden text in the link tag as screenreaders will use this to describe where the link points
  • links should have meaningful titles to avoid lists of “Read More” links which don’t convey where the link points (if this pattern can’t be changed add aria-label attributes with a better description of where the link points)
  • links should be underlined when in paragraph text as color alone may not convey that the text is indeed a link
  • an arrow icon helps denote that a link is indeed a link
  • rely on more than just color to denote that something is a link
  • if a link is wrapped around an image be sure that image has alt text as that is what a screenreader will announce
  • download links should display the file type and file size
  • avoid opening links in new tabs unless that serves a purpose (i.e. instructions how to fill out a form etc)

buttons

  • buttons with a click action should be button tags - never div or p text with click events applied via javascript
  • buttons that open/close a dialog or menu etc should have the following attributes some of which change depending on state
    • aria-haspopup=true
    • aria-expanded=false (change to true if menu open)
    • aria-label=“some name” (suc as ‘open menu’ or ‘close menu’ depending on menu state)
    • aria-controls=“id of element whose visibility is controlled by button”

images

  • images should almost always have alt text which should be short and descriptive
  • alt text isn’t an option if you’re using images as CSS background-images
  • while you can add some hidden text to describe a background-image it is recommended that images used in this way be decorative in nature
  • purely decorative images should contain role=“presentation” and alt=""

colors

  • check that text has sufficient contrast against background colors
  • https://webaim.org/resources/contrastchecker/ is a good online checker because it tells whether contrast meets WCAG AA and AAA standards
  • avoid overlaying text on top of an image unless there is a solid background behind the text
  • one commonly employed technique is to use a background color with medium opacity - this subjectively improves contrast but may still fail automated checkers.
  • do not use color alone as a way of denoting something about text

fonts

  • use rem units in lieu of em or px units for font-sizes and use unitless line-height values
  • do not justify text
  • present chunks of text in areas

videos

  • if you are displaying a muted background video provide a descriptions vtt file
  • if you are displaying a video with audio provide a captions vtt file and descriptions vtt file
  • all videos should have a play/pause buttons so users who find it distracting can pause
  • provide a poster image that displays while the video loads or if the video does not load correctly
  • if displaying a static image on mobile, be sure the video still doesn’t download even though it is hidden from view

heading tags

  • don’t use heading tags as a way to style text
  • instead provide classes that can be used to style p or div text to look like heading text
  • heading tags should provide a hierarchy to textual content and should be used in a predictable order (i.e. an h4 should not be used inside a region with an h2 header unless there is an h3 in between)

forms

  • form errors need a visual identifier such as a dotted border to show where the error is
  • do not use placeholder text in lieu of a label on form elements
  • In addition, ARIA attributes should be used to reinforce the relationship between a form element and its corresponding label
  • form submit button should be a button tag and not div text with a click event applied

testing

  • verify that your site functions correctly when the browser is zoomed to 300%
  • never disable focus styles by setting outline:none
  • users should be able to navigate your site using the keyboard alone. test this by tabbing through your site and verifying you can focus on all links or buttons present and can visually see where focus is
  • provide a “skip to content” link
  • verify any javascript widget such as carousels or modal can be operated with the keyboard and do not trap focus
  • set the lang attribute in your site metadata as screenreaders will use this
  • CSS-Tricks Overview for some accessibility related tricks
  • AXE is a Chrome plugin useful for testing local sites that don’t have a public URL
  • WAVE is great for checking sites that have a public URL to test. It gives results similar to AXE
  • Lighthouse is a product created by Google that differs from other accessibiity checkers in that it can be run from the command line. This means it can be automated as part of existing workflows.

resources