Testing the accessibility of pattern libraries

Published 2017-07-13 category: thoughts

When assessing how accessible your website or app is, auditors will likely want to look at whole pages. But perhaps most of what you are working on is individual components. I mean, this is how lots of companies work nowadays. Can pattern libraries be tested for accessibility? And if so, what do we test? In this post I will address those questions and look at accessibility testing in different levels of pattern library driven development.

Note that this post is mostly about whether it can be done, as opposed to how, which is a subject all of itself. I may do a post about that later.

A pattern is a reusable piece of your user interface, also known as component or module. It often documents the UI design and is made of code that runs in the browser. Examples of patterns: buttons, messages, accordions, headers, sliders, breadcrumbs and tooltips. A pattern library is a collection of such patterns and slightly more than that. As Alla Kholmotova says in her upcoming book Design systems, it is “a tool to capture, collect and share design patterns and guidelines for their usage.”

With our interface separated into building blocks, it would be great if we can do our accessibility testing pattern by pattern, too. Can we? Well, yes and no.

Let’s start with the bad news. To be able to say something about how accessible your whole site is, you need to assess whole pages, WCAG2 says:

2. Full pages: Conformance (and conformance level) is for full Web page(s) only, and cannot be achieved if part of a Web page is excluded.

But there’s good news, too: there are heaps of accessibility issues that can be spotted on a pattern level, or criteria that can be marked as sufficiently met. Let’s look at how that would work.

What auditors test your site for

When deciding whether something is easy to access for as many people as possible, auditors will make sure four things are the case. They’ll want your site to be:

In WCAG2, the accessibility guidelines, there is a number of criteria categorised under each of these main principles. Knowing those criteria is a great way to learn about making more accessible interfaces. There are quite a few. The actual spec is a good place to read about them and it is also the official norm. There is also the WebAIM checklist, which has slightly more developer-friendly wording and (opinionated) recommendations on how to meet the criteria — it’s a great resource!

Although you cannot formally claim your site’s WCAG2 conformance based on audits of just its components, as we’ve seen above, you can look at many of the criteria on a component level. This can have advantages in comparison with testing whole pages.

Patterns as isolated test cases

At the Patterns Day conference last month, Rachel Andrew mentioned something interesting about patterns. She said that working with reusable interface components, where each one has its own page, made her realise that those work quite well as isolated test cases. I feel this also goes for some accessibility tests: there is a number of criteria where isolation aids testing.

Component-specific guidance is available

Not only can isolating patterns be useful in the testing phase, there is also lots of documentation for accessibility-proofing components specifically. WAI ARIA Authoring Practices describes of common patterns how to get them accessible, with examples of keyboard operability and what should happen to focus. There is also Heydon Pickering’s Inclusive Components Club, which describes in detail what optimisations can be made and how they help whom.

Individual patterns

Let’s look at some things that can be tested when looking just at individual patterns. In order to avoid this to become too high level, I will give some suggested questions for specific, real-world-ish use cases.

Collapsible (“Show/hide”)

Form field

Video player

Assuming your final page only has pattern libary markup, CSS and JS, all of the above things will yield the same test result in isolation and when used in a page. This is what makes them suitable to test on a component level.

I think for most components, there’s a whole lot of accessibility criteria that can be tested. There is also a number of things where we need whole pages, and in some cases, whole pages with the real data. So let’s look at those next.

Whole pages

Some criteria can only be tested in the context of a full page. Some examples:

Headings

IDs

Tab order

Whole pages with real data

Lastly, there are also some aspects that can only be tested when pages are composed and they have real content in them. For instance:

Language

Video player

Alternative content

TL;DR

Although claiming a site meets the WCAG2 criteria has to be based on research of full pages, there are lots of things you can figure out and tackle while working on components with mock data. Above, I have given some examples of such things. I’ve also shown some examples of criteria that would require full and/or finished pages to be properly assessed.

As always, your mileage may vary! I would recommend checking the components you have against the WCAG2 criteria to see which ones can be checked on component level and which require full pages. Hopefully, the examples give an idea of what kind of things can be tested on which level, and when to run (automatic) accessibility tooling through patterns or full pages.

