axe-con 2024
A round up of talks at the largest a11y conference in the world
In February, I (virtually) attended axe-con 2024: the world’s largest digital accessibility conference, with more than 60 talks in multi-track sessions across 3 days. As a full-stack developer, I mostly focused on the Development track talks, but the variety in the other tracks (Design, Organisational Success with Accessibility and Wildcard) meant there was something for everybody.
axe-con is organised by Deque, the provider of many well-known a11y (accessibility) tools such as axe-core. They certainly practice what they preach: all live sessions had captions and American Sign Language provided. Many of the speakers also made an effort to describe the images in their slides for visually impaired attendees.
The sessions had interactive chat, Q&A and polling, as well as being recorded and made available on demand. In fact, last year’s recordings are also still available to view in the 2023 session archives. With the event having free registration, these recorded talks are fantastic resources for anyone interested in learning more about accessibility - which should be anyone working in digital experiences.
Does your design conform with WCAG accessibility guidelines — or does it comply?
Cintia Pereira Romero Garcia: Pinterest, Sr. Product Designer, Design Systems
Cintia started by discussing the difference between accessibility compliance (adhering to mandatory a11y standards by law) and conformance (either formally or informally giving voluntary commitment to a11y guidelines), and explained the reasons why conformance is beneficial for everyone.
She then discussed the principles followed at Pinterest to conform with WCAG AA standards, and gave practical examples of how these principles are applied on their design system Gestalt.
There were good ideas for how accessibility can be catered for in the design process, for example by including accessibility as part of design handoff, and having a checklist to follow for Figma components.
I also liked the accessibility scorecard shown for each component in the design system documentation.
This was probably my favourite talk and the one I got the most out of. In particular, I noted down a lot of very useful-looking resources that she mentioned:
- Microsoft inclusive design toolkit - a set of resources provided by Microsoft
- Gestalt accessibility guidelines - the a11y approach taken on Pinterest’s design system
- W3 Digital Accessibility Foundations - a free online course
- WhoisAccessible.com - a mixture of a11y resources and reviews of a11y solutions
- Making Pinterest More Inclusive Through Design Systems - Cintia’s talk from axe-con 2023
Get It Right the 1st Time: Stop 80%+ of A11Y Bugs During Development
Sachin Gupta: Deque Systems, Inc., Vice President of Product Management
Glenda Sims: Deque Systems, Chief Information Accessibility Officer
This talk demonstrated how Deque’s suite of accessibility testing tools can be used to discover and fix a11y bugs during development.
As an introduction, Sachin highlighted how similar the procedures are for digital IT security and a11y in terms of policy, monitoring and providing training and tools.
He also emphasised the importance of shifting a11y testing earlier in the software development lifecycle - it can be up to 30 times more expensive to fix an a11y issue found in production, compared to finding and fixing it at the design or development stage. As a demonstration of this, he showed how long it takes just to document a simple accessibility bug in the way that a QA tester would do: time which would have been unnecessary to spend if the bug had been found at the development stage.
He then moved on to showing how to findi and fix a11y bugs using each of the following methods:
- Automated testing using axe DevTools, which is Deque’s free web accessibility testing browser extension for Chrome.
- Linting using axe-linter. The VS Code linter extension produces the same output as the in-browser automated testing, but saves you time by immediately alerting you to potential issues in the code editor. It can also be set up to run with things like GitHub actions.
- Intelligent Guided Testing (IGT). This is available with the Pro version of axe DevTools, and involves the tester being asked a series of questions about elements on the page, such as "Should all of these heading elements actually be headings?" and "Are each of these heading levels appropriate?".
Finally, he shared data collated from years of WCAG comprehensive audits on new Deque clients. The data showed that 57% of WCAG 2.x issues could be found with axe-core automated testing, while an additional 23% could be discovered with IGT.
A lot of this talk did feel like an extended advert for Deque’s products, but the IGT tool did seem to offer something different to the usual methods of testing, which I hadn’t seen before.
Accessible Component Libraries: The Foundation of Accessibility at Scale
Rachael Yomtoob: Deque Systems, Inc., Developer Advocate
Rachael initially covered the essentials of component libraries (and how they are different to design systems), then moved on to a demonstration of Deque’s React-based component library Cauldron React. This is used internally on Deque’s products but is open-source.
Cauldron has a set of accessibility principles, which are based on an article titled Accessibility By Default. They gave examples of how each principle is applied in the component library, such as the automatic ID generation.
Rachael also ran through the testing set-up for this component library - Enzyme and Jest are used for unit testing, with jest-axe used for accessibility testing in these unit tests. axe-core with puppeteer is used for end-to-end testing on the documentation site. The team also periodically do a full manual accessibility audit.
Similarly to the talk above on accessibility testing, this did feel quite heavy on the promotion of Deque’s suite of tools (although given both sets of speakers work at Deque, that’s kind of understandable) - I maybe would have got more out of these talks if we used any of their products at Etch. However it was interesting to see the component library of a company whose main focus is accessibility, and I would consider referring to it in the future for ideas on how to solve a11y issues for React components.
Future of accessibility guidelines
Wilco Fiers: Deque Systems, Senior Accessibility Engineer
Glenda Sims: Deque Systems, Chief Information Accessibility Officer
This was quite a technical talk on the future of WCAG (Web Content Accessibility Guidelines) and the complex process of changing from WCAG 2.x to WCAG 3.0. I only really skimmed this one as it was more focused on the intricate process of producing the new guidelines, and it probably would have been of more interest to someone with a greater depth of knowledge about WCAG.
Building an Enterprise-Level Accessibility Skills Program for Development Teams
Shivaji Kumar: U.S. Bank, Accessibility Manager
This talk discussed the use of competency based training for accessibility development - why it’s needed and the approach adopted at US Bank.
Although this talk was more focused on how to approach accessibility training for larger development teams (which Etch are not!), I found the ideas on what could be covered in accessibility training for web developers useful. At US Bank, they have so far used training modules provided by Deque on the following topics:
- Semantic structure and navigation.
- Device-independent user input methods.
- Form labels, instruction and validation.
ARIA (are ya) afraid of the dark?: Unmasking common HTML monsters to create better user experiences
KJ Schmidt: ADP, Lead Accessibility Designer
I watched this talk because I liked the title and it sounded more code-focused, but it turned out to be aimed much more at designers so I sped through some parts: the bulk of the content was teaching some of the basics of semantic HTML for accessibility, such as aria attributes, roles and accessible names.
However, as a developer, I found it useful to understand how a designer could use knowledge of HTML to make design decisions for accessibility. For example, an understanding of what you get ‘for free’ with native elements, aria attributes etc. could help a designer know when additional content is needed to make an element on a page accessible. Another example was how a designer could use knowledge of the design system code (from collaborating with a developer) to decide which design system component should be used based on what roles they have.
Summary
With such a large number of talks across so many different topics, it would be near impossible to watch all of them. However given the talks are all recorded and freely available after the conference has finished, I would happily revisit the agenda (and the 2023 session archives) any time I have a free hour to see what I might have missed.