Insufficient form semantics

[anevins]

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

• 1.3.1 Info and Relationships (Level A) ​https://www.w3.org/TR/WCAG20/#content-structure-separation-programmatic
• 1.3.3 Sensory Characteristics (Level A) ​https://www.w3.org/TR/WCAG20/#content-structure-separation-understanding
• 3.3.2 Labels or Instructions (Level A) ​https://www.w3.org/TR/WCAG20/#minimize-error-cues
• 4.1.2 Name, Role, Value (Level A) ​https://www.w3.org/TR/WCAG20/#ensure-compat-rsv

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

[antpb]

@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.”

[anevins]

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.

[anevins]

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

[kirasong]

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.

[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.

[audrasjb]

As per today’s bug scrub, let's move back this one to Future release as we are at 14 days from 5.4 beta 1.

[ryokuhi]

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.

[joedolson]

Once again re-milestoning - to 6.4.

[joedolson]

No patch, high risk - punting to 6.5.

[rajinsharwar]

This ticket was discussed in a recent bug scrub, and we decided to punt this to a future Release. There isn't a patch still for this, and just 12 days away from Beta 1. If in the meantime some activity happens and any committer feels good confidence in the fix, we can re-add it to the 6.5 milestone.