Comments, likes & shares (86)

Brett Jankord, [name='Matt Stow'], Oğuzcan, Irene Frijns, Nivi Morales, jina bells, jina bells, jina all the way., Tanner Dolby, @aulisius_, mateatslc, Sara Soueidan, 𝔍𝔬𝔥𝔞𝔫𝔫𝔢𝔰.𝔭𝔫𝔤, Rinaldo Zanone, br, Lindsay, Matti Järvinen #BlackLivesMatter, Eric Eggert, Monique Dubbelman, wcag_a11y, Vicent Sanchis, Open Web Components, Bram Smulders, Emily Coward, Nir Horesh, Steve Lee, Enrique Sánchez, Joe Dolson, Kayte, Alicia Jarvis (She/Her/Hers), CPACC, CSM 🇨🇦, Nikolay Cholakov🙏4❤, Karen Cohen, WebOverhauls.com, Parthasarathi G K, Laura Eberly, Manuel Razzari, Paul Grenier, Marc Stalfoort, David Hund ✌, Ashley Bischoff and Digital Accessibility liked this

Sara Soueidan, Accessabilly, Matti Järvinen #BlackLivesMatter, Web Axe, André Jaenisch, Joe Dolson, Alicia Jarvis (She/Her/Hers), CPACC, CSM 🇨🇦, Nikolay Cholakov🙏4❤ and Alcina @ a11yTOConf / TPAC reposted this

Chris Myhill wrote on 16 July 2017:
Pretty interesting history lesson here ; when exactly DID CSS get so complicated? hiddedevries.nl/en/blog/2017-0…
Tim Severien wrote on 18 July 2017:
Is it meaningful to test accessibility of pattern libraries? @hdv shares his thoughts: hiddedevries.nl/en/blog/2017-0…
Tim Severien wrote on 18 July 2017:
Is it meaningful to test accessibility of pattern libraries? @hdv shares his thoughts: hiddedevries.nl/en/blog/2017-0…
cyon.ch wrote on 18 July 2017:
Ist CSS seit den 90ern komplizierter geworden? hiddedevries.nl/en/blog/2017-0… #linktipp

kayjj wrote on 25 July 2017:
Can #pattern #libraries be tested for #accessibility? And if so, what do we test? hiddedevries.nl/en/blog/2017-0…
Joulse wrote on 25 July 2017:
This website now uses Grid Layout hiddedevries.nl/en/blog/2017-0…

Jiminy Panoz wrote on 25 July 2017:
Testing the accessibility of pattern libraries hiddedevries.nl/en/blog/2017-0…
Nicki Rios wrote on 25 July 2017:
Testing the Accessibility of Pattern Libraries

hiddedevries.nl/en/blog/2017-0…
Trevor Pierce wrote on 25 July 2017:
Testing the accessibility of pattern libraries hiddedevries.nl/en/blog/2017-0…
Zeldman wrote on 26 July 2017:
✩ Can pattern libraries be tested for accessibility? And if so, what do we test?

hiddedevries.nl/en/blog/2017-0…
UIE wrote on 26 July 2017:
Testing the accessibility of pattern libraries hiddedevries.nl/en/blog/2017-0…
Patu Tifinger wrote on 27 July 2017:
Testing the accessibility of pattern libraries hiddedevries.nl/en/blog/2017-0…
Jeremy Keith wrote on 27 July 2017:

Testing the accessibility of pattern libraries

Riffing on Rachel’s talk at Patterns Day:

At the Patterns Day conference last month, Rachel Andrew mentioned something interesting about patterns. She said that working with reusable interface components, where each one has its own page, made her realise that those work quite well as isolated test cases. I feel this also goes for some accessibility tests: there is a number of criteria where isolation aids testing.

Hidde specifically singles out these patterns:

  • Collapsible (“Show/hide”)
  • Form field
  • Video player
