6 Lesser-Known Techniques to Improve Accessibility

The past year has been tremendous for web users with disabilities and their advocates. Widespread adoption of responsive web design (RWD) is underway and has become the biggest buzz in our industry in quite some time.

Buzz-driven trends in the past — like the amorphous “Web 2.0” — exploded with absolute disregard for users with disabilities. Companies just needed a whiz-bamm flying modal window with AJAX – and they usually didn’t even know why. We learned back then that trends are not always victimless. Like an avalanche of cluttered code and images, that trend made the web more difficult to use for people with disabilities.

What makes the RWD trend so exciting is that — in addition to it having no obvious victims — this trend is actually making things better for users with disabilities. Pages are simpler; the order of the markup corresponds to the content; pages load faster; the list goes on. At Crux Collaborative, accessibility is a focus throughout our process. We build sites that meet Section 508 compliance, and in certain cases adhere to the much more rigorous WCAG 2.0 guidelines. By now, we all know about the importance of ALT tags and proper header tags – at least I hope we do.

Well, as our team has built accessible sites over the years, we’ve taken note of several techniques that don’t get as much love as ALT tags – but can add tremendous value to your users.

Consider giving these techniques some love in your next project:

1. Outline Focus

Mouse-free (i.e., keyboard-only) use of your site is one of the most important aspects of accessibility. People with neuromuscular impairments cannot operate a mouse, nor can those with little or no use of their hands. Use CSS to provide an unmistakable outline around links/buttons.

Sample CSS:

a:focus { outline: 3px dashed #336699; }

2. Tabbed Content with Arrows

On pages with tabbed content, users should not have to repeatedly traverse up and down the page just to open a new tab. Make it easy by using JavaScript to set the left and right arrow keys to switch between tabs with basic JavaScript.

Sample jQuery JavaScript:

$("body").keydown(function(e) {

// tab left

if(e.keyCode == 37) { $("div.hTabs ul.contentTabs

a.current").parent().prev().find("a").click().focus(); }

// tab right

if(e.keyCode == 39) {

$("div.hTabs ul.contentTabs

a.current").parent().next().find("a").click().focus(); }

});

3. Form Labels

Always provide labels using the “for” attribute with form fields like radio buttons and checkboxes. Not only is it crucial for screen readers – it also makes it so that users can click the words to the select the field (i.e., not just the radio/checkbox itself), thereby improving the overall user experience.

Learn more: w3schools.com

4. Keep Focus In Modals

Heavy reliance on modal windows to hold lots of information and/or interactive elements seems to be on the decline. However, if you do use modals, be sure to keep focus in the window. By default, the keyboard focus is often left behind the window.

Learn more: Solutions vary, depending on your preferred modal solution. Use stackoverflow to find your answers.

5. Test Your PDFs

Your website may be accessible, but what about your PDF documents? Be sure to use Adobe’s built-in accessibility checker. You can do a Quick Check using the free Acrobat Reader, or a Full Check using Acrobat Pro.

Learn more: Creating Accessible Adobe® PDF Files (PDF)

6. When to Leave ALT Empty

Often times, the ALT on images should remain empty. An image must convey significant content that is not redundant in order to warrant an ALT value. Stock images (e.g., “two men shaking hands”) usually do not convey enough actual content to warrant an ALT value. Ask yourself if the ALT value is truly helpful, or if it is just adding clutter.

Learn more: WebAIM

Are you considering a responsive website redesign or accessibility overhaul? Need a partner to help you define a strategy and design an effective solution? Contact us to learn more about how we might be able to help you.