AMA: Vox Product Accessibility Guidelines

4 years ago from ally palanzi, senior front-end engineer, vox media

  • Mario VasquezMario Vasquez, 4 years ago

    Using patterns that have already been tested is a great way to get started but it's always been a challenge to test accessibility. Real user testing, screen readers and browser plugins all have their strengths and weaknesses.

    What was the best combination that's worked for you to test accessibility and how has that evolved?

    1 point
    • Sanette Tanaka, 4 years ago

      Great question. Testing is incredibly important, and we include a list of our favorite tools at the end of our checklist.

      Speaking for myself, I find it most helpful to test throughout my design process. So, for instance, I will test the contrast of color and type combinations in my Sketch files using a tool like Colour Contrast Analyser. Once the product is in production, I use the WAVE Chrome extension to check contrast and other accessibility best practices. I use Responsive Web Design Tester to test various screen sizes, and, if I have time, view it using Apple's built-in accessibility settings like grayscale.

      We include other testing plans for QA teams to run through in our checklist, but it's a good idea for others on a team to do the same. At minimum, we advise running a browser check like WAVE, navigating via tab navigation, and using a screen reader.

      0 points
    • ally palanzi, 4 years ago

      As a front-end developer, for testing accessibility, I always start with the tota11y bookmarklet. It's really intuitive to use and gives suggestions for fixes right within the page. I typically use this tool several times when building something and fix accessibility issues as I go. I'll regularly check with designers if there are any contrast issues so we can fix those together. Once the project is a little further along, I always test navigating the page with keyboard and then if I have time, a screen reader.

      The most important thing to keep in mind is to test things as you build them so it's not too overwhelming at the end to make updates.

      0 points