Why is Web Accessibility so important?
Web accessibility is no longer an option, it is essential (and a legal requirement in most countries, including Ireland).
Imagine what it would be like if wanted to access a website but you couldn’t use a mouse or touch a mobile phone screen? Or you couldn’t see the text or images on the page? Or you couldn’t hear a video? Given that 15% of the world’s population experiences some form of disability, it is essential that your website is accessible.
What is Web Accessibility
Web accessibility ensures that everyone can access, and interact with, the same information on the internet, regardless of the disabilities they may have or their device/network may impose.
“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
Tim Berners-Lee, W3C Director and inventor of the World Wide Web
What is a disability?
To make it easier to define a disability that would affect a person accessing a website, we can gather them into the following groups. Within each of these groups, the disability can be temporary or permanent.
- Physical – Difficulty or inability to use body/arms/hands e.g. paralysis, amputation, broken arm, etc …
- Visual – Difficulty caused by vision e.g. blindness, colour-blind, etc …
- Auditory – Difficulty caused by hearing e.g. deafness, hard of hearing, etc …
- Intellectual – Difficulty caused by cognitive or intellectual impairments e.g. dyslexia, dyspraxia, etc …
- Situational – Difficulty caused by the situation the user finds themselves in e.g. slow internet connection, viewing a website on small screen, etc …
Benefits of Accessibility
The internet has become an indispensable resource that is integrated in just about every aspect of our lives. An accessible website can help people with disabilities participate more actively in society, and improves the life experience for everyone.
This may sound lovely, but there are benefits for your business too. Apart from the fact that it is a legal requirement, web accessibility allows your website to have the potential of reaching a much wider audience. Not only that, web accessibility is also great for SEO (Search Engine Optimisation) as search engines crawl your website in a similar way a screen reader would.
How to make your website accessible?
There are several changes you can make to your website to ensure it is accessible by everyone. Some of these will be managed by your web developer and other will be managed by your content editors.
Title Tag
<title>Why is Web Accessibility so important</title>
The <title> tag in the <head> section of your web page is vital for SEO, so Google knows what the page is about. It is also very important for Web Accessibility as it is used by screen readers to describe the subject matter of the page. To check your page title, it is normally displayed at the very top of your Browser in a tab.
Language
<html lang="en-GB">
Declaring a language attribute on the HTML element enables a screen reader to read out the text with correct pronunciation. Remember to include the relevant language in the <html> tag.
Text Size & Colour
Text should be large enough to easily read – min 16px. Text colour is important too – there must be enough contrast between the text colour and its background. Also, colour combinations should be checked for issues with colour blindness.
Keyboard navigation
For web accessibility, users need to be able to navigate your website using the keyboard only.
Skip-link
<a href="#main-content" class="visually-hidden focusable skip-link">Skip to main content</a>
Add a skip-link as the first item inside the <body> to allow screen readers and users navigating with a keyboard to skip to the main page content without having to go through all of the navigation links.
Forms
<form class=" action="/contact" method="post">
<label for="name">Your Name</label>
<input type="text" id="name" name="your-name">
<input type="submit" id="submit" name="submit" value="Submit">
</form>
All form fields must have an associated label using for=”name” on the label and id=”name” on the field. The fields must be accessible via a keyboard only. The fields must also be able to be filled on a mobile without zooming out.
Focus
While testing the keyboard navigation, make sure the elements ‘focus’ as you tab through the main navigation and forms. By default, most browsers focus the selected element with a light blue outline. Make sure your theme does not use CSS to block focus or does not use outline:none on any focusable type of element.
Default HTML Tags
HTML has tags for various needs and your website should be using those tags appropriately. Use <h1>, <h2>, etc … tags for headings, use <a> tags for links, use <button> tags for buttons, use <table>, <thead>, <tr>, <th>, <tbody>, <td> for tables etc … When screen readers come across these tags, they know what type of element it is and can describe it correctly. Don’t use CSS or Javascript to create these elements using <p> or <div> tags, it may look nice on screen, but screen readers will not know what the element is and may describe it incorrectly.
Headings
<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<h3>Sub Heading Level 3</h3>
<h4>Sub Heading Level 4</h4>
<h5>Sub Heading Level 5</h5>
<h6>Sub Heading Level 6</h6>
HTML headings should be used to structure your content. There should only be one <h1> tag on the page, which should be the page title. Then use <h2> tags for section headings and then use <h3> – <h6> tags for subdividing each section by importance.
Tables
<table>
<caption>Give the table a caption</caption>
<thead>
<tr>
<th scope=”col”>First Name</th>
<th scope=”col”>Last name</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Smith</td>
</tr>
</tbody>
</table>
Table tags should only be used for displaying tabular data. They should never be used for page layout. Tables on your website should be using the <caption> tag to describe the contents of the table rather than a heading or <p> tag. The table should also be using scope="" to associate the heading tag with the correct column or row.
Be descriptive
Screen readers cannot read images, video or audio. So to aid visitors to your website who have any form of visual or auditory disability, you need to describe the contents of your non-text elements
Images
<img src="/images/my-image.jpg" alt="Describe the contents of the image">
You need to describe the contents of your images with alt="" in your image tag. Also, be descriptive with your alt tags. Using alt="People" doesn’t help much but using alt="People standing at the top of a mountain celebrating reaching the top" explains the content of the image more clearly. Using alt correctly also helps SEO, as search bots cannot read images either.
Remember to use the <picture> tag to create responsive images for your visitors. This will assist users who are visiting your website using a slow internet. It also helps SEO as search bots give a higher rank to websites with responsive images.
Videos & Audio
Just like images, screen readers cannot see or hear video or audio. These elements should have closed captions for accessibility. They also assist users who cannot listen to the sound due to their situation e.g. in a noisy location, or in a library. If close captions are not possible, you should consider providing a text transcript of your video or audio. This also assists SEO as search bots cannot view or listen to video/audio.
Links
<a href=”/new-products.html”>View our new product</a>
The text used for a link should be descriptive e.g. ‘View our new product range’ rather than ‘click here’. The links should also be focusable.
Javascript
If your website is using Javascript to alter the display of elements on your website, make sure that it is unobtrusive and more importantly, make sure you have non-Javascript alternatives for users who have Javascript turned off.
Use the ARIA Tag
According to The World Wide Web Consortium (W3C):
“ARIA (Accessible Rich Internet Applications) Suite defines a way to make Web content and Web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with HTML, JavaScript, and related technologies.”
ARIA has a set of special accessibility HTML attributes which can be added to your website code. The role attribute defines a specific role for type of object (such as an article, alert, slider or a button). Additional ARIA attributes provide other useful properties, such as a description for a form or the current width of a progress bar. ARIA attributes can also be used to specify active or disabled state for objects (especially buttons).
Add new comment