Girl Develop It & Web Accessibility

Dec 3, 2013 • Marcy Sutton

Recently, I became a member of the amazing Girl Develop It Seattle (opens in a new window) community. I first got involved with the group on Meetup (opens in a new window) and joined the Intro to Javascript class as a teaching assistant to see what it was all about. Upon talking to our local organizer, Heather Wade, I found out that GDI has a Web Accessibility curriculum to which I could contribute. I expanded it from one to two 2-hour classes added some hands-on code exercises. My inaugural teaching gig was one of the best experiences of my life, and I wanted to highlight a couple of the topics that really connected with the class and what I’m thinking about now with respect to accessibility.

Offscreen Content

To new developers, learning that you can put content offscreen is a pretty handy tool for accessibility. CSS allows you to add content to your pages that screen readers will read aloud without having to jam everything into an image alt attribute (it’s also helpful for SEO). For example, what if you’re building an interactive annual report with a bunch of highly-designed tabular data? One solution is to embed an image for a table and put the live data offscreen. Pretty freaking cool.

The presence of inaccessible Flash content

CAPTCHA – images presenting text used to verify that you are a human user

Tab Index

Do you ever set tab index in your HTML? I’m actually very curious if anyone has a reason to use tab index values other than 0 or -1. In my experience, numbers higher than zero only cause problems since they create a new tab order. As a User, I’ll tab once or twice in a document and all of a sudden I’m in the footer. Managing tab index numbers for large documents is hard to do. I had my students play with tab index on native elements (anchors, form inputs, etc.) and non-native elements (div, h1, etc.) and I think they were quite surprised! To keep the class at a basic level, I did have to skip talking about Javascript, but experiencing a new tab order seemed to have an impact on my students’ budding development skills. Success!

WHAT I’M THINKING ABOUT NOW

Localization

I’m a big advocate for offscreen text, especially for links that open in new windows. A valid question was brought up in class: how would you manage all of your accessibility content when localizing a site? Hopefully you could use templating and content files (like JSON) to let the computer do the heavy lifting for you. Without “seeing” all the content you’re putting into your pages, however, it might cause mistakes–especially for a development team new to the process of building accessible websites. Definitely something to think about.

Headings & HTML5

How do you explain the importance of headings & screen readers to new developers, and then turn around and explain how different/weird they can be in HTML5? It’s a difficult topic. At their most basic level, headings add a semantic outline to your documents. Screen readers also use them to navigate, so they’re an important accessibility tool. But if you’ve ever had to support old versions of JAWS while pushing ahead with new technology, you might be aware of the bugs (opens in a new window) and lack of support of not only the new heading algorithm, but also basic HTML5 tag support (opens in a new window). I’ll continue to refine my explanation of this topic since it’s so important!