Make WordPress Core

Opened 6 years ago

Last modified 13 months ago

#47148 accepted defect (bug)

Insufficient labelling and inappropriate nesting of form controls

Reported by: anevins's profile anevins Owned by: joedolson's profile joedolson
Milestone: Future Release Priority: normal
Severity: minor Version:
Component: Media Keywords: has-screenshots needs-patch wpcampus-report form-controls
Focuses: accessibility Cc:

Description

Moved from the WPCampus accessibility report issues on GitHub, see: https://github.com/WordPress/gutenberg/issues/15288

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

Issue description
In the "Featured Image" modal dialog's "Media Library" tab, users
can choose an image to be the featured image; this is presented as a
series of checkbox elements which, once checked, show a button to
uncheck inside the custom checkbox element.

This button is in the Tab order, however its only name is "Deselect",
it doesn't tell the user what is being deselected. Users must infer
what this button does from context, and may wonder why it's next to
seemingly-ordinary checkboxes which themselves are natively
unselectable.

The button role of these buttons does not convey that the user is
checking or unchecking an item, and their placement inside the
checkbox elements is semantically confusing, and may be functionally
confusing since one focusable element is nested inside another.

Screen reader users hear that a list is present, yet find that they
cannot navigate by list-items.

Issue Code

    <ul tabindex="-1" class="attachments ui-sortable ui-sortable-disabled" id="__attachments-view-53">


        <li tabindex="0" role="checkbox" aria-label="Marianne_Williamson" aria-checked="true" ... class="...">


            <div class="...">


                <div class="thumbnail">


                    <div class="centered">


                        <img src="...this-is-fine-300x200.jpg" draggable="false" alt="">


                    </div>


                </div>


            </div>


            <button type="button" class="check" tabindex="0">


                <span class="..."></span>


                <span class="screen-reader-text">Deselect</span>


            </button>


        </li>


        ...


    </ul>

Remediation Guidance
Allow the list semantics to remain available by not overriding the
<li> elements' native list-item roles.

Remove the <button> inside the checkbox and allow the original
checkbox itself to be hidden and shown (perhaps styled with the custom
checkmarks and "-" symbols, using the :before pseudo-element, as
used in other checkboxes); hiding elements with opacity still allows
speech recognition and screen readers to perceive the checkbox as though
it were visible. The alt attribute inside the image will be able to
label the checkbox if it's inside the <label> element.

The checkbox now can offer both the image name and its state together in
one unit, allowing users to always know what they are deselecting.

Recommended Code

    <fieldset>


        <legend class="screen-reader">Media options result</legend>


        <ul tabindex="-1" class="attachments ui-sortable ui-sortable-disabled" id="__attachments-view-53">


            <li ... class="...">


                <input type="checkbox" id="data_159">


                <label for="data_159">


                    <img src="...this-is-fine-300x200.jpg" draggable="false" draggable="false" alt="Marianne_Williamson">


                </label>


            </li>


            ...


        </ul>


    </fieldset>





    li {


        position: relative;


    }


    li>input {


        position: absolute;


        opacity: 0;


        ...


    }


    li input+label img {


        ...


    }


    li input:focus+label img {


        /* styles for focussed input */


        /* include an actual outline in addition to box-shadow for high contrast users */


    }


    li input:checked {


        opacity: 1;


    }


    li input:checked:focus,


    li input:checked:hover {


        /* change from checkmark to dash */


    }


    li input:checked+label img {


        ...


    }

Relevant standards

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

Attachments (1)

57186738-aa6f8e00-6e99-11e9-8db3-569ed4eacfe3.png (353.7 KB) - added by anevins 6 years ago.

Download all attachments as: .zip

Change History (31)

#1 @afercia
6 years ago

  • Keywords form-controls added

#2 @afercia
6 years ago

  • Milestone changed from Awaiting Review to 5.3

#3 @karmatosed
6 years ago

  • Keywords needs-design-feedback added

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


6 years ago

#5 @karmatosed
6 years ago

  • Keywords needs-design-feedback removed

This ticket was mentioned in Slack in #core-media by mike. View the logs.


5 years ago

This ticket was mentioned in Slack in #core-media by mike. View the logs.


5 years ago

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


5 years ago

#9 @afercia
5 years ago

  • Milestone changed from 5.3 to Future Release

Discussed during today's accessibility bug-scrub: giving WordPress 5.3 Beta 2 is very close, sadly agreed to punt this ticket to Future Release.

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


5 years ago

#11 @afercia
5 years ago

  • Milestone changed from Future Release to 5.4

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


5 years ago

This ticket was mentioned in Slack in #core-media by antpb. View the logs.


5 years ago

This ticket was mentioned in Slack in #accessibility by audrasjb. View the logs.


5 years ago

#15 @audrasjb
5 years ago

  • Milestone changed from 5.4 to Future Release

WP 5.4 beta 1 is in 14 days, moving on to Future release.

#16 @joedolson
2 years ago

  • Milestone changed from Future Release to 6.2
  • Owner set to joedolson
  • Status changed from new to accepted

This ticket was mentioned in Slack in #accessibility by joesimpsonjr. View the logs.


2 years ago

This ticket was mentioned in Slack in #core-media by joedolson. View the logs.


2 years ago

This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.


2 years ago

This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.


2 years ago

This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.


2 years ago

#22 @ryokuhi
2 years ago

  • Milestone changed from 6.2 to 6.3

Due to the complexity of the ticket, after discussing about it during the Accessibilty Team's weekly bug scrub in the last few weeks, we're re-milestoning this ticket for 6.3, now that the branch is open.

This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.


2 years ago

#24 @joedolson
20 months ago

  • Milestone changed from 6.3 to 6.4

Again re-milestoning to 6.4

This ticket was mentioned in Slack in #core by oglekler. View the logs.


18 months ago

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.


17 months ago

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.


17 months ago

#28 @joedolson
17 months ago

  • Milestone changed from 6.4 to 6.5

No patch, high risk - punting to 6.5.

This ticket was mentioned in Slack in #core by audrasjb. View the logs.


13 months ago

#30 @audrasjb
13 months ago

  • Milestone changed from 6.5 to Future Release

As per today's bug scrub, we decided to move this ticket to Future Release to give it more time.

Note: See TracTickets for help on using tickets.