WordPress.org

Make WordPress Core

Opened 2 years ago

Closed 2 years ago

#42054 closed defect (bug) (fixed)

Customize Themes: invalid HTML and aria-describedby values

Reported by: afercia Owned by: afercia
Milestone: 4.9 Priority: normal
Severity: normal Version: 4.9
Component: Customize Keywords: has-patch
Focuses: accessibility Cc:
PR Number:

Description (last modified by celloexpressions)

Results after a quick check with the W3C HTML validator.

To reproduce, copy from your browser inspector the HTML of the element with id sub-accordion-section-themes, paste it in the validator inside the body element:

Error: Element div not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)
</li> <div class="customize-themes-section themes-section-installed_themes control-section-content themes-php">

Error: Element div not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)
<div class="customize-themes-section themes-section-wporg_themes control-section-content themes-php current-section">

These two errors relate to 2 <div> elements output inside a <ul>.

Error: Duplicate ID live-search-desc.
From line 297, column 5; to line 297, column 59
<span id="live-search-desc" class="screen-reader-text">
Warning: The first occurrence of ID live-search-desc was here.
From line 45, column 6; to line 45, column 60

The installed themes and wp.org themes search have the same visually hidden text with the same id.

Error: The aria-describedby attribute must point to an element in the same document.
<div class="theme active" tabindex="0" aria-describedby="installed_themes-twentysixteen-action twentysixteen-name">

Error: The aria-describedby attribute must point to an element in the same document.
<div class="theme" tabindex="0" aria-describedby="installed_themes-intergalactic-action intergalactic-name">

etc, lots of them.

Re: the aria-described value, it references two elements: for example:

  • for the installed themes: aria-describedby="installed_themes-twentysixteen-action twentysixteen-name"
  • for the wp.org themes: aria-describedby="wporg_themes-mytheme-action mytheme-name"

however, there are no elements with ID twentysixteen-name or mytheme-name
Instead, the elements have a prefix:
installed_themes-twentysixteen-name
and
wporg_themes-mytheme-name

However, I'm not sure the aria-describedby attribute should target both elements, it's a bit pointless to repeat the theme name, unless I'm missing something the result will be screen readers announcing, for example:

Details for theme: Twenty Sixteen Previewing: Twenty Sixteen

or

Details for theme: Twenty Eleven Twenty Eleven

Worth reminding the aria-label set on the first element will override its text, so the actual text used by aria-describedby will be the aria-label value e.g. "Details for theme: Twenty Sixteen"

Correct association of labels:
as per the WordPress Accessibility standards, labels should be associated to their form controls using for/id attributes (not wrapping the label around the control). Doing both things can really confuse assistive technologies:

<label for="themes-filter">
					<span class="screen-reader-text">Search themes…</span>
					<input type="search" id="themes-filter" placeholder="Search themes…" aria-describedby="live-search-desc" class="wp-filter-search wp-filter-search-themes">
					<span id="live-search-desc" class="screen-reader-text">The search results will be updated as you type.</span>
				</label>

Please review all the new labels and make sure they do not wrap the form control and use for/id attributes instead.

Attachments (2)

42054.diff (5.0 KB) - added by celloexpressions 2 years ago.
42054.2.diff (5.9 KB) - added by afercia 2 years ago.

Download all attachments as: .zip

Change History (8)

#1 @westonruter
2 years ago

  • Owner set to celloexpressions
  • Status changed from new to assigned

#2 @afercia
2 years ago

  • Summary changed from Customize Themes: invalid HTML and aria=describedby values to Customize Themes: invalid HTML and aria-describedby values

#3 @celloexpressions
2 years ago

  • Description modified (diff)
  • Keywords has-patch added; needs-patch removed
  • Owner changed from celloexpressions to afercia
  • Status changed from assigned to reviewing

42054.diff:

  • Fix div as child of ul by not using ul as a child of li where it doesn't represent a list
  • Fix duplicate filtering IDs
  • Remove broken reference to theme name in aria-described by
  • Remove for attribute from themes filter label (multiple elements comprise the label, se for wouldn't work)

#4 @afercia
2 years ago

@celloexpressions not sure this is correct:

<label class="screen-reader-text" for="wp-filter-search-input" ...
<input ... id="wp-filter-search-input-{{ data.id }}"

also, as per the WordPress accessibility standards, labels must be associated explicitly that is: a label must not wrap the form control and must use for/id attributes, so the second label should be changed.

Please don't assign me to tickets without asking me before. :)

@afercia
2 years ago

#5 @afercia
2 years ago

42054.2.diff builds on the previous patch and uses only explicitly associated labels (not wrapping, with for/id attributes). Also, properly escapes some HTML attributes.

#6 @afercia
2 years ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

In 41709:

Customize: Fix invalid HTML and aria-describedby values.

  • fixes invalid HTML and duplicate IDs
  • as per the Accessibility coding standards, all new code must use explicitly associated form labels
  • properly escapes a few HTML attributes

Props celloexpressions, afercia.
Fixes #42054.

Note: See TracTickets for help on using tickets.