UX designers should be sensible when it comes to designing products for a better user experience. Since the goal is to achieve a human-centered design, as a designer, it is very important to build empathy and focus on accessibility as an important factor to build a good product.
In this article, Accessibility UX: Guidelines On Designing For Accessibility, we will discuss accessibility guidelines for designs and writers with the following sub-topics:
Accessibility is about the ability to utilize a product or service by everyone, regardless of how they encounter it. This should allow all users to understand and use the product or service with ease.
There are accessibility laws to help people with disabilities but as a UX designer, your role should be to accommodate all potential users in many contexts of use. You need to make sure that the design is useful to everyone, regardless of their situation, abilities, or context. In short, you need to create a better design for all.
The first step in building an accessible product or service is to build empathy and have an inclusive design mentality.
By inclusivity, it means that the design should not be confined to a specific group of users only. It does not choose to design a product that is meant for people with disabilities, for example. The design should extend to anyone with differing abilities.
Like for example, the design should fit a disabled person with only one arm and a person holding a baby in one arm, and both can use the product and complete the task with ease.
Thus, a UX designer’s role is to make the web more usable and accessible to users in general.
The difference between accessibility and usability
In UX, accessibility is sometimes confused with usability. Both these terms overlap, and their roles are both important when it comes to designing for user experience UX. However, there are distinctions between them.
Usability is focused on designs that are effective, efficient, and satisfying to the user.
In theory, this means that usability includes web accessibility since a product that is inaccessible is unusable to people with disabilities.
However, usability tends not to focus on the user experience of people with physical or cognitive disabilities.
On the other hand, accessibility is concerned more with all users’ ability to access equal user experience, however, they encounter a product or service. And unlike usability, accessibility takes regards to people with disabilities.
Why make accessible designs for everyone
Accessibility designs are not only the right thing to do but it also benefits a lot of users. This is because the products and services designed for web accessibility have features that are help people with disabilities and help other users too.
For example, people with hearing disabilities have the option to turn on the caption of the video. This feature also helps regular users to turn the caption on when the video is on mute.
Another example would be legible, high or sufficient contrast text that helps people with vision difficulties. This feature is also helpful to people who are outside and reading in bright sunlight can be difficult.
These examples show us that whatever the users’ abilities are, will face challenges due to changing contexts. So, when you design for all ability levels, you can then create products and services for everyone to access, use, and enjoy.
It is quite surprising that even though accessibility is an important factor in design and UX, there are many brands that still overlook this importance.
There is also a strong business case for good accessibility, in which studies show that accessible websites have better search results, they are able to reach a wider audience, and they are SEO-friendly among many other good factors. In general, these websites have better usability and good accessibility.
With all the reasons above, it makes perfect sense that designing for accessibility is more than just a legal concern. Accessible designs have the following benefits:
Improved SEO from semantic HTML
Wider reach of users on more devices, settings, and environments
Enhanced public brand image
As a UX designer, you have the power and responsibility to make sure that the product or service you are designing is accessible to everyone. And the great thing about making your accessible design is it brings a better UX to everyone.
What are the different kinds of accessible issues
There are common accessibility issues that you should be aware of, so you can consider these factors when designing a product:
Visual (example: blindness or color blindness)
Motor/mobility (example: wheelchair concerns)
Auditory example: (hearing loss)
Seizures (example: epilepsy)
Learning/cognitive (example: dyslexia)
There are also some concerns that can be seen from regular users:
Incidental (example: insomnia)
Environmental (example: using a mobile device out of mobile coverage area)
The seven accessibility guidelines
Accessibility in UX is comprised of a wide range of topics, including a lot of different guidelines for you to follow.
However, in Userpeek, we will cover the most important guidelines that are easy to implement as well so you can get started with improving the usability of your product or service.
We have chosen the 7 guidelines based on the AA of the Web Content Accessibility Guidelines (WCAG 2.0) so you can work on the most used assistive technologies that include screed readers, screen magnifiers, and speech recognition software.
Consider people suffering from low vision and find it difficult to read the text from a colored background with low contrast.
The World Health Organization (WHO) estimates that there are around 217 million users who have moderate to severe vision impairment. From this report alone, it is an important factor to consider the contrast between text and background.
Based on the W3C guidelines, the contrast ratio should be at least 4.5 to 1 (conformance level AA) between the text and its background.
The ratios, however, can change and be more forgiving with bigger or heavier fonts since these are easier to read for a user at a lower contrast.
Thus, if the font type is at least 14-18 pt bold, the contrast drops to 3 to 1, at a minimum.
There are some tools or medium app to make and help you check with fonts easily. For Mac users, there are app to make medium like Contrast App is a good tool to check the contrast using the color picker tool.
For a more detailed score, you may look into WebAIM color contrast checker that can calculate the score for both regular and bigger text sizes in varying conformance levels.
2. Do not limit yourself to using color alone for important messages
Color is an effective way to highlight an important message. However, do not be limited to using only colors to show an important message or action that you want your users to do.
Remember there are users who suffer from color blindness or low visual acuity and will have a hard time reading your content.
So instead, try other indicators like text labels or patterns. For example, when it comes to showing screen errors to a user, you may want to add an icon or include a title to your message for your user. You may also consider adding visual cues like font-weight or underlined text to stand out.
When it comes to visual elements like charts or graphs, it is hard to read the content if you only use colors to separate and or log user data group data by using medium.
So instead, you can use shapes, labels, and sizes to present your information clearly.
Another trick that you can do is to print your chart or graph in black and white to clearly see if you can still distinguish and recognize the content groupings.
You may also get the medium app like Color Oracle that shows you real-time the common color visions that other people with vision impairments see.
What are focus indicators? These are the blue outlines that show up around links, inputs, and buttons.
The function of these focus indicators is to help people identify which element has the keyboard is focused on, which in turn helps them know where they are in the navigation.
These focus indicators are used by people who are visually impaired, people who have limited mobility, people who suffered from injuries like carpal tunnel, and people who prefer this kind of navigation.
By default, for example, browsers use a CSS pseudo-class to show these outlines on selected elements. However, these default focus indicators are not pretty to look at, so usually, these are hidden. However, if you decided to get rid of these, then make sure that you replace them with another element.
There are important elements that need to be focused on such as links, form fields, widgets, menus, and buttons. These elements use focus indicators, so they look different from other elements on the screen.
When it comes to designing focus indicators, try to find a style that fits your website and also goes well with your brand. Make sure that you create something that is visible and with high contrast, so it stands out from the rest of the content on the web screen.
4. Utilize labels and instructions with form fields and inputs
Placeholder texts are becoming a norm when it comes to designing a form since this style is simple and modern. While this design is tempting, avoid utilizing placeholders are labels since the placeholder text is colored gray and therefore has less contrast and is hard to read.
There are people who will find it challenging to know what the fields are about once the labels are gone.
There are users who often use screen readers normally navigate through a form using their tab key to jump through the form controls. The label elements are read by screen reader for each form control and any non-label text as placeholder text is skipped over.
The best strategy to provide a better user experience is to always place labels that never go away so users can understand what they do and write in a form.
It is important for users to never lose the context of what they are writing. Therefore, UX designers who hide descriptions or directions inside the forms are replacing usability and accessibility over simplicity.
We do not suggest that you clutter your UX design with information. Just place the proper amount of information that is useful for your users. Of course, too many instructions can be problematic as well. Always remember that the goal is to provide enough information, so users are able to complete the tasks with ease.
5. Provide useful texts for both your images and non-text elements
There are users who often use screen readers to hear the web. These users are people who suffer from low vision, and they often use text to speech tools to help them hear the words on the screen.
In this case, there are two ways you can design for alternative texts:
Within the <alt> attribute of the image element
Within context or surroundings of the image
Furthermore, try to describe what is happening in the image and how it matters with your page content instead of just simply defining what is in the picture.
You can add an empty <alt> attribute to make readers skip images that are pure decoration only.
Imagine when you do not provide the right <alt> text attribute to your readers. The screen reader tools will simply read the image file name to your readers, and this is probably the worst-case scenario that you can provide.
There are tools you can try to help you properly caption images. You can try Google’s AI image captioning tool, which has 94% accuracy. At the moment, this tool is open-sourced and is still in beta.
Headings are important in content. These mark where the content starts, and they work as tags to establish style and purpose. Headings are also utilized to create a content hierarchy within the page.
The use of headings will help people with low vision read better and understand the page and content by reading each heading in a hierarchical flow.
Thus, make sure that you utilize big letters and heading tags to properly structure your content.
It is also important to note that properly constructing your content in a hierarchical manner will help communicate to browsers the kind of content your website contains. The browsers will be able to easily identical HTML elements and how they should treat the different contents on a website.
The components and structure of a page are composed of an accessibility tree, which is used by power screen tools to help visually impaired people listen to a page.
Therefore, unable to properly use the markup can affect your website accessibility. Having said this, avoid using HTML tags for style purposes only.
Also, take note that screen reader tools navigate your website by heading structure. So it is important that you properly structure your heading (and not just use bigger and bold text) hierarchy. When people like to listen to your website through screen readers, they can easily jump through the headings, content titles, and navigate through the websites using top-level headings.
Keyboard accessibility is one of the most important elements when it comes to web accessibility. This helps people or user with motor disabilities, visually impaired users, and users with no precise muscle control, dependent on a keyboard to navigate content.
In addition, power users also typically use the tab key on the keyboard navigation through interactive elements on a website.
Remember about the focus state that was discussed previously? This provides a visual indicator of the element currently selected. As the user navigates through the website or web pages, the order of the elements is important. The tab order should follow the visual flow of the page, either left to right or top to bottom.
You can practice by testing your website using only your keyboard as control. Utilize the tab key to move through elements on the page. Then use the enter key to test and select an element. This will help you verify all the interactive elements are in order. So if you are able to navigate through the site without a mouse, then you achieved good keyword navigation support.
Lastly, be mindful of the size of your navigation, which can include the number of links and the length of texts. People with motor disabilities can find it hard to tab through ling menus. Listening to long links can also be quite a challenge for people who use screen readers.
Additional takeaway
So we have learned the 7 guidelines to proper web accessibility. But, if you want to do more, then you can check out the additional recommended tips below:
Accessibility audit
You can use an audit service to check if your website works well with assistive technologies and meets the WCAG 2.0 level AA. You can refer to your audit results to fix the problems found when you run assistive technology on your website and do another accessibility test.
Hire an auditor
If you have the budget to have an in-house auditor or hire an auditor to conduct scheduled accessibility audits, then do so. You may search for someone from your QA team to do the auditing or you can look for an expert who can properly do an accessibility audit of your website.
Include accessibility as part of your design research
Make it a habit to include accessibility as part of your research. You can verify your assumptions with regard to accessibility in order to improve your user experience and utilize user data by using accessibility findings and insights.
Conclusion
Now that you learned the seven guidelines plus some additional takeaways on web accessibility, you can now start incorporating this element into your UX design and content. Make sure that you create a design and content that is closer to the AA of the Web Content Accessibility Guidelines.
Designing for accessibility is not something that you can learn overnight. It takes some practice and experience to get all elements working for all users.
We highly encourage you to include accessibility in your UX guidelines as accessibility matters a lot.
As UX designers and UX writers, web accessibility is one of the responsibilities that should be included in the design and content to make assistive technology usable for everyone, regardless of the ability levels.
