[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:  (none)
     Type:  defect (bug)   |     Status:  new
 Priority:  normal         |  Milestone:  Awaiting Review
Component:  Bundled Theme  |    Version:
 Severity:  normal         |   Keywords:  has-screenshots
  Focuses:  accessibility  |
---------------------------+-----------------------------
 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.

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