While website usability has improved over the past 15 years, the same change hasn’t happened with accessibility, said Alistair Campbell in his Where UX Fails Accessibility talk at Interact London 2015.
Most websites and applications launched today aren’t accessible,
said Campbell.
The main reason?
Waiting to address accessibility at the end of the website project, not as a design issue at the start of the project.
In his presentation, Campbell (director of accessibility at Nomensa) discussed how some current design trends and interfaces impact accessibility.
Consider infinite scroll or parallax effects on web pages. A great user experience for many users, right?
But what about people who don’t use a mouse?
For keyboard users, they interact with the website by tabbing with the keyboard. It’s a linear approach. With infinite scroll, the user may never be able to tab to a specific location on a page.
Imagine someone who uses a screen magnifier visiting a page with parallax effect.
The screen is zoomed in as they use their mouse to navigate the page. The parallax effect randomly moves things across the page as the user tries to mouse and scroll through the page, resulting in a disorientating and frustrating experience.
Campbell highlighted sites that have considered accessibility in their design process, pointed out areas for improvement, and shared tips on how to resolve accessibility issues in designs.
I liked his practical approach in addressing accessibility as a design issue and how teams can build it into their process from the beginning.
Over the years, I’ve seen teams embrace responsive design in their work, but it’s been a slower process to include accessibility.
Also, listen to the almost seven minutes of Q & A at the end of his talk. Good questions, and it’s rare to have Q & A included in recordings.
Check out the video or take a look at my key takeaways.
Key Takeaways
- Usability and accessibility go hand-in-hand. If a website isn’t usable, it’s not going to be accessible.
- Many accessibility checks can be done long before coding, within wireframes, sketches, and visual design.
- Web Content Accessibility Guidelines (WCAG 2.0) are useful, but can lead to “bolt-on accessibility” done during technical or quality assurance phase.
- To ensure accessibility is considered throughout your design process, make sure the design can be understood by people who use keyboards, screen magnifiers, screen readers, and by users who are deaf or have cognitive learning disabilities.
- One of the easiest way to check keyboard accessibility, use the Tab key on your keyboard.
- To test screen magnification given the site has been built responsively, use Command + to zoom into the content. Good contrast helps. Keep in mind that field of attention is small (example: purchasing an item and being able to see the added item in the shopping cart)
- Screen readers are linear. Good HTML structure is essential. Headings, landmarks, and finding in the page allow screen readers users to navigate page content.
- For cognitive and deaf issues in your design, icons and imagery can support people’s understanding of the functions and content on your page. Translate your design into a language you don’t understand. Is the design easy to understand? I had not considered using this process, but I think it’s point on.
- Tips for improving your designs: add skip links, include video controls, mark what you think the keyboard focus will be, check color contrast on your design, add captions to videos. Include training in understanding accessibility and how to incorporate it into your process.
There are interfaces being created in the name of UX, and they’re not accessible. And they don’t need to be.
