Web accessibility can have a different meaning for different people, depending on their abilities. Some of the difficulties people incur can include visual, auditory, cognitive, motor and speech. These difficulties could have been with the user since birth, it could be something that has developed over time, or it could be something more temporary — such as a broken arm or misplaced glasses.
Building your site to be web accessible means building your site in such a way that everyone can access and navigate your content with ease. This post aims to take a closer look at some of the key areas to consider during development of your website.
Colour contrast
Text with low contrast can make it difficult to distinguish the content with the background, rendering it difficult for some users to read the content on your website. The same goes for images and other elements on your site. This can affect people with low vision and colour blindness. Testing your colours on a site such as Colorable is a quick way to ensure your visitors can see and read your content.
Fonts
If your font size is too small, your text will be unreadable to many people with sight difficulties. It is widely accepted that 16px is a good starting point for body text with a little flexibility either side. It is recommended that relative sizes (em or percentage) should be used of absolute sizes (pixels or points). A font size less than 9px will likely be illegible for many users.
It is important your text can be zoomed in at 200% without losing it’s readability and site functionality.
Screen Readers
A screen reader is a type of assistive technology that translates on-screen text to speech which is relayed to the user. Screen readers are often used closely with keyboard navigation, for example, if a user navigates to a button via the tab key, then the screen reader will verbalise the element, allowing the user to decide whether they would prefer to click the button (by pressing enter) or continue to the next element on the web page.
The page title is the first thing the screen reader users will hear when accessing a new web page. Ensuring this is descriptive and concise allows the user to gain context of the web page they are viewing before navigating through the content.
Document Language
The screen reader must be able to know what language it is to speak, as all languages have their owns rules of pronunciation. The lang attribute is defined within the HTML tag of every web page, which provides the language of the loaded web page. However, there are some instances where a sentence or quote may use a phrase in another language. Consider the following quote:
“All the tickets sold out! Ah well, c’est la vie!”
Using a French phrase in English text can result in the phrase being pronounced incorrectly and the user may have difficulty understanding what is being read. This can be resolved by wrapping the phrase in a span tag and applying the appropriate lang attribute, allowing the word to be read with the correct pronunciation.
All the tickets sold out! Ah well, <span lang="fr">c'est la vie!</span>
Alternative text (Alt text)
Alt text is considered the first step to developing an accessible website. Alt text is a HTML attribute that provides those using a screen reader with a description of an image on a web page. As well as providing the user with a description of an image, it is also displayed if the image itself is unable to load.
Every image should be accompanied by an alt attribute and its value should never be empty. This is a HTML standard requirement and failure to use will render the image inaccessible to those who are visually impaired and using screen readers.
<img src="beethoven.jpg" alt="Ludwig van Beethoven">
Accessible Rich Internet Applications (ARIA)
ARIA attributes provide ways to make web content more accessible to users with disabilities and can be particularly useful where a screen reader is used. Although screen readers do not need ARIA to function, using it can provide better interactivity and will increase your website usability.
ARIA Attributes
The aria label attribute is used to provide a label where there is no text description. A common example of this would be a modal box in which the close button is displayed as an X. For sighted users, this is easily recognised as a close button, but for anyone with sight difficulties, an aria label will explain the functionality of the button.
<button aria-label="Close">X</button>
The ‘aria-describedby’ attribute is used to indicate the element which provides a description to an object using the ID. This attribute is used to associate text with images, widgets, groups of elements as well as forms.
<img src="beethoven.jpg" alt="Ludwig van Beethoven" aria-describedby="p1"> <p id="p1">Ludwig van Beethoven was born in 1770 ...</p>
ARIA Roles
ARIA roles are added to an element as an attribute. They are used to describe a type of widget presented, structure of a page, or state of a widget.
The following example uses the navigation role which ensures that assistive technology recognises the purpose of the element.
<nav role="navigation">
<ul>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
Keyboard Navigation
There are many people who rely on a keyboard to navigate a site. This can be because they have motor disabilities such as tremors and spasms, arthritis or amputations. Some people may be forced to rely on keyboard temporarily if for example they have a broken arm.
Making sure your site provides the ability to navigate via the keyboard is an essential aspect of providing accessibility to this range of users. The following are some of the standard keystrokes and the functionality they should provide.
- Tab: Navigate through elements
- Tab + Shift: Reverse navigation
- Enter: Click
- Spacebar: Check/uncheck a checkbox
- Up and Down: scroll or select drop down elements
It is important to test the functionality of these keys when developing your website, and ensure all elements are being targeted and in the order the page is designed to be read. Many times a simple HTML adjustment or attribute addition will fix any unexpected misses.
Transcripts and Captions
It is easy to think of the information provided on your websites as visual elements such as text, images and videos. However, it is often forgotten that videos are not just a visual element but also provide audible content, that to those with hearing difficulties can become inaccessible content.
Adding transcripts, captions and subtitles is an easy way to keep audio content accessible to any visitor hard of hearing. Audio-only such as a podcast should be accompanied by a transcript. Audio and visual content such as a video should be accompanied by a transcript as well as captions.
Content
Elements such as pop-up boxes, animated icons and media which auto-plays can be distracting for any user. However, for a user with ADHD, these elements can make focusing on particular tasks extremely difficult. Limiting pop-up boxes and animation can provide better usability for your site, which in turn will help retain visitors for longer periods of time.
Communication
Providing multiple methods of contact on your website makes it easier and more comfortable for visitors to contact you via their preferred method of communication. It is important to keep in mind that not everybody is comfortable picking up the phone or has the ability to construct an email. By providing the following means of communication on your website you will avoid alienating any of your users and potential customers.
- Email – For users who are unable to verbalise, or visit your company due to a physical disability.
- Telephone – For users who are comfortable communicating verbally who may have difficulty writing an email.
- Address – For users who prefer face to face communication, or may find it more comfortable writing a letter.
- Live chat – Useful for someone who may have an urgent enquiry but are unable to pick up the telephone.
It is important to note that this post is just a snapshot of how to improve accessibility on your website. There are many resources available to help you refine your accessibility tools and techniques. I would recommend visiting W3C, A11Y and WebAIM for more information.
