[wp-trac] [WordPress Trac] #33559: #a11y-headings - WordPress Updates headings fixes

[WordPress Trac]

#33559: #a11y-headings - WordPress Updates headings fixes
----------------------------+--------------------------------
 Reporter:  Cheffheid       |       Owner:  SergeyBiryukov
     Type:  defect (bug)    |      Status:  reopened
 Priority:  normal          |   Milestone:  4.4
Component:  Administration  |     Version:  4.3
 Severity:  normal          |  Resolution:
 Keywords:  has-patch       |     Focuses:  ui, accessibility
----------------------------+--------------------------------

Comment (by afercia):

 Discussed a bit this with @Cheffheid on Slack and we have a couple of
 options:

 1. Use JavaScript, see what's already in `common.js`:

 {{{
 // Back compatibility: if there is no H1, apply to first H2.
 if ( ! $firstHeading.length ) {
         $firstHeading = $( '.wrap h2:first' );
 }
 }}}
 and just add a CSS class to style the first H2. The advantage of this
 solution is that it will cover all the possible cases of `h2` as main
 heading when there's no `h1`. We'd prefer a CSS solution though.
 2. Use just CSS and provide a reasonable back compatibility for plugins
 that still use a H2. We won't be able to cover all the edge cases but
 maybe we shouldn't try to do that. Sooner or later plugins should update
 their main heading and use a H1.
 We'd propose to style the old `H2`s only if they're the `:first-child` of
 the `.wrap` container. Any thoughts and suggestions more than welcome.

 A couple of edge case examples:

 Plugins that use some old code before the main heading:

 [[Image(https://cldup.com/Ra7l91JYzm.png)]]

 Notices that are displayed before the main heading and then moved below
 with JavaScript: for a few milliseconds the main h2 will be styled as h2
 and then as h1 after the notice gets moved down:

 [[Image(https://cldup.com/V_xfOnETcV.png)]]

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