[wp-trac] [WordPress Trac] #47136: Reading and focus order do not match visual order

[WordPress Trac]

#47136: Reading and focus order do not match visual order
-------------------------------------------------+-------------------------
 Reporter:  anevins                              |       Owner:  (none)
     Type:  defect (bug)                         |      Status:  new
 Priority:  normal                               |   Milestone:  Awaiting
                                                 |  Review
Component:  Media                                |     Version:
 Severity:  normal                               |  Resolution:
 Keywords:  has-screenshots needs-patch          |     Focuses:  ui,
  wpcampus-report                                |  accessibility
-------------------------------------------------+-------------------------
Description changed by afercia:

Old description:

> Moved from the WPCampus accessibility report issues on GitHub, see
> https://github.com/WordPress/gutenberg/issues/47135
>
> * **Severity:**
>  * Medium
> * **Affected Populations:**
>  * Blind
>  * Low-Vision
>  * Cognitively Impaired
> * **Platform(s):**
>  * All / Universal
> * **Components affected:**
>  * Edit Media
>
> **Issue description**
> On the Edit Media page, the keyboard focus order and the visual reading
> order are presented in a zig-zag pattern.
>
> Users who are not using browser zoom can reach an option to show more or
> fewer columns:
>
> 1) If users select content to appear in a single column (which still
> produces two columns visually), content at the top is first, then comes
> content on the right (Scale and Crop sections), then content back to the
> left (the actual image and editing buttons), and finally content
> underneath both columns (metadata).
>
> 2) If users select content to appear in two columns (which produces
> three columns visually), content at the top is first, then comes a
> column in the middle ("Scale" and "Crop" sections), then the column
> in the left (the actual image and editing buttons), and then the content
> at the bottom (the default metadata). After some of the content at the
> bottom, the "Save" section is on the far right, and then if the user
> added more boxes, these are last and visually placed after the default
> metadata content.
>
> Keyboard users benefit from a logical focus order which is consistent
> with the reading order. Users who have a cognitive disability and have
> difficulty reading may also be confused by an unexpected or illogical
> focus order.
>
> **Remediation Guidance**
> Either change the visible layout with CSS to make the visual order match
> the content order, or re-order the content in the DOM to match the
> visual order.
>
> **Relevant standards**
> * 1.3.2 Meaningful Sequence (Level A) https://www.w3.org/TR/WCAG20
> /#content-structure-separation-sequence
> * 2.4.3 Focus Order (Level A) https://www.w3.org/TR/WCAG20/#navigation-
> mechanisms-focus-order
>
> **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-82 in Tenon's report

New description:

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

 * **Severity:**
  * Medium
 * **Affected Populations:**
  * Blind
  * Low-Vision
  * Cognitively Impaired
 * **Platform(s):**
  * All / Universal
 * **Components affected:**
  * Edit Media

 **Issue description**
 On the Edit Media page, the keyboard focus order and the visual reading
 order are presented in a zig-zag pattern.

 Users who are not using browser zoom can reach an option to show more or
 fewer columns:

 1) If users select content to appear in a single column (which still
 produces two columns visually), content at the top is first, then comes
 content on the right (Scale and Crop sections), then content back to the
 left (the actual image and editing buttons), and finally content
 underneath both columns (metadata).

 2) If users select content to appear in two columns (which produces
 three columns visually), content at the top is first, then comes a
 column in the middle ("Scale" and "Crop" sections), then the column
 in the left (the actual image and editing buttons), and then the content
 at the bottom (the default metadata). After some of the content at the
 bottom, the "Save" section is on the far right, and then if the user
 added more boxes, these are last and visually placed after the default
 metadata content.

 Keyboard users benefit from a logical focus order which is consistent
 with the reading order. Users who have a cognitive disability and have
 difficulty reading may also be confused by an unexpected or illogical
 focus order.

 **Remediation Guidance**
 Either change the visible layout with CSS to make the visual order match
 the content order, or re-order the content in the DOM to match the
 visual order.

 **Relevant standards**
 * 1.3.2 Meaningful Sequence (Level A) https://www.w3.org/TR/WCAG20
 /#content-structure-separation-sequence
 * 2.4.3 Focus Order (Level A) https://www.w3.org/TR/WCAG20/#navigation-
 mechanisms-focus-order

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

--

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