I recently hosted Graham Armfield’s new presentation on the accessibility of common Gutenberg blocks at the WordPress Portsmouth Online Meetup.
While editing the Zoom recording I tried to reproduce some of the issues that Graham mentioned. My conclusions are summarised below:
- Some accessibility enhancements are provided by the browser.
- A lot of the keyboard focus is provided by the
style.cssfrom the Twenty Twenty One (TT1) theme. - This theme (TT1) is also responsible for the white text on white background buttons.
- And for the invisible black outline on a black background.
- But, there was some strange / unexplained HTML in some of Graham’s demo blocks. eg Core/gallery
- The CoBlocks plugin’s keyboard focus CSS could be improved by a larger size for the
outlineproperty. - I should rework my own Accordion logic to use
<detail>and<summary>tags, eliminating the jQuery. - Some theme’s don’t provide any support for the
:focuspseudo property.
WordPress Frontend Accessibility video
The recording of Graham’s talk, including some of the Q&A, is now on YouTube.
Graham’s already raised some of the concerns as issues against the relevant plugin. But I’m not sure if he’s raised any against Twenty Twenty One. Hopefully my analysis will help him decide which component(s) should be blamed / improved.
Some accessibility enhancements are provided by the browser
If the theme doesn’t provide any CSS to indicate keyboard focus then the browser’s user-agent stylesheet may provide it.
Chrome
Chrome does it for this theme. You can see the outline when you tab around the menu items and links.
Rather than use the :focus pseudo-class it uses :focus-visible
a:-webkit-any-link:focus-visible {
outline-offset: 1px;
}
:focus-visible {
outline: -webkit-focus-ring-color auto 1px;
}Firefox
Firefox’s outline is more visible, with a white and blue outline.
:focus-visible {
outline: 1px auto;
}This defaults to outline-color: currentColor;
I don’t know where the blue comes from.
A lot of the keyboard focus is provided by the style.css from the Twenty Twenty One theme
The Twenty Twenty One theme uses the :focus pseudo-class. You only get keyboard focus when the button is actually linked to something. This CSS causes the Search button to have a 2px dotted outline. The theme’s style.css uses the :focus pseudo-class 76 times.
.site .button:focus, button:focus, input[type=submit]:focus, input[type=reset]:focus, .wp-block-search .wp-block-search__button:focus, .wp-block-button .wp-block-button__link:focus, .wp-block-file a.wp-block-file__button:focus {
outline-offset: -6px;
outline: 2px dotted currentColor;
}This theme is also responsible for the white text on white background buttons
Tab to the White text link and see it disappear.
.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
outline: 2px solid transparent;
text-decoration: underline 1px dotted currentColor;
text-decoration-skip-ink: none;
background: rgba(255, 255, 255, 0.9);
}And for the invisible black outline on a black background
.obvious-focus a:focus { outline: 10px solid red; }But, there was some strange / unexplained HTML in some of Graham’s demo blocks. eg Core/gallery
Well, that may be true. I didn’t get the same HTML as Graham did. But you can see that I reproduced the problem above using a gallery in a column with a black background.
The CoBlocks plugin’s keyboard focus CSS could be improved by a larger size for the outline property.
CoBlocks set the outline size to 1px. TT1 uses 2px. 2px is better.
I should rework my own Accordion logic
I’ve raised an issue.
Some theme’s don’t provide any support for the :focus pseudo property.
This theme is an example. See style.css for bobbingwide/written.
Note: Of the 150 or so FSE themes on WordPress.org only 3 are marked as Accessibility Ready.