23 Resources for Learning About Web Accessibility

I’ve been focusing on accessibility in my recent WordPress posts, both as an interest and what feels like an obligation ( refer to my about page ). Web accessibility is becoming a deeper subject to learn the more I research it. I’m beginning to understand why we have experts that get paid specifically to focus on that area. Tackling web accessibility on your site doesn’t have to feel overwhelming however, which is why I’m aiming to learn one aspect at a time in my WordPress series.

In the meantime, if you’re here learning along with me, here are 23 resources for learning about web accessibility. Hopefully they’ll help clarify as much for you as they are doing for me. Enjoy.

Getting Started with Web Accessibility:

1.  Web Accessibility Initiative: The Web Accessibility Initiative (WAI) develops strategies, guidelines, and resources to help make the Web accessible to people with disabilities.
2. Introduction to Web Accessibility – WebAIM: Our mission is to empower organizations to make their web content accessible to people with disabilities.
3. The Accessibility Project: A community-driven effort to make web accessibility easier. This site has lots of up to date content ranging from how-to articles, quick tips, and even myth breaking. You can even contribute to the project on Github.

Color Contrast:

1. Smashing Magazine – Design Accessibly, See Differently: Color Contrast Tips And Tools: This is probably the longest and most extensive article I’ve come across for this topic. Cathy O’ Connor is a design consultant for PayPal’s accessibility team and she writes about color vision deficiencies, how those deficiencies affect colors on a website, software used to mimic these deficiencies, and the practices/techniques used to ensure that PayPal’s color scheme is usable to everyone. It’s worth taking the time to read through it all. She even goes over how to work with color contrast tools on the internet!
2. The Contrast Ratio Tool by Lea Varou: This is a color contrast tool recommended by Joe Dolson in his video further down in the WordPress section ( number one ). It quickly compares two colors and tells you what conformance level it passes, ranging from A, which is very minimal, to AAA, which is the highest level. Cathy O’ Connor also goes over this topic in her article in number one above.
3. The Tanaguru Contrast-Finder Tool:  Another color contrast tool recommended by Joe Dolson. This one provides the color contrast ratio, which is the same as conformance levels, and even provides suggested colors if your ratio isn’t passable.

Headings:

1. Penn State University – Heading Tags in HTML: Penn State has a web accessibility section on their site. They provide some quick tips and examples for properly setting up headings structure.
2. WebAIM – Semantic Structure:  WebAIM provides a brief history on HTML, how headers weren’t created with graphic design in mind, and how to properly use headings for structure.
3. The Headings Map Tool ( FireFox ): Another tool recommended by Joe Dolson ( Can you tell I watched that long video yet because I totally did. ) and the add-on provides an overlay/window showing the structure of a web page – which is really handy when organizing your headings and ensuring that your site content is set up logically. The chrome extension of the same tool is below.
4.  The Headings Map Tool ( Chrome ): Recommended by- okay, okay, I digress. The Chrome version of the same tool mentioned above in number four.

HTML, Links & Structure:

1. Karl Groves -Links are not buttons. Neither are DIVs and SPANs: I felt thoroughly scolded after reading this one, but in a good way. Had one of those “everything you know is WRONG” moments as Karl goes through the importance of using links with actual href attributes and real buttons for call to action. He also provides tips on how you can decide whether to use a link or a button. It’s a real eye opener – go ahead, get scolded. You won’t regret it. 🙂
2. Smashing Magazine -Why Your Links Should Never Say “Click Here”: This is more UI focused than it is accessibility, but I thought it was a relevant topic. Those with disabilities might be using software/hardware that will just display the links and so if all your links say “Read More” – it’s out of context and the user doesn’t know what they’re reading more of. All they’ll “see” is a list of links that all say the same thing. So making the link more specific so users know what’s being clicked on helps those assistive technologies along.
3. MDN – The ARIA Homepage: The Mozilla Developer Network provides a page dedicated to ARIA attributes meant for screen-readers. ARIA helps make content more accessible – it’s a deep topic that I’m still learning about so I can’t offer much more explanation than that right now. One tip that I learned from the video in the WordPress section further down, number one, is that ARIA should be used in combination with practices like focus and skip links. ARIA only covers screen-readers, but not for someone who might be able to see the site without a screen-reader, and still has limited or no access to a mouse so they need a keyboard or similar technology.
4. Jeremy Fields – Managing :focus styles without breaking accessibility: This is a quick overview of why the focus state in CSS is so important, and how we can apply them to our day to day development without sacrificing the design of the site.

