Changes in WCAG 2.1

The WordPress AccessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) team is updating the existing WordPress accessibility standards for development. Web Content Accessibility Guidelines (WCAGWCAG WCAG is an acronym for Web Content Accessibility Guidelines. These guidelines are helping make sure the internet is accessible to all people no matter how they would need to access the internet (screen-reader, keyboard only, etc) https://www.w3.org/TR/WCAG21/.) are the industry standard recommendations for improving web accessibility. The current WordPress accessibility standards are shifting from WCAG 2.0 to WCAG 2.1.

WCAG 2.1 was published on June 5, 2018. WCAG 2.0 guidelines are built into 2.1 so by conforming to 2.1, you are conforming to 2.0. Where it differs is that WCAG 2.1 has an additional 17 success criteria targeted at users with cognitive or learning disabilities, low vision, and disabled users on mobile devices. 

The WordPress Accessibility Handbook, Accessibility Core Standards, and Accessibility Pattern Library are being updated to reflect these changes and provide better guidance. This will include:

  • the principles, guidance and success criteria for conforming to WCAG 2.1
  • a list of documents and resources (technical and non-technical) for reference
  • a library of patterns (good and bad) with examples that will help improve the user interface

Below is a summary with examples of the additional success criteria for WCAG 2.1 under each of the principle and corresponding guideline.

Principle: Perceivable

Guideline 1.3 Adaptable

1.3.4 Orientation — Level AA

Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential. 

Example:

This would be an uncommon scenario in WordPress. A hypothetical example might be implementing an editing interface that only worked in landscape format, because some tools were not visible on screen in a narrower viewport. 

1.3.5 Identify Input Purpose — Level AA

The purpose of each input field collecting information about a user can be programmatically determined.

Example:

This success criteria essentially means “use supported autocomplete attributes when they are relevant.” When collecting common user information, such as name, email, address, or other common information, the fields collecting that information must use the relevant autocomplete attribute. This aids users with cognitive or mobility impairments.

Guideline 1.4 Distinguishable

1.4.10 Reflow — Level AA

Content can be presented without loss of information or functionality and without scrolling in two dimensions.

Example:

The table element, in normal usage, has a significantly limited capability to be responsive while retaining the semantic value of a table. This commonly results in the need to scroll vertically to see all rows and horizontally to see all columns. Interfaces must avoid requiring users to scroll in multiple directions to see content. 

1.4.11 Non-text Contrast — Level AA

The visual presentation of content images and user interface components must have a contrast ratio of at least 3:1 against adjacent colors.

Example:

Form fields, buttons, or icons that are not supplemental to text are all examples of design elements that now have a contrast requirement. WordPress has applied this expectation in coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. for several years already, so this should not have any profound impact on design expectations.

1.4.12 Text Spacing — Level AA

No loss of content or functionality should occur when line-height, paragraph spacing, letter spacing, and word spacing is changed.

Example:

Users may employ custom stylesheets or other mechanism to make text more readable for their needs. While primarily targeted at text, it may result in unexpected overlaps when containers become wider or taller. Test with the text-spacing bookmarklet (https://codepen.io/stevef/pen/YLMqbo/

1.4.13 Content on Hover or Focus – Level AA

When hover or focus states are used to reveal and hide content, the content can be dismissed without moving hover or focus; hover can be moved over the revealed content without a loss of visibility of the content; and the content remains visible until the hover or focus trigger is removed, the user dismisses the content, or the information is no longer valid.

Example:

A standard tooltip (using the ‘title’ attribute) violates most of these requirements. It becomes visible only on hover, you cannot move the hover pointer over the content, and disappears after a pre-set timeout. An accessible tooltip would need to meet the criteria specified. Principle: Operable

Guideline 2.1 Keyboard Accessible

2.1.4 Character Key Shortcuts – Level A

If a keyboard shortcut is implemented using only letter, punctuation, number, or symbol characters, then it is possible to either disable or remap the shortcut or the shortcut is only active when the reacting component has focus.

Example:

A shortcut that requires a non-printable key to activate, such as Alt, Cmd, or Ctrl is not a single-key shortcut. However, the comment navigation shortcuts (j, k, a, s, d, z, u, r, q, and e) in WordPress are single-key shortcuts that could cause problems. They are disabled  on a user-by-user basis and default to off, however, which meets the required criteria. 

Guideline 2.5 Input Modalities

2.5.1 Pointer Gestures – Level A

All functionality that uses multipoint or path-based gestures can be operated with a single pointer without a path gesture.

Example:

A slider or carousel that is navigated by swiping, pinch gestures to zoom in and out on a map, or a value slider incremented only on strict left/right axis operation are examples of problematic interfaces. 

2.5.2 Pointer Cancellation – Level A

For functionality operated using a single pointer, at least one of these is true: execution does not occur on the down event; completion is on the up event, and a mechanism is available to abort or undo after completion; the up event reverses the outcome of the preceding down event, or it is essential that the event occur on the down event.

Example:

The purpose of this criteria is error prevention. Events executed on a down event have no safety exception to prevent accidental actions. The primary example of essential action include keyboard emulations or other examples emulating a trigger action (piano keyboard, shooting game implementations, etc.)

2.5.3 Label in Name – Level A

For interface components with labels including visible text, the accessible name of the component contains the visible text. 

Example:

If the visible text on a button is “Submit”, then “Submit” is a valid accessible name, and so is “Submit the Entry Form” (with “the entry form” as hidden screen reader text.) If the button contained an aria-label with the text “Send the Entry Form”, that would not be valid, as the aria-label attribute has overridden the accessible name and there is no match between the visible text and the control’s name. 

2.5.4 Motion Actuation – Level A

If functionality is activated or operated using device motion, the motion can also be operated using user interface components and the motion actuation can be disabled.

Example:

Features such as “Shake to Undo” or tilt to advance pages may impose barriers to users. A mobility impaired user with a device held in a fixture may not be able to tilt the device; a user with Parkinson’s or Multiple Sclerosis may undo an action unintentionally. 

2.5.5 Target size – Level AAA

The size of the target for pointer inputs is at least 44 by 44 CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. pixels unless it’s: duplicated by another control that meets this requirement; an inline target with a sentence or blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. of text; determined by the user agent; or essential to the information conveyed.

Example:

This is a level AAA criteria, but it is our intention to meet the requirement as well as we can. This primarily effects the size of controls, such as buttons to close modals, tools within the editor, or submit buttons. An example of an essential target size might be when displaying an uploaded image; if the image is smaller than 44 x 44 CSS pixels but is an actionable control, it should be displayed at true size. 

Principle: Robust

Guideline 4.1 Compatible

4.1.3 Status Messages – Level AA

Status messages can be programmatically determined through role or properties such that they can be presented using assistive technologyAssistive technology Assistive technology is an umbrella term that includes assistive, adaptive, and rehabilitative devices for people with disabilities and also includes the process used in selecting, locating, and using them. Assistive technology promotes greater independence by enabling people to perform tasks that they were formerly unable to accomplish, or had great difficulty accomplishing, by providing enhancements to, or changing methods of interacting with, the technology needed to accomplish such tasks. https://en.wikipedia.org/wiki/Assistive_technology without moving focus.

Example:

This is an extremely common pattern throughout WordPress. Most status messages can be communicated by using `wp.a11y.speak()`, though in some cases it may be necessary to use an independent handler. ARIA roles such as ‘alert’ or properties like ‘aria-live’ are required to receive messages that will be observed by assistive technology.

How to Meet WCAG (Quick Reference) offers a complete list of all the success criteria and techniques for 2.1. Please help us make WordPress more accessible.

Thanks to @joedolson @afercia and @jillmugge for drafting, editing and providing feedback to this post.

#accessibility, #accessibility-docs

Accessibility Team Meeting Agenda: July 30, 2021

This is the proposed agenda for the weekly AccessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) Team meeting on Friday, Luly 30, 2021 at 16:00 UTC.

  • Accessibility team’s quarterly updates
  • Updates from the team’s working groups:
    • Design
    • Documentation
    • General
    • GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/
    • Media
    • MetaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress.
    • Themes
  • Open floor

If you want to have a topic added to the agenda, please mention it in the comments of this post.

The Accessibility Team bug-scrub will be held on July 7, 2021, at 15:00 UTC.

This meeting is held in the #accessibility channel in the Making WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. (requires registration).

#agenda

Accessibility Team Meeting Agenda: July 23, 2021

This is the proposed agenda for the weekly AccessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) Team meeting on Friday, July 23, 2021, 16:00 UTC.

  • Review the team’s activities for the 5.8 release
  • Updates from working groups
  • Request Accessibility Team feedback on GitHubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ PR Fix some JAWS bugs #33627.
  • Open floor

