Improve accessibility and layout for headings beginning with emoji

Meta Feature
1

It is a common pattern to include emoji at the beginning of headings to add visual distinction and flair.

An example...

## :white_check_mark: Rock the Vote, this Tuesday!

...which renders as:

Rock the Vote, this Tuesday!

The code generated for that heading looks like the following:

 Rock the Vote, this Tuesday!

Could we make changes to the img element to make the headings more accessible and visually consistent? For example:

  • aria-hidden="true" so the emoji or alt is not rendered for screenreaders
  • vertical-align: middle; margin-right: 8px; for consistent alignment
 Rock the Vote, this Tuesday!


Discuss this on our forum.