Insufficient labelling and inappropriate nesting of form controls

[anevins]

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

• 1.3.1 Info and Relationships (Level A) ​https://www.w3.org/TR/WCAG20/#content-structure-separation-programmatic

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

[afercia]

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.