WordPress.org

Make WordPress Core

Opened 7 weeks ago

Last modified 6 weeks ago

#47137 new defect (bug)

Insufficient form semantics

Reported by: anevins Owned by:
Milestone: 5.3 Priority: normal
Severity: minor Version:
Component: Media Keywords: needs-patch has-screenshots wpcampus-report form-controls
Focuses: ui, accessibility Cc:

Description

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

  • Severity:
    • Low
  • Affected Populations:
    • Blind
    • Cognitively Impaired
  • Platform(s):
    • All / Universal
  • Components affected:
  • Media Dialog

Issue description
The "Media Library" panel of the "Featured Image" modal dialog lists
some filtering of options, a group of checkboxes, a sub-form of relevant
meta-data, and a "Select" button. However there are no semantics which
associate these controls together, nor give the orphan "Select" button
any meaning relative to the selected checkbox/image.

Additionally, a link taking users to a new window/tab with an editing
form does not inform users that it opens a new window or tab.

Semantic markup is vital for assistive technology users, to convey the
structure and relationships between information. When appropriate
semantic markup is not used, it may be more difficult for such users to
understand what the content means, and to comprehend the structure that
the visual presentation conveys.

Issue Code

    <div class="attachments-browser">...


        <div class="media-toolbar">


            <div class="media-toolbar-secondary">


                <label for="media-attachment-date-filters" class="screen-reader-text">Filter by date</label>


                <select id="media-attachment-date-filters" class="attachment-filters">...</select>


            </div>


            <div class="media-toolbar-primary search-form">


                <label for="media-search-input" class="screen-reader-text">Search Media</label>


                <input type="search" placeholder="Search media items..." id="media-search-input" class="search">


            </div>


        </div>


        <ul tabindex="-1" class="..."><li ...>...</li></ul>


         ...


        <div tabindex="0" data-id="159" class="attachment-details save-ready">


            <h2>Attachment Details  <span>...</span></h2>


                <div class="attachment-info">


                    <div class="thumbnail thumbnail-image">...</div>


                        ...


                        <div class="dimensions">1820 × 1213</div>


                        <a class="edit-attachment" href="...&amp;action=edit..." target="_blank">Edit Image</a>


                        <button type="button" class="...">Delete Permanently</button>


                    </div>


                </div>


                <label class="...">


                    <span...>URL</span>


                    <input type="text" value="...this-is-fine.jpg" readonly="">


                </label>


                ...


            </div>


            <form class="compat-item"></form>


            </div>


        </div>


        <div class="media-toolbar-primary search-form">


            <button type="button" class="...">Select</button>


        </div>


    </div>

Remediation Guidance
Turn the form into an actual <form> element.

Wrap <fieldset> tags (with accompanying <legend> elements)
around groups of controls explaining what they are.

Use the id on the <form> element with the form attribute
on the "Select" button to designate this as the form's submit
button.

Add text to the "Edit" link that opens in a new window or tab,
informing users that this will happen. When the form in the new
tab/window is submitted, users should be brought back to the original
form.

Recommended Code

    <div class="attachments-browser">...


        <form id="media_form">


        <fieldset class="media-toolbar">


        <legend class="screen-reader">Filter media options</legend>


            <div class="media-toolbar-secondary">


                <label for="media-attachment-date-filters" class="screen-reader-text">Filter by date</label>


                <select id="media-attachment-date-filters" class="attachment-filters">...</select>


            </div>


            <div class="media-toolbar-primary search-form">


                <label for="media-search-input" class="screen-reader-text">Search Media</label>


                <input type="search" placeholder="Search media items..." id="media-search-input" class="search">


            </div>


        </fieldset>


        <fieldset>


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


            <ul tabindex="-1" class="..."><li ...>...</li></ul>


        </fieldset>


         ...


            <fieldset tabindex="0" data-id="159" class="attachment-details save-ready">


                <legend>Attachment Details  <span>...</span></legend>


                <div class="attachment-info">


                    <div class="thumbnail thumbnail-image">...</div>


                        ...


                        <div class="dimensions">1820 × 1213</div>


                        <a class="edit-attachment" href="...&amp;action=edit..." target="_blank">Edit Image <span class="screen-reader"> Opens in a new window</span></a>


                        <button type="button" class="...">Delete Permanently</button>


                        </div>


                    </div>


                    <label class="...">


                        <span...>URL</span>


                        <inputtype="text" value="...this-is-fine.jpg" readonly="">


                    </label>


                    ...


                </div>


            </fieldset>


        </form>


        <div class="media-toolbar-primary search-form">


            <button form="media_form" type="button" class="...">Select</button>


        </div>


    </div>

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

Attachments (1)

57185883-4f359f80-6e89-11e9-9e23-903e587ff978.png (362.5 KB) - added by anevins 7 weeks ago.

Download all attachments as: .zip

Change History (3)

#1 @afercia
7 weeks ago

  • Keywords form-controls added

#2 @afercia
6 weeks ago

  • Milestone changed from Awaiting Review to 5.3
Note: See TracTickets for help on using tickets.