If you want to have a topic added to the agenda, please mention it in the comments of this post.

The Accessibility Team bug-scrub will be held on Friday, July 23, 2021, 15:00 UTC.

This meeting is held in the #accessibility channel in the Making WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. (requires registration).

#agenda

Accessibility Team Meeting Notes: July 16, 2021

These are the weekly notes for the AccessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) Team meeting that happens on Fridays. You can read the full transcript on our Slack channel and find the meeting’s agenda here.

GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ PR Add a Navigation Heading block. #33351 needs Accessibility team feedback

This was discussed during the meeting and a follow-up comment was added to the pull request.

Collect opinions surrounding removing the landmark/region from the "Open publish panel" button in Gutenberg. Related issue: Reconsider save and publishing flow for keyboard users #30634

The Accessibility team seems to be happy to keep the landmark/regions in place for the "Open publish panel" button.

Open floor

#meeting-notes

Accessibility Team Meeting Agenda: July 16, 2021

This is the proposed agenda for the weekly AccessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) Team meeting on Friday, July 16, 2021, 16:00 UTC.

If you want to have a topic added to the agenda, please mention it in the comments of this post.

The Accessibility Team bug-scrub will be held on Friday, July 16, 2021, 15:00 UTC.

This meeting is held in the #accessibility channel in the Making WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. (requires registration).

