This book will assist frontend developers in building accessible e-commerce websites and components. #accessibility #html #css #tips

In May - June 2021, WebAIM surveyed preferences of screen reader users. We received 1568 valid responses. This was a follow-up to 8 previous surveys that were conducted between January 2009 and September 2019.

An open letter about accessibility overlays. #accessibility

How has Encore grown and evolved over the last few years? Find out what our design systems team has been up to and the learnings along the way.
#accessibility #design-systems #f:article

Ad Hoc brings small teams of skilled professionals together to build government digital services that are fast, efficient, and usable by everyone. #design-systems #f:article #accessibility

Accessibility is unfortunately still an afterthought on many projects. User interaction and accessibility requirements are poorly documented, at best. Or forgotten, when handing over designs to developer teams. And fixing it later costs a LOT more than building it right to begin with. Great documentation helps teams implement accessibility requirements the right way. I will tell you why, what and how designers can document different aspects of accessibility and user interactions requirements, to build better more inclusive products.

via: axe-con confence

Choosing a UI web framework or library is often difficult. There are plenty to choose from, so you have to take different factors into account: number and quality of the components, performance, ongoing development, license or language support. Way too often accessibility (a11y) doesn't make it high on that list, unfortunately.

Your website should be inclusive of, and accessible to, as many people as possible. This essential tool for Webflow users contains guidelines derived from WCAG, including how to implement them with no and low-code solutions.

Instantly test how accessible your experience is with the real assistive technologies your disabled users rely on — screen readers, magnifiers, and more — from any computer.

#accessibility #ux-usability

Shipping accessible features is as essential for a frontend developer as shipping features without bugs. Here is a list of tools I regularly use to make sure everything I do is accessible for folks with different abilities, whether they are blind or holding a sandwich in their hand. I’ll start with tools that will give us immediate feedback when we’re writing code, and continue with tools that we have to run ourselves or guide us on how to test things manually. This article will be useful not only for developers but also for designers, project managers, and other team members — many of the tools could be used directly in the browser and don’t require any technical knowledge.

The goal of this project is to create a common library of generic web components, that are accessible, framework agnostic, easy to style, and easy to consume.

Recommended by: CSS-Tricks

Reach UI seeks to become the accessible foundation of your React-based design system. It’s early, so there isn’t a whole lot here yet.

The «Accessibility Developer Guide» is an initiative of «Access for all», Swiss Foundation for technology adapted to people with disabilities. It is developed and maintained in collaboration with a number of acclaimed web agencies. The vision behind the Accessibility Developer Guide is to bridge the gap between providers of websites and users with special needs.

Polyfill for the HTML dialog element

A11Y Nutrition Cards is an attempt to digest and simplify the accessibility expectations when it comes to component authoring. Based on the WAI ARIA Authoring Practices Guide.

Sticking with a native form control will almost always give your users a more accessible experience than trying to recreate one from scratch. Though the issue with native form controls is that they have an infamous reputation for being problematic to style.

Outside of some of the HTML5 form controls, which have browser prefixed CSS selectors for styling hooks, this reputation still holds true. In some cases (e.g. option elements) styling support has actually decreased in some browsers. Fortunately, there have been many experiments with markup and CSS over the years to (mostly) get around the limitations of many native form controls, without having to disregard them completely.

Target elements if they are focused or contain a focused element with a PostCSS plugin and Javascript script