The World Health Organization estimates that 15% of the world’s population, or approximately 1 billion people, are people with disabilities. It is important that everyone can access the content on the website. These 10 tips will help you adapt it to a wider audience.
The text should be easily accessible for people with special needs.
- Visual impairment (for instance, partial or total blindness)
- Problems with mobility or motor skills (Parkinson’s disease)
- hearing impairment (partial loss or deafness),
- A tendency to epileptic seizures due to bright flashes and flashing lights.
- Cognitive impairment
These are 10 ways you can make your website more accessible to people from these categories.
1. Use semantic HTML
Semantic elements can be used to describe elements’ purpose. Non-semantic elements like div and span don’t tell anything about the content. Screen readers and assistive technology can make mistakes when reading the site.
Make a decision. Use HTML semantic element to describe the contents of your site, such as head, nav and main, article, aside and footer. Screen readers can convert text to speech and also use information from HTML elements. Semantic blocks help screen readers make their job easier by giving them a structure they can follow.
2. Enter alt text
This is a crucial detail that many people overlook. This allows visually impaired people to understand these blocks and their contents.
Make a decision. Always use alt text to describe information elements. Only decorative blocks without additional information are an exception. These icons can be used to complement background images or links. You can also fill in the alt tag to img elements, so that a screen reader is able to read them.
3. Use the aria attributes
Semantic tags and alt text cannot be used to fully describe the page and its roles. People with disabilities are unable to interpret the content.
Decision. Optionally use the aria attributes for additional information on assistive technologies. Take, for example:
- If the role of an element is not clear, you can use the role attribute
- To give elements more meaning or semantics, you can write properties, such as aria-labelledby.
- To indicate the state of an element, write aria-disabled= “true” for assistive technologies.
You can hide all decorative elements from screen readers by using the aria-hidden attribute in HTML elements.
4. Navigation simplified
Users without a mouse won’t be able to access certain items if tab indexes are not correctly placed on your website. This will make navigation difficult.
Make a decision. Add focus to elements when necessary by using the global tabindex attribute. Tabindex=”- 1″ is a good option for blocks that are not accessible via the keyboard. You should also make sure the outline property is enabled for interactive elements. Otherwise, users won’t be able to see what element is in focus.
5. The right touch targets should be set
Devices with small screens have smaller touch targets that make it difficult for users to navigate and interact with elements.
Decision. Interactive elements such as buttons or links must be at minimum 48×48 pixels with a minimum of 8 pixels between them. This will make navigation easier and prevent false touches.
6. Adapt your site at 200% zoom
A larger font is more helpful for people with vision impairments. The site’s content should be able to scale up to 2000% without compromising functionality. This means that text must be rebuilt well and functionality should not be compromised.
Decide. You can increase the scale without affecting the layout. Users with visual impairments can see the content clearly.
7. Use sufficient color contrast
It can be difficult for users with poor vision to differentiate text with low contrast from background.
Decision. According ISO-924-1, the minimum recommended ratio for contrast is 3:1. For AA sites, the minimum recommended contrast ratio is 4.5:1. AAA levels require a constant ratio of 7:1. Online tools like Contrast-ratio.com and the Axe with deque extension can be used to check a site’s contrast ratio. Chrome DevTools can also be used to check the color contrast.
8. Highlight elements not with color alone
Around 12 out of 200 men in the world are affected by color blindness. The use of color is a powerful way to mark a target. Red for error messages is one example. Users with color blindness can misinterpret color-only items.
Take a decision. Share important information about these items in other ways such as images, shapes, icons, and icons.
9. Optimize Dynamic Content
For correct operation, modal windows, slideshows and carousels require additional HTML elements. This functionality is not required by screen readers or other assistive technologies.
Take a decision. Make sure dynamic content is accessible for people with disabilities. Take this example:
- Subtitles and transcripts must be included for audio and video content. You should not use the auto-playback feature for video.
- Slideshows or carousels should also include captions.
- Avoid flashing lights or flashing elements to endanger epilepsy patients.
10. Signatures to error messages
Dynamic page content also includes errors. Users with disabilities won’t be able understand the error if they don’t come with a signature about how to fix it.
Decide. Use the following colors for error messages:
- Text with details about the error and how to fix it.
- Link to access the input line
- Visually delineating invalid input data is a good idea.
- Each error must be associated with a specific message
These issues can be addressed to ensure your website’s accessibility to the largest audience possible.