Hi everyone! English is not my first language so please ignore any spelling or grammatical error. 😊
The web gives people opportunities to take part in a world full of information without discrimination, this assuming that it's implemented correctly.
Accessibility can have a big impact on the services you provide and the people using it. By including accessibility into your web development process, prerequisites are created so that as many people as possible can use your web and mobile applications.
That being said, it's easy for some not to prioritize web accessibility...
When talking about accessibly in web applications, we talk about a web that can be used by all..people with a wide range of disabilities such as blindness, deafness, low vision, limited movement, speech disabilities and photosensitivity.
Some backstory about web accessibility..
Web Content Accessibility Guidelines (WCAG) is an international web accessibility guideline that covers a wide range of topics that make up a more inclusive web. Last summer, WCAG 2.1 was released that focused more on accessibility in mobile applications. I strongly recommend you to read through these guidelines!
These guidelines can be broken down into three levels:
- Level A should be your lowest ambition level. (These are the most important things to implement)
- Level AA is the most basic level that has to be implemented into you web and mobile application. In EU, these are mandatory and should be combined with level A.
- Level AAA is the highest ambition level. You should consider these guidelines.
Tips and tricks
Here are the things I think about when I develop and test the accessibility of an application:
Autoplaying sounds and videos
How many times have you entered a website and videos/sounds start playing automatically. Distracting right?
Autoplaying videos and sounds when a user enters your website can make it hard for people with attention and learning disabilities to focus.
Autoplaying sounds and videos
Don't forget to add a language attribute to your HTML document. This enables the screen reader to read text with the correct pronunciation.
<html lang="en">
......
</html>
Rank in headers
Make sure your headers are ranked in levels. When using a website with a screen recorder, people with vision impairment tend to skip through the page and use the headers as navigation to know where in the page they are located. Having unstructured and unranked headers makes it hard for people with vision impairment to get an overview of what's displayed on the webpage.
<h1>Heder 1</h1>
<h2>Heder 2</h2>
<h4>Heder 4</h4>
Clickable actions - Aria button role
When you want an element that looks or acts like a button but don't want to use the button element, make sure that the appropriate behavior of the element is read by the screen reader. You can make sure that the element is read out as a button in voice over mode by simply adding the role 'button' into the tag.
<div id="saveChanges" role="button" aria-pressed="false">Save changes</div>
Images
Avoid putting any important information in an image without making sure there is an alternative way for the voice-over to read what's in the image. Make sure you use the appropriate [alt] text for any image you upload to a webpage.
Links
Try to make it clear for someone using a screen reader where a link leads them to. Formulate the links with text and write the most important things first. Avoid giving too much distracting information in the link. The user must be able to understand what happens when clicking the link.
Is the link leading to an external website?
Is a new tab opening when you click the link?
Colors and color blindness
Think about the colors being used in your web application. Don't solely rely on colors to convey important information to the user. One example in error messages in input fields that are usually denoted by a red text that pops up when users input wrong data in a field. How easy is it to see the color contrast? Maybe try using icons together with the text when displaying error messages.
Try out Colorblind Web Page Filter and see what users with different color blindness see when they enter your website.
Bonus tips
- Think about the abbreviations you use in your text, how does a screen reader handle your abbreviations? Is it easy to understand?
- Offer different navigation methods to the user. Can a user get through and use your website by only using tab?
- If your webpage has videos, do you offer any alternative for people with hearing loss?
- Make sure you have enough contrast between text and background colors.
- Is there any way for a person that doesn't use a mouse due to shakiness to solely use the keyboard to navigate through your site?
Good links and tools
ChromeVox - A screen reader chrome extension
Funkify - A chrome extension and a disability simulator for the web (let's you simulate dyslexia, cognition, vision loss, motor loss and color blindness)
W3 tutorials on web accessibility
Accessibility in web development is a very big topic. I covered some of the things I think about when I code and test. What are some things you do when you code with accessibility in mind? Comment down below! 😊
Top comments (0)