Mobile:

1. Smashing Magazine – Mobile And Accessibility: Why You Should Care And What You Can Do About It: Another long, in-depth article on Smashing, but it’s worth the read. Did you know that 91% of people with disabilities use a mobile device of some sort? I didn’t. This article reviews the statistics and how we can accommodate for accessibility on mobile.

Images:

1. Jennifer Kyrnin -Alt Attributes: Describing Your Images for Better Web Accessibility: Did you know that an alt attribute shouldn’t just be a copy and paste of your post title and there’s some skill involved with writing them? I didn’t. This helped. Also read WordPress.org’s Guidelines in the WordPress section below, number 3. It was also super helpful with how to write alt tags in context.

WordPress:

1. Joe Dolson: Accessibility Ready – Theming for a Larger Audience: Joe Dolson gives a talk during WordCamp Chicago to discuss accessibility guidelines and how we can adhere to them as WordPress developers in our themes. Subtitles are also available on the video.
2. Theme Foundation – Using Skip to Content Links to Improve WordPress Theme Accessibility: The Theme Foundation goes over the techniques involved when using skip links in WordPress.
3. WordPress.org’s Accessibility Philosophy & Guidelines
4. Morten Rand-Hendriksen -Title, Caption, Alt Text, and Description: Harnessing the Power of WordPress Image Metadata: This article goes into depth of what the attachments/media library has to offer, why each field is important, and how you can take advantage of this functionality that WordPress provides.
5. Joe Dolson – WP Accessibility Plugin: I am currently using this plugin on this blog, and it comes with great features like making elements focusable if your theme wasn’t set up for it, enabling a color contrast toolbar ( on the left of this site ), and post titles in the “read more” links. Definitely check this one out. I think this is probably the best accessibility plugin in the WordPress repository right now.
6. Creative Solutions – GSpeech Plugin: This plugin enables your content to be read out loud by either highlighting text with a mouse, or setting it up where a speaker icon is available after text that you’d like to be read. There are several admin options to choose between speakers, languages, and more. My only issue with it, is although I tested it in modern browsers and in WordPress 4.0, and it works – the speaker icon when set up isn’t accessible via keyboard. So if using the keyboard to “tab” through the site’s focusable elements, it will skip over the speaker icon.
7. Lorna Timbah – Accessibility Widget: This is a widget that will provide the option for the user to make the text larger. There are mixed reviews on how well this works but I tested on a site someone provided as a demo, it appeared to work. It pretty much mimics what would happen if you just zoomed with the keyboard shortcut in the browser. I’m not sure what the benefit would be to have a widget versus just using the keyboard? Anyone want to enlighten me? I assume that not everyone is aware of the keyboard shortcuts to zoom in and out, so perhaps having a more obvious link somewhere is helpful.

Bonus! WordPress people you should follow:

• Svetlana V. Kouznetsova: Svetlana had a session during the last WordCamp NYC ( 2014 ): Accessibility Beyond Coding: It’s everyone’s responsibility. I think my real dive into accessibility happened when I left another session during WordCamp and accidentally walked into the end of hers, so I got the last few minutes of her talk. Just from those few minutes, I felt a bit guilty that I hadn’t attended the session in the first place – both as a developer and someone who’s hard of hearing ( lol no worries, the guilt made me productive! ). Anyway, she is not only a speaker, but a consultant and a designer. Her most recent project is the Open Steno Project.
• Joe Dolson: Joe is an accessibility consultant who also speaks at WordCamps ( see the WordPress list above, #1 for a sub-titled video of his session from WordCamp Chicago 2014 ). He also builds plugins ( WordPress list #5 ) and reviews WordPress themes to see if they meet the accessibility guidelines.
• Graham Armfield: Graham is another accessibility consultant that I came across on LinkedIn in one of my WordPress groups. We had a little chat about the relatively new accessibility-ready tag for WordPress themes. Anyway, he is part of the accessibility team on make.wordpress.org and last spoke at WordCamp Europe 2014.

Have any more tools or articles to recommend? I’d love to hear about them. Just leave a comment below. 🙂

And because I can’t resist a little self promotion, don’t forget to check out my two posts for accessibility so far!

[series]Making your WordPress Theme Accessible Series:

1. An Intro to Web Accessibility
2. How to Organize Headings for Accessibility

[/series]