Web Accessible Code Libraries and Design Patterns

Within a web development organization, it’s ideal to maintain (and enforce usage of) design patterns and a components library. And they should work together; design patterns create consistency among visual elements across projects and the components library creates consistent implementation of those patterns during development. This is especially important on several levels including accessibility.

Here is an extensive list of recommended code libraries, patterns, and design systems. It’s one list instead of separating by category as many have elements of each. There are also some related articles below. Please leave a comment for any updates, corrections, additions, etc.

Related resources:

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