#agenda

Accessibility Team Meeting Notes: July 9, 2021

These are the weekly notes for the AccessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) Team meeting that happens on Fridays. You can read the full transcript on our Slack channel and find the meeting’s agenda here.

Decide on how to best track accessibility tickets on MetaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. TRACTrac Trac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/.

Right now, there is no good way to track accessibility tickets on Meta TRAC. @joedolson offered to follow-up with the Meta team to find out if adding Focus to Meta TRAC would be a viable option.

Updates from working groups

Only groups that provided updates are shown below.

Documentation

Update from @azhiyadev.

We are working on a Pattern library and currently moving content over from our working Google doc to Make. If anyone wants to work on a Pattern, please let me know.

Media

Everything for 5.8 is good. Holding a meeting next week to discuss 5.9 goals. Any outstanding media accessibility issues can be sent to @joedolson.

Meta

The team is currently working on the themes directory.

Open floor

Testing is always welcome, please help us test WordPress 5.8 Full Site Editing Features.

#meeting-notes

Accessibility Team Meeting Agenda: July 9, 2021

This is the proposed agenda for the weekly AccessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) Team meeting on Friday, July 9, 2021, 16:00 UTC.

  • Decide on how to best track accessibility tickets on MetaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. TRACTrac Trac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/.
  • Updates from working groups
  • Open floor

If you want to have a topic added to the agenda, please mention it in the comments of this post.

The Accessibility Team bug-scrub will be held on Friday, July 9, 2021, 15:00 UTC.

This meeting is held in the #accessibility channel in the Making WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. (requires registration).

#agenda

Accessibility Team Meeting Agenda: July 2, 2021

This is the proposed agenda for the weekly AccessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) Team meeting on Friday, July 2, 2021, 16:00 UTC.

  • Finish reviewing the TRACTrac Trac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/. workflow keyword proposal
  • Call for WordPress 5.9 Accessibility team goals
  • Updates from the working groups
  • Open floor

If you want to have a topic added to the agenda, please mention it in the comments of this post.

The Accessibility Team bug-scrub will be held on Friday, July 2, 2021, 15:00 UTC.

This meeting is held in the #accessibility channel in the Making WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. (requires registration).

#agenda

Accessibility Team Meeting Notes: June 25, 2021

