Skip to content

Heading block uses a counter-intuitive icon #15340

@karlgroves

Description

@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

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

Metadata

Metadata

Assignees

Labels

Needs DevReady for, and needs developer efforts[Block] HeadingAffects the Headings Block[Focus] Accessibility (a11y)Changes that impact accessibility and need corresponding review (e.g. markup changes).[Status] In ProgressTracking issues with work in progress[Type] EnhancementA suggestion for improvement.

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions