Accessibility Rendering Tools in Chrome

There are a few great simulation tools in Chrome which invoke rendering of a couple CSS media queries and simulate several types of color blindness. These are great for testing the implementation of your accessible design! The features include:

  • Emulate CSS media feature prefers-color-scheme
  • Emulate CSS media feature prefers-reduced motion
  • Emulate vision deficiencies

Unfortunately, they are quite difficult to discover/locate, so here’s where to find them:

  1. In Chrome browser, open the Developer Tools.
  2. Select the “…” menu button in the toolbar.
  3. Select the “More tools” menu.
  4. Select Rendering; the Rendering panel appears in the sub-panel (next to Console if no others are present).
  5. Scroll to the bottom of the Rendering panel to locate the features.
  6. Select an option from the dropdown for each.

Happy developing!

Bottom on rendering sub-panel Chrome

Addendum

Great point by Chris Heilmann via Twitter.

Related

Resources for developing accessible cards/tiles

The card pattern (also know as tiles and blades) has become quite popular over the last several years. There are many accessibility challenges that may arise quickly when web developers attempt to build them including:

  • Providing keyboard access
  • Providing an adequate visible focus indicator
  • Link text that’s not overly verbose for screen reader users
  • Using correct semantic markup, especially for the heading
  • Maintaining proper reading order
  • Not duplicating content

Here are a several great resources on building accessible cards/tiles and address these issues:

collage of 3 tiles

Digital Accessibility Jobs, June 2020

Many more tremendous opportunities in the field of digital accessibility.

As always, watch out for more job listings on Twitter via @a11yJobs, @EasyChirp, and me @WebAxe.

Jobs written on newspaper with magnifying glass

Accessibility Resources for Challenging Times—a letter from Lainey Feingold

This is a guest post; a slightly modified letter from Lainey Feingold. Thank you Lainey!

Dear Web,

I hope this message finds you, your families and colleagues, and all those you love safe and as well as possible during these challenging times, the COVID-19 (Coronavirus) pandemic. I write to share some upcoming accessibility learning opportunities and resources.

  • A Future Date Conference is a free three day virtual gathering on April 21-23 offering many accessibility sessions cancelled this past spring. It will include the Digital Accessibility Legal Update that didn’t happen at CSUN.
  • John Slatin AccessU will be virtual this year, with four packed days of accessibility goodness in May. You can catch the Digital Accessibility Legal Update on May 14.
  • The free Introduction to Web Accessibility Course from the Web Accessibility Initiative of the W3C and Unesco has been extended on edX through May 30. So valuable!
  • I’ve had the (great) opportunity this past year to serve as a subject matter expert on accessibility issues for Disability:In. In this role I helped with a just-released resource titled Digital Accessibility and Remote Work. It is part of the organization’s COVID-19 Response series. Feedback welcomed.

For years I have said in my talks and trainings that digital accessibility is a civil right of disabled people. The truth of this has never been clearer.

This pandemic teaches that remote work, distance learning, and social connection is not possible without accessible information, software and technology. And this global health crisis underscores that accessible information can be a matter of life and death.

The global pandemic is frightening. Yet every day I am reminded of the importance of the work we all do to make the digital world inclusive. Thank you for the part you play.

Stay safe and stay well,

Lainey

Law Office of Lainey Feingold
Author, Structured Negotiation | A Winning Alternative to Lawsuits
http://lflegal.com/
LF@LFLegal.com
Follow on Twitter @LFLegal

Law Office of Lainey Feingold | Structured Negotiation | Disability Rights

The WebAIM Million—Updated

The WebAIM Million report, an accessibility analysis of the top 1,000,000 home pages, has been recently updated. Here’s a summary of the update from WebAIM. Sadly, per the report data, the state of web access hasn’t improved much, and has actually worsened overall.

The number of errors increased 2.1% between February 2019 and February 2020.

Below are key points, notes, a call to action, and related tweets.

WebAIM web accessibility in mind

Key Data Points

  • Detectable WCAG failure rate rose from 97.8% to 98.1%.
  • The most common errors:
    • Low contrast text
    • Missing alternative text for images
    • Empty links
    • Missing form input labels
    • Empty buttons
    • Missing document language
  • Home pages with ARIA present averaged 60% more errors than those without.
  • 56% of the 3.4 million form inputs identified were unlabeled (either via <label>, aria-label, or aria-labelledby).
  • Only 128,054 (6.8%) of the tables had valid data table markup.
  • Website homepages using Vue.js had a whopping 76.2 errors per page.
  • 10.8% of home pages had a “skip” link present. However, 11.1% of these links were broken.

Notes

  • This study was done using an automated tool which is capable of detecting only a portion of actual accessibility issues/errors. Actual accessibility errors is certainly much higher. (Even after considering that there may be some false positives from automated testing.)
  • When we should be simplifying content, home page complexity increased 10.4% in 12 months, from an average of 782 elements per page to 864.
  • I wrote about the first report and related issues last year — About the HTML Epidemic, WebAIM “Million” Report, and Teach Access (March 2019).

Call for Action

Developers need to do better with accessibility, and using semantic HTML. The poor results of this report are just not acceptable; it’s poor craftsmanship and poor quality of work. Devs can start improving by:

Tweets