28 KiB
Создание доступных веб-страниц
Скетчноут от Tomomi Imura
Викторина перед лекцией
Сила Интернета заключается в его универсальности. Доступ для всех, независимо от ограничений, является важным аспектом.
- Сэр Тимоти Бернерс-Ли, директор W3C и изобретатель Всемирной паутины
Эта цитата прекрасно подчеркивает важность создания доступных веб-сайтов. Приложение, которое недоступно для всех, по определению является исключающим. Как веб-разработчики, мы всегда должны учитывать доступность. Если сосредоточиться на этом с самого начала, вы будете на правильном пути к тому, чтобы обеспечить доступность ваших страниц для всех. В этом уроке вы узнаете о инструментах, которые помогут вам убедиться, что ваши веб-ресурсы доступны, и о том, как создавать с учетом доступности.
Вы можете пройти этот урок на Microsoft Learn!
Инструменты для использования
Читатели экрана
Одним из самых известных инструментов доступности являются читатели экрана.
Читатели экрана — это популярные клиенты для людей с нарушениями зрения. Как мы уделяем время тому, чтобы браузер правильно передавал информацию, которую мы хотим поделиться, так же важно убедиться, что читатель экрана делает то же самое.
В своей базовой форме читатель экрана будет озвучивать страницу сверху вниз. Если ваша страница состоит только из текста, читатель передаст информацию аналогично браузеру. Однако веб-страницы редко бывают исключительно текстовыми; они содержат ссылки, графику, цвета и другие визуальные компоненты. Необходимо позаботиться о том, чтобы эта информация правильно воспринималась читателем экрана.
Каждый веб-разработчик должен ознакомиться с работой читателя экрана. Как было отмечено выше, это клиент, которым будут пользоваться ваши пользователи. Так же, как вы знакомы с работой браузера, вы должны изучить, как работает читатель экрана. К счастью, читатели экрана встроены в большинство операционных систем.
Некоторые браузеры также имеют встроенные инструменты и расширения, которые могут озвучивать текст или предоставлять базовые функции навигации, например эти инструменты доступности для браузера Edge. Эти инструменты также важны для доступности, но работают иначе, чем читатели экрана, и их не следует путать с инструментами тестирования читателей экрана.
✅ Попробуйте читатель экрана и инструмент озвучивания текста в браузере. В Windows по умолчанию включен Narrator, а также можно установить JAWS и NVDA. В macOS и iOS по умолчанию установлен VoiceOver.
Увеличение
Еще одним инструментом, часто используемым людьми с нарушениями зрения, является увеличение. Самый простой тип увеличения — статическое увеличение, управляемое через Control + плюс (+) или уменьшение разрешения экрана. Этот тип увеличения изменяет размер всей страницы, поэтому использование адаптивного дизайна важно для обеспечения хорошего пользовательского опыта при увеличении.
Другой тип увеличения использует специализированное программное обеспечение для увеличения одной области экрана и панорамирования, как при использовании настоящей лупы. В Windows встроен Magnifier, а ZoomText — это стороннее программное обеспечение с большим количеством функций и широкой базой пользователей. В macOS и iOS есть встроенное программное обеспечение для увеличения под названием Zoom.
Проверка контраста
Цвета на веб-сайтах должны быть тщательно подобраны, чтобы удовлетворить потребности пользователей с дальтонизмом или тех, кто испытывает трудности с восприятием цветов с низким контрастом.
✅ Проверьте веб-сайт, который вам нравится, на использование цветов с помощью расширения браузера, например проверки контраста цветов WCAG. Что вы узнали?
Lighthouse
В разделе инструментов разработчика вашего браузера вы найдете инструмент Lighthouse. Этот инструмент важен для получения первого представления о доступности (а также других анализах) веб-сайта. Хотя важно не полагаться исключительно на Lighthouse, 100% результат является полезной отправной точкой.
✅ Найдите Lighthouse в панели инструментов разработчика вашего браузера и проведите анализ любого сайта. Что вы обнаружили?
Проектирование с учетом доступности
Доступность — это довольно большая тема. Чтобы помочь вам, существует множество доступных ресурсов.
Хотя мы не сможем охватить все аспекты создания доступных сайтов, ниже приведены основные принципы, которые вы захотите реализовать. Проектирование доступной страницы с самого начала всегда проще, чем возвращаться к существующей странице, чтобы сделать ее доступной.
Принципы хорошего отображения
Безопасные цветовые палитры
Люди видят мир по-разному, и это включает восприятие цветов. При выборе цветовой схемы для вашего сайта вы должны убедиться, что она доступна для всех. Один отличный инструмент для генерации цветовых палитр — Color Safe.
✅ Найдите веб-сайт, который вызывает проблемы из-за использования цветов. Почему?
Используйте правильный HTML
С помощью CSS и JavaScript можно сделать любой элемент похожим на любой тип управления. <span> можно использовать для создания <button>, а <b> может стать гиперссылкой. Хотя это может считаться более простым для стилизации, это ничего не передает читателю экрана. Используйте соответствующий HTML при создании элементов управления на странице. Если вам нужна гиперссылка, используйте <a>. Использование правильного HTML для правильного элемента управления называется использованием семантического HTML.
✅ Перейдите на любой веб-сайт и посмотрите, правильно ли дизайнеры и разработчики используют HTML. Можете ли вы найти кнопку, которая должна быть ссылкой? Подсказка: щелкните правой кнопкой мыши и выберите "Просмотреть исходный код страницы" в вашем браузере, чтобы увидеть исходный код.
Создайте описательную иерархию заголовков
Пользователи читателей экрана сильно зависят от заголовков для поиска информации и навигации по странице. Написание описательного содержания заголовков и использование семантических тегов заголовков важны для создания легко навигационной страницы для пользователей читателей экрана.
Используйте хорошие визуальные подсказки
CSS предоставляет полный контроль над внешним видом любого элемента на странице. Вы можете создать текстовые поля без контура или гиперссылки без подчеркивания. К сожалению, удаление этих подсказок может затруднить распознавание типа элемента управления для тех, кто зависит от них.
Важность текста ссылок
Гиперссылки являются основой навигации в Интернете. Поэтому важно, чтобы читатель экрана мог правильно читать ссылки, чтобы все пользователи могли перемещаться по вашему сайту.
Читатели экрана и ссылки
Как и ожидалось, читатели экрана читают текст ссылок так же, как они читают любой другой текст на странице. С учетом этого, приведенный ниже текст может показаться вполне приемлемым.
Маленький пингвин, иногда называемый фейским пингвином, является самым маленьким пингвином в мире. Нажмите здесь для получения дополнительной информации.
Маленький пингвин, иногда называемый фейским пингвином, является самым маленьким пингвином в мире. Посетите https://en.wikipedia.org/wiki/Little_penguin для получения дополнительной информации.
NOTE Как вы скоро узнаете, никогда не создавайте ссылки, которые выглядят, как приведенные выше.
Помните, что читатели экрана — это другой интерфейс, отличающийся от браузеров, с другим набором функций.
Проблема с использованием URL
Читатели экрана читают текст. Если URL появляется в тексте, читатель экрана будет читать URL. Как правило, URL не передает значимой информации и может звучать раздражающе. Вы могли столкнуться с этим, если ваш телефон когда-либо озвучивал текстовое сообщение с URL.
Проблема с "нажмите здесь"
Читатели экрана также могут читать только гиперссылки на странице, так же как человек с нормальным зрением сканирует страницу в поисках ссылок. Если текст ссылки всегда "нажмите здесь", пользователь услышит только "нажмите здесь, нажмите здесь, нажмите здесь, нажмите здесь, нажмите здесь, ...". Все ссылки теперь неразличимы друг от друга.
Хороший текст ссылок
Хороший текст ссылок кратко описывает, что находится на другой стороне ссылки. В приведенном выше примере, где речь идет о маленьких пингвинах, ссылка ведет на страницу Википедии о данном виде. Фраза маленькие пингвины идеально подходит для текста ссылки, так как она ясно дает понять, что пользователь узнает, если нажмет на ссылку — о маленьких пингвинах.
Маленький пингвин, иногда называемый фейским пингвином, является самым маленьким пингвином в мире.
✅ Проведите несколько минут в Интернете, чтобы найти страницы, использующие неудачные стратегии ссылок. Сравните их с другими, более удачно связанными сайтами. Что вы узнали?
Заметки для поисковых систем
Дополнительным преимуществом обеспечения доступности вашего сайта для всех является помощь поисковым системам в навигации по вашему сайту. Поисковые системы используют текст ссылок для изучения тем страниц. Таким образом, использование хорошего текста ссылок помогает всем!
ARIA
Представьте следующую страницу:
| Продукт | Описание | Заказ |
|---|---|---|
| Виджет | Описание | Заказ |
| Супер-виджет | Описание | Заказ |
В этом примере дублирование текста "описание" и "заказ" имеет смысл для пользователя браузера. Однако пользователь читателя экрана услышит только слова описание и заказ без контекста.
Для поддержки таких сценариев HTML поддерживает набор атрибутов, известных как Доступные богатые интернет-приложения (ARIA). Эти атрибуты позволяют предоставлять дополнительную информацию читателям экрана.
NOTE: Как и многие аспекты HTML, поддержка браузеров и читателей экрана может варьироваться. Однако большинство основных клиентов поддерживают атрибуты ARIA.
Вы можете использовать aria-label, чтобы описать ссылку, если формат страницы не позволяет вам это сделать. Описание для виджета может быть задано как
<a href="#" aria-label="Widget description">description</a>
✅ В общем, использование семантической разметки, как описано выше, превосходит использование ARIA, но иногда нет семантического эквивалента для различных HTML-виджетов. Хорошим примером является дерево. Нет HTML-эквивалента для дерева, поэтому вы идентифицируете общий <div> для этого элемента с правильной ролью и значениями ARIA. Документация MDN по ARIA содержит больше полезной информации.
<h2 id="tree-label">File Viewer</h2>
<div role="tree" aria-labelledby="tree-label">
<div role="treeitem" aria-expanded="false" tabindex="0">Uploads</div>
</div>
Изображения
Само собой разумеется, что читатели экрана не могут автоматически читать, что изображено на картинке. Обеспечение доступности изображений не требует больших усилий — для этого существует атрибут alt. Все значимые изображения должны иметь alt, чтобы описать, что они представляют.
Изображения, которые являются чисто декоративными, должны иметь атрибут alt, установленный в пустую строку: alt="". Это предотвращает ненужное объявление декоративного изображения читателем экрана.
✅ Как вы могли ожидать, поисковые системы также не могут понять, что изображено на картинке. Они также используют текст alt. Таким образом, обеспечение доступности вашей страницы приносит дополнительные бонусы!
Клавиатура
Некоторые пользователи не могут использовать мышь или трекпад, вместо этого полагаясь на взаимодействие с клавиатурой, чтобы переходить от одного элемента к другому. Важно, чтобы ваш веб-сайт представлял ваш контент в логическом порядке, чтобы пользователь клавиатуры мог получить доступ к каждому интерактивному элементу, перемещаясь вниз по документу. Если вы создаете свои веб-страницы с семантической разметкой и используете CSS для стилизации их визуального макета, ваш сайт должен быть доступен для навигации с помощью клавиатуры, но важно протестировать этот аспект вручную. Узнайте больше о стратегиях навигации с помощью клавиатуры.
✅ Перейдите на любой веб-сайт и попробуйте перемещаться по нему, используя только клавиатуру. Что работает, а что нет? Почему?
Итог
Веб, доступный только для некоторых, не является по-настоящему "всемирной паутиной". Лучший способ обеспечить доступность создаваемых вами сайтов — это внедрять лучшие практики доступности с самого начала. Хотя это требует дополнительных шагов, включение этих навыков в ваш рабочий процесс сейчас означает, что все страницы, которые вы создаете, будут доступны.
🚀 Задание
Возьмите этот HTML и перепишите его, чтобы он был максимально доступным, учитывая стратегии, которые вы изучили.
<!DOCTYPE html>
<html>
<head>
<title>
Example
</title>
<link href='../assets/style.css' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="site-header">
<p class="site-title">Turtle Ipsum</p>
<p class="site-subtitle">The World's Premier Turtle Fan Club</p>
</div>
<div class="main-nav">
<p class="nav-header">Resources</p>
<div class="nav-list">
<p class="nav-item nav-item-bull"><a href="https://www.youtube.com/watch?v=CMNry4PE93Y">"I like turtles"</a></p>
<p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtle">Basic Turtle Info</a></p>
<p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtles_(chocolate)">Chocolate Turtles</a></p>
</div>
</div>
<div class="main-content">
<div>
<p class="page-title">Welcome to Turtle Ipsum.
<a href="">Click here</a> to learn more.
</p>
<p class="article-text">
Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</p>
</div>
</div>
<div class="footer">
<div class="footer-section">
<span class="button">Sign up for turtle news</span>
</div><div class="footer-section">
<p class="nav-header footer-title">
Internal Pages
</p>
<div class="nav-list">
<p class="nav-item nav-item-bull"><a href="../">Index</a></p>
<p class="nav-item nav-item-bull"><a href="../semantic">Semantic Example</a></p>
</div>
</div>
<p class="footer-copyright">© 2016 Instrument</p>
</div>
</body>
</html>
Викторина после лекции
Обзор и самостоятельное изучение
У многих стран есть законы, касающиеся требований доступности. Ознакомьтесь с законами о доступности в вашей стране. Что охватывается, а что нет? Примером может служить этот сайт правительства.
Задание
Проанализируйте недоступный веб-сайт
Источник: Turtle Ipsum от Instrument
Отказ от ответственности:
Этот документ был переведен с помощью сервиса автоматического перевода Co-op Translator. Хотя мы стремимся к точности, пожалуйста, имейте в виду, что автоматические переводы могут содержать ошибки или неточности. Оригинальный документ на его родном языке следует считать авторитетным источником. Для получения критически важной информации рекомендуется профессиональный перевод человеком. Мы не несем ответственности за любые недоразумения или неправильные интерпретации, возникающие в результате использования данного перевода.