Block Index

Testing Guidance

Guidelines for Accessibility Testing of Block Editor Blocks & Patterns

The project goal is to identify possible issues with the output of the core WordPress blocks and patterns. In testing, be careful to only address issues with how the block is using content, and not with whether the content is accessible itself. For example, if an image is missing an alt attribute when you did not add it, that is not a flaw in the block.

Some test steps will not apply to all blocks. The paragraph block, for example, should not have any landmarks or headings.

We’re not targeting testing the whole site or the accessibility of a theme; the goal is to focus on the block content itself in isolation, exploring all the variations in settings possible for a given block.

Testing Steps

First Perceptual Test

Note your overall impressions of the block.

Is the Block understandable?  Is something bothering you or distracting you?

Color Contrast Check

Is the color contrast high enough? It should meet the AA Level in WCAG.

How to check:

Does the block depend on color alone?

Information and behaviors should not be indicated only by color. Color can be used along with changes of shape, decoration, or text, but cannot be the sole indicator of a difference on content or state.

Keyboard Navigation

Can you navigate and operate the Block with the Keyboard?

Use the Tab, Enter, Arrow, and Space keys on your keyboard. Can you access and operate all elements? Using Shift+Tab, is the navigation order the same in reverse?

Note: Focus state is mostly dependent on the Theme.

Landmarks

Are landmarks set up correctly? Is HTML5 used to markup elements?

How to check:

Headings

What to check: Is the heading structure hierarchical and correct? Is there content in the block or block pattern that precedes the first heading?

How to check:

Media

Images

Is alternative text for images or icons present? Can it be configured by the content creator? If it can, can it be configured in a way that breaks accessibility?

How to check:

  • Developer Tools in Chrome or Firefox and inspect the code for Alt Text
  • Check whether you can edit the text in the editor

More Information: https://make.wordpress.org/accessibility/handbook/content/alternative-text-for-images/

Video

Can you add captions? If you add captions, can those captions be accessed in the front end?

Audio

Can you add a transcript? If you add a transcript, is it available on the front end?

Text Zoom: 200%

Is the block content understandable and operable with the text increased to 200%?

How to Test:

Increase the browser’s text size to 200% and view the block.

  • Firefox: View > Zoom > Zoom Text Only
  • Windows: Start > Settings > Accessibility > Text size
  • Mac: Various methods

Screen Magnifier

Is the block content understandable and operable with a screen magnifier? Can you follow the contents of the block even if you can’t see the whole block at once?

Are elements close enough together to understand their relationships?

How to Test:

  • On Mac: System Preferences > Accessibility > Zoom
  • On PC: Start > Settings > Accessibility > Magnifier

Screen Readers

Can you operate and understand the content with a screen reader?

How to Test:

  • Voice Over + Safari
  • NVDA + Chrome

Mobile

Can you operate and read the block content from a mobile device?
        
How to test:

  • Open the page on a mobile device
  • Verify that the layout is responsive
  • Confirm if you can operate or navigate the block content without the need of hand gestures like swiping
  • Observe whether the content changes appropriately between horizontal and vertical views

Credit: Maja Benke, @travel_girl.