[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:  karmatosed
     Type:  defect (bug)             |      Status:  reopened
 Priority:  normal                   |   Milestone:  5.3
Component:  Media                    |     Version:
 Severity:  normal                   |  Resolution:
 Keywords:  needs-post-mortem has-   |     Focuses:  ui, accessibility,
  screenshots has-patch i18n-change  |  javascript
-------------------------------------+-------------------------------------

Comment (by afercia):

 > There are many places where hidden labels are added to help assistive
 technology work better. There "labels" are not appropriate for the visual
 design, they only make sense for assistive technology use.

 Right. There are many visually hidden labels and headings in the admin and
 the reason why they are visually hidden it's because there was no
 consensus in changing the visual design. The accessibility team always
 recommended visible labels / headings because they benefit all users. I
 see in your feedback you seem to be very focused on screen readers.
 Accessibility is not just about screen readers. There are a multitude of
 different accessibility needs.

 > Also they can be "harmful" for the visual design as they break the
 semantics there and are confusing.

 I'm not fully sure I understand what "visual semantics" is.

 > I agree that "a good UI should always serve the same content to all
 users". So how do you serve an image to users of assistive technology? You
 add an "alt" attribute. This attribute is not meant to be "always visible
 in all cases", making it visible is confusing for users that do not use
 assistive technology.

 I have no objections :) The alt attribute is supposed to be visible only
 when the image is not visible (for any reason). I'm not sure how this
 relates to labels and headings that are supposed to be always visible.

 > This is not an UI section, this is a menu. On top of that it is a
 contextual menu. As such, a heading there is inappropriate. It
 breaks/diminishes the visual semantics.

 Still not sure I understand what "visual semantics" is. Also, I kindly
 disagree: this is not a menu. Not a menu that triggers navigation to a
 different resource. The menu items are controls that update on the fly the
 content of the modal. Much like tabs that toggle the visibility of in-page
 content. In fact, they're now marked-up as ARIA tabs after #47149.

 > No. Contextual menus work pretty similarly in all cases, they change
 depending on context. Please point me to examples of contextual menus with
 heading in any application.

 Of course I agree they both change depending on context. However, they do
 that in a very different way and the interaction is very different.

 Contextual menus in operating systems (e.g. desktop right click, file
 manager right click): they are requested by the user after an intentional
 action. Users right click and they expect to get a menu because they
 learned that's the interaction. There's no need to identify them as a
 distinct UI section because they're not a real "section" of a composite UI
 in the first place.

 These items in the left part of the media modal are not comparable to an
 operating system "context menu" in any way, at least to me :) They're part
 of a composite UI. They're always visible. Users are "forced" to always
 see them. They don't appear after a user action. They ''may'' change after
 a user action. Sometimes they change, sometimes don't. Regardless, this is
 a composite UI that is made of a set of discrete sections. Ideally, each
 section purpose needs to be clearly identified. In general, I think we (as
 developers) tend to look at a UI as "power users" greatly underestimating
 that many other users are really confused when things are not clearly
 identified.

 To me, it's anyways a section of a composite UI and there are examples of
 "headings" used to identify similar sections e.g. the macOS finder, the
 Gnome file manager, and even the Google Chrome settings page.

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