note

Роль структуры документа из WAI-ARIA для текста, который дополняет основной. Это могут быть сноски с определениями, примечаниями, информацией об источнике цитаты и похожим содержимым.

В HTML нет элемента с семантикой note.

        
          
          <h1>Берёзовый сок в автомобильной индустрии</h1><p>  В последние годы наблюдается рост интереса к экологии  и устойчивому развитию, что подтолкнуло учёных к исследованию  нетрадиционных источников энергии и смазочных материалов.  Одним из наиперспективнейших направлений  <sup aria-describedby="note-1">1</sup> стало использование  берёзового сока в автомобильной индустрии.</p><p>  Исследования показали <sup aria-describedby="note-2">2</sup>,  что берёзовый сок, благодаря своему уникальному химическому составу,  может действовать как эффективный смазочный агент. Его использование  снижает трение и износ деталей, что продлевает срок службы автомобиля.</p><p>  Применение берёзового сока как альтернативного источника энергии  и смазки потенциально открывает новые горизонты для автомобильной отрасли  <sup aria-describedby="note-3">3</sup>, способствуя переходу  на устойчивые и экологически безопасные решения.</p><hr><aside>  <ol>    <li>      <span        role="note"        id="note-1"      >        Береста Л. Возобновляемые источники энергии будущего.        — Гиперборея : Викинг Publish, 2026. — 303 с.      </span>    </li>    <li>      <span        role="note"        id="note-2"      >        Лоу Д. Химический состав берёзового сока с точки зрения его        позитивных характеристик для применения в производстве        смазочных агентов. / Д. Лоу, Х. Грант, К. Фёрт, Л. Гага        // Science. – 2028. – № 1. – С. 68-80.      </span>    </li>    <li>      <span        role="note"        id="note-3"      >        Берёза И. Будущее берёзового сока как возобновляемого        источника энергии / И. Берёза, Р. Сокова // Автомобильный журнал.        — 2027. — № 8. — С. 32.      </span>    </li>  </ol></aside>
          <h1>Берёзовый сок в автомобильной индустрии</h1>

<p>
  В последние годы наблюдается рост интереса к экологии
  и устойчивому развитию, что подтолкнуло учёных к исследованию
  нетрадиционных источников энергии и смазочных материалов.
  Одним из наиперспективнейших направлений
  <sup aria-describedby="note-1">1</sup> стало использование
  берёзового сока в автомобильной индустрии.
</p>

<p>
  Исследования показали <sup aria-describedby="note-2">2</sup>,
  что берёзовый сок, благодаря своему уникальному химическому составу,
  может действовать как эффективный смазочный агент. Его использование
  снижает трение и износ деталей, что продлевает срок службы автомобиля.
</p>

<p>
  Применение берёзового сока как альтернативного источника энергии
  и смазки потенциально открывает новые горизонты для автомобильной отрасли
  <sup aria-describedby="note-3">3</sup>, способствуя переходу
  на устойчивые и экологически безопасные решения.
</p>

<hr>

<aside>
  <ol>
    <li>
      <span
        role="note"
        id="note-1"
      >
        Береста Л. Возобновляемые источники энергии будущего.
        — Гиперборея : Викинг Publish, 2026. — 303 с.
      </span>
    </li>
    <li>
      <span
        role="note"
        id="note-2"
      >
        Лоу Д. Химический состав берёзового сока с точки зрения его
        позитивных характеристик для применения в производстве
        смазочных агентов. / Д. Лоу, Х. Грант, К. Фёрт, Л. Гага
        // Science. – 2028. – № 1. – С. 68-80.
      </span>
    </li>
    <li>
      <span
        role="note"
        id="note-3"
      >
        Берёза И. Будущее берёзового сока как возобновляемого
        источника энергии / И. Берёза, Р. Сокова // Автомобильный журнал.
        — 2027. — № 8. — С. 32.
      </span>
    </li>
  </ol>
</aside>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Задайте элементу атрибут role со значением note. Лучше всего добавлять роль к нейтральным <div> или <span>, а также к текстовым элементам вроде <p> или <li>.

На практике note мало где пригодится, хотя все браузеры поддерживают роль. Скринридеры не выделяют сноски среди другого текста. Правда, некоторые программы могут рассказать, что пользователь оказался в блоке note.

Сноска должна располагаться рядом с текстом, который она дополняет.

        
          
          <p>  Применение берёзового сока как альтернативного источника энергии  и смазки потенциально «открывает новые горизонты  для автомобильной отрасли, способствуя переходу  на устойчивые и экологически безопасные решения»  <span role="note">[3, c. 32]</span>.</p>
          <p>
  Применение берёзового сока как альтернативного источника энергии
  и смазки потенциально «открывает новые горизонты
  для автомобильной отрасли, способствуя переходу
  на устойчивые и экологически безопасные решения»
  <span role="note">[3, c. 32]</span>.
</p>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Элемент с ролью note можно связывать с основным текстом. Когда в сноске простой текст, используйте атрибут aria-describedby:

        
          
          <p>  Сила обыкновенно внушает  <a href="#furcht" aria-describedby="note-1">Furcht<a>.</p><hr><aside>  <span role="note" id="furcht note-1">    Переводится с немецкого как «страх».  </span></aside>
          <p>
  Сила обыкновенно внушает
  <a href="#furcht" aria-describedby="note-1">Furcht<a>.
</p>

<hr>

<aside>
  <span role="note" id="furcht note-1">
    Переводится с немецкого как «страх».
  </span>
</aside>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Если заметка состоит из текста со ссылками, кнопками или списками, задействуйте aria-details:

        
          
          <p>  Сила обыкновенно внушает  <a href="#furcht" aria-details="note-1">Furcht<a>.</p><hr><aside>  <span role="note" id="furcht note-1">    Переводится с немецкого как «страх». Больше подробностей    в <a href="/dictionary">словаре терминов</a>.  </span></aside>
          <p>
  Сила обыкновенно внушает
  <a href="#furcht" aria-details="note-1">Furcht<a>.
</p>

<hr>

<aside>
  <span role="note" id="furcht note-1">
    Переводится с немецкого как «страх». Больше подробностей
    в <a href="/dictionary">словаре терминов</a>.
  </span>
</aside>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Роль note сочетается и с другими глобальными ARIA-атрибутами, не только с aria-describedby и aria-details.

Элементы с ролью note встраиваются в повествование и не прерывают его.

Чаще всего сноски размещают в конце страницы, главы или всего документа. Также сноски и заметки могут располагаться в скобках рядом с отдельными словами, предложениями и цитатами.

💡 Используйте <aside> или роль complementary для врезок — текста, который дополняет основное содержание самодостаточной информацией. Врезки, в отличие от сносок, прерывают повествование.

💡 Добавляйте цитаты через <blockquote> или элемент с явной ролью blockquote.

💡 Дополнения к основному тексту отражает роль suggestion. Например, предложения по правкам к коду на GitHub.

💡 Для комментариев к тексту подходит роль comment. Пример — комментарии в текстовых редакторах.