What is Web Accessibility?
Web accessibility refers to the practices that are used to optimise websites for users with special needs or disabilities. This includes people with visual, auditory, neurological, cognitive, physical and learning disabilities. The aim is to improve the user experience of those who are differently abled, and to provide them with a better level of accessibility to products and services online.
The Importance of Web Accessibility
The need for accessibility is growing. The World Health Organisation (WHO) estimates that approximately 1.3 billion people (almost 20% of the global population) are currently living with some type of visual impairment. When using the Internet, these people would be required to use software like screen readers.
Many online users around the world are also affected by conditions like hearing impairment, motor or dexterity impairments (e.g. paralysis or cerebral palsy), cognitive impairments that affect memory and problem-solving, and learning disabilities such as dyslexia (which occurs in at least one in 10 people).
With the technological advances in recent years, there has been a great improvement in the assistive technology available – this is the term used to describe the technologies, devices and tools used by people with disabilities, such as the hardware and software that allows them to access the Internet. More site owners are realising the importance of building websites that are compatible with assistive technologies.
By making your onsite experience more accessible, you can reach a much wider variety of users, while making life a little easier for them in the process.
Tips for Better Web Accessibility
Good HTML Practices:
Screen readers that read out the information on a web page for a user will use the headers on the page as points for guidance. All headers must be placed in an order that makes logical sense. All HTML code must be clean and follow coding best practices. Messy HTML and badly implemented headers will make navigation difficult for users relying on a screen reader.
Make sure the H1 element is used for the main topic on a page, followed by H2, H3 elements and so on, following a logical pattern. This makes it easier for users to clearly understand the webpage and the relationship between the various elements on the page.
Accurate Link Descriptions:
Any text links used should accurately describe where the users will navigate to upon clicking that link. Phrases like “Click Here” or “Read More” need to be more informative and descriptive. Be sure to write link descriptions that can be easily understood out of context.
Image Alt Text:
Always add accurate, descriptive alt text to each image on your site. People using screen readers rely on alt text to describe a displayed image for them. If the alt text is missing, or is a string of code, this can damage the user’s understanding of your page content. Alt text is also best practice for good SEO.
Keyboard Navigation:
Some users with physical disabilities may only be able to use a keyboard to navigate, or may need to use alternative input devices. Make sure that your site can be navigated by keyboard alone if necessary. This means reducing scrolling, adding hotkey shortcuts and adding skip links to the beginning of a page, allowing users to skip content without navigating a full page.
Avoid the temptation to use “trendy” design choices that make accessibility harder for keyboard-only users. For example, navigation options that only appear when a cursor hovers over a certain spot leave these users with no way to activate the navigation and access that content.
Closed Captioning:
Closed captioning in your video content is essential in making it accessible to users with hearing impairment. Customised, contextual closed captions are more accurate and a better option than auto-generated closed captions.
Audio Descriptions:
Audio descriptions provide another way to make your video content more accessible, by catering to users with visual impairment. Video transcripts are also beneficial for those using screen readers.
Text Clarity:
Make sure all text on your website is completely legible, to make it as clear as possible for those with vision problems. Consider the font used, the text size, and the spacing between lines, words and letters.
40×40 Pt. Clickable Areas:
As a general rule of thumb (for assistance tools as well as various finger sizes), the clickable area on any touch control should be at least 40×40 pts.
Accessible Colours:
Did you know that one in every 12 men is colourblind? There are an estimated 300 million colourblind people in the world! There are various types of colourblindness that affect a user’s ability to see and differentiate certain colours.
There are now tools available that allow you to generate accessibility-friendly colour palettes, making your site that much easier for many more searchers to navigate. It’s also good practice to avoid relying solely on colours to communicate information visually on your website.
CAPTCHA Alternatives:
CAPTCHA tools are commonly used on login screens, to differentiate human users from spambots. The warped letters and numbers can present a problem for those with visual impairment, dyslexia, colourblindness and cognitive difficulties. They are also inaccessible to screen readers, and are published without alt text to ensure security.
If you are including CAPTCHAs on your website, provide a range of accessible options like audio-based tests or Google reCAPTCHA.
These are just a few examples of how to make your site more accessible and user-friendly for people with a wide range of challenges. Good accessibility and good UX often go hand in hand, so a more accessible website typically provides a better user experience for everyone.