Why Accessibility Matters and How to Make your Website Accessible

Why Website Accessibility Matters

According to Hosting Facts, “There are now 3.74 billion Internet users in the world as of March 2017. This is compared to 3.26 billion Internet users in 2016.”

It is no secret web users are growing fast and it is everyone’s responsibility to make websites accessible to all users. Web accessibility is important as it allows people with disabilities to use, understand and navigate through websites without restrictions.

According to The World Bank, 15% of the world’s population experience some sort of disability which could include visual, auditory, physical, speech or cognitive issues. With this in mind, we must take necessary actions to make websites as accessible as possible so that people with disabilities can use and contribute to the web.

It is vital that we provide equal access and opportunity to people with disabilities, and making your website accessible will benefit your website and the users. In this blog, we will touch upon what can be done to achieve website accessibility.

How can we make our Website Accessible?

As web developers, there are a few steps that can be taken to make your website accessible:

Content and Structure

The first step is to make sure your website has an effective design that fosters a positive user experience. Many websites are overly complicated with complex design and/or are built using old technology, often resulting in a poor user experience (ex: oh, this button doesn’t work!). The key is to keep the website and design simple and accessible for anyone who visits.

As a next step, make sure you are using semantic HTML rather than using “div”s and “tables”, and clean code is the key here. We must make sure that we use tables for tabular data, not for layouts – this is very important!

Using HTML5 elements will help us to define the purpose of the content. As an example, if you are writing an article or a blog post you can start with the “article” element. Likewise, if you have paragraph you can add a paragraph tag, and so on.

Another important key is ensuring your page only has one Heading 1 <h1> tag, thereafter making use of other secondary headings appropriately. By doing this, screen reader applications that assist visitors in navigating through your website can easily skip through different sections of the content they are interested in rather than reading the entire content. To find out more information about creating semantic structure, click here.

ARIA & HTML5

Most browsers support HTML5 elements. However, this is not true for all browsers and this is where Accessible Rich Internet Applications (ARIA) attributes come into play. ARIA acts essentially as an add-on for HTML5 that works with accessibility software to define the purpose of the content. Making use of HTML5 syntax as well as ARIA attributes on your website can help to keep your website accessible.

When we design a website, it is visually organized to define the different parts of a web page, including Header, Footer, Navigation, Aside, etc. and these are the main landmarks on your site. There are HTML5 elements that are specifically made to fulfill this structure, and there are ARIA roles go along with these. Here are some examples:

HTML 5	ARIA
<header>	role=”banner”
<nav>	role=”navigation”
<footer>	role=”contentinfo”
<aside>	role=”complementart”

More information about ARIA-Landmarks can be found here.

Website Structure

With the main container of the site we must make sure that all content can be accessed with a keyboard alone in a logical way.

Images, Videos & Audios

When it comes to images, make sure you are effectively using alt tags to describe the images on your site. In the event an image is unable to load properly from the server for any reason, your site will instead display the alternative text for the user. The alt tags will also assist screen readers with describing images to web visitors who may be visually impaired. By ensuring we are describing the images used on our websites using the alt tag, we can contribute to the user’s experience through web accessibility.

With audio and video files, we can now use HTML5 <audio> or <video> elements. No more Flash or Java plugins are necessary as modern web browsers do all that heavy lifting for us. More information about HTML5 audio and video tags can be found here.

Forms

Forms are one of the most important aspects when it comes to accessibility. If you do not make your forms accessible, not everyone may be able to enter data into the website. This could be names, addresses or even credit card details that may be required to perform actions on your website. It is straightforward to make the forms accessible, and outlined below are key items to look out for:

Text Boxes, Radio and Check Boxes

Make sure every input has a label next to it, and associate the label to the input using “for” attribute. Refer to the example below:

<label for="nameInput">Your Name</label>
<input name="name" type="text" id=" nameInput " />

When it comes to check boxes or radio buttons, you can also make them accessible by wrapping the label around the input. Refer to the example below:

<label for=” male”>
<input type=” radio” name=” male” value=” male” id=” male”>
Blue
</label>

<label for=” female”>
<input type=” radio” name=” female” value=” female” id=” female”>
Blue
</label>

Required Fields

You can use the built-in HTML5 required attribute to trigger “required” on the inputs and you can use the aria-required=” true” to let the user know it is a required field to submit the form. Refer to the example below:

<label for="nameInput">Your Name</label>
<input name="name" type="text" id=" nameInput " required aria-required=”true”/>

Input Types

HTML5 Inputs also allow you to specify the data type on the input, and this feature is helpful for website visitors using a mobile device. For example, if the form is requesting the visitor to fill out a telephone number, by setting the input type to “telephone” the device will know pull up the number pad instead of the entire alphanumeric keyboard. HTML5 have several new input types that are listed below:

color
date
datetime-local
email
month
number
range
search
tel
time
url
week

For more information on HTML form input types, click here.

How can we Test the Accessibility of our Website?

It is always good practice to test your website for accessibility using different accessibility software programs, such as screen readers or speech recognition tools.

There are many different software options available for testing accessibility. Many tools can be found online and are free to download, and some may even come included with your computer.

If you are using an Apple computer, macOS features a built-in screen reader called Voice Over. If you have a Windows computer, there is a program known as NonVisual Desktop Access (NVDA) which is open source software that is free to download.