[wp-trac] [WordPress Trac] #60496: Twenty Sixteen: visual and DOM order of elements in the footer mismatch

[WordPress Trac]

#60496: Twenty Sixteen: visual and DOM order of elements in the footer mismatch
-------------------------------------------------+-------------------------
 Reporter:  afercia                              |       Owner:  karmatosed
     Type:  defect (bug)                         |      Status:  closed
 Priority:  normal                               |   Milestone:  6.6
Component:  Bundled Theme                        |     Version:
 Severity:  normal                               |  Resolution:  fixed
 Keywords:  has-screenshots has-patch has-dev-   |     Focuses:
  note                                           |  accessibility
-------------------------------------------------+-------------------------
Changes (by sabernhardt):

 * keywords:  has-screenshots has-patch needs-docs => has-screenshots has-
     patch has-dev-note


Old description:

> In the footer of Twenty Sixteen, the footer site info and the social menu
> visual order and DOM order mismatch.
>
> For accessibility, visual order and DOM order must alwasy match when they
> affect 'meaning or operation'.
>

> Basically, altering the visual order via CSS properties like `order` and
> the various flexbox/grid `*-reverse` properties must be avoided. It is
> only allowed for purely decorative elements like, for example, the
> position of an icon within a button (there was such a case in the
> Gutenberg editor).
>
> Reference:
>
> WCAG 2.2
> 1.3.2 Meaningful Sequence (Level A) https://www.w3.org/TR/WCAG22
> /#meaningful-sequence
> 2.4.3 Focus Order (Level A) https://www.w3.org/TR/WCAG22/#focus-order
>
> Twenty Sixteen uses the `order` property to change the order of the
> social menu and site info on large screens. On small screens, the visual
> order is social menu first, site info after (matches the DOM order).
> Instead, on large screens the site info is first, the social menu is
> second. See screenshots.

New description:

 In the footer of Twenty Sixteen, the footer site info and the social menu
 visual order and DOM order mismatch.

 For accessibility, visual order and DOM order must always match when they
 affect 'meaning or operation'.


 Basically, altering the visual order via CSS properties like `order` and
 the various flexbox/grid `*-reverse` properties must be avoided. It is
 only allowed for purely decorative elements like, for example, the
 position of an icon within a button (there was such a case in the
 Gutenberg editor).

 Reference:

 WCAG 2.2
 1.3.2 Meaningful Sequence (Level A) https://www.w3.org/TR/WCAG22
 /#meaningful-sequence
 2.4.3 Focus Order (Level A) https://www.w3.org/TR/WCAG22/#focus-order

 Twenty Sixteen uses the `order` property to change the order of the social
 menu and site info on large screens. On small screens, the visual order is
 social menu first, site info after (matches the DOM order). Instead, on
 large screens the site info is first, the social menu is second. See
 screenshots.

--

Comment:

 [https://make.wordpress.org/core/2024/06/25/miscellaneous-developer-
 changes-in-wordpress-6-6/#Twenty-Sixteen-Fixed-mismatch-of-visual-and-DOM-
 order-of-elements dev note] added to miscellaneous changes note

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