[wp-trac] [WordPress Trac] #60799: Change the Header Tag in Link Modal from <h1> to <h2> for Better Accessibility

[WordPress Trac]

#60799: Change the Header Tag in Link Modal from <h1> to <h2> for Better
Accessibility
--------------------------+----------------------------
 Reporter:  lyonmuller    |       Owner:  jwgoedert
     Type:  defect (bug)  |      Status:  assigned
 Priority:  normal        |   Milestone:  6.6
Component:  Editor        |     Version:  6.4.3
 Severity:  normal        |  Resolution:
 Keywords:                |     Focuses:  accessibility
--------------------------+----------------------------

Comment (by afercia):

 Thanks everyone for this interesting discussion. First, I'd like to
 encourage everyone to use a correct terminology, which is also important
 to better understand the underlying issue.

 The Insert/edit link is a ''dialog''. Dialogs can be ''modal'' and ''non-
 modal''. Actually, 'modal' is a ''behavior'' that other design patterns
 can potentially use. The term 'modal' has been used incorrectly for ages
 in place of 'dialog'.

 That said, the difference is important.
 - Modal dialogs: the rest of the page is supposed to be inert and ''not
 perceivable by assistive technology''. Usually, this is achieved by
 setting `aria-modal="true"` on the dialog and setting `aria-hidden="true"`
 on all the other direct children of the body element. Actually, the modal
 dialog ''is the only content perceived by a screen reader'' and all the
 rest of the page is ignored. As such, the assumption the H1 'can create
 accessibility issues, as multiple <h1> tags on a single page can confuse
 screen readers' isn't correct in the first place. In fact, when the modal
 dialog is open, its H1 is the only H1 perceived by a screen reader.
 - Non-modal dialogs: the rest of the page is not hidden from assistive
 technology. In this case, the heading hierarchy should take into account
 both the rest of the page and the dialog. However, non-modal dialogs are
 rare. It's a pretty uncommon pattern.

 To me, using a H1 for a ''modal'' dialog is semantically correct
 considering that when the modal dialog is open, its H1 is the only
 perceived H1 on the page.

 By changing it to a H2, given the rest of the page is ignored, that would
 result in a document with a missing H1 where the heading hierarchy
 actually starts with a H2. To me, that would be incorrect.

 On top of that, as Alex pointed out, using a H1 makes screen reader users
 experience better.

 Rather than considering to change the heading level, I'd suggest to check
 whether the Insert/edit link modal dialog, which is pretty old, correctly
 uses the aria-modal attribute and whether it makes the rest of the page
 inert by using aria-hidden.

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