Make WordPress Core

Opened 2 weeks ago

Last modified 6 hours ago

#60496 new defect (bug)

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

Reported by: afercia's profile afercia Owned by:
Milestone: 6.6 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-screenshots has-patch
Focuses: accessibility Cc:

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.

Attachments (3)

large.png (44.3 KB) - added by afercia 2 weeks ago.
small.png (41.2 KB) - added by afercia 2 weeks ago.
60496.patch (616 bytes) - added by rcreators 33 hours ago.
Order properties removed from css and margin updated as per new order.

Download all attachments as: .zip

Change History (7)

@afercia
2 weeks ago

@afercia
2 weeks ago

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.


2 weeks ago

#2 @joedolson
2 weeks ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 6.6

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

@rcreators
33 hours ago

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

#3 @rcreators
33 hours ago

  • Keywords has-patch added; needs-patch removed

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.

This ticket was mentioned in Slack in #accessibility by rcreators. View the logs.


6 hours ago

Note: See TracTickets for help on using tickets.