A website represents the perfect opportunity to provide unprecedented levels of access to audio, written and video content. However, navigating the web for persons with disabilities can be frustrating due to inaccessible web designs. With millions of people living with disabilities globally, it is vital to create disability-friendly websites. Fortunately, the market has many tools and techniques that help to make robust websites that address the needs of different users.
While we have different conditions and disabilities that affect people who use the web, the most popular groups of the impairments include
- Visual Impairment: This category consists of total or partial inability to perceive color contrasts or see.
- Hearing Impairment: some users have reduced the ability to hear while others cannot hear at all.
- Physical disabilities/motor skills: Users have difficulties moving certain parts of their bodies’ including the ability to make precise movements, like using a mouse.
- Photosensitive seizures: Flashing lights may trigger seizures for certain conditions like epilepsy.
- Cognitive disabilities: cognitive ability may be affected by dyslexia and dementia
To work around these issues, most people use assistive technology to navigate the internet. Such tools and software include screen readers to vocalize website page text, speech recognition software to convert speech into texts, alternative keyboards to accommodate special needs and Braille terminals. Here are ways to make an accessible website.
1. Use Content Management systems that support accessibility
We have tons of content management systems that help in building a website with the most common being WordPress and Drupal. Once you choose the ideal CMS to suit your needs, ensure you select one with an accessible template/theme. Consult the CMS theme documentation for accessibility tips and notes on creating accessible layouts using that theme. Also, follow the same guidelines when choosing a plugin, modules, and widgets.
For parts like video players and editing toolbars, select the ones that support accessible content. For example, the editing toolbars need to have the option for accessible tables and titles. The video player should also include closed captioning elements. Additionally, the CMS administration for posting comments and also creating a blog post should be accessible.
2. Use Content headings correctly
An accessible website should use headings properly since it enables in organizing the content structure and allows the screen readers to navigate the content. Using the <h1>, <h2>, and other titles strategically and correctly make the website well-organized and comfortable for the screen readers to interpret the content quickly. Besides, adhere to correct headings order and separate structures from presentations by using Cascading Style Sheets.
3. Use proper image Alt text
The images should have appropriate alt text to enable screen readers to understand the conveyed message like the infographics. When creating alt text for the photos, the text should have a direct message sending the information that needs to be passed through the image. And for the pictures that include text, the text should be in alt format. However, the alt text rule is exempted from decoration images.
4. Use the colors with care
The standard color deficiency is red-green color, and using such colors, especially in forms, may prevent the affected individuals from understanding the message. Avoid paring of garish colors and using blue, yellow, and green close to each other since its difficult for color-blind users. Having black text colors on a white background is the best practice for a website since it’s readable to most users.
5. Get Clickable
For most website users with mobility problems, it’s hard to click on the small items that have a tiny clickable range. Give your website clickable elements more full range for the user to click on it from the general area. Also, create a website that enables the resizing of the text that doesn’t break by avoiding absolute units like specifying the text size while using pixels. Instead, opt to use relative sizes that enable the scaling of text depending on the screen size and content.
6. Give Links descriptive and Unique Names
When you include links in your site, use proper text to describe the link direction. Appropriately using the descriptive text helps to explain the context of the link for the screen reader user. For company policies, the link should have a descriptive name with the exact information, and the same applies to other pages on a website. Avoid creating “click here” links since they don’t point visitors to the correct pages.
7. Design accessible forms
Forms play a useful addition to a website, but they should be designed and labelled clearly to avoid confusion. Wrongly labelled forms make it hard for the screen readers to enter the correct content. Each field should have a descriptive and well-positioned label. For example, for the person’s name field, it should be labelled “Full Name” or it should have separate sections for “First Name” and the “Last Name.” Also, the tab orders should follow the right visual hierarchy, and grouping of fields is advisable to keep the screen readers on track when filling out their information on the forms. To make accessible forms in WordPress, you can use the Caldera Forms builder.
8. Make your Website Keyboard-Friendly
Make your website accessible for users to navigate even without relying on the mouse. Most of the assistive technologies users rely on keyboard-only navigation. As such, they access major features like content, links, and pages via the keyboard. Most mobility disability users rely on pressing keyboard elements like arrow and tab keys to navigate, or they may use alternative input devices like mouth stick or single-switch input to check out the site.
For the pages which are long with lots of content, they should be broken using the anchor links. Such allows the keyboard users to skip to the relevant portion they need without having to check out the other content. Websites should have the “Skip to main content” located at the top of the pages for easy navigation of the keyboard-only users. Furthermore, the multiple levels, local menus, and the sub-items need to be configured to allow easy accessibility.
Making your website design accessible to people with a disability not only allows them to enjoy the information easily but also attracts more traffic and increases conversions.
Eric Tress is a blog writer and public relations manager for the website Cerebral-Palsy-Faq.org. He is committed to share content that is geared towards giving information, tips and hope to people with health and disability issues.