Skip to content

Latest commit

 

History

History
131 lines (74 loc) · 5.67 KB

accessibility.md

File metadata and controls

131 lines (74 loc) · 5.67 KB

Accessibility

WCAG 2.0

Table of Contents

  1. Language Attribute
  2. Semantic HTML
  3. ARIA
  4. Wayfinding
  5. Images
  6. Links
  7. JavaScript
  8. Email
  9. Testing
  10. Misc HTML markup notes

Language Attribute

  • Declare a language attribute on the html element so screen readers can use correct pronunciation

⬆ back to top

Semantic HTML

Semantic HTML Definition

  • Use semantic headings and structure to establish a document outline. Current consensus recommends using H1-6 heading rank rather than repeated H1 tags in nested sectioning elements.

Semantic Buttons

  • Use the button element for JS interaction points and similar non-linking components. If a button is not of the submit, reset, or menu types, use type="button" to designate a generic button.
    • The a tag should only be used when using the href attribute to link "to other web pages, files, locations within the same page, email addresses, or any other URL" (ref).

HTML5 Elements

HTML5 elements should be used whenever possible to communicate the element's role in the page. Some notable examples include:

  • main for the primary content of the page, most appropriately excluding repeated elements (e.g., sidebars, decorative marquees, site header and footer)
  • article for self-contained content that could conceivably belong in an RSS feed, such as blog posts, press releases, and event information (in both page and individually in index listings)
  • section for thematically grouped content in a component that doesn't justify a stronger semantic element
  • nav for all significant navigation link lists
  • aside for complementary content, such as advertising, "related article" lists, and repeated page sidebars

Semantic HTML5 elements provide additional meaning to an HTML document for other technologies. Notably, using these roles not only serves visitors using accessibility technologies, but it also makes parsing code easier for fellow developers.

⬆ back to top

ARIA

  • In most cases, using semantic HTML elements makes explicit designation of landmark roles unnecessary (e.g., using role="complementary" on an aside element). The exceptions would be when they are serving slightly atypical roles. An example of the latter would be setting role="search" on an aside element when it houses a search field.
  • For more complex interactive components, use ARIA attributes to help assistive technologies navigate website functionality. Accessibility advocate Heydon Pickering has gathered useful examples of using ARIA roles for components such as tab groups, tooltips, and alert dialogs.

⬆ back to top

Wayfinding

  • Document should be navigable by keyboard

⬆ back to top

Images

Image HTML Tags

  • Use <img></img> for images that are content. Use CSS background images for design "chrome".

Image Alternative Text

  • Use alternative text for any image used as content. Alternative text should provide a description of the image. If the image is presentational or decorative use an empty alt="" attribute instead of role="presentation".

⬆ back to top

Links

Focus State

  • Links should have a focus state :focus

In Body Text

  • Links in "body" text should be underlined

Link Purpose

  • Link purpose should be clear from the link text alone

⬆ back to top

JavaScript

Unobtrusive

  • Use unobtrusive JavaScript

No-JS Alternative

  • Provide no-js alternatives for users that don't have JavaScript enabled

JS Events

  • Use device agnostic events such as onclick and onfocus

Keyboard Events

  • Provide keyboard alternative events

⬆ back to top

Email

Section 508

⬆ back to top

Testing

  • Sites should be tested during development to ensure basic accessibility standards are being met (WCAG 2.0 AA or higher if required by the project). One simple way to do this is to install the WAVE Toolbar browser extension.

  • We currently use pA11y for command line and CI testing of projects before merges/deployments using apostrophe-site-map to generate a list of URLs for pA11y to crawl.

⬆ back to top

Misc HTML markup notes

iframes

You should always give iframes a title attribute with basic description of their contents. For example, if you're embedding a map of office locations: title="Office locations map". REF

⬆ back to top