The Real Accessibility Barriers

There are many jurisdictions around the globe that now have Web accessibility laws in place that make it mandatory for organizations to remove barriers in web content that prevent people with disabilities from participating at the same level as those without disabilities.

For many organizations, these mandatory requirements create a certain level of anxiety. What do we have to do to make our website accessible? What happens if someone finds an accessibility problem and reports us? How do we ensure we don’t get sued for posting inaccessible content on our site? These are just a few of the questions that come to mind when organizations don’t have all the information they need to determine whether their web content contains barriers or not.

While there are many potential “barriers” in web content, as they are defined in accessibility guidelines such as WCAG 2.0, there are really only a handful of “real barriers” that you need to be aware of that produce insurmountable hurdles that prevent any kind of access. Other accessibility issues are more usability problems than they are barriers. This article describes the “real barriers” that must be dealt with, or some group will likely be unable to participate or will have considerable difficulty accessing the content of your website.

Alternatives for Visual Content

For someone who is blind, visual content is a “real barrier” if there is not an alternative that can be understood through senses other than sight. There are a variety of ways to provide alternatives. For images in web content the “alt” attribute is the most common alternative. Alt is typically used to provide a short description of the meaningful information in an image.

Descriptions can also be added to the text surrounding an image, particularly if it is not possible to describe the image in about 125 characters or less as Alt text. When there are more than 125 characters screen readers like JAWS stop reading and move onto the content that follows. The alt text can refer to a longer description elsewhere with words like “...described above,” in addition to a few words briefly describing the image.

Though there are other forms of alternatives for visual content, alt text is by far the most commonly used alternative for visual information in web content.

Keyboard and Mouse Access

Any content or functionality that operates with a mouse, must also operate equally well using only a keyboard. Many people are unable to use a mouse, and as such, when keyboard access is not provided, a “real barrier” exists for these users.

Fortunately, most standard functionality on the Web, like forms, buttons, and links for instance, have keyboard access built in by default. Keyboard access problems typically arise when developers create custom functionality that works with a mouse click, but they neglect to add the equivalent functionality that works with a keypress. Javascript is usually the culprit in these cases. Using both click events and key events, or using device independent event handlers like onfocus and onblur, which both work with any form of input, are two ways to ensure functional elements will work regardless of the input device being used.

Alternate Navigation

Navigating web content can be a challenge for many people with disabilities. A person who is blind, for instance, using a screen reader to listen to web content, may have no choice but to listen to the content from top to bottom, unlike those who can see the content and quickly scan and jump directly to the content they need in moments or less. In cases where a large amount of content is being presented, a “real barrier” occurs when there is no way to get to relevant content other than listening to everything on the page.

One of the easiest ways to make content “scannable” for people who are blind is to use structural HTML to organize content into meaningful topics and subtopics. Proper use of heading markup is key here. A person who is blind, using a screen reader to access the Web, can list the headings on a webpage to get a summary of the page, and jump directly to any one of those headings and start reading. This can greatly reduce the time needed to find relevant content for screen reader users.

Other ways of providing alternative navigation include creating bypass links, that when click (or keypressed) repositions the cursor to an anchor somewhere else on the page, typically “bypassing” repetitive elements such as navigation menus. Another way is to provide WAI-ARIA landmarks, which identify regions on a page such as the header, navigation, main content, and footer areas for instance, each of which can be accessed directly by listing the landmarks and selecting any one to jump to that region of the page. Landmarks are added by simply adding a “role” attribute to an HTML tag, with a particular landmark value (e.g. banner, main, navigation, complementary, contentinfo). All parts of a webpage should be contained within a landmarked region to provide optimal navigation within a page.

Meaningful Links

Though I would not say meaningless links are insurmountable in the same sense as visuals without alternate text or functionality without keyboard access are, they are so common that they should be mentioned here as a “real barrier.”  Meaningless link text (e.g. “click here”) can be a barrier for everyone, even fully able people. When links use meaningful text that describes the link’s destination, or its function, it is much easier to scan through the links on a page and determine where these links lead. For people who are blind, using a screen reader, it is possible to list all the links on the page, much like listing the headings, to get a summary of the resources that lead from the page. When links are meaningless, the link list functionality becomes useless.

Imagine a page full of “click here” links, and what a screen reader might hear, and how annoying it would be to have a page full of links that provide no indication of where they lead. For able and disabled users alike, it means clicking on the link to see what’s at the other end, or best case, reading through the surrounding content to figure out where the links lead. In either case, there’s a lot more work involved than just reading a meaningful link and deciding then whether to follow the link or not.

Also watch for other meaningless links like URLs, which often read as gibberish when listening with a screen reader, words like “this link” or “more” or “their website.” None of these describe what would be found if the link were followed, and result in a lot of unnecessary effort to determine where links lead.

Summary

While these so called “real barriers” are by no means a complete list of barriers found in web content, they are the most common and most prevalent, and addressing these will address the vast majority of barriers in typical web content.

If you are a web developer, having accessibility knowledge is a must in today’s global economy. Most countries now have rules around accessible web content, and if you are not up to speed on what is and is not accessible, you’ll likely find yourself left behind. Developers with a good understanding of accessibility are in high demand, and it does not take much to upgrade your skills to add accessibility expertise to your resumé.

On November 14, the free “Professional Web Accessibility Auditing Made Easy” MOOC will run on the Canvas network. This 4 week intensive online course helps web developers develop the knowledge and skills needed to effectively identify and fix potential accessibility barriers in Web content. Join our team of expert accessibility auditors in this highly interactive, eye opening course that will teach you all you need to know to become a skilled “accessible web developer.”

Register for:

Professional Web Accessibility Auditing Made Easy