Adactio Links wrote on 27 July 2017:
Testing the accessibility of pattern libraries hiddedevries.nl/en/blog/2017-0…
Matteo Pescarin wrote on 27 July 2017:
Testing the #accessibility of pattern libraries hiddedevries.nl/en/blog/2017-0… #Webdesign /cc @craftui
まとり wrote on 2 August 2017:
見てる / Testing the accessibility of pattern libraries hiddedevries.nl/en/blog/2017-0…
Joomla Experte wrote on 2 August 2017:
Testing the #accessibility of pattern hiddedevries.nl/en/blog/2017-0… #a11y
G. Katsiakoudis wrote on 2 August 2017:
Testing the #accessibility of pattern hiddedevries.nl/en/blog/2017-0… #a11y
Carie Fisher wrote on 2 August 2017:
Testing the accessibility of pattern libraries hiddedevries.nl/en/blog/2017-0… (cc @heydonworks @MichielBijl)
あほむ wrote on 2 August 2017:
Testing the accessibility of pattern libraries hiddedevries.nl/en/blog/2017-0…
azu wrote on 3 August 2017:
項目別のアクセシビリティのテストケース "Testing the accessibility of pattern libraries" hiddedevries.nl/en/blog/2017-0… #accessibility #testing
azu wrote on 3 August 2017:
#ahomu "Testing the accessibility of pattern libraries" hiddedevries.nl/en/blog/2017-0…
louismcdonald ☜ wrote on 9 August 2017:
What auditors test your site for hiddedevries.nl/en/blog/2017-0… #a11y
Viljami Salminen wrote on 1 September 2017:
Testing the accessibility of pattern libraries hiddedevries.nl/en/blog/2017-0…
Nils Schönwald wrote on 21 September 2017:
Testing the accessibility of pattern libraries hiddedevries.nl/en/blog/2017-0…
Jeroen Hulscher wrote on 21 September 2017:
Hee @petervangrieken en @hdv, zin om een biertje te doen in 020 vanavond? Beetje bijpraten over #a11y?
Steve Lee wrote on 27 February 2020:
2 great posts by @hdv on what Pattern and Component Libraries can bring to the #accessibility party - hiddedevries.nl/en/blog/2019-0… & hiddedevries.nl/en/blog/2017-0… #a11y
Steve Lee wrote on 27 February 2020:
2 great posts by @hdv on what Pattern and Component Libraries can bring to the #accessibility party - hiddedevries.nl/en/blog/2019-0… & hiddedevries.nl/en/blog/2017-0… #a11y
Hidde wrote on 31 October 2020:
woops, let me fix! Dutchman trying to English :D
Hidde wrote on 31 October 2020:
could you elaborate on how the meaning is different? my dictionary is not being helpful
Florian Beijers wrote on 31 October 2020:
Forthcoming is not necessarily wrong, as it can mean impending, about to happen, but it can also mean "made available when required" as in " Support was not forthcoming". In this sentence, the word is somewhat ambiguous :)
Florian Beijers wrote on 31 October 2020:
heh, fellow dutchman who taught remedial English for a time correcting the dutchman trying to English :) all good, figured I'd let you know :)
Florian Beijers wrote on 31 October 2020:
psst :) "forthcoming book" ...I think you want " upcoming" here. forthcoming means something else :)
Nir Horesh wrote on 31 October 2020:
We have a whole team working in this exact problem for years (in addition making sure all the components are accessible and some other things) order, focus management, naming and so much more
Steve Lee wrote on 31 October 2020:
This
The A11Y Project wrote on 23 December 2020:
"Can pattern libraries be tested for accessibility? And if so, what do we test?" @hdv hiddedevries.nl/en/blog/2017-0…
Florian Weil wrote on 4 January 2021:
Great article: Testing the #accessibility of pattern libraries hiddedevries.nl/en/blog/2017-0… #a11y #design #ux #ui #webdev #WebDeveloper #designsystem #storybook #Engineering
やまのく🐙 wrote on 19 October 2021:
Reading… Testing the accessibility of pattern libraries hiddedevries.nl/en/blog/2017-0…