Twenty Sixteen: visual and DOM order of elements in the footer mismatch

[afercia]

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.

[joedolson]

This seems worth looking at, but it feels a little late to put it into 6.5.

[rcreators]

Order properties removed from css and margin updated as per new order.

[rcreators]

Added patch with CSS file. Order property removed and margin updated. Now social icons will always be first and site info will be second in order.

[joedolson]

This ticket basically needs one decision made: are we changing the visual appearance on the desktop view or on the mobile view? In order to fix the DOM order, one of these things needs to change; we just need a decision which.

In my opinion, the patch as provided makes the most sense; it makes more sense to me to have the copyright text last.

[sabernhardt]

60496.patch plus margin adjustments in rtl.css

[sabernhardt]

stacks social navigation above site info at all screen sizes

[sabernhardt]

The 'mobile' view already matches the DOM order; I would not change that (a child theme could replace the stylesheet or the footer template without replacing the other).

The 'desktop' viewport's changes in 60496.2.patch (and 60496.patch) would create a new visual layout in an eight-year-old theme. It still presents the two elements in columns, at opposite ends, but switching the order makes it new.

Another option is stacking the social navigation above the site info links at all screen sizes. Then the visual order would match the DOM order, and I think the visual change would be less surprising because that has been the 'mobile' layout. However, I needed to add a width of 100% (or possibly flex-basis: 100%), which might increase the chances of interfering with custom styles in a child theme or Additional CSS.

[sabernhardt]

Before patch

[sabernhardt]

60496.2.patch would reverse the visual order on larger screens to match the DOM order, according to text direction

[sabernhardt]

60496.stack.diff would show the social navigation above the site links at any screen size

[rcreators]

@sabernhardt I think with RTL the order is also same as it is for normal desktop. The change in position from left to right is what RTL do. So that is not an issue.

But I think having social media icons stacked on top of the links for all screen looks uniform. So we can go with that. +1

[joedolson]

I think this looks good. I'm marking it for commit, but would appreciate an opinion from either @poena or @karmatosed.

[karmatosed]

@joedolson I think this is absolutely ready for commit and will follow that through, thank you everyone.

[karmatosed]

In 58177:

Twenty Sixteen: Fixes mismatch of visual and DOM order of elements.

In the footer the site info and social menu visual order and DOM order was mismatched. This fixes that and resolves the altering.

Props afercia, joedolson, rcreators, sabernhardt.
Fixes #60496.

[sabernhardt]

I wrote a ​draft for a note about this change. The documentation may be more appropriate as a user note than as a dev note, but then I would not know where or how to post it.

[sabernhardt]

​dev note added to miscellaneous changes note