Accessibility Coding Standards - spthemes/best-practices GitHub Wiki

A WordPress theme should generate pages that everyone can use — including those who cannot see or use a mouse. It is a good idea to read through the Accessibility section of the Theme Handbook.

Heading structure

The H1 is the main heading representing the page title on every core page. For subsections, use a reasonable HTML heading structure — including the use of heading elements for page subsections. Heading markup should not be used for presentational purposes.

  • Put your document title in an h1 tag.
  • Nest your page sections and subsections in a sequential hierarchy of h2–h6.
  • Don’t skip levels: For instance, always follow an h2 with either a h3 (child subsection heading) or a h2 (sibling section) but never an out-of-sequence h4.
  • Never use headings for visual effects only, e.g., to bold text or increase font size.
  • Don’t add extra functionality inside a heading, like links or buttons.

Color Contrast

The WordPress project aims to maintain color contrast accessibility at the WCAG AA level. Minimum contrast requirements are 4.5:1 for font sizes rendering smaller than 24px or smaller and 3.0:1 for font sizes larger than 24px or 19px and bold.

  • The contrast between the background and foreground colors for text should be a minimum ratio of 4.5:1 (see Useful Tools: Color).
  • The contrast ratio applies to differently colored adjacent text, like link-text.
  • The contrast ratio applies to all states of text, including :focus and :hover, and :visited for links.
  • For font-sizes 24px or larger, or 19px when bold, the color contrast ratio must be a minimum of 3:1.
  • Test your design palette in a color blindness simulator.
  • Avoid using color alone to distinguish important elements.

Keyboard Accessibility

Users must be able to reach and successfully interact with all elements on the page that are actionable, including all form inputs, buttons and links by using the keyboard. They must be able to see a visual indicator of keyboard focus. You should be aware that keyboard events may operate differently when a screen reader is running.

If you can complete an action with a mouse, you must also be able to complete that action using the keyboard.

Images

When possible, decorative images should be included using CSS. Where images are being added to your template markup, ensure that they incorporate an appropriate alt attribute.

Enable Skip Links

Skip links provide a mechanism that enables users to navigate directly to content or navigation on entering any given page.

Links

  • Link Text

    Link text should describe the resource that it links to – even when the text is read out of context. Some assistive software scans a page for links and presents them to the user as a simple list. In these situations, all the links will be read out of context. So it is important the text used in a link is descriptive. Bare urls should never be used as links.

  • Link Highlighting

    Provide good :focus and :active link highlighting (both in navigation menus & elsewhere).

  • Link Underlining

    Generally speaking, links should be underlined if they are outside navigation menus. Using color alone to distinguish links is insufficient as not everyone can perceive color. Underlining link means that users do not have to “mouse scrub” a page or play “guess which text is a link”. Also consider removing the underline as part of your :hover/:active/:focus styling to, again, ensure that you are not relying on color alone.

jQuery & JavaScript

You can still use jQuery in an accessible theme. Just don’t rely on it for any primary functionality. Test by viewing the theme’s output whilst JavaScript is disabled within the browser. Does the site still function effectively?

When implementing jQuery slideshows etc. check that they can be navigated by keyboard alone. In all things script-related, aim for progressive enhancement and graceful degradation.

Testing

  • Validation

    Validate your theme’s markup and CSS. Validation still represents the best way of ensuring that your theme’s pages are displayed to their best advantage across a whole range of web software.

  • Accessibility Testing Tools

    Unlike markup & CSS validators that operate using a strict binary “Right/Wrong” approach, accessibility validators have to try and audit complex scenarios. Consequently, their reports can include false positives and/or negatives. Again, do not be afraid to use your best judgement in these situations or ask around. There are plenty of accessibility-related resources — including forums — that can help.

  • Cross-Browser Testing

    Remember to check your theme's output in the current versions of Internet Explorer, Firefox, Chrome, Opera, and Safari. Those using Mac’s built-in screen reader, VoiceOver, may not have an option to use anything other than Safari. Users of the voice recognition software, Dragon Naturally Speaking, may rely on Internet Explorer to effectively navigate web pages. Opera is a popular browser choice amongst disabled users due to its many, inbuilt, accessibility features.

Things to Avoid

  • Spawning New Windows or Tabs
  • Autoplay & Animations
  • Tabindexing
  • Accesskeys

Check out these Resources.