惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Cisco Talos Blog
Cisco Talos Blog
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
爱范儿
爱范儿
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
Jina AI
Jina AI
雷峰网
雷峰网
The Register - Security
The Register - Security
The Cloudflare Blog
博客园 - 【当耐特】
M
MIT News - Artificial intelligence
I
InfoQ
博客园 - 三生石上(FineUI控件)
H
Help Net Security
博客园 - 司徒正美
Vercel News
Vercel News
WordPress大学
WordPress大学
S
SegmentFault 最新的问题
云风的 BLOG
云风的 BLOG
B
Blog
Google DeepMind News
Google DeepMind News
B
Blog RSS Feed
L
LangChain Blog
人人都是产品经理
人人都是产品经理
GbyAI
GbyAI
T
The Blog of Author Tim Ferriss
T
Tailwind CSS Blog
aimingoo的专栏
aimingoo的专栏
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
Recorded Future
Recorded Future
小众软件
小众软件
Martin Fowler
Martin Fowler
罗磊的独立博客
Stack Overflow Blog
Stack Overflow Blog
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
酷 壳 – CoolShell
酷 壳 – CoolShell
腾讯CDC
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
Apple Machine Learning Research
Apple Machine Learning Research
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
博客园 - Franky
Hugging Face - Blog
Hugging Face - Blog
Y
Y Combinator Blog
V
Visual Studio Blog
F
Fortinet All Blogs
Microsoft Azure Blog
Microsoft Azure Blog
大猫的无限游戏
大猫的无限游戏
Engineering at Meta
Engineering at Meta
N
Netflix TechBlog - Medium
V
V2EX
Blog — PlanetScale
Blog — PlanetScale

TetraLogical Blog

