“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” This great quote from Tim Berners-Lee, inventor of the World Wide Web and director of the W3C consortium, reminds us that the Internet has been designed so that everyone can work; that is to say, that it is accessible to all types of people, regardless of their ability to hear, see, move, etc.
This is a very important issue, since the access to information and Information Technologies is recognized as a basic human right. Therefore, it is something to keep in mind, especially from a business perspective, as you can also lose many customers. Watch here how a blind person uses the World Wide Web with the Braille system. However, the vast majority of web pages are not yet designed to allow people with disabilities to navigate through them easily and access all their contents.
A bit of theory
What do I have to do to make a website accessible to everyone? Firstly, it is very important to know that the W3C consortium, through its Web Accessibility Initiative, is trying to regulate the whole issue. Thanks to this sort of initiatives, developing a website accessible to everybody is not very expensive, as nowadays there is a wealth of information available both on- and off-line. Here we offer you some key points so you can start developing accessible projects.
Before you start, you have to know what kind of content you’re going to include in the website, because that will allow you to develop an accessible design following some standard guidelines. These guidelines are divided into three blocks aimed at: web developers (WCAG), developers of authoring tools (ATAG) and developers of browsers and other user agents (UAAG).
If you follow these guidelines your website will be ready to be verified and ranked as A, Double A or Triple A, depending on its level of accessibility. As mentioned, there are some basic design rules to make a website accessible to people with disabilities:
1. Perceivable:
– Provide alternatives to convert the content into friendly formats for people with disabilities, such as augmented texts, braille, speech, symbols or a simpler language.
– Create content that can be presented in different ways (i.e. with a simpler layout), without losing information or structure.
– Make it easier for users to see and hear the content, including the separation between the foreground and the background.
2. Operable:
– Provide full access through the keyboard.
– Provide users enough time to read and use the content.
– Do not design content in a way that could cause seizures, spasms or convulsions.
– Provide ways to help users browse, find content and know where they are.
3. Understandable:
– Make the texts readable and understandable.
– Make websites appear and operate in predictable ways.
– Help users avoid and correct mistakes.
4. Robust:
– Maximize compatibility with current and future user applications, including technical assistance.
A bit of practice
Taking a more practical approach when generating a web page that is accessible to everyone, the code to be used should be XHTML 1.0 Transitional, which has features in common with the XML. The XHTML is basically HTML expressed as valid XML. It is stricter at the technical level, but this allows it to be easier later to make changes or find errors, for example.
During the development process it is very helpful to use code validation tools like the one offered by the W3C. This tool will warn you about any error in your code and give you tips to keep in mind. You must remember that the code of your web can be parsed or processed by tools that are not always the commonly known web browsers.
After these first steps you should focus on obtaining the most basic compliance, which, as mentioned before, is the A. This means that you have to implement the priority 1 guidelines, which are those included in the content defined as Perceivable. We recommend you follow this document describing these essential priorities.
Once the website is created following this first level of accessible design guidelines, it is necessary to validated it. To do so we can use, in addition to the tool provided by the W3C, this one offered by Tawdis.net, which will let us know any error or problem in our code. Not all the problems can be solved automatically, so the tool also marks issues that have to be checked manually. For example, an image that doesn’t contain alternative text for blind users, or an iframe that does not have an alternate version for older browsers, will prompt an automatic error; however, an image without alternative text or a table used in the layout, will prompt a manual error, since the algorithm can’t tell if the empty text or the table need to be modified so that a disabled user doesn’t lose information.
After completing these steps to achieve the A level you should do the same with the remaining other two levels. Levels are achieved if you apply all Priority 1, 2 and 3 requirements described above, set by the WCAG. Ready? Let’s go for it!