At our WordCamp Columbus 2014 session today, my friend Jacki Keys and I will be talking about web accessibility, simple steps you can take to improve accessibility on your WordPress website, and some tools for testing your website’s accessibility.
Here’s a few of the things we’ll discuss:
- The web is for everyone. Be inclusive in your design. You want your content to be perceivable, operable, understandable, and robust (POUR). Check out One Guideline a Day to learn more about the POUR principles.
- Provide sufficient color contrast. Many users are color blind or have visual impairments Contrast ratio is important, use 4.5:1 or higher to satisfy Web Content Accessibility Guidelines (WCAG 2.0). WebAIM’s free online Color Contrast Checker can help you evaluate your color contrast.
- Add appropriate alternative text for descriptive images. Context is important. Alternative text for the same image may be different on different pages, depending on other content on that page.
- Add meaningful link text. Link text should make sense out of context. No more
- Add captions and transcripts to videos. In addition to improving search engine optimization (SEO), captions and transcripts are helpful for people who are hard of hearing, speak English as a second language, or understand videos better by reading the captions/transcripts.
- Spell out acronyms on first use on a screen. Make it easy for users to understand your content by providing the full description of the acronym.
buttonfor clickable interface elements. Both
buttonare keyboard accessible by default. Get rid of all your spans and divs.
- Make focus visible for keyboard users. Users that don’t use a mouse need to see what’s happening on the screen. Add
focusto all your
- Install WP Accessibility plugin. The WP Accessibility plugin adds many accessibility features and fixes several accessibility issues.
- Check accessibility. Use the free online Web Accessibility Evaluation Tool (WAVE) toolbar or website to check your source code. If you’re a WordPress theme developer, review the guidelines for adding the accessibility-ready tag to your theme.