It’s not just about ensuring that people with disabilities are able to use your product. The accessibility checklist should be used as a starting point, and not an endpoint, for a UX design that is accessible. Here are some of the key concepts. You should think beyond the minimum to design designs that are appealing to people with disabilities, useful to them, and suitable to their needs. This checklist summarizes the recommendations of the Web Content Accessibility Guidelines.
What is an Accessible Design?
Designing for people with disabilities is accessible design. Accessible design is inclusive of all users including those with physical or cognitive disabilities, whether permanent or temporary.
How would a person with color blindness use your design differently from a user with hearing loss? Or low vision? What about disabilities? Dyslexia? Mobility impairments? Blindness? Blindness?
Whose needs are not considered in the traditional design process. Accessible design considers all these experiences and provides solutions that are accessible to everyone.
Most common accessibility needs
Visual Impairment: Low vision, colorblindness, and total blindness.
Auditory Impairments: Hearing loss and deafness.
Motor Disabilities: Problems with reaching or grasping.
Cognitive Disabilities: Learning difficulties, memory impairment and speech impairment.
What is the purpose of an accessibility checklist?
Web accessibility checklists provide designers and engineers a list to consider when designing a site for people with disabilities or assistive technologies.
Checklists can be used by team members to check if designs and codes meet Web Content Accessibility Guidelines.
Inclusion Design
- Accessibility requirements are a set design constraints that will help you to create a better, more inclusive product.
- Learn about the most common types of limitations or disabilities that can affect how people access digital services.
Blindness and low-vision, as well as color blindness are all examples of vision disabilities.
Hearing impairments – including deafness, low hearing and tinnitus
Motor problems, such as tremors in the hands, deformities and amputations
Cognitive disorders, such as dyslexia or dementia.
- It is important to understand that everyone has some form of disability, whether it be permanent, temporary, or a situational one. As an example, having one arm permanently is a condition. Having one arm in a plaster cast is temporary. And holding a child in one hand is situational. But in all cases, you are restricted to using only one arm.
- Make your product accessible to people with disabilities. This will improve the experience of everyone.
- Design for progressive enhancements by ensuring that everyone can use your product with the most basic technology, and then layering in better experiences for those users who are able to.
- When conducting user research make sure that the participants’ backgrounds, abilities and circumstances are representative of the actual users.
Accessibility checklist for UX design
You should help the team to see accessibility as an aspect of user experience, rather than just a list of requirements.
Color
Text Color & Contrast
Use an online contrast checker such as WebAIM to make sure the color of the text can be read against the background. For color combinations to meet accessibility standards, the greater the contrast needed for smaller text. Color contrast is an accessibility issue that I’ve seen a lot. It can be used to teach your clients about accessibility.
Messaging
Do not rely on only color to communicate a message. Use color, text, and shape to emphasize your message. Try including icons with your error messages when communicating visually form field errors rather than only color.
Links
The link colors should be different from the body text. Similar to above, you shouldn’t just rely on colors to style your links. Jakob’s Law tells us, too, that people prefer design patterns they are familiar with. By using a familiar pattern, underlining links can improve general usability. It also makes it easier for people with low vision and color blindness to access your site.
Text
Text size
Make sure that your text is big enough to be read easily without squinting or straining. According to Smashing Magazine you should make your body copy 16 pixels (or bigger). You can make secondary or tertiary texts smaller, but your main content should be large enough to read.
Text Expandable
Allow people to increase or decrease the size of text. The same goes for icons that are important! People may miss important context if your button contains a “download icon” but the icon does not increase in size when you change your button label.
Clarity
Your page titles must be concise, clear and descriptive. Use the active voice, and be direct to reduce the cognitive load for your users. The phrase “Denise created a blog” can be interpreted differently than “A blog was published.”
Scannability
Bullets are a great way to break up your text into bite-sized chunks. Break up long content sections with subheadings into smaller paragraphs to increase the scannability.
Structure
Use HTML and headings tags (H1,H2,H3, etc.). Establish a page layout that is logical for screen readers. A clear page structure is also more logical for search engines. A solid structure will not only improve the user experience, but it can also help your SEO.
Alignment & Length
When reading for people with cognitive impairments, it is best to align your text left. You should avoid centering or aligning your text to the right, particularly when it wraps across multiple lines. Line length is important when wrapping text. Baymard Institute recommends 50-60 characters per line (including spaces!). Too wide lines are difficult to read, and too short lines can be stressful.
Breadcrumbs are useful navigational aids. Breadcrumbs provide context to your users and can help them navigate.
Make sure that your site is navigable by keyboard or speech only and accessible to screen readers.
Focus Indicators: People who use their keyboards to navigate rely heavily on focus outlines to help them locate elements on the page. Focus indicators can be styled to match your design, but they should never be removed!
Link descriptions
Link text is usually navigational. It should describe the link and where it will lead you. It is better to say “Read more” than “Read More.”
Your button labels, like text links should describe the action that your button will initiate. “Contact our team”, rather than “Click Here,” gives us a better idea of what to expect.
Spacing
Anything that can be clicked or tapped should have ample space around it. Do not demand precision, or jam buttons close together. It is not fun for anyone to have to click on a tiny hyperlink next to three other small links. As a general rule, for mobile devices we aim to keep the tap target to 44 x44 pixels.
Form Labels
Make sure that your field labels are always visible, clear and descriptive to reduce the cognitive load of your forms. You should not have your field labels replaced with placeholder text or disappear as the user begins typing.
Images & Video
Alt descriptions
Add alt tags that describe your media, including images, videos, and other types of media. Don’t forget that not everyone can see your images, so make sure your descriptions are as detailed as you can. Alt tags are not only important for accessibility but also have SEO benefits.
Communication
Images can be used to enhance your text but should never replace it. Images can be used to explain complex concepts. However, these concepts should be explained in plain text.
Video Transcriptions
Videos are engaging and a great way to share media, but they shouldn’t hide important concepts. Include subtitles or video transcriptions for those who cannot watch.
Clarity
Not all icons are intuitive. Pair your icons with labels to add clarity.
Overlays
Text on top of an image can also be problematic in terms of readability. Consider adding a color overlay to your images if you decide to add text. This will help your text adhere with color contrast standards.
Tips to Make Your Designs Accessible
UX accessibility testing is essential to designing inclusive experiences for people with a variety of abilities and needs.
Here are four best practices that you can follow to ensure your designs are accessible by as many people as possible.
Automated testing tools
Automated tools can help find accessibility issues quickly and easily on your website or app. Axe Lighthouse and Tenon are some of the most popular tools. These tools will scan your website to identify problems with alt text, color contrast and other accessibility features.
Manual testing
Automated tools are helpful, but not perfect. It is therefore important to do manual testing. You can use the keyboard to navigate around a website or application. You can also test using a screen reader and check for any other issues.
Test on real users
Real users with disabilities testing your website or application is one of the best ways to test accessibility. You can identify issues through usability testing that may not be evident in automated or manual testing.
Check the for compliance with WCAG
Use the accessibility check-list provided in this article to quickly review the requirements, or dive deeper into WCAG guidelines for a more detailed understanding. Try to get as close to AAA standards as possible, but also make every effort to meet A and AA.
The best way to test for accessibility is by using a combination of techniques. Although automated tools can speed up the process it is important to be familiar with the guidelines so that you can remember them when making design decisions.
Graphic Design services :
Temis Graphic Designing Services enable you to improve the Visual identity of your business and let your branding process goes on. With our Graphic Designing Services, you can influence your clients and let them feel your brand personality; due to good brand awareness, you prove to people that your business can handle a problem.
Do you need graphic design services? Contact Us now!
