WordPress.org

Make WordPress Core

Opened 5 months ago

Last modified 3 weeks ago

#47148 new defect (bug)

Insufficient labelling and inappropriate nesting of form controls

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

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 5 months ago.

Download all attachments as: .zip

Change History (10)

#1 @afercia
5 months ago

  • Keywords form-controls added

#2 @afercia
5 months ago

  • Milestone changed from Awaiting Review to 5.3

#3 @karmatosed
2 months ago

  • Keywords needs-design-feedback added

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


2 months ago

#5 @karmatosed
2 months ago

  • Keywords needs-design-feedback removed

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


3 weeks ago

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


3 weeks ago

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


3 weeks ago

#9 @afercia
3 weeks 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.

Note: See TracTickets for help on using tickets.