We know often that people are intimidated by the idea of web accessibility and we hope that we can cool some of that fear and give you some good tools, take just a quick snapshot of web accessibility, what it is and why it matters to people. We’d like to help you identify some essential techniques and give you some pointers on what’s next to build an accessibility practice.
The fact is…
The web was originally designed and the whole idea of the worldwide web was to bring down barriers and those are barriers in different platforms and operating systems. These technology differences sometimes separate us such as formats or using different browsers or devices. All of that is supposed to not matter because the web transcends all that including distance, language differences and disability.
According to Tim Berners-Lee, the founder of the worldwide web, the power of the web is in that universality and access by everyone regardless of disability is an essential aspect. So what we’re doing when we advocate for accessibility is bringing the web back to its true basic nature. And the people who help us to do that are based at the World Wide Web Consortium or also known as the W3C.
This is the global standards maker for the web. They tell us everything like what is valid HTML, CSS, SVG and all kinds of emerging technologies. That’s really where it happens for global web standards and all of their technical standards are respected around the globe including their accessibility standards so at the W3C Web Accessibility Initiative which is often shortened to call “WAI”, you’ll find Web Content Accessibility Guidelines (WCAG) and Authoring Tools Accessibility Guidelines (ATAG). You’ll also find guidelines for browsers and AT accessibility and dynamic applications (ARIA).
And about this time, you’ll probably start feeling overwhelmed and asked what are all these standards, how can you possibly manage all these specifications and we believe such reaction as is understandable. If you feel lost by reading all these specifications, you can use other side doors into the material and simply think about what you’re actually trying to achieve and that is for people with disabilities to be able to acquire the same information and participate in the same activities.
If you think about it, nobody wants to be just a passive receptor on the web. The excitement of the web is in the participation and for that reason, we want to make sure that people with disabilities are actively able to produce content and participate in social media in the same ways as all other users.
Why advocate for accessibility?
The Legal Argument
If you’re the advocate in your organization or in your group, you may need to make different kinds of arguments to different kinds of people and one of them is the legal argument. It’s increasingly around the world and it’s the law.
In fact:
The UN Convention on the Rights of Persons with Disabilities was passed several years ago and it explicitly says that access to communications and technology is a basic human right and governments understand and are recognizing this.
In the United States, we see the Department of Justice (DOJ) enforcing web accessibility laws under the Americans with Disabilities Act (ADA) which means this is something that you really need to be aware of. The DOJ is very active in this right now, accepting complaints from people and are imposing fines and doing investigations about it so if your company or organization is motivated in that way then there is a great argument to be made there.
The Technical Argument
There’s also the technical argument: the fact that when you create accessible websites, you make that your application or your website much more technically adept – you can adapt to mobile or tablets.
These were among the big surprises for some people when they had designed with accessibility in mind. When we all started using our mobile devices, accessibility was already built in thanks to the flexible responsive design that can adapt to different output devices.
The Market Argument
If you’re in a business and they’re looking for new markets, the market of people with disabilities is huge and it’s growing as the population ages. A few years ago, Fortune Magazine put out a study and we bet that these numbers have grown by now where they said that in the United States, people with disabilities have annual income of about $1 trillion and they’re spending of that is about $200 billion in discretionary income so that’s a huge market that you probably don’t want to ignore.
And then there’s the humanitarian reason. You will really understand the importance of good design when you see the uses that people with disabilities put it to. Just like any other group of users, they are brilliant, innovative and need the same access as anyone else.
Another way to approach it without having to dive into the guidelines is to look at the principles of accessibility. These are based on user experience so they’re very related to human beings and their experience in interacting with online information.
The 4 basic principles of web accessibility content are the following:
- Content must be perceivable. However you perceive information, however you bring it.
- It must be operable so you should be able to interact with it successfully.
- It should be understandable in saying that you should have clear instructions and understanding of where the user is in the pages and in the process.
- It should be robust. It’s the that idea that it can be flexible enough to be rendered on different kinds of devices including assistive technologies.
The Most Common Barriers
Some of the most common barriers are these that are listed here. We’re going to look at each of these barriers with a little more detail.
Structure
The idea of structure is the fact that when you land on a page as a sighted user, you can see how the page is laid out, what the main topic is, where the navigation is, if there’s a footer, etc. All of these are very available to a sighted user. If you structure your content properly, that same information can be available to people who don’t see it and who interact with assistive technologies. The key there is to use the semantic structures as they’ve been defined and not for just visual presentations.
For example:
If you want to put a headline, making the text big and bold is not the proper way to do it. Instead, you need to choose a heading level that’s logically nested and assign that. This is also very important when it comes to creating online forms, making sure that they are semantically associated such as the ID and the form ID with the label that tells the user what it is for, what information is needed there and for all of these, there are links to more information about exactly how it should be done.
You’d also want to think about outlining your page structure with HTML5 regions, Aria landmarks or some other programmatic way that a screen reader can navigate and understand the information structure and relationships.
Reading order
Somewhat related to that is the idea of reading and focus order. The fact is the default is that the reading order is just going to be the code order. The screen readers and other assistive technologies will navigate through in the order that it appears in the code. You may want to keep that in mind also as you create a tab order that you want your tab order to move top to bottom and left to right. If you’re a sighted user of assistive technology, you will have an expectation that if you’re navigating with the keyboard, it’s the order that you would go in.
Since page titles are the very first thing that are read when you land on a website, you want to make sure that your page titles uniquely describe the page content and give the user who doesn’t see the page some idea of where they are and what to expect on that page. There are also times where you have to let your user know that there is an alert, an error message or something else that they need to be aware of.
In that case, you have to be sure to manage your focus properly both moving the focus into the alert and also giving the user a way to close that and get back where they were on the page.
Keyboard
Keyboard operation is also very important. You need to make sure that everything’s in your tab order and all functional elements can be reached and activated.
But something that’s often overlooked is the fact that it’s equally as important for the keyboard focus to be clearly visible. Either use the same focus indication that you use a mouseover or sometimes even enhance it to the point where you put a 2-pixel boundary around it and make sure that it has sufficient contrast to be clearly visible.
Text alternatives
Text alternatives are the one thing that people hear about first but the devil is really in the details there though because you need to make sure that your alt text is appropriate and the way to determine that is if the if the image itself is conveying meaning.
For example:
If there’s an image of a box of chocolates and the user encountered on a bank site which will offer mortgage rates, mortgage options or mortgage packages. To describe it as “a box of chocolates” would have been inaccurate in that case so you have to think about this in context and if in fact it was used just as a piece of decoration. It would have been fine to just put an empty alt where you open and close the quotes (<alt=” ”>). This gives the screen reader permission to remain silent.
Alternatively…
You could also use a CSS background but in this case, since it was a target or it was leading to a targeted page, you should identify that so the alt text would have been something about those mortgage rates rather than the box of chocolates. The thing is, it gets really tricky when you have complex images like charts and graphs so you need to really think about using some Aria attributes, a long description or something related to that.
Color and contrast
This is another tricky thing. You have to avoid using color as the only way to say that something is necessary or some state. It’s not that you shouldn’t use color but it’s just that you need to use something else.
For example:
It’s fine to say “required fields are in red” but you also need to add another indicator that’s not color-dependent for people who have low vision or have color blindness which in fact has a notable number in our population. You can simply add an underline, an asterisk or a “required” text in the label of that form field.
Regarding contrast, the W3C has set some standards on that and there are some very easy browser-based tools that you can use for that matter. A contrast of 4.5 to 1 or higher is ideal to use.
Link text
Link texts like “click here” won’t work if you’re using a screen reader so you need to specify where the link goes, what it does and make sure that it makes some sense out of context without just saying “read more”, “click here”, etc.
Some people prefer to see this “read more” at the bottom of the paragraphs and in that case, you can use an “aria-describedby” to make the association that the screen reader will hear and not change your on-screen appearance.
Multimedia
For the basic principles for media, you need make sure that all of them are keyboard-operable. Additionally, you need to add captions and ensure that you have a text transcript even if you have captions. Remember that providing a text transcript is always a great fallback because on the web, text is king.
So how do you know if you’ve done it right? One of the tools that you can use is the Easy Checks from the W3C and what it does is that it will guide you through a process. First, you need to download some free browser-based testing tools and then this will take you step-by-step to test and verify that you’ve done it right. What actually happens on that site is that it leads you into more information and the great thing is that you go slowly into that cold water.
It can also be very helpful and useful to get information from your target users so we suggest including people with disabilities in any usability testing that you’re doing. You can call local disability organizations for assistance but you should be warned that sometimes, people with disabilities get pretty tired of always being asked to test for free so consider paying when recruiting them for such tests.
The Tips for Getting Started with Web Accessibility from the WAI is another resource that can be very helpful for people to get started in accessibility according to their role so if you’re a designer, you would get specific tips. Here, there are no guidelines or technical specifications but rather coding techniques, more information in detail, and some good quick examples that can help you in determining how to approach particular barriers.
Add Comment