Gutenberg: Heading block uses a counter-intuitive icon

[karlgroves]

Heading block uses a counter-intuitive icon

• Severity: Low
• Affected Populations:
  
  
  
  • Low-Vision
  
  
  • Cognitively Impaired
  
  
• Platform(s):
  
  
  
  • All / Universal
  
  
• Components affected:
  
  
  
  • Block Editing
  
  

Issue description

The "Block Type" menu, and block editor type button, use icons for
each block, and in most cases these are good representations of the
block. However the "Heading" block type uses the letter "T", which
is potentially confusing, since "Heading" doesn't start with "T".

Users with cognitive disabilities, especially those who are more
icon-reliant, may mistake the heading type for something else (such as
"Table" or "Text"), especially in cases where only the icon is
visible (such as in the block editor button, or when the "Block Type"
menu list is scrolled so that only the icon is visible).

Remediation Guidance

Use the letter "H" as the icon for the Heading block type. This also
matches the other H icons used for setting the level (H2, H3, etc.).

Relevant standards

• 1.3.3 Sensory Characteristics
  (Level A)

Note: This issue may be a duplicate with other existing accessibility-related bugs in this project. This issue comes from the Gutenberg accessibility audit, performed by Tenon and funded by WP Campus. This issue is GUT-102 in Tenon's report

[mapk]

I'm not sure about the decision behind using the "T" but it could cognitively relate to "Title" as in the case of Material Icons.

Also when looking at the case of formatting size, Material uses a small and larger "T" as the icon.

I'm not opposed to using an "H" but would like to hear other design feedback first.

[sarahmonster]

I believe there was a discussion about this some time ago, but I can't find it. The crux was that H wasn't inclusive of non-English languages.

We do use H for the heading levels, which feels a bit inconsistent:

From a user experience perspective, my guess is that H is a more universal symbol for a heading element. That said, that might be coloured by my own experience as familiar with HTML and English-native. It would be super helpful to get some feedback from a variety of different languages here—maybe we could try a few different ideas and see what people respond best to.

For reference, Dropbox Paper uses "H1" and "H2", as does Bear. I haven't found many other instances of heading icons, but it's probably worth looking to see what standards may be established elsewhere.

[brentswisher]

@sarahmonster Possible #9313 is what you were thinking of?

[mapk]

In today's slack triage, there was consensus around switching the "T" icon to an "H" because it related to the "H1", "H2", etc. tags in markup and might be more easily understood across languages.

Our next task is to get a PR created around this.