Представляю вашему вниманию перевод заметок с сайта HTMHell (раздела Heaven) — коллекции полезных советов и примеров HTML-кода Ранее была опубликована коллекция заметок с плохими примерами кода с того же ресурса в статье HTMHell — адовая разметка (25 плохих примеров)  Темы статьи: 0. Ссылки — атрибут download Доступность элементов iframe Gif-анимации и "reduce-motion" Метатеги с описанием страницы Текущая страница в панели навигации Автозаполнение полей с паролями Структура заголовков страницы Формат изображений AVIF Элемент "section" Составление адреса в "mailto:" Последовательность упорядоченных списков Таблицы стилей для печати (print) Зачёркнутый текст Семантическая вёрстка: ol или ul или div Автоматические заглавные буквы Проверка орфографии Доступные ориентиры Элемент субтитров "track" Отладка HTML: Доступность Отладка HTML: Линтинг С помощью HTML-атрибута download можно превратить обычную ссылку в ссылку для скачивания. Вместо перехода к документу, браузер предложит пользователю сохранить файл на диск. Значение атрибута задаёт название файла при скачивании Если iframes содержат значимое содержимое, они должны иметь название. Определить такое доступное название можно с помощью атрибута title. Если он отсутствует, вместо него скринридеры могут озвучить значение атрибута name или src, что усложнит пользователям понимание его предназначения. Если подключается iframe, который не виден пользователям, потому что не предназначен для взаимодействия, его стоит скрыть от скринридеров, а также сделать недоступным для выбора с клавиатуры Gif-анимации следует отображать только в том случае, если пользователь не предпочитает обратного. В случае, если данная настройка активирована, следует с помощью тега <picture> и опции prefers-reduced-motion вместо анимации подставлять картинку. Анимации в вебе иногда раздражают, но у некоторых пользователей они также могут вызывать тошноту, головокружение и головную боль. У людей с вестибулярными расстройствами состояние может ухудшиться настолько, что они вынуждены будут сделать перерыв в работе за компьютером, чтобы восстановиться. Побочные эффекты анимации могут быть очень неприятными, поэтому её следует использовать только в том случае, если пользователи либо предпочитают анимацию, либо не указали свои предпочтения. В большинстве операционных системы у пользователей есть возможность уменьшить количество движений в браузерах и приложениях, а разработчики могут определить это с помощью  prefers-reduced-motion. По умолчанию мы используем jpg на случай, если операционная система пользователя не предоставляет такой возможности. Для пользователей, которые не предпочитают уменьшение движений, мы заменяем картинку на анимацию В итоге, в зависимости от предпочтений, пользователь должен увидеть либо jpg-картинку, либо gif-анимацию macOS: System Preferences - Accessibility - Display - Reduce Motion iOS: Settings - General - Accessibility - Reduce Motion Android: Settings - Accessibility features - Accessibility - Advanced Visual Effects Windows 10: Settings - Ease of Access - Display - Show animations in Windows. С помощью метатегов можно описывать страницы. Это важно для сторонних инструментов, сайтов и приложений. Поисковые движки могут использовать описания страниц в списке результатов, а соцсети — в предварительном просмотре, когда пользователь публикует ссылку. Описания страниц действительно полезны, поскольку помогают пользователю понять, о чём эта страница перед тем, как перейти на неё. При описании страницы следует учесть несколько моментов: Убедитесь, что описание краткое и информативное Напишите уникальное описание для каждой страницы и попытайтесь вставить уникальные ключевые слова Длина описания должна быть от 50 до 155 символов (после этого Google обрезает текст в результатах поисковой выдачи) Обычно поисковые движки берут описание из тегов meta, но могут и не сделать это, если посчитают другое содержимое более подходящим Описание не учитывается алгоритмом ранжирования поисковиков, но может увеличить количество кликов, что может положительно повлиять на позиции страницы в поисковой выдаче Рекомендуется использовать метатеги description и og:description. Если метатег og:description отсутствует, Facebook, Pinterest и LinkedIn используют в предварительном просмотре содержимое description. Twitter воспринимает только og:description и игнорирует description , но предлагает специальный вариант twitter:description. Данные парсеры позволяют проверить, как описания вашей страницы будут выглядеть в разных соцсетях: Twitter Card validator Facebook Sharing Debugger LinkedIn Post Inspector Pinterest Rich Pins Validator Social Media Preview Meta Tags В моём случае все они работали корректно, но в обсуждении в Twitter Kilian Valkhof отметил, что официальные парсеры устарели, так что результат стоит перепроверять Используйте атрибут aria-current, чтобы выделить текущую страницу на панели навигации как визуально, так и семантически. Если для выделения текущей страницы среди набора ссылок вы используете класс вроде .active, это будет работать только для зрячих пользователей. Вместо этого CSS-класса можно использовать aria-current со значением page. Данный атрибут сообщит скринридерам, какая страница является текущей, а также позволит выбрать нужный элемент с помощью селектора атрибута в CSS Вот небольшая демонстрация в TalkBack на Android (Внимание! Громкость записи звука достаточно большая. Извините) Вы можете помочь менеджерам паролей и браузерам автоматически заполнять поля с паролями, если будете использовать атрибут autocomplete, и делать кое-что ещё. Давайте начнём с того самого "кое-чего ещё". Когда я готовил пример для данной публикации, я хотел продемонстрировать, что с атрибутом autocomplete="new-password" браузер предложит сгенерировать пароль. Для начала я создал простую форму. К моему удивлению, браузер Firefox предложил сгенерировать новый пароль даже без атрибута autocomplete. Это сбило меня с толку. Спустя некоторое время, потраченное на тестирование и изучение, я узнал, что для определения предназначения поля ввода браузеры учитывают самые разные данные. В данном случае это сработало, так как подпись в элементе <label> содержала слова "new password". Просто взрыв мозга! Если, например, перевести подписи на немецкий, Firefox больше не предлагает подставить пароль. Мне понадобилось всего лишь 2 часа, чтобы понять это. Вы можете обратить внимание, что атрибуты id и name короткие и трудночитаемые. Это сделано из-за того, что браузеры также используют их для определения предназначения поля ввода. Если значением этих атрибутов будет new-password или даже new-pwd, браузер Firefox снова будет предлагать сгенерировать пароль. Убедиться в срабатывании можно в этом примере, где атрибуту id задано значение new-pwd, и в этом примере, где атрибуту name задано значение new-password. Конечно, это очень упрощённый тестовый пример. Обычно всё намного сложнее. Я тестировал это поведение только в одном браузере и только с одним встроенным менеджером паролей. Мы должны не полагаться на алгоритмы браузеров, а помогать им понять предназначение полей ввода. Мы должны: Использовать стандартные элементы и атрибуты HTML-форм (form, label, input, и т.д.) Используйте правильный атрибут type для каждого поля ввода Убедитесь, что значения атрибутов id и name не генерируются произвольно Для атрибутов name и id задавайте значения, являющиеся одинаковыми или похожими на значение атрибута autocomplete Добавьте атрибут autocomplete и используйте значение current-password для поля с текущим паролем и значение new-password для поля с новым паролем В формах "регистрации" и "авторизации/входа" используйте разные значения для атрибутов name и id как у самого элемента формы, так и у элементов input, select, textarea Тщательно тестируйте в браузерах с разными менеджерами паролей С мая по июнь 2021 года компания WebAIM проводила опрос предпочтений пользователей скринридеров и результаты показали, что большинство участников считают полезной правильную структуру заголовков. Правильная структура заголовков важна по нескольким причинам: Заголовки формируют структуру документа, которую могут учитывать сторонние инструменты. При проверке страницы в валидаторе в блоке "More options" можно выбрать опцию "Show outline", чтобы проверить и отобразить структуру заголовков проверяемой страницы.  Заголовки отражают организацию содержимого страницы. Заголовок <h1> сообщает пользователям, о чём эта страница. Заголовок <h2> разделяет страницу на большие разделы, <h3> - <h6> ещё больше структурируют эти большие разделы. Правильное использование заголовков помогает поисковым движкам понимать, о чём ваша страница и как она структурирована. Пользователи скринридеров получают ознакомиться с содержимым страницы, пройдя только по заголовкам. Программы обычно озвучивают содержимое заголовка вместе с его уровнем (1 - 6). Вот почему настолько важным является сохранение чёткой структуры документа. Пропуск заголовков может сбивать с толку, поэтому его следует избегать где это возможно. Скринридеры позволяют осуществлять навигацию по заголовкам. Это значит, что вы можете не только просматривать заголовки страницы, но и выбирать их, переходя непосредственно к позиции выбранного заголовка в DOM, чтобы продолжить чтение страницы с этого места. Также заголовки позволяют зрячим людям понимать, как структурирована страница и как разные разделы страницы соотносятся друг с другом Совет, который я хотел бы дать моим студентам, — представить, что они пишут доклад для университета, когда создают план веб-страницы. У доклада всегда должен быть заголовок, и заголовок должен быть только один (<h1>). Также обычно присутствует несколько основных глав (<h2>), а иногда есть и подглавы (<h3> - <h6>). Лучше представлять, как логически должна быть структурирована страница, чем делать это исходя из её дизайна. Иногда есть смысл добавлять на страницу заголовки, которые визуально не отображаются, чтобы задать структуру для тех, кто работает со страницей, прослушивая её содержимое, а не глядя на неё. Вы можете доступно скрыть эти заголовки, с помощью набора свойств. AVIF — это достаточно новый формат изображений и для меня это одно из самых захватывающих из недавних нововведений в сфере веб-разработки. Почему? На одном из вебсайтов, который я недавно разрабатывал, была возможность сократить размер изображений с 1.72МБ до 172КБ просто сконвертировав их в формат AVIF. Звучит слишком хорошо, чтобы быть правдой, поэтому давайте начнём  с плохой новости: немногочисленными браузерами, поддерживающими данный формат, являются Chrome, Chrome for Android, Opera, Opera Mobile и Samsung Internet. Firefox поддерживает за флагом (на момент перевода — уже по умолчанию). Хорошая новость заключается в том, что мы можем использовать встроенный механизм прогрессивного улучшения HTML, чтобы обеспечить фолбэк для тех, чей браузер ещё не поддерживает формат AVIF. Расположенный выше скриншот имеет следующую разметку (на сайте оригинала статьи): Мы предоставляем браузерам набор изображений. Браузеры, в свою очередь, просматривают эти данные и останавливаются на первом же формате, который смогут распознать. Chrome выберет первый элемент <source> , потому что поддерживает формат AVIF, браузер Edge пропустит первую строку и будет использовать изображение WebP со второй строки, а IE пропустит оба варианта и будет использовать JPG-изображение, из элемента <img>. Вы даже можете полностью отказаться от варианта с JPG-изображением, потому что в наши дни формат WebP уже довольно хорошо поддерживается всеми современными браузерами, включая Safari. Я сделал скриншот сайта HTMHell, сжал его с помощью OxiPNG и сконвертировал в форматы WebP и AVIF. png - исходный: 936KB png - сжатый: 438KB webp: 132KB avif: 71KB Существует несколько инструментов сжатия, работающих с AVIF. Я точно могу рекомендовать приложение Squoosh. Используйте элемент <section> для разметки набора логически связанного контента, обычно имеющего заголовок. Выдержка из кода страницы gov.uk Не всегда понятно, уместно ли в конкретной ситуации использовать элемент <section>  и как сделать это правильно. Я собрал рекомендации, которые должны помочь принять решение. По умолчанию для вспомогательных технологий в плане семантики нет разницы между элементами <section> и <div>. Для скринридера следующие два фрагмента кода практически одинаковы: Но несмотря на отсутствие разницы для вспомогательных технологий, по-прежнему есть смысл отдавать предпочтение именно <section>, когда уместно. Данный семантический элемент позволяет структурировать страницу и, возможно, стилизовать её соответствующим образом с помощью селектора тега section. Элемент <section> не является заменой для <div> и не должен использоваться, если нужно просто стилизовать часть содержимого. Имена классов в коде ниже, а также то, что элементы вложены в <header>, указывают на то, что они предназначены лишь для визуального разделения хедера на 4 колонки. Они не являются важными разделами страницы. Конечно, поиск и блок навигации важны, но <nav> сам по себе уже является является ориентиром (landmark), а форму поиска можно превратить в ориентир, добавив атрибут role="search". В HTML-спецификации есть полезное практическое правило: Основное правило заключается в том, что элемент <section> уместно использовать в том случае, если его содержимое может быть явно представлено в структуре разделов документа Роль и предназначение раздела <section> меняются, когда вы помечаете его с помощью атрибута aria-label, aria-labelledby или title. Именование с помощью этих атрибутов превращает его в ориентир, который задаёт ему ARIA-роль "region" и даёт пользователям скринридеров более простой доступ к разделу. Другие ориентиры (например, <header>, <main> или <footer>) также являются важными разделами страницы. С учётом сказанного, делайте <section> ориентиром только в том случае, если он играет важную роль на текущей странице. Если на странице содержится несколько заголовков <h1> и некоторые из них вложены в <section>, семантически у вас по-прежнему несколько заголовков 1 уровня. Размер шрифта элемента <h1>, вложенного в <section>, может уменьшиться, но уровень, сообщаемый вспомогательным технологиям, всё ещё 1. Если вы не уверены, следует ли использовать элемент <section>, возможно не стоит сильно заморачиваться на этот счёт. Гораздо важнее создать правильную структуру документа. При нажатии на ссылку, содержащую email-адрес, можно предварительно заполнять поля заголовка и тела создаваемого сообщения. При нажатии на составленную таким образом ссылку, стандартный email-браузер должен открыть окно с новым email-сообщением, содержащим тему "HTMHell issue 9 was fantastic" и сообщение "Thanks, Manuel". При создании ссылки на email-адрес вы можете предоставить тему, получателя и тело сообщения. Делается это путём написания email-адреса, за которым следует символ "?", название заголовка, символ "=", и значение заголовка. При создании таких ссылок есть возможность не указывать ни одного адреса, указать только один или несколько адресов Если вы не укажете значение для mailto, стандартный email-клиент откроет новое окно с сообщением, все поля которого будут пустыми. Результат Добавит в поле "Кому" указанный адрес Результат Если адресов несколько, их необходимо разделить запятой без пробелов Результат Задать нескольких получателей также можно с помощью параметра to Результат Поля "Кому" (To) и "Копия" (Cc) заполнятся разными адресами Результат Поля "Кому" и "Скрытая копия" заполнятся разными адресами Результат Вы можете определить тему с помощью параметра subject. Специальные символы и пробелы должны быть закодированы Результат Определить тело сообщения можно с помощью параметра body Результат Специальные символы, переносы строк и пробелы должны быть закодированы Результат В тело сообщения нельзя добавлять HTML, только простой текст Пробелы должны быть закодированы как %20 Переносы строк должны быть закодированы как %0D%0A Чтобы избежать проблем с совместимостью, не следует несколько раз указывать один и тот же заголовок. Например, ?to=a@b.at?to=b@c.at Изменить последовательность упорядоченных списков можно с помощью атрибута reversed. 8.Curly Sue (1991)7. Uncle Buck (1989)6. She's Having a Baby (1988)5. Planes, Trains & Automobiles (1987)4. Ferris Bueller's Day Off (1986)3. Weird Science (1985)2. The Breakfast Club (1985)1. Sixteen Candles (1984) При использовании атрибута reversed порядок элементов списка остаётся прежним, меняется только нумерация от большего к меньшему. Можно комбинировать атрибуты reversed и start для изменения числа, с которого начинается отсчёт. 5.Fifth4.Fourth3 Third На неупорядоченные списки (<ul>) данный атрибут не влияет, даже если с помощью атрибута попытаться изменить тип списка Third Second First С помощью таблиц стилей, предназначенных для печати, вы можете облегчить жизнь некоторым пользователям. Одним из самых захватывающих и сложных в веб-разработке является то, что мы не можем заранее предсказать, как пользователи будут использовать содержимое страницы. Существует большое количество различных устройств, браузеров, способов ввода и вывода содержимого. Некоторые люди предпочитают использование навигации, другие — поиска. Одним нравится минималистичный режим чтения, другим — распечатанная версия. Да, я знаю, сейчас 2021 год, но у людей по-прежнему есть принтеры и они всё ещё время от времени что-то распечатывают. Печатная версия страниц не должна быть идеальной, но мы должны быть уверены, что главное содержимое страницы хотя бы доступно пользователю после печати на бумаге. Мы можем сделать это, предоставив соответствующие стили и включив их в HTML. Данные стили применятся только в том случае, если пользователь попытается распечатать страницу. Обратите внимание, что этот файл будет загружаться вместе с другими стилями, но не будет приводить к задержке рендеринга страницы. При отладке таких стилей нет необходимости печатать страницу после каждого исправления. Браузеры могут эмулировать данную версию документа. В панели разработчика браузера в блоке "Rules" есть специальная кнопка с иконкой, похожей на документ или распечатанную страницу.  В панели разработчика браузеров Chrome/Edge можно нажать на кнопку с тремя точками, перейти в "More tools", далее "Rendering" и наконец в разделе "Emulate CSS media type" выбрать "print". На панели инструментов браузера в разделе "Elements" есть кнопка с иконкой в виде принтера. HTML предоставляет нам 2 способа определения зачёркнутого текста: элементы 
 и <del>. С точки зрения семантики "зачёркнутый текст" может отображаться перечёркнутым, хотя это и не обязательно. Используйте элемент 
, чтобы выделить содержимое, которое больше не актуально. Типичным примером является старая и новая цена товара. Важным моментом здесь является то, чтобы отображать не только саму цену, но и её текстовое описание, потому что не все скринридеры озвучивает содержимое элемента 
 нужным образом. Данный фрагмент кода без описательного текста скринридеры могут озвучить как "19 евро точка 99 9 евро точка 99", что может запутать пользователя. Если нужно отобразить только цену, описательный текст можно скрыть визуально Данная разметка будет и корректно озвучиваться скринридерами и корректно отображаться визуально Steve Faulkner и Adrian Roselli представили способы использования псевдоэлементов, чтобы сделать элемент 
 доступным в статьях Short note on making your mark (more accessible) и Tweaking Text Level Styles. Используйте элемент <del>, чтобы выделить содержимое, которое было удалено из документа. С помощью необязательного атрибута cite можно указать ссылку на  дополнительную информацию про редактирование, а с помощью атрибута datetime указать дату и время редактирования. Talkback в операционной системе Android озвучит предложение как "The nose flute is the mots deletion most insertion beautiful instrument in the world", но VoiceOver и другие скринридеры озвучат как "The nose flute is the mots most beautiful instrument in the world". Чтобы заставить скринридеры озвучивать факт редактирования, Адриан и Стив рекомендуют использовать псевдоэлементы. С использованием этой техники VoiceOver озвучит "The nose flute is the deletion start mots deletion end insertion start most insertion end beautiful instrument in the world". Разница между использованием <ol>, <ul> и <div> для списка элементов. Недавно в Twitter кто-то спросил: "Действительно ли семантический HTML так полезен?". Это хороший вопрос, поскольку немало людей знают, КАК писать HTML, но не знают, ПОЧЕМУ. В данной статье я постараюсь объяснить, в чём польза семантического HTML. Начнём с элементов <ol> и <ul>. Скринридеры могут озвучить их как список элементов Скринридеры могут озвучить количество элементов в списке Скринридеры могут озвучить номер каждого элемента Пользователи скринридеров могут с помощью сочетания клавиш быстро переходить от списка к списку элементов страницы Данные элементы группируют содержимое визуально Данные элементы предоставляют селектор для стилизации (не)упорядоченных списков в CSS Элемент неупорядоченного списка <ul> мы используем для группировки некоторого количества логически связанных элементов, перечисленных в произвольном порядке. NVDA в браузере Firefox озвучит данную разметку следующим образом: "List with 3 items, Bullet Jay and Silent Bob Strike Back, Bullet Mallrats, Bullet Clerks, Out of list" Элемент упорядоченного списка <ol> мы используем для группировки некоторого количества логически связанных элементов, перечисленных в определённом порядке. NVDA в браузере Firefox озвучит данную разметку следующим образом: "List with 3 items, 1 Clerks, 2 Mallrats, 3 Jay and Silent Bob Strike Back, Out of list" Исли семантические элементы не использовать, скринридеры просто озвучат набор несвязанных строк. Это тоже может сработать, но зачастую гораздо лучше задать структуру и сообщить больше информации. NVDA в браузере Firefox озвучит данную разметку следующим образом: "Clerks, Mallrats, Jay and Silent Bob Strike Back" Существует возможность управлять тем, как виртуальные клавиатуры используют заглавные буквы при написании слов и символов. Представим, у вас есть поле ввода, в которое пользователи должны вводить текст с использованием только строчных букв. Но если поставить фокус на текстовое поле, по умолчанию первая введённая буква будет заглавной. Работу с полями можно сделать удобнее, если управлять этой логикой ввода заглавных букв. Если установить атрибут autocapitalize в значение none, автоматического ввода заглавных буквы больше не будет. Данный атрибут поддерживается браузером Safari на iOS и браузерами Chrome, Edge и Samsung Internet на Android. Firefox поддерживает его только за флагом. Также нужно уточнить, что он никак не влияет на ввод с помощью физической клавиатуры. Помимо none есть ещё три значения: none — переключение на ввод заглавных букв должно быть отключено characters — все буквы должны быть заглавными sentences — первая буква каждого предложения по умолчанию заглавная; все остальные буквы вводятся строчными words — первая буква каждого слова должна быть заглавной; все остальные буквы вводятся строчными Порой бывает полезной возможность отключить проверку орфографии в полях ввода разных типов: input, textarea, contenteditable Необходимость проверки определяется атрибутом spellcheck, для которого необходимо задать значение true или false. Если атрибут не представлен, браузер сам решает, нужно ли выполнять проверку в конкретном поле. Если, например, в браузере Firefox нажать на одно из полей приведённой выше разметки, вы увидите волнистую красную линию, указывающую на неправильное написание. Обратите внимание, что в зависимости от браузера и выбранного языка поведение может отличаться. Факт присутствия атрибута является больше подсказкой и не принуждает браузера выполнять проверку. А в этом поле подчёркивания быть не должно, поскольку атрибут spellcheck установлен в значение false С помощью HTML можно определять так называемые ориентиры, важные области страницы. Они могут быть очень полезными, особенно для пользователей скринридеров. Элемент ARIA-роль Условия header banner Только в контексте элемента body, а не когда является потомком элементов <article>, <aside>, <main>, <nav> или <section> nav navigation  main main  section region Когда имеет доступное название, заданное с помощью aria-labelledby, aria-label или title form form Когда имеет доступное название, заданное с помощью aria-labelledby, aria-label или title form search Когда задан атрибут role="search" aside complementary  footer contentinfo Только в контексте элемента body, а не когда является потомком элементов <article>, <aside>, <main>, <nav> или <section> Пример списка ориентиров без названий в VoiceOver на macOS Пример списка ориентиров с названиями в VoiceOver на macOS Избегайте повторов при названии навигационных блоков. Название вроде "primary navigation" может быть озвучена как "primary navigation navigation". Вместо этого назовите её просто "primary" Если на странице присутствует два ориентира панели навигации с одинаковым набором ссылок, то и назвать их стоит одинаково Не добавляйте на страницу слишком много ориентиров. Это может усложнить навигацию Ориентир banner может быть только один Ориентир contentinfo может быть только один Документ не должен содержать более одного элемента <main> без атрибута hidden Если на странице несколько ориентиров complementary, у каждого должно быть уникальное название (aria-label или aria-labelledby) Если на странице несколько ориентиров form, у каждого должно быть уникальное название (aria-label или aria-labelledby) Обычно нет необходимости явно задавать ориентиры. Например, <header></header> вполне достаточно, нет необходимости указывать `<header role="banner"></header>` В большинстве своём ориентиры хорошо поддерживаются, но поддержка может отличаться, особенно для ориентира form. Рекомендуется тестировать ориентиры на разных скринридерах и браузерах. Некоторые из них могут намеренно не озвучивать определённые ориентиры. Элемент <track> позволяет указывать для медиа-элементов синхронизированный текст (например, подписи или субтитры). Например, если для элемента <video> необходимо подставить в определённый момент подписи или субтитры, это можно сделать с помощью встроенного элемента. Получившийся результат можно посмотреть на странице оригинальной статьи. Ваш браузер должен автоматически показывать субтитры на английском языке, а в элементах управления данным видео должна быть настройка, позволяющая отключить их. С элементом <track> можно использовать некоторые атрибуты: src — указывает путь к файлу .vtt, содержащему текст kind — определяет тип добавляемой текстовой дорожки subtitles — для перевода произносимой на видео речи captions — для расшифровки аудио и важной невербальной информации descriptions — для текстового описания содержимого видео chapters и metadata — треки, предназначенные для использования в скриптах (не отображаются пользователю) label — заголовок текстовой дорожки, отображаемый в интерфейсе видео-элемента srclang — позволяет указать язык текстовой дорожки default — определяет текстовую дорожку по умолчанию Данные подписи и субтитры можно стилизовать с помощью CSS. Список поддерживаемых свойств можно посмотреть на MDN. Имеется событие JavaScript, которое вызывается при смене отображаемого в данный момент фрагмента текста.  Содержимое файла с текстовой дорожкой имеет следующий формат 00:00:00.240 --> 00:00:07.040 Hi! My name is Manuel and if you know me, you know that I like to complain about HTML others have 00:00:07.040 --> 00:00:14.880written. I post about it on Twitter, I even have a website called htmhell.dev where I post bad code, Панель разработчика современных браузеров позволяет отлаживать функции доступности HTML-элементов. Например, ваши пользователи сообщают о том, что с помощью клавиатуры не могут взаимодействовать с бургер-кнопкой для вызова меню в панели навигации. Или что при использовании скринридера название кнопки очень странное и сбивает с толку. Есть несколько способов исправить это с помощью панели разработчиков. Для начала давайте определимся с требованиями для правильной работы кнопки: Подпись — наличие видимого текста или текстовой альтернативы Семантика — корректная ARIA-роль кнопки Фокус — на кнопку можно поставить фокус с помощью кнопки Tab клавиатуры События — можно нажать на кнопку с помощью нажатия Пробел или Enter В браузере Chrome или Edge откройте панель разработчика, нажмите на  вкладку "Elements", выберите элемент, который нужно проверить и перейдите на вкладку "Accessibility". Панель доступности показывает, как элемент представлен в дереве доступности, какие ARIA-атрибуты имеет и вычисленные значения его свойств. Если проинспектировать следующую кнопку, мы узнаем: Подпись — кнопка берёт название "Navigation" из атрибута aria-label(Name: "Navigation") Семантика — у кнопки правильная роль ( `Role: button` ) Фокус — кнопка способна получать фокус (`Focusable: true`) Рассмотрим ещё один пример. Данная кнопка выглядит также, но менее доступна Подпись — у кнопки её попросту нет (Name: " ") Семантика — роль "generic", что значит, что у неё нет никакого семантического значения (Role: generic) Фокус — кнопка не может получать фокус (свойство Focusable пропущено) Браузер Edge выделяет потенциальные проблемы в разметке вашего документа прямо в панели разработчика на вкладке Elements и показывается подробное описание на вкладке "Issues". Одна из моих любимых функций панели разработчика в браузере Edge — встроенный линтер, которые выделяет потенциальные проблемы в вашем HTML, помечая проблемные элементы волнистой линией. Если на открывающий тег навести курсор мыши, появится всплывающее окошко с описанием проблемы. Нажав Shift+ЛКМ или ПКМ и выбрав "View Issues", можно посмотреть подробное описание данной проблемы или напрямую открыть эту панель "Issues" (CMD/Ctrl + Shift + P -> Show Issues), чтобы посмотреть список все проблем найденных на странице. Данные берутся из axe, @mdn/browser-compat-data, and webhint.