WordCamp Columbus: Accessibility Roundtable

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 Click here or Read 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.
• Use link or button for clickable interface elements. Both link and button are 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 focus to all your hover states.
• 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.

Want to chat more about accessibility? Easiest to reach me on Twitter at @redcrew.