Useful content is unnecessarily hidden

[karlgroves]

Useful content is unnecessarily hidden

• Severity: Low
• Affected Populations:
  • Motor Impaired
  • Cognitively Impaired
• Platform(s):
  • All / Universal
• Components affected:
  • Block Panel

Issue description

After the tags input, where users can add tags to their document, hidden
text states that these can be comma-separated. This text is only
available to screen reader users, even though these instructions are
useful to many sighted users, such as those with a cognitive disability
and keyboard-only users.

Issue Code

    <div class="components-form-token-field" tabindex="-1">


        <label for="..." class="...">Add New Tag</label>


        <div class="..." tabindex="-1">


            <input id="..." type="text" size="1" class="..." role="combobox" aria-expanded="false" aria-autocomplete="list" aria-describedby="..." value="">


        </div>


        <div id="..." class="screen-reader-text">Separate with commas</div>


    </div>

Remediation Guidance

Allow the instructions to be available to all users, not just screen
reader users.

Recommended Code

    <div class="components-form-token-field" tabindex="-1">


        <label for="..." class="...">Add New Tag</label>


        <div class="..." tabindex="-1">


            <input id="..." type="text" size="1" class="..." role="combobox" aria-expanded="false" aria-autocomplete="list" aria-describedby="..." value="">


        </div>


        <div id="...">Separate with commas</div>


    </div>

Note: This issue may be a duplicate with other existing accessibility-related bugs in this project. This issue comes from the Gutenberg accessibility audit, performed by Tenon and funded by WP Campus. This issue is GUT-40 in Tenon's report

[sarahmonster]

The design team discussed this issue in Slack today, and we agree that this text could be helpful for all users.

We also noticed that there are a number of ways of separating tags: you can use commas, but enter also works, so this may be an opportunity to make this text a bit more helpful.

Perhaps something like:
"Separate tags using commas or the enter key."

[afercia]

If I'm not wrong, the word "tags" was avoided intentionally because this component can be reused with other taxonomies. There are probably two options:

• use "Separate using commas or the enter key" 🙈
• add in core a new label for registered taxonomies, along the lines of the existing separate_items_with_commas label that is supposed to be used by all the non-hierarchical taxonomies, and then use that in Gutenberg

[melchoyce]

Full report screenshot:

[kjellr]

I'm going to remove Needs Design Feedback, as there seems to be a consensus that some messaging here would be useful. Using existing under-the-field help text seems like the right move.