Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Text inadvertently rendered by assistive technologies #15296

Closed
karlgroves opened this issue Apr 30, 2019 · 6 comments

Comments

5 participants
@karlgroves
Copy link

commented Apr 30, 2019

Text inadvertently rendered by assistive technologies

  • Severity: Medium
  • Affected Populations:
    • Blind
    • Low-Vision
    • Cognitively Impaired
  • Platform(s):
    • Windows - Screen Reader
    • Mac - VoiceOver
    • Android - TalkBack
    • iOS - VoiceOver
  • Components affected:
    • Block Panel
    • Document Panel
    • Media Dialog

Issue description

Users of assistive technologies such as screen readers who navigate to
the bottom of the Settings panels will find a button which they cannot
activate (nor see if sighted) called "Select files".

Additionally, if users change the color modes in the popup custom color
picker, the current mode is announced in a live region. However, long
after users are done with choosing a color, even after choosing to edit
another block on the page, when they reach the bottom of the Block panel
they'll still hear "hex color mode active". At this point, users may
not remember what this was for and have no idea what this is
referencing, as it no longer has any context.

Issue Code
    <!-- color announcement -->


    <div id="wp-a11y-speak-polite" aria-live="polite" aria-relevant="additions text" aria-atomic="true" class="screen-reader-text wp-a11y-speak-region">Hex color mode active</div>





    <!-- select files -->


    <div class="wp-uploader-browser" id="wp-uploader-browser-o_1d2saqvj4l3skgruvl1ejo1ejp3" style="position: fixed; top: -1000px; left: -1000px; height: 0px; width: 0px;">


        <button type="button" class="browser button button-hero" id="__wp-uploader-id-1" style="display: inline-block; position: relative; z-index: 1;">Select Files</button>


    </div>

Remediation Guidance

When users have performed an action, such as clicking another block (or
whatever action causes "No block selected" to appear in the Block
panel), clear the live region so that users who encounter it while
manually reading do not hear it. Refill the live region when users
change color modes.

The hidden file selection button should be hidden from all users with
display: none whenever it is not visible nor meant to be used.

Recommended Code
    <!-- color announcement -->


    <div id="wp-a11y-speak-polite" aria-live="polite" aria-relevant="additions text" aria-atomic="true" class="screen-reader-text wp-a11y-speak-region"> </div>





    <!-- select files -->


    <div class="wp-uploader-browser" id="wp-uploader-browser-o_1d2saqvj4l3skgruvl1ejo1ejp3" style="display:none;">


        <button type="button" class="browser button button-hero" id="__wp-uploader-id-1" style="display: inline-block; position: relative; z-index: 1;">Select Files</button>


    </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-41 in Tenon's report

@afercia

This comment has been minimized.

Copy link
Contributor

commented May 4, 2019

Note: the "Select FIles" button (wp-uploader-browser) comes from the Media Views and this part should be moved to Trac, as it needs to be addressed in core. Going to add the "Media" label for this part.

The a11y-speak live regions are used in core as well. In several places. Thus, clearing the live regions shouldn't depend on a specific user action or scenario. It would require a more generic solution, preferably avoiding setTimeout() which seems to me a very fragile solution by its own nature.

@melchoyce melchoyce moved this from To do to Move to Trac in Accessibility Audit May 5, 2019

@anevins12

This comment has been minimized.

Copy link
Contributor

commented May 6, 2019

@afercia

This comment has been minimized.

Copy link
Contributor

commented May 6, 2019

Leaving this issue open for now, pending decision on where to track the a11y-speak issue.

@karmatosed

This comment has been minimized.

Copy link
Member

commented May 6, 2019

Should we close and discuss in Trac @afercia ?

@afercia

This comment has been minimized.

Copy link
Contributor

commented May 6, 2019

@karmatosed OK, will create a ticket specific to the a11y-speak part.

@afercia afercia closed this May 6, 2019

Accessibility Audit automation moved this from Move to Trac to Closed May 6, 2019

@afercia

This comment has been minimized.

Copy link
Contributor

commented May 6, 2019

See also https://core.trac.wordpress.org/ticket/47156 for the a11y-speak part.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.