Are you ready for the new year? Many of us have already resolved to lose the 10 pounds that we resolved to drop in 2010. However, there are other resolutions you can make to provide a more accessible world to your family, friends, students, and the rest of the world. We’ve asked some friends for advice and here are some suggestions for making the world a bit better.
Start adding captions to online videos
Are you uploading videos to the internet? Perhaps you’ve created a documentary about your neighborhood, a music video for your favorite band, or just a family video from a surprise birthday party. Take some extra time to add captioning so everyone can enjoy it.
Video captioning will be a major focus in 2011 as web sites prepare for the Twenty-first Century Communications and Video Accessibility Act, which includes captioning for online videos that were produced with captioning for television broadcast. Suzanne Robitaille, a fan of the Yahoo! Accessibility Lab’s Facebook page, has written a paper on online captioning: The French Chef Still Waits for The Annoying Orange: Making online programming accessible to people with disabilities (.pdf).
Give your web page proper structure
HTML is the code that provides the structure of a web page. There are certain tags that provide semantic structure to the web page. Screen readers look for these tags to provide enhanced navigation. Semantic markup is also appreciated by search engines; so it helps your site get noticed. Here are a few tips to make your site better.
- Use header tags correctly. These tags (<h1>, <h2>, <h3>…<h6>) define the hierarchy of information on a page. Think about writing an essay for school. The essay has a title (h1). Each chapter has a header (h2). Chapters can also have sub-section headers (h3). This blog post uses h1 for the Yahoo Accessibility icon, h2 for the title of this post, and h3 for each of the resolutions.
- Add landmarks to your web page. Perhaps you’ve seen links that let the user skip to the content section of a web page. Imagine being able to skip to all major sections of a web page. There’s a simple method of defining the role of sections on a web page. WAI ARIA landmarks are easy to use and let the user know where they can find the navigation, search form, main content, and more. For more information, visit the Paciello Group’s blog: Using WAI ARIA Landmark Roles
- Use list items and smaller paragraphs for enhanced readability. It’s difficult to read large chunks of text on a web page. Shorter paragraphs, list items, and headers will increase the readability of your site.
Headers are not just for programmers, it’s also important for those writing content for the web. It may help to think about headers as you would write a set of nested list items.
- top level bullet point (h1)
- (h2)
- (h3)
- (h4)
- (h5)
- (h6)
- (h5)
- (h4)
- (h3)
- (h2)
Talk to people, not their parents
People often find themselves more comfortable speaking to the parent or friend of someone with a disability; rather than the person themselves. Marianne Leone describes this in her book about her son, who had cerebral palsy.
I wondered about the people who looked straight through to Jesse, the ones who could actually see beyond the disability. How did they do that on first glance? The handsome doctor in Tuscany who came to the villa to renew a prescription, smiled at Jesse, and turned to us, declaring “Jesse chose you as parents, you know.” The kids in Jesse’s elementary school who insisted that Jesse was talking to them. The ones who knew instinctively to address Jesse directly, not to speak to me as an interpreter for him.
Knowing Jesse: A Mother’s Story of Grief, Grace, and Everyday Bliss– Marianne Leone
Don’t forget the keyboard users
Web developers have created complex interactions for users with a mouse. Most sites have some kind of style or JavaScript interaction that occurs when a person hovers their mouse over a word or clicks on an item. However, these same sites may not have given the same amount of attention to those that use a keyboard instead of a mouse to navigate the page. Here are some simple suggestions:
- If your CSS has declarations for
a:hover, adda:activeanda:focusas well. This may need some tweaking, but this basic rule of thumb will give keyboard users the same feedback as those that place their mouse over a link. - Make sure your JavaScript can handle all types of interactions. For more information, read WebAIM’s article Creating Accessible JavaScript.
Keyboard considerations will also help those using smart phones, iPads, and other browsing environments that lack mouse gestures. for more information read WebAIM‘s Keyboard Accessibility.
Learn how to use a screen reader
Web Developers should learn how to use a screen reader. This has become easier with the availability of NVDA, an open-source screen reader for PC Computers, and VoiceOver, a built-in screen reader for Apple devices.
Victor Tsaran: “An Introduction to Screen Readers” @ Yahoo! Video
Help Fix the Web
Have you found a problem with your favorite web site? Let them know by using
Fix The Web. This service allows users to create bug reports that are forwarded to the appropriate web site developers. This is a great way to let web developers know exactly what is broken and to generate conversations to avoid issues in the future.
Become a fan of our Facebook page
Get more information about accessibility from the Yahoo! Accessibility Lab’s Facebook page. We share interesting articles and stories every day.
Share your resolutions
This list is just the beginning. Share your ideas by leaving a comment. Let’s make 2011 a very happy and accessible year.
Related articles
- The Accessibility of WAI-ARIA (alistapart.com)
- Accessible HTML5 Video (digitaria.com)
- ARIA and Progressive Enhancement (alistapart.com)
- The Beauty of Semantic Markup, Part 3: Headings ~ A Blog Not Limited (ablognotlimited.com)
- ‘The Annoying Orange’ Needs More Captions (businessweek.com)
- Don’t Lose Your Focus (24 Ways)

Tags: 2011, accessibility, HTML, JavaScript, Screen reader, VoiceOver, WebAIM, Yahoo!