Best Tools and Resources for Your Accessible Design

A good functional design is an accessible one. There are many reasons to go for an inclusive approach in designing and we believe that no one should be excluded from the benefits that bring the digital world. More than one billion people experience some form of disability, so remember that having accessibility in mind when designing matters. 

There are best practices for accessible designs that you should follow. However, it’s best to test and analyze each design depending on which group of users you have in mind. Our last webinar presenter, Piotr Źrołka, Accessibility Expert and CEO of Kinaole decided to share some tools and resources that he finds useful when working on accessible designs. Here they are:

ANDI 

To check whether your site meets the standards of an inclusive design, it’s best to use a web accessibility evaluation tool.

ANDI is a great free bookmarklet solution that will show accessibility issues on your site and instruct you on how to improve your accessibility design. It will also check 508 compliance right away. 

You can count on this accessibility inspector to suggest solutions and offer some insights, just like an accessibility expert would do in the standard website development process. 

headingsMap

Headings and website organization structure are especially important for the visually impaired. If your site lacks a proper use of headings and skips some headline levels, e.g., from H1 going to H4,  then the screen reader will present the content to the user with the wrong page hierarchy. Taking care of the proper page organization is easy and can boost your website accessibility. 

The site checker tool that can help you with this is headingsMap. It shows, browses, and audits the headings structure as it generates a document map or index of any web document structured with headings and shows the HTML 5 outline.

Landmark Navigation

Landmark Navigation is another useful tool that helps in navigating screen readers through pages more effectively. It regions the page allowing users to skip to the content that they want instead of going through the whole page. 

It will navigate via WAI-ARIA landmarks using the keyboard or a pop-up menu.

WCAG 2.1 

Web Content Accessibility Guidelines 2.1 is an invaluable resource on web content for people with disabilities. You will find all accessibility standards there such as text spacing, contrast levels, orientation, and many others. 

It provides guidelines for all types of disabilities including visual, auditory, physical, speech, cognitive, language, learning, and neurological ones, and will help you enhance accessible user experience right away.

NVDA

It’s best to not only use accessibility tools for designers and developers but also test and analyze the site from a disabled person’s perspective. 

NVDA is a great free auto-screen reader that allows you to switch perspectives and test on your own whether your website meets the needs of blind or visually impaired users. 

Contrast checker

Instead of using external tools and plugins, you can work on accessibility with the help of built-in features in your design platform.

In UXPin, one of the features that can improve your accessibility is a contrast checker that analyzes the background color as well as the contrast ratios against the WCAG standards. It ensures that the text is readable and meets all contrast standards.

Blindness simulator

Another built-in UXPin feature is a color blindness simulator that shows how some users may experience the end result of your design. It can simulate all types of color blindness such as:

  • Red-green
  • Blue-yellow
  • Complete

Resources

Remember that aside from the tools to help you in your site analysis, it’s best to constantly keep up with accessibility resources. So, here are some extra links and books that may come in handy: 

Summary

Making your designs inclusive is a process that ranges from choosing an accessible color palette, organizing the user interface well, using assistive technology, and finally testing the design. It’s very convenient to have a solution that at the same time will assist you with both designing and instructing what works best for some disabilities – without the need to install external tools. If you want to check how UXPin’s accessible features work, go ahead and sign up for a two-week free trial and check if your designs are accessible!

Still hungry for the design?

UXPin is a product design platform used by the best designers on the planet. Let your team easily design, collaborate, and present from low-fidelity wireframes to fully-interactive prototypes.

Start your free trial

These e-Books might interest you