alphagov / wcag-primer

Get up to speed with the Web Content Accessibility Guidelines

WCAG Primer

A primer to help people get up to speed quickly with the Web Content Accessibility Guidelines.

Contains:

• an overview of WCAG.
• information for each success crteria - including an understandable explanation, details of what is required, example of common issues and links to further content
• the most relevant success criteria for content, design and code
• some questions to help you evaluate if a digital product meets WCAG

https://alphagov.github.io/wcag-primer/

Contributing

This WCAG Primer is for everyone. You can help make sure it stays up to date by:

1. Making changes to the WCAG primer on Github.

To contribute to this repository, you first need to fork it* You can raise PRs from your forked copy.

2. Emailing the Accessibility Capability team at [email protected] with suggestions

This repo uses Middleman. To test changes locally, run:

bundle exec middleman server

The text lives in the source/sc folder, and is in markdown format.

Deploying changes

This project is continuously deployed - merging a pull request into main will cause the site to be built and any changes added to the gh-pages branch.

wcag-primer's Issues

The 'path-based gesture' explanation is unclear in SC 2.5.1

The explanation of 'path-based gesture' currently reads:

"If an interaction is not just the end-to-end part but important but also the road or path taken. These gestures could be swiping, dragging items or drawing."

That sentence is not clear.

Error in checklist question for 2.5.2

I believe that the expected outcome for 2.5.2 should be the opposite of what the question suggests. (i.e. The functionality should not be triggered the moment on the down event).

• 2.5.2: "Does some of your site functionality work using a single point (e.g fingertip) and is it triggered the moment it is touched?"

Overview summary of 2.4.6 doesn't match the meaning of the success criterion

What the summary of 2.4.6 on the overview page says

On the overview page, the summary of Success Criterion 2.4.6 currently tells readers to "provide headings and labels":

Provide headings and form labels that will help people find content and complete tasks.

What the official phrasing of 2.4.6 says

But in fact, WCAG SC 2.4.6 doesn't require headings and labels to be provided (that's covered by 1.3.1 and 1.4.2). It only says that headings and labels that are provided must accurately describe topic or purpose:

2.4.6 Headings and Labels: Headings and labels describe topic or purpose. (Level AA)

So, not using labels or headings is not a violation of 2.4.6. What is a violation of 2.4.6 is using labels or headings that don't correctly describe the topic of their associated section or input.

The summary of 2.4.6 on the 'All requirements' page is correct

The summary of 2.4.6 in the 'All requirements' page gets that right:

Headings must indicate the topic or purpose of the content in that section of the page, and labels must indicate the purpose of the field they relate to.

1.3.2. Meaningful sequence appears twice in the list of All Success Criteria

1.3.2. Meaningful sequence, together with its description, appears twice in a row.

https://alphagov.github.io/wcag-primer/all.html#1-3-2-meaningful-sequence-a

Accessibility testing template spreadsheet is access-restricted

On the document issues wiki page, there is a link to a spreadsheet which isn’t publicly viewable:

Richard Morton's WCAG 2.0 accessibility testing template (XLSx) - note this is based on an older version of WCAG)

It would be nice if this was publicly viewable – or if this is intentional, maybe add a "(access restricted)" note?

Overview summary of 1.4.10 is misleading

The overview summary of Success Criterion 1.4.10 'Reflow' currently reads:

Where content is zoomed there should be no loss of information or functionality. In particular on smaller devices or resolutions of 320px (vertically) or 256px (horizontally) there should be no scrolling in two directions when resized.

When I read this, it took me a while to understand what '320px (vertically)' and '256px (horizontally)' meant. I interpreted it as:

• 320px in the vertical dimension
• 256px in the horizontal dimension

But that interpretation is incorrect as per WCAG Success Criterion 1.4.10:

• Vertical scrolling content at a width equivalent to 320 CSS pixels;
• Horizontal scrolling content at a height equivalent to 256 CSS pixels.

We should clarify and remove the misleading ambiguity.

SC 2.5.4 mentions 'prefers-reduced-motion', which is out of scope for 2.5.4

In the '2.5.4 Motion Actuation' section of the 'All requirements' page, one of the requirement and all of the resources relate to honouring users' preferences for reduced animation motion:

Use the new prefers-reduced-motion CSS declaration. This will detect if the user would like to reduce animation or motion on the pages they visit.

Those are not within the scope of SC 2.5.4 'Motion Actuation'. They fall under SC 2.3.3 'Animation from Interactions', which is out of scope for this guide as it's AAA-level..

Checklist question for 2.5.2 and 2.5.4 are missing parts

The checklist questions for 2.5.1 and 2.5.4 describe the precondition for the tests, but not the expected outcome:

• 2.5.1: "Does some of your site functionality need several fingers or complex gestures to operate it?"
• 2.5.4: "Does your site respond to motion or movement to operate parts?"

1.4.13: Requirement for 'Hoverable' is unclear

The requirements for the 'hoverable' part of 1.4.13 Content on Hover and Focus say to:

Manage focus and move the mouse pointer directly from the trigger onto the new content.

I don't understand what 'manage focus' means in the context of making an element hoverable.
It sounds like "manage focus" refers to managing keyboard focus.

Note: I'm reporting all these issues because I believe that this doc will be very useful to many people once it's finalised.

1.4.13: I'm not sure why the overview says it's only "for mobile or tablet devices"

The overview of 1.4.13 Content on Hover and Focus stats with ...

This is for mobile or tablet devices - ...

I don't believe that SC 1.4.13 is just or mobile or tablet users. Parts of it are for mouse and desktop-type screen reader users too.

I believe that "This is for mobile or tablet devices -" should be removed.

2.1.1. doesn't accurately summarise the WCAG success criterion

The issue is both on the index page and on the details page for 2.1.1.

I have submitted a pull request to fix it: #34

1. Issue on the index page

Current phrasing

"Make sure every task can be completed without a mouse."

Problem

This doesn't work as an accurate summary of the success criterion, because:

• it doesn't mention keyboard at all, which is what this requirement is about
• it could suggest that if every task can be completed with a touch screen, then the criterion would be met. This is not the case.

Proposed solution

I propose rephrasing the summary to:
"Make sure every task can be completed using just a keyboard."

2. Issue on the details page

Current phrasing

"It must be possible for someone using a keyboard or touch device to complete all tasks in a service. This ensures that people with mobility impairments who do not use a mouse can successfully complete their goals."

"Requirements / What to do?

• All interaction and functionality is usable with a keyboard;
• All interaction and functionality is usable on a touch-screen device."

Problem

This is confusing in the same way. It suggests that if a user can complete tasks using a touch screen device, the success criterion is met. But in the official W3C WCAG, this success criterion is not about touch screen at all.

Proposed solution

I suggest rephrasing the intro paragraph to this:

"It must be possible for someone using only a keyboard (or a device that emulates keyboard commands) to complete all tasks in a service. This ensures that people with mobility or dexterity impairments who do not use a mouse can successfully complete their goals."

I also suggest deleting the second requirement about touch-screen device.

Add a MIT Licence

A heading for guideline 2.5. Input Modalities is missing on the Overview page

A heading for Guideline 2.5 Input Modalities is missing on this page:
https://alphagov.github.io/wcag-primer/index.html#guideline-2-4-provide-ways-to-help-people-navigate-and-find-content

Success Criteria 2.5.1 to 2.5.4 are listed under Guideline 2.4.