You need to prioritise website accessibility if you want to reach a wider audience.
Every individual, no matter their ability or disability, should have equal access to the internet and the information it provides.
If your business has a website (whether eCommerce or informational), it is your responsibility to make sure that it is accessible and usable for all.
Don't know where to begin?
Let us help you!
In this guide, we're going to discuss how you can design a website for accessibility, ensuring that your website is inclusive and user-friendly for all individuals.
What Is Website Accessibility?
Web accessibility is the process of creating a website that is usable for all website users regardless of their abilities or disabilities.
In simple terms, ANYONE can view, use, and interact with your website.
To achieve this, your website must comply with design and development guidelines that ensure accessibility for all.
Website Accessibility Guidelines
Certain guidelines are in place to ensure that individuals with disabilities have equal access to an exceptional user experience online.
This includes people who are blind or have low vision, those who are deaf or hard of hearing, individuals with mobility impairments, and those with cognitive disabilities, among others.
Various government and non-government organisations and laws create and maintain the guidelines, ensuring that web accessibility rules and regulations are enforced and managed.
Examples of such organisations and laws that apply to South Africa include:
- Web Content Accessibility Guidelines (WCAG) and The World Wide Web Consortium (W3C)
- The Rights of Persons with Disabilities Act (RPDA) landmark legislation in South Africa
- Promotion of Equality and Prevention of Unfair Discrimination Act (PEPUDA) Constitutional right in South Africa
Why Is Web Accessibility Important?
According to Stats SA, South Africa's population in 2022 was approximately 62 million, with around 3.3 million individuals identified as living with disabilities.
This is a lot of people.
People who can potentially be excluded from accessing your website, products, and services.
And what does that mean?
This exclusion could result in lost business opportunities, sales, and customers. It also means denying individuals their basic human right to access information and services online.
Therefore, it is crucial to have accessible websites to create an inclusive environment for all users.
Standards Your Website Needs to Meet
In South Africa, web accessibility is governed by various laws and guidelines.
The primary standard that websites should meet is WCAG 2.0 or its latest version, WCAG 2.1.
These guidelines provide a set of criteria for making web content accessible and user-friendly for individuals with disabilities.
The WCAG 2.1. lists FOUR key principles that websites should adhere to, known as POUR:
Perceivable: Information and user interface components must be presentable to users in different ways.
Operable: User interface components and navigation must be operable with various assistive technologies.
Understandable: Content and the operation of the user interface must be understandable.
Robust: Content must be robust enough so that it can be interpreted reliably by a wide range of user agents, including assistive technologies.
How To Design A Website That Is Accessible
Website developers must implement certain design and development techniques to comply with the WCAG 2.1 guidelines mentioned above.
Here is a list of popular techniques to help you design a website that is accessible:
1. Allow Keyboard Navigation
Not all users use a mouse to navigate websites.
Some individuals with disabilities may use a keyboard or other alternative input devices to browse the web.
Therefore, it is essential to ensure that all website functions can be accessed and operated using a keyboard.
Important points to consider are:
- Logical tab order to navigate through the website
- Clear visual indicators of focus and active elements
- Easy navigation with tab, enter, spacebar, and arrow keys
- Custom keyboard shortcuts for frequently used actions
2. Use Alt Tags For Images and Videos
Images, videos, and other visual elements should have alternative text that describes the content to users who are unable to see them.
This is especially important for individuals with visual impairments or those using assistive technologies such as screen readers.
Alt tags help make the content perceivable to these users by describing the image or video.
For example, if an image on your website shows a group of people smiling in a park, the alt tag can be "Group of friends enjoying a picnic in the park."
3. Use Colour Contrast
Website colour schemes should have enough contrast between foreground and background colours to ensure text is readable.
This helps users with visual impairments, such as colour blindness or low vision, to perceive the content better. It also benefits users who may be viewing the website in different lighting conditions or on different devices.
To make sure you use the right amount of colour contrast, you can use online tools such as the WebAIM contrast checker.
4. Provide Transcripts and Captions
For videos or audio content on your website, it is essential to provide transcripts and captions.
Transcripts are written versions of the audio content, while captions are text overlays that appear on the video itself.
These accommodations help individuals who are deaf or hard of hearing access the content on your website. They also benefit non-native speakers who may have difficulty understanding spoken language.
5. Allow for Resizable Text
Not everyone has perfect vision, and some users may need to increase the size of the text.
Resizable text allows users to zoom in and out on text, making it easier to read.
To ensure your website is accessible, you should use relative font sizes (e.g., percentages or em units) instead of fixed ones (e.g., pixels). This allows the text to scale appropriately when a user increases or decreases its size.
6. Make Forms Accessible
Forms are essential for gathering information from users, but they can be challenging for some individuals to navigate.
To make forms more accessible, you should provide labels for each input field that clearly describe what information is required.
You should also provide instructions for how to complete the form and make sure it can be navigated using only the keyboard.
7. Use Whitespace and Headings Effectively
Proper use of whitespace and headings can improve the accessibility of your website.
Whitespace is the empty space between elements on a webpage. Enough whitespace can help users with cognitive disabilities better understand and navigate your content.
Headings are also essential for organising content and making it easier to scan. Screen readers also use headings to navigate through a page, so it is important to use them properly (e.g., using <h1> for main titles, <h2> for subheadings, etc.).
8. Avoid Blinking and Flashing Content
Blinking or flashing content can cause seizures in individuals with photosensitive epilepsy.
To make your website more accessible, avoid using elements that constantly move or flash without the option to pause or stop them.
If you must use blinking or flashing content, provide a way for users to control it (e.g., a toggle button) and limit its duration.
9. Structure Pages Logically
Great website navigation starts with a well-organised page structure.
To structure your pages logically, do the following:
Create MAIN NAVIGATION - This is usually placed at the top of your webpage and should include links to all major sections or pages on your website.
Use SUBNAVIGATION - This type of navigation helps users find more specific information within a particular section.
Include FOOTER NAVIGATION - The footer navigation should contain links to important pages or information on your website, such as contact information, terms and conditions, privacy policy, etc.
Remember to use descriptive text for all links so that users can easily understand where they will be directed when they click on them.
10. Write HTML for Accessibility
HTML is the backbone of your website, and it should be used correctly to ensure accessibility.
Use HTML elements appropriately (e.g., <nav> for navigation links, <p> for paragraphs, etc.), and provide alternative text (alt text) for all images on your website.
Alternative text is crucial for individuals with visual impairments as screen readers rely on it to describe images. Additionally, labels and captions for interactive elements such as forms or videos should be used to make them more accessible.
Lastly, avoid using tables for layout purposes, as they can be challenging to navigate with a screen reader.
Instead, use CSS to create the desired layout.
These 10 techniques are just some of the best practices for creating an accessible website. For more detailed guidelines, you can refer to the Web Content Accessibility Guidelines (WCAG) provided by the World Wide Web Consortium (W3C).
Let's Build An Accessible Website For You!
At Starbright, we have a team of web designers and web developers ready to build a visually appealing and accessible website for your business.
Contact us today to get started!
Together, we can create an inclusive and user-friendly website for all individuals. Let's make the internet a more accessible place, one website at a time.