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:
To check whether your site meets the standards of an inclusive design, it’s best to use a web accessibility evaluation tool.
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.
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 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.
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.
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.
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.
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:
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:
- Mismatch by Kat Holmes
- Inclusive Design Patterns by Heydon Pickering
- Inclusive Design by Microsoft
- Inclusive Design Toolkit by Cambridge University
- Web Accessibility Guide by UXPin
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!