Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 11 additions & 1 deletion docs/topics/code/images/alt-text.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@ layout: default
parent: Images
description: How to add alternative text for images, SVGs and icons in development.
nav_order: 2
contributors:
- Rian Rietveld
- Joe Dolson
---

# Alternative text for images, SVGs and icons in development
Expand Down Expand Up @@ -197,9 +200,16 @@ The best option is to add visible text. An icon alone may not be universally und

By giving meaningful images proper alternative text, you meet WCAG success criteria:
- [1.1.1 Non-text Content](https://www.w3.org/WAI/WCAG22/quickref/#non-text-content) (level A).
- To be honest, this topic (level A).
- [2.5.3 Label in Name](https://www.w3.org/WAI/WCAG22/quickref/#label-in-name) (level A).

### Related pages in this documentation

- WordPress accessibility-ready guidelines: [Alternative text on images and graphics]({{site.baseurl}}/docs/topics/theme-guidelines/alternative-text/).
- Start with accessibility: [7 Quick wins]({{site.baseurl}}/docs/start/quick-wins/).
- Standards and best practice - Content and images: [Alternative text for images in the content]({{site.baseurl}}/docs/topics/content/alt-text/).
- Standards and best practice - Content and images - Links: [Images as links]({{site.baseurl}}/docs/topics/content/links/link-image/).


### Other resources

- [Images Tutorial](https://www.w3.org/WAI/tutorials/images/), by the W3C.
Expand Down
6 changes: 5 additions & 1 deletion docs/topics/code/images/image-animation.md
Original file line number Diff line number Diff line change
Expand Up @@ -68,9 +68,13 @@ Reduced motion doesn’t have to mean no animation at all, but it should be very
### WCAG Success Criteria for animations

- [2.2.2 Pause, Stop, Hide](https://www.w3.org/WAI/WCAG22/quickref/#pause-stop-hide) Level A.
- [2.3.1 Three Flashes or Below Threshold](https://www.w3.org/WAI/WCAG22/quickref/#three-flashes-or-below-threshold) Level A.
* [2.3.1 Three Flashes or Below Threshold](https://www.w3.org/WAI/WCAG22/quickref/#three-flashes-or-below-threshold) (Level A).
* [2.3.2 Three Flashes](https://www.w3.org/WAI/WCAG22/quickref/#three-flashes) (Level **AAA**).
- [2.3.3 Animation from Interactions](https://www.w3.org/WAI/WCAG22/quickref/#animation-from-interactions) **Level AAA**.

### Related pages in this documentation

- WordPress accessibility-ready guidelines: [Accessible audio, video, and animations]({{site.baseurl}}/docs/topics/theme-guidelines/accessible-animation/).

### Other resources

Expand Down
23 changes: 20 additions & 3 deletions docs/topics/code/landmarks/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,23 @@ Note that the word navigation is already announced by assistive technologies. Th

## Resources

- [W3C ARIA landmark example page](https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/general-principles.html)
- [Tutorial of page regions](https://www.w3.org/WAI/tutorials/page-structure/regions/)
- [ARIA landmark role guideline]({{site.baseurl}}/docs/topics/theme-guidelines/meaningful-landmark-roles/) for accessibility-ready themes.
### WCAG Success Criteria for meaningful landmarks

Providing Meaningful landmark roles and names is necessary to meet the WCAG success criteria:

- [1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG22/quickref/#info-and-relationships) (Level A).
- [1.3.6 Identify purpose](https://www.w3.org/WAI/WCAG22/quickref/#identify-purpose) (Level **AAA**).

### Related pages in this documentation

- Guidelines for the WordPress accessibility-ready tag: [Meaningful landmark roles and names]({{site.baseurl}}/docs/topics/theme-guidelines/meaningful-landmark-roles/).

### Other resources

- [W3C ARIA landmark example page](https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/general-principles.html), by the W3C.
- [Tutorial of page regions](https://www.w3.org/WAI/tutorials/page-structure/regions/), by the W3C

**Note on the W3C techniques below**: while the guidance regarding why and how to use these is good, the code examples pre-date wide availability of native roles for HTML5 elements. It is preferred to use the HTML elements directly, not the role attributes.

- [Technique: Grouping related links using the nav element](https://www.w3.org/WAI/WCAG22/Techniques/html/H97.html), by the W3C.
- [Technique: Using ARIA landmarks to identify regions of a page](https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA11), by the W3C.
9 changes: 8 additions & 1 deletion docs/topics/content/alt-text/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -85,10 +85,17 @@ The alt text for a photo of Jane in her garden:

## Resources

### Related WCAG Success Criterion for alternative text for images
### WCAG Success Criterion for alternative text for images

By giving a meaningful image the proper alternative text, you meet WCAG success criterion [1.1.1 Non-text Content](https://www.w3.org/WAI/WCAG22/quickref/#non-text-content) (level A).

### Related pages in this documentation

- WordPress accessibility-ready guidelines: [Alternative text on images and graphics]({{site.baseurl}}/docs/topics/theme-guidelines/alternative-text/).
- Start with accessibility: [7 Quick wins]({{site.baseurl}}/docs/start/quick-wins/).
- Standards and best practice - Content and images - Links: [Images as links]({{site.baseurl}}/docs/topics/content/links/link-image/).
- Standards and best practice - Frontend code - Images: [Alternative text for images, SVGs and icons in development]({{site.baseurl}}/docs/topics/code/images/alt-text/).

### Other resources

- [An alt Decision Tree](https://www.w3.org/WAI/tutorials/images/decision-tree/) by the W3C.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@ layout: default
parent: Documenting accessibility
description: What you should include in an accessibility statement.
nav_order: 1
contributors:
- Amber Hinds
- Joe Dolson
---

# Accessibility statements
Expand Down Expand Up @@ -43,3 +46,9 @@ Many organizations use templates to generate their accessibility statement. Popu
* [Equalize Digital Accessibility Checker WordPress plugin](https://wordpress.org/plugins/accessibility-checker) generates an accessibility statement draft page upon activation.

Because accessibility statements can have legal implications in certain parts of the world, it is recommended that you have a legal professional review your statement before publication.

## Resources

### Related pages in this documentation

- WordPress accessibility-ready guidelines: [Accessibility statement]({{site.baseurl}}/docs/topics/theme-guidelines/accessibility-statement/).
9 changes: 9 additions & 0 deletions docs/topics/documenting-accessibility/accessibility-txt.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@ layout: default
parent: Documenting accessibility
description: Learn about the accessibility.txt file in your theme or plugin.
nav_order: 2
contributors:
- Amber Hinds
- Joe Dolson
---

# Accessibility.txt files
Expand Down Expand Up @@ -163,3 +166,9 @@ Markdown allows for easy linking in your `accessibility.txt` file. Just write li
Currently `accessibility.txt` files can only be viewed by downloading plugin or theme files and viewing them in a text editor or using the [theme or plugin file editor](https://developer.wordpress.org/advanced-administration/wordpress/edit-files/).

In the future, the accessibility team hopes to surface this information within the WordPress admin and on WordPress.org.

## Resources

### Related pages in this documentation

- WordPress accessibility-ready guidelines: [Accessibility statement]({{site.baseurl}}/docs/topics/theme-guidelines/accessibility-statement/).
3 changes: 3 additions & 0 deletions docs/topics/documenting-accessibility/acr.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@ layout: default
parent: Documenting accessibility
description: An ACR is a document explaining how you meet accessibility standards.
nav_order: 3
contributors:
- Amber Hinds
- Joe Dolson
---

# Accessibility Conformance Reports
Expand Down
3 changes: 3 additions & 0 deletions docs/topics/documenting-accessibility/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@ layout: default
parent: Standards and best practice
description: Recommended ways for documenting accessibility in WordPress themes and plugins.
nav_order: 7
contributors:
- Amber Hinds
- Joe Dolson
---

# Documenting accessibility
Expand Down
8 changes: 7 additions & 1 deletion docs/topics/theme-guidelines/accessibility-statement.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,4 +23,10 @@ This file has a standardized format outlining the theme's accessibility audit st

1. Verify that there is a file in the main theme directory named `accessibility.txt`.
2. Open the `accessibility.txt` file with a text editor or the [theme file editor](https://developer.wordpress.org/advanced-administration/wordpress/edit-files/).
3. Review the contents of the file and verify it adheres to the WordPress [accessibility.txt readme standard.]({{site.baseurl}}/docs/topics/documenting-accessibility/accessibility-txt/)
3. Review the contents of the file and verify it adheres to the WordPress [accessibility.txt readme standard]({{site.baseurl}}/docs/topics/documenting-accessibility/accessibility-txt/).

## Resources

### Related pages in this documentation

- Documenting accessibility: [Accessibility statements]({{site.baseurl}}/docs/topics/documenting-accessibility/accessibility-statements/).
18 changes: 14 additions & 4 deletions docs/topics/theme-guidelines/accessible-animation.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@ layout: default
parent: WP accessibility-ready guidelines
description: Support for audio, video, and animations in accessibility-ready themes
nav_order: 11
contributors:
- Amber Hinds
- Joe Dolson
---

# Accessible audio, video, and animations
Expand Down Expand Up @@ -33,8 +36,15 @@ The basic requirements are:
1. On Windows 11: Go to Settings \> Accessibility \> Visual Effects \> Animation Effects.
2. On macOS: Navigate to System Preferences \> Accessibility \> Display \> Reduce motion.

## WCAG resources
## Resources

* [Understanding: Pause, Stop and Hide.](https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html)
* [Understanding: Three Flashes or Below Threshold](https://www.w3.org/WAI/WCAG22/Understanding/three-flashes-or-below-threshold.html)
* [Understanding: Animation from Interactions](https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html)
### WCAG Success Criteria for audio, video, and animations

* [2.2.2 Pause, Stop and Hide](https://www.w3.org/WAI/WCAG22/quickref/#pause-stop-hide) (Level A).
* [2.3.1 Three Flashes or Below Threshold](https://www.w3.org/WAI/WCAG22/quickref/#three-flashes-or-below-threshold) (Level A).
* [2.3.2 Three Flashes](https://www.w3.org/WAI/WCAG22/quickref/#three-flashes) (Level **AAA**).
* [2.3.3 Animation from Interactions](https://www.w3.org/WAI/WCAG22/quickref/#animation-from-interactions) (Level **AAA**).

### Related pages in this documentation

Standards and best practice - Frontend code - Images: [Image animation and accessibility]({{site.baseurl}}/docs/topics/code/images/image-animation/).
16 changes: 14 additions & 2 deletions docs/topics/theme-guidelines/alternative-text.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@ layout: default
parent: WP accessibility-ready guidelines
description: Use of alternative text requirements for accessibility-ready themes
nav_order: 10
contributors:
- Amber Hinds
- Joe Dolson
---

# Alternative text on images and graphics
Expand Down Expand Up @@ -34,6 +37,15 @@ Decorative graphics may include:
1. Extended ASCII characters will not display text in the browser's accessibility inspector. Most characters have a standard reading value, but not all. If a theme uses ASCII characters in the design, use the article "[How Screen Readers read Special Characters](https://elevenways.be/en/articles/screenreaders-special-characters)" as a reference to know what the screen reader will say, or (recommended) listen to the element with a screen reader.
2. If the read text would not be appropriate in context, verify the character is wrapped in a `span` that either hides the character or provides it with a more appropriate `aria-label`, depending on context.

## WCAG resources
## Resources

* [Understanding: Non-text content](https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html)
### WCAG Success Criteria for alternative text on images and graphics

By giving a meaningful image the proper alternative text, you meet WCAG success criterion [1.1.1 Non-text Content](https://www.w3.org/WAI/WCAG22/quickref/#non-text-content) (level A).

### Related pages in this documentation

- Start with accessibility: [7 Quick wins]({{site.baseurl}}/docs/start/quick-wins/).
- Standards and best practice - Content and images: [Alternative text for images in the content]({{site.baseurl}}/docs/topics/content/alt-text/).
- Standards and best practice - Content and images - Links: [Images as links]({{site.baseurl}}/docs/topics/content/links/link-image/).
- Standards and best practice - Frontend code - Images: [Alternative text for images, SVGs and icons in development]({{site.baseurl}}/docs/topics/code/images/alt-text/).
3 changes: 3 additions & 0 deletions docs/topics/theme-guidelines/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@ layout: default
parent: Standards and best practice
description: Learn about the guidelines for the accessibility-ready tag on WordPress.org.
nav_order: 6
contributors:
- Amber Hinds
- Joe Dolson
---

# Guidelines for the WordPress accessibility-ready tag
Expand Down
14 changes: 10 additions & 4 deletions docs/topics/theme-guidelines/meaningful-landmark-roles.md
Original file line number Diff line number Diff line change
Expand Up @@ -42,9 +42,15 @@ There are additional optional landmark regions, such as the `region` role, which
8. If the theme has a `functions.php` file, verify that the theme declares support for `navigation-widgets` in its `add_theme_support( 'html5' )` array.
1. If the theme does not have a `functions.php` file, then this requirement is "Not Applicable".

## WCAG resources
## Resources

* [Technique: Grouping related links using the nav element](https://www.w3.org/WAI/WCAG22/Techniques/html/H97.html)
* [Technique: Using ARIA landmarks to identify regions of a page](https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA11)
### WCAG Success Criteria for meaningful landmarks

**Note on these resources**: while the guidance regarding why and how to use these is good, the code examples pre-date wide availability of native roles for HTML5 elements. It is preferred to use the HTML elements directly, not the role attributes.
Providing Meaningful landmark roles and names is necessary to meet the WCAG success criteria:

- [1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG22/quickref/#info-and-relationships) (Level A).
- [1.3.6 Identify purpose](https://www.w3.org/WAI/WCAG22/quickref/#identify-purpose) (Level **AAA**).

### Related pages in this documentation

- Standards and best practice - Frontend code: [ARIA Landmarks](/docs/topics/code/landmarks/).
Loading