Icon-only controls are not accessible

[afercia]

In the current version of the theme c277a89 the Search and Menu controls in the header use both visible text and icons:

These come from the Chaplin theme and are perfectly usable by all users.

Instead, in the design shown in the Twenty Twenty post on Make the header design is different and uses icon-only controls. This new design is going to be implemented in #71

However, icon-only controls are not accessible. Icons don't have a universal meaning. Not all users can operate on UI controls that don't expose their accessible name visually.

The same issue was discussed at length in the Gutenberg project. "icon-only" controls are problematic for many reasons. They're an accessibility anti-pattern as pointed out in the first Gutenberg accessibility report published by the accessibility team on October 2018.

For example, speech recognition software users need to know the accessible name (the label of control's text) to be able to voice a command the software can understand, as well explained in WordPress/gutenberg#470 (comment)

A few previous related comments on the Gutenberg repository:

• "Responsive buttons" should have tooltips and use consistent CSS techniques gutenberg#5358 (comment)
• Should we show an "Add" label next to the Block Library button on desktops? gutenberg#7221 (comment)

Similarly, the recent WPCampus Gutenberg accessibility audit by Tenon pointed out the same issue in various part of the WordPress interface. See for example:

Visible labels are not available on editing buttons
WordPress/gutenberg#15352
then moved to Trac https://core.trac.wordpress.org/ticket/47116

Icons alone are visible for controls unless they are hovered or focussed
WordPress/gutenberg#15311

In both cases, the provided remediation guideline is to add visible text labels to the buttons or a setting so that users can specify whether to show icons-only, labels-only, or icons and labels together. For what concerns Gutenberg, the second option is currently explored in a
pending pull request, see WordPress/gutenberg#10524 and WordPress/gutenberg#15830. I do realise user settings on a theme would be uncommon. The alternative is to add visible text.

[andersnoren]

Hi @afercia,

Thank you for posting this issue. I was hoping to get back to you earlier, but things got in they way. We've talked a bit about this now, and decided that we're going to include visible text for the icons in the header (including the close search button).

On desktop, when there's a menu set to the "Shortcuts" menu location (name pending, see #74), the button text can be displayed beneath the icons:

On desktop, when the "shortcuts" menu location is not set, we can move the button text up next to the icons and make the text a bit bigger (similar to the Chaplin structure):

On mobile and tablet, when the shortcuts menu is not displayed, we can display the icon text below or next to the icons, depending on how much space space is available:

The sizes of the elements might need to be adjusted a bit to allow sufficient space for the icon text in languages other than English languages.

[afercia]

@andersnoren thanks for addressing this issue, much appreciated (yup, I noticed on Chaplin there's visible text, haven't tried the "Shortcuts" menu though).