Как заявил Консорциум World Wide Web, «[T]влияние инвалидности радикально изменилось в Интернете, потому что Интернет устраняет барьеры для общения и взаимодействия, с которыми многие люди сталкиваются в физическом мире. Однако когда веб-сайты, приложения, технологии или инструменты плохо спроектированы, они могут создавать барьеры, мешающие людям пользоваться Интернетом». Многие веб-дизайнеры и программисты настолько сосредоточены на создании функционального и привлекательного продукта, что забывают о доступности. Не позволяй этому быть тобой. Мы как разработчики обязаны сделать наши творения доступными для использования как можно большему количеству людей, независимо от того, как они получают доступ к этим творениям.

Один из способов сделать ваш веб-сайт или веб-приложение более доступным — использовать правильную семантическую разметку. Дизайнеры часто полагаются на чисто визуальные подсказки для неявной передачи идей — естественно, на ум приходят настоящие изображения, но также имейте в виду, как часто различия в размере или цвете текста используются для обозначения важности. Использование семантической разметки может помочь передать те же самые идеи и структуры другим способом. Но подождите, к чему вообще относится семантическая разметка?

В HTML семантические элементы — это те элементы, имена которых ясно обозначают их содержимое: в эту категорию попадают элементы <form>, <table>, <button> и многие другие. К счастью для нас, HTML5, выпущенный в 2014 году, представил много новых семантических элементов, таких как элементы <header>, <footer> и <section>. Одно из многих преимуществ использования соответствующих семантических элементов заключается в том, что они предоставляют дополнительную информацию пользователям, использующим программы чтения с экрана и другие средства специальных возможностей, предоставляя им контекст для навигации; ключевой частью этого является то, что вспомогательная технология, которая интерпретирует ваш сайт или приложение для пользователя, может более точно сказать, для чего предназначен каждый компонент, а затем может более четко передать ваш интерфейс и информацию пользователю.

Итак, как бы вы это реализовали? Еще до того, как вы начнете, убедитесь, что у вас есть план — крайне важно иметь четкую и организованную структуру контента, которая имеет смысл. Оттуда ваша разметка должна отражать эту структуру и соответствующим образом маркировать ее, когда это необходимо. Всегда используйте правильный HTML для правильной работы.

Например, многие веб-страницы имеют верхний колонтитул вверху и нижний колонтитул внизу, а основное содержимое находится между ними, которое может состоять из некоторой комбинации изображений и текста. Вы вполне можете сконструировать все это из различных <div> элементов, но помните, что сейчас мы используем семантические элементы. Ваш заголовок должен быть элементом <header>, нижний колонтитул должен быть элементом <footer>, а основное содержимое должно храниться в элементе <main>. Вы можете пойти дальше и поместить дополнительную информацию в элемент <aside>, который будет содержать контент, поддерживающий основной контент, но также предоставляющий значимую информацию сам по себе. Все это имеет смысл, верно? Таким образом, пользователи, использующие специальные программы, которые отображают только основное содержимое сайта, получат более точные результаты, а пользователи, использующие программы для чтения с экрана, смогут точно перейти к той информации, к которой они действительно хотят получить доступ.

Семантические элементы также предоставляют встроенную функциональность, которую в противном случае вам пришлось бы затрачивать значительные усилия, если бы вы изначально использовали неправильный элемент для выполнения функции. Например, вы можете сделать что-либо кликабельным с помощью правильного кода, но если вы используете элемент <button>, не только пользователи могут сказать, что этот элемент предназначен для клика, но и элементы <button> поставляются с простой манипуляцией с клавиатуры из коробки. Пользователи клавиатуры, которые не могут использовать указывающие устройства, такие как мыши, могут перемещаться по вашим кнопкам, чтобы выбрать нужную.

Практически для каждой идеи или фрагмента контента, который вы хотите выразить, существует семантический элемент, который поможет вам в этом. Используйте упорядоченный список (<ol>) с несколькими элементами списка (<li>) для передачи нумерованного списка вместо того, чтобы печатать один с разрывами строк между ними. Используйте элементы заголовков (от <h1> до <h6>) для обозначения текстовых заголовков, а не просто изменяйте размер текста с помощью стилей. Хотя последние решения в каждом случае могут дать визуальный результат, который вы имели в виду, они ничего не делают для пользователей, которые могут использовать что-то вроде программы чтения с экрана для доступа к вашему продукту. Программы чтения с экрана будут делать паузу после каждого элемента <li>, но если у вас есть только несколько элементов <br> для разбиения текста, программа чтения с экрана интерпретирует все это как большой блок, который затем считывается сразу. И программы чтения с экрана также смогут сообщить пользователю, является ли определенный фрагмент текста заголовком, если вы пометите его как <h1>, и многие программы чтения с экрана также позволят пользователям переключаться между заголовками — вы можете себе представить, как это может пригодиться. .

В заключение, использование семантической разметки в вашем HTML имеет решающее значение для улучшения доступности вашего веб-сайта или веб-приложения, но это только один шаг из многих, которые вы можете сделать. Я даже не стал добавлять замещающий текст к изображениям или использовать WAI-ARIA (Инициатива доступности веб-сайтов — Доступные многофункциональные интернет-приложения) или даже функции специальных возможностей для реализации на других языках, таких как CSS или JavaScript. Возможно, я сделаю это в будущем блоге, но если вы разработчик и не знакомы с этими вещами, я настоятельно рекомендую вам изучить эти вещи самостоятельно, прежде чем приступать к следующему проекту.