WordPress.org

Make WordPress Core

Opened 5 months ago

Last modified 3 weeks ago

#47137 new defect (bug)

Insufficient form semantics

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

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

Download all attachments as: .zip

Change History (20)

#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 #accessibility by joedolson. View the logs.


2 months ago

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


7 weeks ago

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


6 weeks ago

#9 @antpb
6 weeks ago

@afercia provided some insight into this issue with some suggestions in the recent Media Meeting. This info highlights a few challenges in solving the issue:

“Re: 47137 I’d recommend all the points from the audit. Two considerations though:

  • Ideally it should be a form because that helps in establishing semantic relationships. However, the sidebar is not rendered in all the views so including the select area, the attachments list _and_ the sidebar within one form might be a bit complicated
  • The list of attachments is perceived as a list of checkboxes so it makes sense to wrap it within a fieldset + legend. I’d tend to think it would need more work in the future because yes, it’s a group of checkboxes but it actually works like a mini-application with custom interaction. I’d say fieldset + legend would help, for now.”

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


5 weeks ago

#11 @anevins
5 weeks ago

As there are concerns with the amount of testing involved with making these three changes at once, we'll be splitting these tickets out into individual problems. Some of which can be tackled as part of contribution days.

#12 @anevins
5 weeks ago

The "Edit" link text has been split into ticket: #48028

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


4 weeks ago

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


3 weeks ago

#15 @mikeschroder
3 weeks ago

Brought up this ticket in media triage.

It could really use an owner -- the next step, though, is research into where changes would be necessary to wrap the fields in a form. Whether you have time to write a patch or not, research/comments here on findings would be really helpful.

This ticket was mentioned in Slack in #core-media by antpb. 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

#19 @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.