Designing for people with reading disabilities - TetraLogical Designing for people who are D/deaf - TetraLogical Designing accessible documents - TetraLogical Introduction to creating accessible documents - TetraLogical Inclusive user research: vulnerable people - TetraLogical Designing for people who are blind - TetraLogical Designing for people with low vision - TetraLogical Meet the team: Niamh Madden - TetraLogical Designing for people with anxiety - TetraLogical Designing for people with disabilities - TetraLogical Accessible building blocks for the web videos - TetraLogical Common accessibility misconceptions - TetraLogical Common misconceptions about testing accessibility - TetraLogical Common misconceptions about implementing accessibility - TetraLogical Common misconceptions about WCAG - TetraLogical Common misconceptions about disability - TetraLogical Meet the team: Grace Snow - TetraLogical Sustainable accessibility in complex organisations: strategic foundations - TetraLogical Sustainable accessibility in complex organisations: organisational realities - TetraLogical Sustainable accessibility in complex organisations: external factors - TetraLogical Common misconceptions about screen readers - TetraLogical Guide to the Inclusive Design Principles - TetraLogical Meet the team: Ian Lloyd - TetraLogical Annotating designs using common language - TetraLogical Meet the team: Catriona Morrison - TetraLogical Championing inclusive language - TetraLogical Press release: TetraLogical launches accessible self-led training courses to help digital teams build confidence in accessibility - TetraLogical Why inclusive products are green products - TetraLogical Accessible Recruitment - TetraLogical Accessibility and the agentic web - TetraLogical Meet the team: Craig Abbott - TetraLogical Foundations: types of assistive technology and adaptive strategies - TetraLogical European Accessibility Act (EAA) FAQ - TetraLogical Screen reader HTML support tables - TetraLogical Interview with Lola Odelola - TetraLogical Understanding EN 17161 Design for All - TetraLogical Inclusive user research: building rapport - TetraLogical Foundations: Keyboard accessibility - TetraLogical Can generative AI write contextual text descriptions? - TetraLogical Understanding the European Accessibility Act (EAA) - TetraLogical Meet Josh: a sportsman who has spinal muscular atrophy - TetraLogical Meet Jonathan: a photographer who has ADHD - TetraLogical Foundations: grouping forms with `<fieldset>` and `<legend>` - TetraLogical XR Accessibility: for people with moving disabilities - TetraLogical Meet Andre: a music producer and blind screen reader user - TetraLogical Foundations: types of disability - TetraLogical Meet Lauren: a film editor who has ADHD - TetraLogical Meet Steve: a photographer who is deaf and low vision - TetraLogical Foundations: form validation and error messages - TetraLogical Meet Hasmukh: a blind cricketer and screen reader user - TetraLogical XR Accessibility: for people with hearing disabilities - TetraLogical XR Accessibility: for people with thinking disabilities - TetraLogical XR Accessibility: for people with seeing disabilities - TetraLogical Introduction to XR Accessibility - TetraLogical Foundations: labelling text fields with input and label - TetraLogical Does WCAG 2.2 apply to native apps - TetraLogical Why are my live regions not working? - TetraLogical Building a culture of accessibility - TetraLogical When to use tabindex= Accessibility foundations - TetraLogical Meet the team: Demelza Feltham - TetraLogical Can generative AI help write accessible code? - TetraLogical Meet the team: Steve Faulkner - TetraLogical Meet the team: Gez Lemon - TetraLogical Keyboard accessibility myths and WCAG - TetraLogical Amendment to the Public Sector Accessibility Regulations - TetraLogical What Considerations for TV user interface accessibility - TetraLogical Meet the team: Alistair Duggin - TetraLogical Sticky content: focus in view - TetraLogical The only accessibility specialist in the room - TetraLogical Meet the team: Ian Pouncey - TetraLogical Meet the team: Dean Holden - TetraLogical Meeting WCAG Level AAA - TetraLogical Foundations: accessible names and descriptions - TetraLogical Inclusive XR: accessible augmented reality experiences - TetraLogical Foundations: pointer gestures - TetraLogical Meet the team: Graeme Coleman - TetraLogical Adding sign language to videos - TetraLogical Foundations: introduction to WAI-ARIA - TetraLogical Meet the team: Joe Lamyman - TetraLogical Inclusive XR: accessible 3D experiences - TetraLogical Foundations: visible focus styles - TetraLogical Foundations: target sizes - TetraLogical Meet the team: Henny Swan - TetraLogical Meet the team: Ela Gorla - TetraLogical Foundations: native versus custom components - TetraLogical Foundations: HTML semantics - TetraLogical Accessibility and supporting Internet Explorer - TetraLogical Meet the team: Felicity Miners-Jones - TetraLogical Accessibility and QR codes - TetraLogical Inclusive user research: recruiting participants - TetraLogical Research insight: accessibility of images - TetraLogical Meet the team: Léonie Watson - TetraLogical Android accessibility: roles and TalkBack - TetraLogical Accessible design systems - TetraLogical Meet the team: Patrick H. Lauke - TetraLogical Inclusive user research: analysing findings - TetraLogical How to write user stories for accessibility - TetraLogical Triaging WCAG 2.1 Level AAA - TetraLogical
Design patterns and WCAG - TetraLogical
2024-08-09 · via TetraLogical Blog

Posted on by Graeme Coleman in Design and development

Tags: WCAG

The ARIA Authoring Practices Guide (APG) contains an extensive range of design patterns aimed at helping developers to create accessible web experiences using WAI-ARIA. However, while we encourage web authors to follow these design patterns, a common misconception is that their usage is a prerequisite for conformance.

This is not the case.

Overview

Design patterns have a long history in software development. They provide practical solutions to common problems that occur when interacting with a user interface. For developers, design patterns help contextualise how low level, and often complex, code can be turned into something meaningful and understandable. For users, design patterns help foster familiarity and consistency.

