Web Axe – blog and podcast on web accessibility

jobs

Digital Accessibility Jobs, Jan 2021

Post author By Dennis
Post date January 18, 2021
No Comments on Digital Accessibility Jobs, Jan 2021

More great opportunities in the field of digital accessibility.

Senior UX Designer, Accessibility at Ad Hoc (remonte/DC).
Accessibility Director at California Community Colleges (CCC) Technology Center.
Web Accessibility Programmer at California Community Colleges in San Mateo, CA.
Accessibility Consultant at Deque Systems in Herndon, VA, or remote location.
UX Accessibility Specialist II at Edward Jones in San Francisco, CA.
Accessibility Engineer at Vispero (Remote).
Accessibility Lead at Zendesk in San Francisco, CA.
Accessibility Program Lead at Amazon (remote).
Accessibility Engineer at MURAL (Remote).
Digital Accessibility Consulting Engineer at Stanford in Palo Alto, CA.
Sr. Accessibility Specialist at Thomson Reuters.
Senior Accessibility Lead at Spotify in New York, NY.
Mobile Engineer: Accessibility at Babylon Health in Austin, TX.

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

Web Accessible Code Libraries and Design Patterns

Post author By Dennis
Post date January 7, 2021
3 Comments on 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.

U.S. Web Design System version 2 from United States government (previous version: U.S. Web Design Standards)
Assets Framework by U.S. federal government website managed by the Centers for Medicare & Medicaid Services (requires 6 JS and 3 CSS files)
Government Service Design Manual (UK)
GOV.UK Design System — and blog post Introducing the GOV.UK Design System
Australian Government Design System
Online Accessibility Toolkit by The Government of South Australia
AccDC Technical Style Guide by WhatSock/Bryan Garaventa
Accessible_Components by Scott O’Hara
No Style by Adam Silver
MIND Patterns from eBay by eBay/Ian McBurnie
Cauldron React pattern library by Deque Systems (Cauldron vanilla JS version but is deprecated)
Code Library by Deque University
Tenon-UI accessible React components library
Foundation for Sites by ZURB
A11Y Style Guide by @CarieFisher
Accessible design patterns by @LeonieWatson
Demos by Web Overhauls by Web Axe author @DennisL
Modern Web Accessibility Demos by @PaulJAdam
Accessible Solutions by @haltersweb
Simply Accessible Examples – training and workshop examples by Simply Accessible
Vuetensils – A reportedly accessible component library for Vue.js
Lightning Design System by Salesforce
Polaris by Shopify
Rivet Design System by Indiana University
Lion Web Components by ING Bank; Lion on GitHub
Chakra – React component library by Segun Adebayo
Web Experience Toolkit (WET) by Government of Canada

Related resources:

W3C WAI-ARIA Authoring Practices – Design Patterns and Widgets
Web Accessibility Tutorials by W3C WAI
Inclusive Components article series by Heydon Pickering
Design Patterns for [UK] Government Services UXPA 2016 (Slideshare) by Caroline Jarrett
Style Guide Best Practices by Brad Frost
Creating A Living Style Guide: A Case Study by Steven Lambert
Website Style Guide Resources – long list of real life pattern libraries, code standards documents and content style guides.
Design Systems vs. Pattern Libraries vs. Style Guides – What’s the Difference? by UXPin
Scaling accessibility with a design system by Geri Reid
accessible-slick – the last (accessible) carousel you’ll ever need, by Accessible360

tools visual

Accessibility Rendering Tools in Chrome

Post author By Dennis
Post date October 4, 2020
No Comments on 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:

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

Happy developing!

Addendum

Great point by Chris Heilmann via Twitter.

Accessibility Rendering Tools in Chrome https://t.co/ZCF2IMKNxZ

Great overview by @dennisl. I just wished people would start mentioning Chromium instead of Chrome as all of these and more (experiments) are available in @MSEdgeDev, too.

— Chris Heilmann (@codepo8) October 5, 2020

Accessible Web Animation: The WCAG on Animation Explained (Sep. 2020)
prefers-reduced-motion: Sometimes less movement is more (Dec. 2019)

code design

Resources for developing accessible cards/tiles

Post author By Dennis
Post date August 28, 2020
No Comments on 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:

Cards by Inclusive Components (2018)
How to build accessible cards–block links by Nomensa (2020)
Tile examples by eBay MIND Patterns (updated 2019)
Cards by a11y Style Guide, Carie Fisher
Cards with Delete example by Zoë Bijl
Card example by Scott O’hara
Cards by GEL BBC
What makes an accessible card? presentation on YouTube by Rian Rietveld/Technica11y (2019)

collage of 3 tiles

jobs

Digital Accessibility Jobs, June 2020

Post author By Dennis
Post date June 17, 2020
No Comments on Digital Accessibility Jobs, June 2020

Many more tremendous opportunities in the field of digital accessibility.

Software Development Engineer, accessibility – Alexa shopping, at Amazon in California.
Web Accessibility Technical Specialist at Facebook in Menlo Park, CA.
Senior Interaction Designer, Accessibility at Google in CA/TX/MA.
Senior Accessibility Designer at CVS in Boston, MA.
Accessibility Support Associate at Integra Software Services in NJ.
Associate Accessibility Specialist at WGU in Salt Lake City, UT.
Web Accessibility Specialist, remote, at Cengage Learning.
Assistive Technology Tester at BBC in Glasgow, UK.
Accessibility Specialist at Tetralogical in UK.

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