[wp-trac] [WordPress Trac] #47610: Media modal: add more headings to better identify the main sections and improve content navigation for assistive technology users

[WordPress Trac]

#47610: Media modal: add more headings to better identify the main sections and
improve content navigation for assistive technology users
-------------------------------------+-------------------------------------
 Reporter:  afercia                  |       Owner:  afercia
     Type:  defect (bug)             |      Status:  closed
 Priority:  normal                   |   Milestone:  5.3
Component:  Media                    |     Version:
 Severity:  normal                   |  Resolution:  fixed
 Keywords:  needs-post-mortem has-   |     Focuses:  ui, accessibility,
  screenshots has-patch              |  javascript
-------------------------------------+-------------------------------------

Comment (by afercia):

 Looks like we agree we disagree :) Aside: this conversation would be more
 appropriate on #47149, where the menu markup was changed to an ARIA tabs
 pattern while this ticket is about headings and naming.

 I'd agree it's a principle question at this point but it's always good to
 have a constructive and clarifying conversation. :)

 > This used to be an "application menu".

 The term "menu" is probably a bit too generic and often used to identify
 different things in software.

 The ARIA specification defines [https://www.w3.org/TR/wai-aria-1.1/#menu
 role=menu] as "a list of common actions or functions, presented in a
 manner similar to a menu on a desktop application". This seems to exclude
 "navigation menus" for which the `role=navigation` should be used.

 Instead, the ARIA Authoring Practices refer a bit interchangeably to menus
 as "navigation" or "action" menus, see for example https://www.w3.org/TR
 /wai-aria-practices-1.1/#menubutton, which seems to contradict the ARIA
 spec.

 Regardless of what the various specifications say, we can probably use a
 some good common sense and refer to a couple well established patterns:

 - Navigation menu: made of items that behave as links.
 - Action menu: made of items that trigger actions or commands (for
 example: align left, align center...).

 Thinking at the media modal menu, none of the two patterns above seems
 appropriate to me. It's not a navigation because the browser doesn't
 navigate to a new page: the interaction and feedback are different from a
 real navigation. There's no routing, no browser history, no document title
 update... nothing that resembles to a real navigation. No specific action
 or command is executed on the edited object as well so I wouldn't call
 this an "action menu".

 Instead, what these menu items actually do is making some content appear
 dynamically in the right panel.

 If I had to expand the menu items text with some more context, I'd say
 something along the lines of:
 - View the Add Media panel (or "open" the Add Media panel)
 - View the Create Gallery panel
 - etc.
 Because that's what the menu items do: I click on them and I can access a
 new UI for a specific task.

 Basically, these menu items reveal new content. There's an established,
 accessible, design pattern for that: the ARIA tabs pattern. It's the only
 pattern I can think of to properly communicate the semantics of this
 "menu".

 Also, the tabs pattern is used everywhere in operating systems: it's a
 well established interaction pattern users and assistive technologies know
 and are able to interact with.

 The previous implementation was far from ideal. This "menu" used to be
 made of links with an `href` value that technically was an "incomplete URL
 fragment identifier" like this:

 `<a href="#" class="media-menu-item">Create Gallery</a>`

 These menu items were totally unsemantic, perceived as links while not
 real links, and the expected interaction mismatched the actual
 interaction.

 Links with a `href="#"` are embarrassing in 2019. They're an old, very
 wrong, practice.

 > In coding terms this is not a "progressive enhancement", but a
 "regression".

 Frankly, I'm not sure how removing old, bad, code and introducing
 semantic, accessible, well established patterns can be called a
 "regression".

 I do agree there's a problem with the naming. As commented previously, I'd
 appreciate any suggestion for a better name. This doesn't negate that the
 new implementation is far better than the previous one.

 > There are several other "application menus" in WP that do not trigger
 navigation

 Totally right :) There are still a lot of places in core that need
 improvements. Any help there would be greatly appreciated.

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