These are the weekly notes for the AccessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) Team meeting that happens on Fridays. You can read the full transcript on our Slack channel and find the meeting’s agenda here.

Updates on the new workflow keyword on TracTrac Trac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/.

Since WordPress 5.8 is nearing release, this has lost a bit of momentum. After 5.8 is out, let’s circle back to this and get the new keyword added. The latest proposal is linked here. A poll will be created to decide the final keyword.

Tracking accessibility MetaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. tickets

At this current time, there is no straight forward or easy way to check accessibility tickets on Meta Trac. Since there is no focus tracking on Meta Trac, this is not an option to add an accessibility focus. One proposal is a "needs-accessibility" workflow keyword. This would likely be the quickest and easiest to implement.

How to improve tracking of accessibility issues in GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/

Did not have enough time for this agenda item today.

Open floor

Nothing was brought up for Open floor today.

#meeting-notes

Accessibility Team Meeting Agenda: June 25, 2021

This is the proposed agenda for the weekly AccessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) Team meeting on Friday, June 25, 2021, 16:00 UTC.

  • Updates on the new workflow keyword on TRACTrac Trac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/.
  • How to track accessibility issues on MetaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. TRAC
  • How to improve tracking of accessibility issues in GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/
  • Open floor

If you want to have a topic added to the agenda, please mention it in the comments of this post.

The Accessibility Team bug-scrub will be held on Friday, June 25, 2021, 15:00 UTC. Anyone that would like to lead this weeks bug-scrub, please announce in #accessibility channel.

This meeting is held in the #accessibility channel in the Making WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. (requires registration).

#agenda

Accessibility Team Meeting Notes: June 18, 2021

These are the weekly notes for the AccessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) Team meeting that happens on Fridays. You can read the full transcript on our Slack channel and find the meeting’s agenda here.

Team RepTeam Rep A Team Rep is a person who represents the Make WordPress team to the rest of the project, make sure issues are raised and addressed as needed, and coordinates cross-team efforts. nominations

Last week @ryokuhi wrote a post announcing his team rep term was coming to an end. Since there were no comments on it, we opened up a discussion in the meeting. Find the announcement post here. It was decided that @ryokuhi would remain team rep to help @alexstine with the day to day tasks required by the role. However, if you would still like to step up as team rep, just let @ryokuhi and @alexstine know and we can coordinate the transition.

Updates from the working groups

Only the groups that provided updates are listed below.

Documentation

Update from @azhiyadevev:

I’ve started updating the Pattern Library section on Make. A lot of work has already been carried out by @Jill Mugge and @joedolson. Unfortunately, it requires a bit more brain power from me to review everything that has been done so far. I’ve been lacking that this week with my schedule but next week should be better.

GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/

  • The new and improved WidgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. experiences — all attention is now being focused on fixing bugs ahead of the release candidateRelease Candidate A beta version of software with the potential to be a final product, which is ready to release unless significant bugs emerge. on June 29th so it’s a great time to test!
  • Testing welcome on GitHubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ PR: Remove role group from blocks to see if I can fix JAWS. #32799.

Design

No big updates from Design today. The team reviewed the “About 5.8” Page ticket during the bug-scrub, but it seems in good shape as far as design is involved. View the Ticket.

MetaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress.

The team found that there’s no way to filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. Meta tickets for focuses (including the accessibility one), but found a temporary workaround.

Meta ticket #5757 was updated to include the mockup of a possible solution.

Media

There is one ticket that currently needs the latest patch tested. Add a copy-link button at the media upload page.

General

  • 10 tickets milestoned for 5.8 were closed until now.
  • The Awaiting Review is clear from new tickets, but the team plans to really try to clear it completely including the really old tickets.

Open floor

  • Next week, @ryokuhi will not be able to attend the bug scrub or the meeting. If anyone would like to volunteer, please let @ryokuhi or @alexstine know. The date of the next bug scrub is Friday, June 25, 2021, 15:00 UTC. The meeting is one hour after.
  • @alexstine will be unavailable for the bug scrub and meeting on Friday, July 2. Right now, no extra coverage is thought to be required.

#meeting-notes