• WordPress Frontend Accessibility

    WordPress Frontend Accessibility

    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.css from 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 outline property.
    • 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 :focus pseudo 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.

    View the video on YouTube for the time line.

    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.

    Outline is 2px.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.

    CSS that causes buttons to become unreadable..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.



    Published:

    Last updated:

    September 29, 2022

Categories

Tide times from tidetimes.org.uk

Tide Times & Heights for Langstone Harbour on
28th May 2023
06:01 High Tide ( 3.76m )
12:14 Low Tide ( 1.97m )
19:24 High Tide ( 3.99m )

Tide times from tidetimes.org.uk

Tide Times & Heights for Northney on
28th May 2023
06:20 High Tide ( 3.46m )
12:05 Low Tide ( 1.67m )
19:03 High Tide ( 3.66m )
WordPress version:6.2.1
Gutenberg version:15.8.0

Summary file