# Улучшите доступность и макет заголовков, начинающихся с эмодзи

**URL:** https://meta.discourse.org/t/improve-accessibility-and-layout-for-headings-beginning-with-emoji/387704
**Category:** UX
**Tags:** markdown, accessibility
**Created:** [05.Ноябрь.2025 18:42:06 UTC](https://meta.discourse.org/t/improve-accessibility-and-layout-for-headings-beginning-with-emoji/387704 "2025-11-05T18:42:06Z")
**Posts on this page:** 1
**Showing post:** 1

<div class="post-metadata">

### Author: ![maiki](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/maiki/32/233950_2.png) [@maiki](https://meta.discourse.org/u/maiki)
#### Post date: [05.Ноябрь.2025 18:42:07 UTC](https://meta.discourse.org/t/improve-accessibility-and-layout-for-headings-beginning-with-emoji/387704/1 "2025-11-05T18:42:07Z")

</div>

Это распространённая практика — добавлять эмодзи в начало заголовков для визуального выделения и выразительности.

Пример…

```plaintext
## :white_check_mark: Голосуйте во вторник!

```

…который отображается следующим образом:

> ## ✅ Голосуйте во вторник!

Сгенерированный код для этого заголовка выглядит так:

```html
<h2 dir="auto">
  <a name="p-9969-white_check_mark-rock-the-vote-this-tuesday-1" class="anchor" href="#p-9969-white_check_mark-rock-the-vote-this-tuesday-1"></a>
  <img src="https://emoji.discourse-cdn.com/twitter/white_check_mark.png?v=15" 
       title=":white_check_mark:" 
       class="emoji" 
       alt=":white_check_mark:" 
       loading="lazy" 
       width="20" 
       height="20" 
       style="aspect-ratio: 20 / 20;">
  Голосуйте во вторник!
</h2>

```

Можно ли внести изменения в элемент `img`, чтобы сделать заголовки более доступными и визуально согласованными? Например:

- `aria-hidden="true"`, чтобы эмодзи или текст `alt` не отображались для программ чтения с экрана
- `vertical-align: middle; margin-right: 8px;` для согласованного выравнивания

```html
<h2 dir="auto">
  <a name="p-9969-white_check_mark-rock-the-vote-this-tuesday-1" class="anchor" href="#p-9969-white_check_mark-rock-the-vote-this-tuesday-1"></a>
  <img src="https://emoji.discourse-cdn.com/twitter/white_check_mark.png?v=15" 
       title=":white_check_mark:" 
       class="emoji" 
       alt=":white_check_mark:" 
       aria-hidden="true" 
       loading="lazy" 
       width="20" 
       height="20" 
       style="aspect-ratio: 20 / 20; vertical-align: middle; margin-right: 8px;">
  Голосуйте во вторник!
</h2>

```

---

_[View the full topic](https://meta.discourse.org/t/improve-accessibility-and-layout-for-headings-beginning-with-emoji/387704)._