Web Axe – blog and podcast on web accessibility

Upcoming Accessibility Events (mid-2021)

Post author By Dennis
Post date March 18, 2021
2 Comments on Upcoming Accessibility Events (mid-2021)

With CSUN and axe-con ending, what are other events or conferences are coming up? Here’s a list of upcoming digital accessibility events in mid-2021. Feel free to comment with more.

TechAccess Oklahoma 2021, April 20-22
Added: Web4All April 19-20
Making a COVID-19 Site Accessible: From Tweet to Action (live YouTube), A11yTalks series, April 22
A Future Date conference, date to be announced @afuturedateconf
Global Accessibility Awareness Day, May 20 #GAAD
Accessibility Camp Bay Area, May 22, @A11yCampBay
John Slatin Virtual AccessU 2021, May 13 and 18–20, Knowbility
Accessibility Toronto Camp, Saturday May 29, tweet announcement, @a11yTO #a11yTOCamp
Inclusive Design 24 returns September 16, @id24conf #id24
M-Enabling Summit, October 4-6, 2021, Washington DC @menablingsummit
Accessing Higher Ground – November 15-19, submit speaker proposal (due 5/12)

Also, check out my Twitter list of accessibility meetups around the world.

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.

code design roundup

Web Accessible Code Libraries and Design Patterns

Post author By Dennis
Post date January 7, 2021
11 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
BBC GEL
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