The APG design patterns are often used as a basis for creating accessible user interfaces, and with good reason. They cover different types of user interface components from basic buttons through to carousels and complex grids. Each design pattern includes information about:

  • How WAI-ARIA roles, states, and properties should be applied
  • How keyboard accessibility should be supported, including suggested keystrokes

Additionally, many of the patterns include working examples and code samples that web authors can then adapt to their own specific needs. It's no wonder that widgets built using these design patterns tend to have strong support for accessibility.

However, design patterns are not rules or regulations. Good design patterns can be built upon or modified to meet the changing needs of people and technologies. Design patterns should therefore be treated as best practice guidelines for resolving current problems rather than immovable decrees.

Even so, we are often asked the following question: must my implementation follow the related APG design pattern, or any other design pattern, to conform to the Web Content Accessibility Guidelines (WCAG)?

Normative and informative requirements in WCAG

WCAG, like most specifications, uses the terms normative and informative to distinguish between the parts of the specification that must be met in order to conform (normative) and those that are advisory in nature and don't need to be met in order to conform (informative).

In WCAG, the principles, guidelines, and success criteria are normative, while everything else - including, but not limited to, the techniques and understanding documents - is informative.

While this distinction appears obvious, the terminology can lead to misunderstandings, particularly in terms of whether an approach "passes" or "fails" this success criterion.

Design patterns are informative

The APG's design patterns, like all design patterns and even WCAG's techniques themselves, are informative rather than normative. While it is important to follow common conventions like those built into these design patterns, you are free to produce your own design patterns as long as the resultant implementation meets the related success criteria when implemented.

For example, let's say you are implementing a tabbed navigation widget, and know that you need to ensure it is keyboard accessible. You therefore decide to implement the widget to follow the APG's tabs design pattern. You have implemented it so that, when the widget has focus, tabs can be accessed and selected by pressing the Left and Right arrow keys.

You then find out that a colleague has also implemented a tabbed navigation widget. However, it doesn't use the above keyboard interaction pattern. Although keyboard accessible, a user must press the Tab and Shift + Tab keys to navigate through the tablist, and separately press the Enter key or the Spacebar to select / activate the currently focused tab in order to display its related contents.

Does this mean that your implementation passes WCAG Success Criterion 2.1.1 Keyboard (Level A), but your colleague's implementation does not?

No.

Both approaches conform to the above success criterion. As I discussed in my earlier blog post on keyboard accessibility myths and WCAG, WCAG is primarily concerned with high level outcomes. Here, the tabbed navigation widget will meet this success criterion if it can be operated using the keyboard alone. This is the case in both of the above scenarios. There are no normative requirements for you to support specific keystrokes or follow any particular convention.

Caveats

Of course, conformance should never be viewed in a vacuum. Indeed, there are instances where you should follow design patterns, and indeed we often encourage web authors to follow design patterns like the APG's, even though it is not a WCAG requirement.

For instance, certain screen readers will often automatically announce the keystrokes required to interact with certain types of controls, based on generally accepted interaction methods. On encountering a combobox, JAWS will inform the user that they can change the current selection using the arrow keys. If your custom combobox relies on a different set of keystrokes, such as the Tab and Shift + Tab keys, your combobox will normatively meet the related success criterion, but may be confusing for people who use screen readers who discover that the arrow keys do not work as expected.

Summary

Normatively meeting WCAG success criteria is the minimum required to ensure your site works for people with disabilities. You can achieve this without following best practice guides like the APG design patterns.

However, following those design patterns goes beyond conformance, and benefits real people. Indeed, being consistent and borrowing from well-established design patterns is a key inclusive design principle, as people are more likely to understand how to operate a control when it supports familiar conventions for interaction.

Therefore, even though design patterns are not prerequisites for conformance, we strongly recommend you use them as the basis for designing and implementing an accessible user interface.

Further reading

Next steps

For more information about the Web Content Accessibility Guidelines, read our WCAG primer or find out more about how our assessments can help you identify issues in your websites, mobile applications, design systems, and other products and services.