[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:  assigned
 Priority:  normal                   |   Milestone:  5.3
Component:  Media                    |     Version:
 Severity:  normal                   |  Resolution:
 Keywords:  has-screenshots has-     |     Focuses:  ui, accessibility,
  patch needs-design                 |  javascript
-------------------------------------+-------------------------------------

Comment (by afercia):

 Thanks both for your feedback.

 > I worked on a few iterations. I do, however, have some reservations over
 labelling all 3 places. My reluctance is we aren't doing elsewhere in the
 interface so it does both create a large amount of cognitive load and
 inconsistency.

 It often happens to have different views from a design vs. an
 accessibility perspective. However, we should clarify some things.

 Re: "reservations over labelling all 3 places": these are not "labels" nor
 just text. They're headings. Headings identify the main sections of a UI
 and give a HTML document its structure. In a project that aims to be as
 much accessible as possible, I'd like to see the design take information
 architecture and semantics into consideration since the beginning.

 A good user interface should serve the same content to all users. Every
 time we visually hide something to make it available only to screen reader
 users, we're actually violating this principle. It's a historical
 compromise often used in WordPress but visible headings would benefit a
 lot of users, regardless of their ability level.

 The fact "we aren't doing elsewhere in the interface" means to me that we
 should improve also other areas of the interface :)

 > it does both create a large amount of cognitive load

 Please don't take me wrong but seems to me this is a very subjective
 opinion. Is there any user research or data to support that the addition
 of a few visible headings adds a tremendous cognitive load? Instead, I'd
 like to remind that accessibility principles come from years and years of
 user testing and research.

 Aside: as said in a previous comment, from a visual perspective headings
 don't necessarily need to be "big" or bold.

 > Similarly, because the only style to reuse is uppercase, that creates
 comprehension issues for those for example with dyslexia.

 I'd be in favor of making all the headings in the media modal use sentence
 case. All uppercase should generally be avoided and this is a good
 opportunity to change it.

 > I have shortened to 'filter' as I am unsure this needs to explicitly say
 attachments due to location

 Shortening to "Filter" doesn't seem ideal to me. It doesn't tell me the
 "what". Let's imagine a blank canvas with a few sections. These sections
 have headings. One of them says "Filter": as a user, I wouldn't have a
 clue what this section is about.

 Also, the placement on the left of the select doesn't seem ideal to me.
 This way, it looks like the select `<label>` element. Instead, it needs to
 identify the whole section including the search.

 > Should those areas include visible labels too?

 @kjellr those other areas like the Posts screen do have headings, see for
 example the "Filter posts list" h2 :) They're visually hidden because
 there was no consensus to make them visible. I'd be happy to create new
 issues and propose to make them visible :)

 > Regarding the "Menu" label at the left: I wonder if there's a more
 descriptive title there.

 Right. On #47149 it was proposed to use "media types" which sounds a bit
 better. However, all the menu items are verbs: Add, Create, Insert. They
 represent actions instead of media types. Except "Featured Image" which is
 inconsistent with all the other items.

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