Make WordPress Core

Opened 2 months ago

Last modified 13 days ago

#65488 new defect (bug)

#wpfooter unavailable on 200% zoom (WCAG 1.4.10 Reflow (Level AA))

Reported by: alh0319 Owned by:
Priority: normal Milestone: 7.2
Component: General Version:
Severity: normal Keywords: has-patch
Cc: Focuses: accessibility, css

Description

There is CSS that intentionally hides #wpfooter on mobile.

@media screen and (max-width: 782px) {
    #wpfooter {
        display: none;
    }
}

The footer holds important information about the current WordPress version and can be extended by themes and plugins to hold other important links or information.

If a user has low vision and is zoomed in 200% or more, they do not have access to any information in the footer. This is a failure of WCAG 1.4.10 Reflow (Level AA).

How to test:

  1. Set your browser width to 1280 CSS pixels wide.
  2. Go to the main dashboard page in the admin.
  3. Zoom your browser and observe that the footer disappears.

The footer should stay visible up to 400% zoom, which can be achieved by removing this CSS.

Change History (8)

#1 @abcd95
2 months ago

Introduced in [26134]

This ticket was mentioned in PR #12226 on WordPress/wordpress-develop by @abcd95.


2 months ago
#2

  • Keywords has-patch added

@abcd95 commented on PR #12226:


2 months ago
#3

Perhaps we can also improve the look and feel of the footer once this is agreed upon -

  • src/wp-admin/css/common.css

    diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css
    index e10530257b..5b92786c44 100644
    a b img {  
    42214221        }
    42224222
    42234223        #wpfooter {
    4224                 margin-left: 0;
     4224                display: flex;
     4225                flex-wrap: wrap;
    42254226        }
    42264227
    42274228        #comments-form .checkforspam {

https://github.com/user-attachments/assets/f67f0932-b8a2-49e4-8600-6a3681f169cf

#4 @alh0319
2 months ago

I like the stacked and left align. Thank you!

@sabernhardt commented on PR #12226:


2 months ago
#5

Please do not switch the footer display to flex on a bugfix ticket.

  • With only display: flex and flex-wrap: wrap, the two default paragraphs can stack nicely in a development version, where one of the paragraphs is very wide. However, most sites would have shorter paragraphs running together on the left. https://github.com/user-attachments/assets/8a11d003-6ff5-4bd7-924e-bad1ef11e7ea
  • In theory, the footer could also have justify-content: space-between, but then the #wpfooter .clear div would need to be hidden or removed.
  • Plugins can add anything before these two paragraphs with the in_admin_footer action. A directory search found 160 plugins that use the hook in some way. This shows an extra div with flex, wrap, and space-between: https://github.com/user-attachments/assets/21e3d88b-45cb-4368-a35f-6887f2c04af2

@abcd95 commented on PR #12226:


7 weeks ago
#6

Please do not switch the footer display to flex on a bugfix ticket.

Thanks for the detailed note. To clarify, the display: flex suggestion wasn't something I was pushing for in this ticket. I mentioned it purely as an aside, as a possible future improvement to footer layout. I fully agree it's outside the scope here, and the edge cases you illustrated make it a more carefully scoped undertaking.

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


13 days ago

#8 @joedolson
13 days ago

  • Milestone Awaiting Review7.2
Note: See TracTickets for help on using tickets.