[wp-trac] [WordPress Trac] #62093: Post format radio buttons labels not working with screen readers interaction modes

[WordPress Trac]

#62093: Post format radio buttons labels not working with screen readers
interaction modes
--------------------------+------------------------------
 Reporter:  talksina      |       Owner:  (none)
     Type:  defect (bug)  |      Status:  new
 Priority:  normal        |   Milestone:  Awaiting Review
Component:  Editor        |     Version:  6.6.2
 Severity:  normal        |  Resolution:
 Keywords:                |     Focuses:  accessibility
--------------------------+------------------------------
Changes (by sabernhardt):

 * focuses:  accessibility, coding-standards => accessibility
 * component:  Post Formats => Editor


Old description:

> When writing a post and changing post format, radio buttons to choose
> different formats (audio, status, standard, etc) are labeled but labels
> are not readable correctly by screen readers when in forms or interaction
> mode.
> Currently tried with JAWS for Windows 2024 latest build and NVDA 2024.3.
> STEPS to reproduce:
> 1. add a new post or edit an existing one
> 2. tab until focus goes to "change post format" button. Expand it.
> 3. tab to the first radio button, it will read "radio button selected"
> without saying what it is.
> 4. To test it completely, turn virtual cursor off (jawskey+z) or focus
> mode on (nvda key + space) on NVDA.
> 5. Pressing up and down arrows to change radio button, it will select
> options without reading what they are.
> 6. It works instead, when virtual cursor is active and the windows is
> being consulted like a page, with arrows as it were a Word document, and
> selecting a single radio button with spacebar.
> I suspect the issue is on a possibly inconsistent semantic HTML
> association.
> div class="components-radio-control__option" input id="post-format-
> selector-0" class="components-radio-control__input" type="radio" name
> ="inspector-radio-control-0" value="status"
> label class="components-radio-control__label" for="inspector-radio-
> control-0-4" Stato /label /div
>
> seems that label is associated to the "name" attribute instead of the
> "id" and this might create the conflict.
> Please check

New description:

 When writing a post and changing post format, radio buttons to choose
 different formats (audio, status, standard, etc) are labeled but labels
 are not readable correctly by screen readers when in forms or interaction
 mode.
 Currently tried with JAWS for Windows 2024 latest build and NVDA 2024.3.
 STEPS to reproduce:
 1. add a new post or edit an existing one
 2. tab until focus goes to "change post format" button. Expand it.
 3. tab to the first radio button, it will read "radio button selected"
 without saying what it is.
 4. To test it completely, turn virtual cursor off (jawskey+z) or focus
 mode on (nvda key + space) on NVDA.
 5. Pressing up and down arrows to change radio button, it will select
 options without reading what they are.
 6. It works instead, when virtual cursor is active and the windows is
 being consulted like a page, with arrows as it were a Word document, and
 selecting a single radio button with spacebar.
 I suspect the issue is on a possibly inconsistent semantic HTML
 association.
 `div class="components-radio-control__option" input id="post-format-
 selector-0" class="components-radio-control__input" type="radio" name
 ="inspector-radio-control-0" value="status" `
 `label class="components-radio-control__label" for="inspector-radio-
 control-0-4" Stato /label /div`

 seems that label is associated to the "name" attribute instead of the "id"
 and this might create the conflict.
 Please check

--

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/62093#comment:1>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform