Доступность – это практика, обеспечивающая равную доступность веб-сайтов для людей с ограниченными возможностями, чтобы они имели равный доступ к товарам и услугам, предоставляемым этими сайтами. Это неотъемлемая часть профессионального веб-дизайна и разработки.


Contents

Почему вы должны заботиться о доступность?

Существует много причин, по которым разработчики, дизайнеры и их работодатели / клиенты должны гарантировать, что доступность является ранней и неотъемлемой частью процесса веб-разработки..

  • На многих территориях, таких как США, ЕС, Великобритания, Израиль и Япония, существует законное требование не дискриминировать людей из-за их инвалидности. В США в прошлом году, 2235 новых исков на веб-сайте ADA были поданы в федеральном суде. Это один в час.
  • Доступные сайты, как правило, лучше закодированы, более надежны и имеют высокий рейтинг в поисковых системах.
  • Доступные сайты, как правило, больше подходит для посетителей без инвалидности, приводя к большему удовлетворению и преобразованию.
  • Недоступные сайты вредны для бизнеса. В 2019 году Опрос в Великобритании обнаружили, что более 4 миллионов человек отказались от розничного веб-сайта из-за барьеров доступности, которые они обнаружили. Потерянный бизнес, Click-Away Pound, составил 17,1 миллиарда фунтов стерлингов. Это миллиард. В одной Великобритании.
  • Это плохой бизнес, чтобы добровольно отвергать потенциальных клиентов.

Общие стандарты и проблемы

К счастью, W3C (организация, которая разрабатывает многие стандарты, на которые опирается сеть) имеет стандарт того, как сделать веб-сайты доступными. Это называется Правила доступности веб-контента (WCAG). Существует три уровня соответствия (A, AA, AAA), где «A» является самым низким уровнем доступности. Я рекомендую вам стремиться к уровню АА.

К сожалению, WCAG – это длинное, сухое и очень техническое чтение, поэтому давайте посмотрим, что вы можете сделать относительно легко, и получите максимальную отдачу от затраченных средств. Это не все, что вам нужно знать, контрольный список; это контрольный список наиболее распространенных ошибок, и ошибки, которые, по словам людей с ограниченными возможностями, являются их основными препятствиями, с практическими предложениями по решению проблем. Все внешние ссылки открываются в новой вкладке.

В опросе Click-Away Pound респондентов с ограниченными возможностями спросили, каковы были основные блоки для совершения покупок. Вот главные барьеры (было разрешено несколько ответов):

  1. Переполненные страницы со слишком большим содержанием – 66%
  2. тесты reCAPTCHA – 59%
  3. Плохая разборчивость (контрастность, разметка текста) 56%
  4. Отвлечение движущихся изображений и графики – 53%
  5. Плохая информация о ссылках – 59% (77% для пользователей программ чтения с экрана)
  6. Форма заполнения 56%

Как улучшить доступность сайта

Во-первых, обратите внимание, что ни одна из пяти главных проблем не является технической проблемой – это ошибки дизайна или копирайтинга.

1) Слишком много контента

Вкратце: разбейте текст на разделы с заголовками и маркированными списками. Используйте простой язык.

Хорошо известно, что с увеличением числа вариантов усилия, необходимые для сбора информации и принимать правильные решения. То же самое со слишком большим количеством контента – это скоро становится подавляющим. Сведение контента к основам – трудоемкое ремесло; как писал Марк Твен (предположительно): «У меня не было времени написать короткое письмо, поэтому я написал длинное».

Недавняя книга Письмо – это проектирование предполагает

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

Так:

  • Есть только один

    на странице.

  • Используйте подзаголовки свободно; он разбивает «кусочек» текста на зрячих пользователей, в то время как пользователи вспомогательных технологий, таких как программы чтения с экрана, могут использовать клавишу быстрого доступа для перехода между заголовками или получения ментальной карты содержимого из структуры заголовков..
  • Не пропустите уровень заголовков. Например, если вы используете

    , убедитесь, что ему предшествует

    .

  • Используйте маркированные списки (как это!), Правильно помеченные в HTML как
      ,

    • . Программы чтения с экрана объявят «Список из 10 элементов» (и позволят пользователю перепрыгивать через них).

    Используйте простой английский

    Monzo Bank’s Руководство «Наш тон голоса» объясняет важность простого языка:

    В 2010 году адвокат США Шон Фламмер провел эксперимент. Он попросил 800 судей окружного суда принять либо традиционный «юридический» аргумент, либо один из того, что он назвал «простым английским».

    Судьи в подавляющем большинстве предпочитали простую английскую версию (от 66% до 34%), и это предпочтение сохранялось независимо от их возраста или происхождения..

    Заметки Flammer (PDF) простой английской версии:

    Он короче почти на страницу, поэтому он, очевидно, исключает ненужные предложения и слова. Его предложения в среднем 17,8 слов, в отличие от 25,2 слов.

    Он делает вывод:

    Теперь у нас есть 25 лет эмпирических исследований, которые привели к неизбежному выводу: если вы хотите понравиться и убедить своего читателя, пишите на простом английском языке..

    2) ReCAPTCHA

    Вкратце: не заставляйте своих пользователей прыгать через потенциально невозможные обручи, чтобы сэкономить время разработчика.

    Респонденты часто говорили о старом Версия ReCAPTCHA:

    версии reCAPTCHA с шатким текстом, который необходимо перепечатать

    Я борюсь с изображениями и приходится набирать цифры или буквы. В том случае, когда мне приходится нажимать, какие изображения имеют магазин или что-то еще, я всегда скучаю по ним или запутываюсь и использую энергию, которой у меня нет…

    Стиль шатких букв в reCAPTCHA устарел. Гораздо чаще встречается новое воплощение под названием «No CAPTCHA reCAPTCHA» (также известное как «Я не робот »Флажок), который требует от пользователя установить флажок, подтверждающий, что он не робот, и который использует секретное вуду для оценки пользователя. Если они пройдут, дальнейшее взаимодействие не требуется. Однако, если они потерпят неудачу, будет отображена дополнительная задача:

    Частичный скриншот капчи, требующей от пользователя щелкнуть все квадраты, на которых изображены апельсины

    Имейте в виду, что тип CAPTCHA, который требует от пользователя щелчка по всем квадратам с (скажем) знаком улицы, не обязательно является международным. Как пишет Теренс Иден, CAPTCHA не доказывают, что вы человек – они доказывают, что вы американец.

    Наиболее доступной формой reCAPTCHA является reCAPTCHA v3 который не требует взаимодействия с пользователем, но требует от вас больше работы, чтобы справиться с посещениями, которые не прошли тест:

    Это чистый API-интерфейс JavaScript, возвращающий оценку и позволяющий вам действовать в контексте вашего сайта: например, требовать дополнительных факторов аутентификации, отправлять сообщения на модерацию или регулировать количество ботов, которые могут очищать содержимое.

    3) плохая разборчивость

    Вкратце: убедитесь, что текст имеет адекватный контраст, удобочитаем и не оправдан.

    • Обеспечить адекватный контраст. Одним из наиболее распространенных блокировщиков доступа в Интернете является плохая контрастность текста и фона. В рекомендациях W3C требуется коэффициент контрастности не менее 4,5: 1, за исключением крупномасштабного текста и изображений крупномасштабного текста, которые должны иметь коэффициент контрастности не менее 3: 1 (логотипы и «случайный» текст не учитываются). Есть много утилит, которые могут измерить контрастность для вас; мой личный фаворит – превосходная Ада Роуз Кэннон контрастный виджет, это полезный браузерный букмарклет, который выделяет области с недостаточной контрастностью на вашей странице.
    • Не иметь заглавных букв. Есть доказательства того, что их труднее читать, потому что заглавные буквы имеют одинаковую высоту, поэтому мы не можем распознать форму общих слов. Кроме того, некоторые программы чтения с экрана будут прописывать группы заглавных букв, как если бы они были сокращениями (например, BBC, DOJ и т. Д.). Если вы должны иметь все заглавные заголовки, напишите их в обычном регистре в HTML и преобразуйте их с помощью CSS преобразование текста: верхний регистр.
    • Выровнять текст по левому краю. (Для страниц на языках справа налево, таких как арабский или иврит, выравнивание текста по правому краю.) Не оправдывайте его, так как это затрудняет чтение для людей с дислексией. Руководство по стилю Британской ассоциации дислексии также предлагает

      Используйте шрифты без засечек, такие как Arial и Comic Sans, так как буквы могут казаться менее насыщенными. Альтернативы включают Verdana, Tahoma, Century Gothic, Trebuchet, Calibri, Open Sans.

    4) отвлекающие изображения и графику

    Вкратце: позволить пользователям остановить любое движение; уважать их настройки операционной системы; не воспроизводить видео автоматически.

    Один респондент опроса Click-Away Pound написал,

    Сайты, которыми я пользовался без особых проблем, теперь становятся проблемой, так как теперь они занимаются перемещением рекламы и постоянно загружают больше рекламы по мере покупки..

    Самый базовый уровень WCAG требует: «Для любой движущейся, мигающей или прокручиваемой информации, которая (1) запускается автоматически, (2) длится более пяти секунд и (3) представляется параллельно с другим контентом, существует механизм для Пользователь может приостановить, остановить или скрыть его, если движение, мигание или прокрутка не являются частью действия, где это необходимо »..

    Отвлечение – раздражение, особенно для людей с СДВГ или другими когнитивными нарушениями. Но движение и мигание также могут вызвать судороги, поэтому в соответствии с рекомендациями WCAG контент не должен мигать более 3 раз в течение 1 секунды..

    Уважайте выбор пользователя для анимации

    Все основные операционные системы позволяют пользователю выражать предпочтение уменьшенному движению на экране – возможно, потому, что у них возникает расстройство вестибулярного спектра, вызванное движением. Ваш сайт может определить, сделал ли пользователь это с помощью CSS. предпочитает восстановленный-движение медиа-запрос.

    Здесь мы разрешаем анимировать кнопку только в том случае, если пользователь не выразил никаких предпочтений:

    @media (предпочитает-уменьшенное движение: нет предпочтения) {
    кнопка {
    / * `вибрировать` ключевые кадры определены в другом месте * /
    анимация: вибрация 0,3 с линейная бесконечная обе;
    }
    }

    Если вы хотите обновить сайт с множеством правил анимации, следующее может остановить все ранее объявленные CSS-анимации:

    @media (предпочитает-уменьшенное-движение: уменьшить) {
    *,
    *::перед,
    *::после {
    продолжительность анимации: 0,001 с! важно;
    длительность перехода: 0,001 с! важно;
    }
    }

    Что касается уважения предпочтений операционной системы пользователя, вы можете рассмотреть проектирование вашего сайта для темного режима.

    5) Плохая информация о ссылках

    Вкратце: сделайте ссылки узнаваемыми, с уникальным текстом ссылки. Предупредить пользователей, если ссылка откроет новую вкладку или файл.

    Одной из основных причин плохих ссылок часто является плохой копирайтинг. Большинство программ чтения с экрана позволяют пользователю быстро просматривать список ссылок на странице (в наиболее популярной коммерческой программе чтения с экрана, JAWS, сочетание клавиш Ins + F7; в бесплатная программа чтения с экрана NVDA, тот же самый ярлык на клавиатуре вызывает список элементов, в котором перечислены ссылки на страницы, заголовки и ориентиры).

    Однако, если каждая ссылка имеет текст с надписью «Нажмите здесь» или «Читать дальше», и ничто иное, чтобы отличить их, это бесполезно. Самый простой способ решить эту проблему – просто написать уникальный текст ссылки, но если это невозможно, вы можете переопределить текст ссылки для вспомогательных технологий, используя уникальный атрибут aria-label для каждой ссылки..

    Вот хороший пример из Веб-сайт Joomla:

    Сайт Joomla, показывающий две разные истории, каждая с одинаковыми

    Видимый текст ссылки просто «читать дальше», но Joomla использует ария-этикетка Атрибуты, чтобы сделать каждый уникальный для вспомогательных технологий:

    Читать далее
    
    Читать далее

    Из-за ария-этикетка текст будет использоваться вместо текста ссылки с помощью вспомогательных технологий, W3C рекомендует начинать текст, используемый в метке aria, с текста, используемого в ссылке, как «это позволит обеспечить постоянную связь между пользователями».

    Замечания: Несколько плохих советов, которые я до сих пор вижу на старых сайтах, это добавлять пояснительный текст к ссылкам, используя заглавие атрибут:

    Читать дальше>

    Не делай этого. название не доступно большинству программ чтения с экрана (разработчики заполняли его ключевыми словами для целей «SEO», поэтому производители программ чтения с экрана отключили его по умолчанию), а браузеры представляют атрибуты заголовка в виде «всплывающих подсказок», которые доступны только пользователям мыши при наведении курсора..

    Ссылки должны выглядеть как ссылки

    По умолчанию браузеры подчеркивают ссылки. Лучше не менять это, но если вы проиграете борьбу на автостоянке с дизайнером по этому поводу, текст ссылки должен иметь контрастность 3: 1 по сравнению с окружающим текстом, не содержащим ссылок, и должен иметь некоторое «нецветное обозначение» Что они являются связующим звеном при наведении или фокусировке, например:

    a: hover, a: focus {text-ornament: underline;}

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

    «Нецветное обозначение» (в нашем случае подчеркивание) гарантирует, что посетители с плохим зрением или дальтонизмом увидят изменение при наведении или фокусировке. (Программы чтения с экрана автоматически объявляют «Ссылка» перед текстом ссылки.)

    Сообщите людям, если ссылка открывает новую вкладку / страницу

    Посетитель может сбить с толку, если при активации ссылки открывается новая вкладка или новое окно, особенно если это делают только некоторые ссылки на странице (например, только внешние ссылки открывают новую вкладку). Если вы должны сделать это, вы должны предупредить пользователя либо в тексте ссылки, либо с помощью метода aria-label выше.

    Скажите людям, если ссылка на файл

    Если ссылка на файл (например, PDF или видео), сообщите об этом пользователю в тексте ссылки. Не прячь это в ария-этикетка, поскольку это может быть полезно для многих зрячих пользователей (например, некоторые мобильные телефоны не могут открыть файл .docx). Если это большой файл, рассмотрите возможность предупреждения пользователя о приблизительном размере; они могут не захотеть загружать большой видеофайл через 3G.

    Вы также можете использовать скачать атрибут, который заставляет браузер открывать диалог загрузки файлов операционной системы. Собрав все это вместе, код будет выглядеть так:

    Годовой отчет (PDF, 240 МБ)

    6) Еще одна ошибка дизайна: снятие кольца фокусировки

    Вкратце: убедитесь, что пользователь клавиатуры всегда может видеть, где он в данный момент сфокусирован.

    Мы упоминали : фокус стили до. Они являются бесценным визуальным индикатором для тех людей, которые по какой-либо причине не могут использовать мышь: возможно, у них RSI, или болезнь Паркинсона, или рассеянный склероз. По умолчанию браузеры отображают кольцо фокуса на текущем элементе. Вот ссылка «Главная» на моем личном сайте в браузере Chromium:

    Снимок экрана кольца фокусировки Chromium по умолчанию вокруг ссылки (которая также является изображением)

    Тем не менее, некоторые люди считают, что это эстетически неприятно, когда они используют мышь и отключают ее с помощью CSS, что делает сайт недоступным для пользователей клавиатуры..

    Введите новый стандарт, впервые разработанный Firefox, под названием : Фокус видимый. Это применяет фокусировочное кольцо к элементу, если оно было достигнуто с помощью клавиатуры или не указывающего мыши устройства, но ничего не показывает пользователям мыши. Поскольку это поддерживается только в Firefox (на момент написания), Патрик Лауке предлагает следующий CSS, чтобы играть хорошо со всеми браузерами:

    button: focus {/ * некоторые захватывающие стили фокусировки кнопки * /}
    кнопка: фокус: нет (: видимый фокус) {
    / * отменить все вышеуказанные стили кнопок
    если кнопка имеет фокус, но браузер не будет нормально
    показать стили фокуса по умолчанию * /
    }
    кнопка: видимый фокус {/ * некоторые даже * еще * захватывающие стили фокусировки кнопки * /}

    7) Заполнение формы

    Вкратце: создайте поля формы, которые выглядят как поля формы, каждое из которых связано с меткой. Не отключайте автозаполнение.

    Учитывая жизненную важность форм для сайтов электронной коммерции, меня удивляет, сколько я вижу недоступных форм. Часто это происходит из-за того, что старые браузеры не допускали много способов оформления элементов формы, поэтому разработчики подделывали их с помощью других элементов HTML. Современные браузеры позволяют привлекательные флажки, радио кнопки, выборочно выбранные компоненты и комбинированные списки, доступные элементы управления автозаполнением и более.

    Автозаполнение – твой друг

    Разрешение браузерам автоматически заполнять формы требует от посетителей меньшего, поэтому они с большей вероятностью заполнят форму и зарегистрируют / купят ваш продукт. Автозаполнение в браузерах: глубокое погружение это отличная статья на eBay об этом (и они должны знать).

    Кроме того, автозаполнение является единственным достаточным методом в настоящее время для достижения соответствия AA с Критерий успеха 1.3.5: Определение цели ввода.

    Сделать поля формы похожими на поля формы

    По умолчанию браузеры отображают поля ввода формы в виде полей. В любом случае, стилизуйте их с полями, отступами и границами, но сохраняйте их как поля. Многие дизайнеры следовали шаблону Google Material Design до 2017 года, когда для ввода текста пользователь использовал одну строку:

    Старый дизайн материала, с горизонтальной линией, а не прямоугольной рамкой

    Однако Google обнаружил, что линия под старыми текстовыми полями не была понятна некоторым пользователям, часто путалась с разделителем, и изменил дизайн. В юзабилити-тест с 600 участниками, они обнаружили, что

    вложенные текстовые поля с прямоугольной (прямоугольной) формой работают лучше, чем те, которые имеют линейную доступность … Сегодня эти новые текстовые поля появляются во всех продуктах Google – от страниц входа в аккаунт до форм Google.

    Если вы планируете принять полную библиотеку пользовательского интерфейса Material Design от Google, прочитайте Прекратить использование текстовых полей Material Design! Мацуко Фридланд, чтобы увидеть, отвечает ли он вашим потребностям.

    Пометить все поля формы

    Все поля формы (текстовые поля, флажки, переключатели, ползунки и т. Д.) Должны быть помечены. Лучший способ сделать это – использовать HTML ; как говорит WCAG, «стандартные элементы управления HTML уже соответствуют этому критерию успеха при использовании в соответствии со спецификацией».

    Вот демо, которое я сделал из немеченое поле формы против помеченного поля формы. Они выглядят одинаково, но у верхней нет правильной метки, а у второй – нет. Нажмите на текстовую метку в нижней части, и вы увидите, что она фокусируется на связанном вводе.

    поддельное сравнение с реальным лейблом

    Это значительно упрощает фокусировку ввода для кого-то, у кого проблемы с управлением двигателем – или, может быть, для вас, пытаясь установить крошечный флажок на маленьком экране в ухабистом поезде. Это также важно для пользователей программ чтения с экрана, которые будут перемещаться по полям в форме (по умолчанию только ссылки и поля формы можно фокусировать с помощью табуляции); когда они вкладывают в поле ввода, программа чтения с экрана объявит содержимое соответствующей метки.

    Код для этого прост. Поле ввода имеет уникальный идентификатор, а метка связана с ним с помощью за атрибут:

    
    

    Сокрытие ярлыков

    Иногда вам может не понадобиться видимая метка. Или дизайнер не хочет, и вы не хотите еще один бой на парковке. В любом случае, вот пример, когда метка с надписью «Поиск» перед вводом выглядит как излишняя.

    Поле ввода, с кнопкой «потом»

    Мы можем связать поле ввода с текстом «Поиск», который является содержимым кнопки отправки, используя ария-labelledby:

    
    

    Мы могли бы использовать ария-этикетка (с которым мы познакомились ранее, когда говорили о ссылках):


    Но всегда лучше отдавать предпочтение видимому тексту на странице, потому что он будет переведен, если страница запускается с помощью инструмента перевода, тогда как текст, «скрытый» в атрибутах HTML, не будет. (Подсказка Эдриану Розелли за этот совет, из его великолепной статьи Мой приоритет методов маркировки контроля.)

    Самые распространенные ошибки на миллионах домашних страниц

    Мы рассмотрели основные барьеры для сайтов электронной коммерции, о которых сообщили пользователи с той или иной формой обесценения. Теперь давайте рассмотрим более широкий набор сайтов – домашние страницы для 1 000 000 лучших веб-сайтов., автоматически анализируется WebAIM в августе 2019 г. 98% проанализированных страниц имели хотя бы одну ошибку. Наиболее распространенные ошибки

    1. Низкоконтрастный текст (86,1%)
    2. Отсутствует альтернативный текст для изображений (67,9%)
    3. Пустые ссылки (58,9%)
    4. Отсутствуют метки ввода формы (53,2%)
    5. Отсутствует язык документа (30,5%)

    Мы имели дело с низким контрастом, ссылками и формами ввода выше. Теперь давайте посмотрим, как мы можем избежать других очень распространенных ошибок.

    8) Предоставить текстовые альтернативы для всех изображений, видео и аудио

    Вкратце: любая информация, передаваемая через изображение или видео, должна иметь текстовый эквивалент.

    каждый должен иметь альтернативный текст («альтернативный текст»), который может быть передан посетителям с нарушениями зрения или лицам с низкой пропускной способностью / дорогостоящим тарифным планам, которые отключили изображения в своих браузерах. Это включает в себя изображения текста.

    Вот основные правила:

    • Если изображение чисто декоративное, оно должно содержать пустой альтернативный текст: альт = «». (Но в любом случае чисто декоративные изображения должны быть в CSS).
    • Если изображение описано в основном тексте, оно должно иметь пустой альтернативный текст (альт = «»), чтобы избежать повторения. Но будьте осторожны, если это в
      – видеть Как вы думаете? для большего.
    • Если изображение является единственным содержимым ссылки (например, для перехода на домашнюю страницу можно щелкнуть логотип вашей организации), альтернативный текст должен описывать назначение ссылки. Например, alt = "домашняя страница".
    • Не используйте иконки шрифтов; они могут быть очень плохими для людей с дислексией. Если вы используете их, конвертировать их в SVG.

    Видео и аудио альтернативный текст

    Не забывайте, что аудиоконтенту нужен альтернативный текст для людей с нарушениями слуха. Это означает стенограммы подкастов и субтитры на видео. И опять же: не воспроизводите медиафайлы.

    9) Добавьте правильный язык документа

    Вкратце: позвольте вспомогательным технологиям знать язык, на котором написан ваш текст.

    30% домашних страниц не декларируют язык, на котором они написаны, что может сбить их с толку для пользователей программ чтения с экрана. Это важно, потому что слово «шесть» произносится очень по-разному, например, если предложение на английском или французском языке..

    Это легко решить, добавив атрибут lang в ваш HTML-элемент:

    «En» сообщает программе чтения с экрана (или программному обеспечению для перевода), что эта страница на английском языке. «Es» – испанский, «fr» – французский, и так далее. Для большинства языков языковой тег довольно легко определить. W3C имеет руководство по Выбор языкового тега.

    Если страница содержит контент на языке, отличном от основного объявленного, добавьте атрибут языка к элементу, окружающему этот контент. Например, на странице, объявленной на английском языке:

    Если вы хотите пообщаться матадор, в какой-то крутой кабинка для переодевания
    И встретиться senoritas по счету, Espana por fav

    10) Помогите посетителю обойти ваш контент

    Вкратце: используйте элементы ориентира HTML, чтобы помочь пользователям вспомогательных технологий понять и перемещаться по вашему контенту..

    Когда зрячие посетители приходят на вашу страницу, они могут легко визуально отсканировать ее, чтобы понять, где находится навигация и где начинается основной контент. Пользователь программы чтения с экрана не может этого сделать. Однако HTML5 дает нам несколько новых тегов для маркировки этих областей, а вспомогательные технологии имеют ярлыки, которые могут пропускать (или пропускать) такие ориентиры, как заголовок, нижний колонтитул, навигация и тому подобное.

    Вот шестиминутное видео, которое я сделал с Леонией Уотсон, веб-разработчиком и пользователем программы чтения с экрана, о том, как она использует программу чтения с экрана, чтобы изучить эту семантику для навигации по моему личному сайту:

    • Оберните ваш основной контент, то есть материал, который не является заголовком, основной навигацией или нижним колонтитулом, в
      элемент. Почти во всех случаях должен быть только один
      на страницу. Все браузеры (IE9 +) позволяют вам стилизовать его, а вспомогательные технологии знают, что с ним делать.
    • Оберните свой заголовок (логотип бренда, страплайн, заголовок страницы) в
      элемент.
    • Оберните нижний колонтитул (юридические данные, контактные данные, уведомление об авторских правах и т. Д.) В
    • Разметьте основную навигацию, используя
        завернутый в элемент. Это может быть вложено в

        если это соответствует визуальному дизайну страницы.
      • Реклама и несущественный контент должны быть завернуты в
      • Если у вас есть более одного продукта / видео / новости / сообщения в блоге, оберните каждый из них в
        элемент.

      В своем опрос пользователей программы чтения с экрана, WebAIM обнаружил, что 26% пользователей программ чтения с экрана часто или всегда используют эти ориентиры при навигации по странице.

      Кроме того, упаковка отдельных частей содержимого в

      помогает Apple WatchOS оптимально отображать контент. Смотри мою статью Практическая ценность семантического HTML подробнее об этом.

      11) Правильно используйте HTML

      Вкратце: понять семантику и поведение по умолчанию HTML-элементов; используйте правильный элемент для вашего контента.

      Общей темой в этой статье было использование правильных элементов HTML. Используя метка имеет встроенное поведение браузера, которое фокусируется на соответствующем поле ввода; с помощью

      предпочтительнее

      потому что это позволяет пользователям программы чтения с экрана переходить прямо к важному контенту, оставаясь совершенно незаметным для тех, кто не использует программу чтения с экрана.

      Еще один пример использования