It's amazing how easily we tend to forget about some set of people who don't have the ability to use the web to its fullness because of some form of impairedness or the other. When building websites, web designers often forget(or not in the habit) to make their sites accessible by people of less abilities such as blindness, deafness and so on.
In this article I am going to discuss Web Accessibility under the following headings:
- Basics
- Examples
- Tools
Basic
What is Web Accessibility? A website is said to be accessible when it is developed to work for all kinds of people, irrespective of the type of device they use, their language or ability. In this way, the impact of disability are/would be reduced and thus enable people with disabilities to participate equally on the web.
“Accessibility is essential for developers and organizations that want to create high-quality websites and web tools, and not exclude people from using their products and services.”
“Web accessibility is the inclusive practice of ensuring there are no barriers that prevent interaction with, or access to, websites on the World Wide Web by people with physical disabilities, situational disabilities, and socio-economic restrictions on bandwidth and speed.”
For most developers, the most popular accessible instance are writing JavaScript code and/or Cascade Style Sheet to accommodate people using internet explorer while the most recent one is to carter for mobile phone user, that making a website responsive so that both desktop and mobile users can view the site with ease.
To make your website is accessible be sure to follow these guidelines as defined by the Web Content Accessibility Guidelines or WCAG.
Examples
We will be using HTML to illustrate web accessibility examples. HTML is a document that describes or specified how the language should be used to build a website. Screen-reader, assistive technologies are aware of this HTML specifications. In the latest version of HTML, HTML5, almost all the tags are called semantics elements, this implies that those elements/tags have meaning. Let’s look at some of the WCAG rules:
- Name: states that all elements on the web page should expose their name to assistive technologies
- Role: states that all elements on the web page should expose their role to assistive technologies
- Value: states that all elements should expose their value/content to assistive technologies
Take this HTML:
<div class=”awesome-button”></div>
<span><strong>Huge heading I will style with CSS later</strong></span>
<span class=”clickable-with-JavaScript”>English</span>this block of code went against all the rules, though it will be executed as the developer intended but it will be of little or no good for people with less abilities.
The first element breaks all the rules: ‘name, role, value’-criterium. Since the ‘div’ did not provide any of the three, it will render the ‘div’ invisible to screen-readers.
The second element look like a heading that was styled with CSS, but semantically/meaningfully it is a span. Again, assistive technology won't know it is a heading and thus reads it like a normal text. The second element breaks name and role criteria. Yes, it does expose the name <span> but it is a wrong name also making the role (as a heading) inefficient.
The third element looks like a button, that when clicked some JavaScript code will execute, but this is a span and does not expose it role as link (anchor <a>, tag) or button, making assistive technologies think this is just the word English with some CSS styles.
Now using HTML rightly the above elements should look like this:
<button>This is a button</button>
<h2>Here’s a heading level two</h2>
<a href=”JavascriptThing”>English</a>In this way, screen-readers will know that the first element is a button, the second is heading, the third is a link.
All the HTML/HTML5 tags have meaning on their own which tells screen readers what they are. Another notorious example are attributes to an element. Let’s take the following HTML5:
<img src=”my_profile_pix.jpg” alt=”The author profile pix” />In HTML5, not including the alt (alternate attribute) breaks the HTML5 specification. Yes, it is fine even if the alt attribute is empty (without any text). When an image failed to load on the browser due to one reason or the other the alternate text (an alt with text inside, alt=” some text”) would let the screen-reader know what image that failed to load, in this case, “the author profile pix”.
Tools
There are many tools that you can use to ensure that your web page meet all the accessibility requirements, we won’t go into the details on how to use them. I will just list some below:
So far: we have discussed the basics of web accessibility, and have checked some examples on how to add accessibility to our page(s), and listed some tools that can help us check if our page meet the web accessibility standards.
Once again, to make your website is accessible, be sure to follow these guidelines as defined by the Web Content Accessibility Guidelines or WCAG. Learning standard HTML5 will help you apply web accessibility to your page without knowing it.