Making WordPress Accessible

screenshot of International Association of Accessibility Professionals

WordPress Accessible Theme Development: Scott Marlow

The mission of the International Association of Accessibility Professionals (IAAP) is to define, promote and improve the accessibility profession through networking, education and certification in order to enable the creation of accessible products, content and services.

Automattic routinely makes accessibility improvements to WordPress software and its default-installed themes, like TwentyEleven and TwentyTwelve – two of my preferred mobile responsive, parent themes. Browser makers and the W3C also make routine improvements.

For example, W3C recently deprecated the “hgroup” tag that allowed multiple h1/h2 headers in site mastheads – this created semantic issues for site visitors using Assistive Technology devices.

It’s highly unlikely for any theme to be 100% accessible, but there are improvements that can be made. Here’s an abbreviated list of accessibility features that we integrated into IAAP’s TwentyTwelve child theme:

  • removed auto-hyphenation
  • reduced main line width to 80 characters
  • added 2 visual identifiers to link hover state
  • increased all text color to minimum hex value of #666666
  • removed title attributes from all links
  • removed target attribute (opening new windows/tabs) from all links
  • added Post Title to ‘read more/continue reading links’
  • properly marked up Posts on the post page as H2s, instead of H1s

Additional usability improvements for low-vision site visitors included:

  • convenient font-resizer
  • high-contrast toggle button
  • high-contrast reverse link hover state
  • a “visual change” to links that exceeds a 4.6 to 1 contract and an additional visual marker (an underline) to insure a proper visual difference for the visually disabled to actually see links

Joe Dolson’s WP Accessibility Plugin is a convenient tool to improve accessibility for many themes.