AMA: Vox Product Accessibility Guidelines

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

  • Brian EvansBrian Evans, almost 4 years ago


    1. In regards to accessibility what would you advise is the best way to test for color contrast for WCAG conformance when your text is over an image on a responsive site?

    2. Do you have any great examples of accessible charting/graphs across your brand?

    3. Were any people with disabilities invited to collaborate on your standards? Do you guys do user testing with people with disabilities?

    Thank you for building this checklist. It's my new favorite accessibility resource online. Kudos! My only criticism is I'd add a QA or Editorial step to ensure the page's headings are descriptive. I see the developers have one for landmark roles when headings are actually used to navigate 65% of the time (According the the 5th Webaim Screen Reader Survey)

    2 points
    • ally palanzi, almost 4 years ago

      Hi Brian!

      1. Text over an image is definitely tricky. I'm not sure of a formal way or tool for testing it, but what we've done is to try to pull out the dominant color in the image and compare that color with the text color to test contrast using a tool like Colour Contrast Analyser. We also will sometimes add a color overlay or drop shadow on the text to help with legibility. If the image is busy, especially on smaller screens, sometimes we even move the text off of the image.

      2. Not anything that I can think of right now, we included charting best practices in our guidelines so we hope to make them better in the future.

      3. One of the women who worked with us on these guidelines has a hearing disability, however, we haven't done any accessibility user testing yet.

      Thanks for the tip! We'll make a note to add that in.

      3 points