Как сверстать доступный сайт
- 11 мая 2023
Доступность сайта означает, что каждый человек, включая людей с ограниченными возможностями, может выполнить любое действие на сайте. При этом неважно, использует пользователь клавиатуру или любое другое устройство.
Критерии доступности сайта определяются рядом стандартов Web Content Accessibility Guidelines или WCAG, которые регулируют, какие функциональные возможности должны быть доступны на сайте.
Что такое доступный сайт
Сайт считается доступным, если с ним может взаимодействовать человек, использующий вспомогательные технологии: скринридеры, устройства для чтения текста или голосовые устройства управления. Кроме того, интерфейс сайта должен быть понятным и удобным для людей с ограниченными возможностями.
В 2022 году в мире насчитывалось более 1 миллиарда людей с ограниченными возможностями. Получается, примерно каждый восьмой человек на Земле имеет особенности со здоровьем, которые могут отражаться на работе — в том числе, на использовании интернета.
Как создать доступный сайт
Чтобы сделать сайт доступным, необходимо следовать ряду правил и критериев, установленных организацией W3C. Она создала стандарт доступности сайтов, его актуальная версия — WCAG 2.1.
📌 В стандарте рекомендации по доступности делятся на четыре категории:
«Воспринимаемость» — информация и компоненты интерфейса должны быть представлены пользователям с разными сенсорными возможностями в доступной для восприятия форме.
«Управляемость» — компоненты интерфейса пользователя и навигационные элементы должны быть управляемыми и доступны с клавиатуры и других вспомогательных устройств.
«Понятность» — информация и управление интерфейсом пользователя должны быть понятными.
«Устойчивость» — контент должен быть понятен и доступен вспомогательным технологиям.
В каждой категории есть ряд рекомендаций, которые и являются критериями доступности. Рассмотрим несколько важных критериев.
🔠 Предоставление текстовых альтернатив для всех не визуальных элементов — изображений, видео и аудио. Для обеспечения доступности аудио и видеоконтента на сайте необходимо добавлять описания, а также субтитры или звуковые сигналы для пользователей с ограниченными возможностями.
⌨️ Сайтом можно полностью пользоваться склавиатуры. Формы и другие интерактивные элементы на сайте должны быть доступны с помощью клавиатуры и иметь понятные инструкции для пользователей.
🅾️ Достаточная контрастность текста и изображений. Веб-страницы должны иметь достаточный контраст между текстом и фоном, чтобы обеспечить лёгкую читаемость. Также необходимо учитывать размер и тип шрифта, чтобы он был читаемым для всех пользователей, включая тех, у которых есть проблемы со зрением.
Важно учитывать, что существуют особенности зрения, которые проявляются в неверном восприятии цветов, например, дальтонизм. Поэтому рекомендуется добавлять состояния интерактивным элементам не только в виде изменения цвета, но и с помощью других визуальных средств.
🖌️ Простой и интуитивный дизайн. Он не требует дополнительных усилий или знаний для пользования сайтом. Разработчику важно разбираться в дизайне, чтобы создавать качественные и доступные сайты.
Структура сайта должна быть чётко организована, чтобы пользователи могли без сложностей перемещаться по страницам и находить необходимую информацию. Использование семантической разметки, где каждый тег стоит на своём месте, облегчает чтение и понимание содержимого программами чтения с экрана.
↕️ Адаптируемость. Сайт должен быть доступен на разных устройствах и в портретной, и в альбомной ориентации.
Как создавать адаптивные сетки
🚦Доступная навигация. Навигация и ссылки на сайте должны быть организованы и иметь ясные названия, чтобы пользователи могли находить нужный контент и определять своё местонахождение на странице.
💬 Тестирование и обратная связь. Необходимо проводить тестирование доступности сайта с помощью инструментов и методик, которые позволяют определить проблемы доступности. Также необходимо предоставлять возможность обратной связи для пользователей, чтобы они могли сообщать об ошибках или проблемах на сайте.
Для определения достаточной контрастности сайта существуют разные инструменты, например, сервис WebAIM позволяет проверять контрастность цветов элементов и соотносить данные с критериями WCAG. Также есть отдельный инструмент от WebAIM для измерения контрастности ссылок относительно фона и основного текста.
Помимо проверки контрастности, есть сервисы для симуляции дальтонизма и других особенностей зрения, чтобы проверить, как видят сайт люди с другим цветовосприятием. Например, в Chrome DevTools есть встроенный симулятор особенностей зрения, в котором вы можете проверить любой сайт. Это можно сделать, добавив инструмент Rendering и выбрав в пункте Emulate vision deficiencies нужную особенность зрения.
Разработчику важно понимать, как различные ограничения пользователей влияют на использование сайта, и учитывать это при вёрстке. Также полезно знать, как программы чтения с экрана считывают содержимое сайта. Это позволяет разработчику создавать ресурс, который будет читаемым и понятным для всех пользователей.
Доступность сайта должна учитываться на каждом этапе разработки. В процессе вёрстки рекомендуется постоянно проверять сайт на доступность и вносить изменения, чтобы не упустить ни один из критериев.
Подробнее узнать о критериях доступности, инструментах проверки и научиться создавать доступные для каждого пользователя сайты, можно на нашем специализированном курсе.
Материалы по теме
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
HTML-коды популярных эмодзи
Эмодзи давно вышли за пределы мессенджеров и социальных сетей, став важной частью веб-дизайна и пользовательского интерфейса. Они помогают сделать ваш сайт живым, ярким и эмоциональным. Но как добавить эмодзи в HTML-код без потери качества? В этой статье мы собрали для вас список из 50 самых популярных эмодзи с их названиями, значениями и HTML-кодами для вставки.
Эта таблица станет настоящим помощником для начинающих и опытных веб-разработчиков, которые хотят улучшить пользовательский опыт и добавить яркие элементы на свои проекты. Узнайте, как просто интегрировать эмоции в свой сайт с помощью одной строки HTML!
| Эмодзи | Название | HTML-код |
|---|---|---|
| 😀 | Улыбающееся лицо | 😀 |
| 😂 | Лицо со слезами радости | 😂 |
| 😍 | Лицо с глазами в форме сердца | 😍 |
| 😎 | Лицо в солнцезащитных очках | 😎 |
| 😭 | Плачущий | 😭 |
| 😊 | Смущённая улыбка | 😊 |
| 😢 | Грустное лицо | 😢 |
| 😅 | Лицо с каплей пота | 😅 |
| 🤔 | Задумчивое лицо | 🤔 |
| 👍 | Большой палец вверх | 👍 |
| 👎 | Большой палец вниз | 👎 |
| 👏 | Аплодисменты | 👏 |
| 🙏 | Сложенные руки | 🙏 |
| ❤ | Красное сердце | ❤ |
| 💔 | Разбитое сердце | 💔 |
| 🔥 | Огонь | 🔥 |
| 💯 | Сто баллов | 💯 |
| 🎉 | Конфетти | 🎉 |
| 🎂 | Торт | 🎂 |
| 🌟 | Звезда | 🌟 |
| ✨ | Сияние | ✨ |
| 🌈 | Радуга | 🌈 |
| ☀ | Солнце | ☀ |
| ☁ | Облако | ☁ |
| 🌧 | Дождь | 🌧 |
| ❄ | Снег | ❄ |
| 🌍 | Земной шар | 🌍 |
| 💡 | Лампочка | 💡 |
| 💤 | Сон | 💤 |
| 🎵 | Нота | 🎵 |
| 🎶 | Музыка | 🎶 |
| 📱 | Телефон | 📱 |
| 💻 | Ноутбук | 💻 |
| 🚗 | Машина | 🚗 |
| 🚀 | Ракета | 🚀 |
| ✈ | Самолёт | ✈ |
| 🚲 | Велосипед | 🚲 |
| 🐶 | Собака | 🐶 |
| 🐱 | Кошка | 🐱 |
| 🐭 | Мышь | 🐭 |
| 🦊 | Лиса | 🦊 |
| 🐻 | Медведь | 🐻 |
| 🍎 | Яблоко | 🍎 |
| 🍕 | Пицца | 🍕 |
| 🍔 | Бургер | 🍔 |
| 🍩 | Пончик | 🍩 |
| 🍉 | Арбуз | 🍉 |
- 15 ноября 2024
Что писать в атрибуте alt
Альтернативный текст — это описание изображения словами. Это описание должно помогать людям, которые читают или слышат это описание, иначе оно не нужно и лучше вообще его не указывать.
Мы уже обсудили основные правила написания alt-текста для фотографий и изображений. В этот раз поговорим о том, каким именно должно быть описание, чтобы в нём был смысл.
- 27 февраля 2024
Что такое Lazy Loading и как её включить на сайте
Ленивая загрузка (буквально, lazy loading) — это возможность отложить загрузку ненужного прямо сейчас медиаконтента.
<img src="picture.jpg" loading="lazy">
<iframe src="supplementary.html" loading="lazy"></iframe>
Ленивая загрузка делает сайт быстрее и экономит трафик, если у пользователя мобильный интернет с ограничениями.
- 22 ноября 2023
Знакомство с HTML
Привет, будущие фронтенд-разработчики! Добро пожаловать в увлекательный мир веб-разработки. Перед тем как двигаться дальше, давайте разберёмся с основами — языком разметки гипертекста или просто HTML.
HTML (Hypertext Markup Language) — это стандартный язык, который используется для создания веб-страниц. Представьте, что ваша веб-страница — это книга. Тогда HTML — это скелет этой книги, костяк, который определяет структуру: где будет заголовок, абзацы, изображения и так далее.
- 1 ноября 2023
Специальные символы в HTML
HTML использует особенные комбинации символов, чтобы корректно отображать определенные знаки на веб-страницах. Например, вместо простого знака «меньше» мы видим комбинацию <. В этой статье представлен список таких символов. Это небольшой справочник для тех, кто хочет быстро найти нужный код.
- 23 октября 2023
Зачем нужен метатег viewport
Каждый из нас хоть раз в жизни сталкивался с веб-страницами, которые кажутся «сломанными» или странно отображаются на мобильных устройствах. Одной из причин такого поведения может быть отсутствие маленького, но важного элемента в коде страницы — метатега viewport.
Метатеги — это инструкции для браузера о том, как отображать содержимое страницы. Один из таких метатегов — viewport, который говорит браузеру, как масштабировать и отображать страницу на разных устройствах, особенно на смартфонах и планшетах.
Важно, чтобы сайты классно выглядели не только на компьютерах, но и на маленьких экранах смартфона. Если не использовать viewport, то сайт может выглядеть как уменьшенная версия десктопного сайта на мобильном экране, что делает его трудночитаемым и неудобным для использования. Конечно, нужно ещё много всего сделать для адаптивности, но viewport тоже нужен.
- 18 сентября 2023
Атрибут class в HTML на примерах
Атрибут class используется для добавления CSS-классов элементам HTML. Классы позволяют применять одни и те же стили CSS или поведение JavaScript к разным элементам на странице.
Так, одному элементу можно присвоить один или несколько классов, разделяя их пробелами.
<!-- Один класс -->
<div class="container">
<!-- ... -->
</div>
<!-- Несколько классов -->
<div class="container special-box">
<!-- ... -->
</div>
- 14 сентября 2023
В чём отличия цитат
В HTML есть разные теги для цитирования и указания источников. Основные из них: <blockquote>, <cite> и <q>. Давайте разберёмся в их различиях.
- 12 сентября 2023
Растровая и векторная графика
Давайте попробуем разобраться, в чём отличие растровой графики от векторной.
- 13 июня 2023
Как отличить h1, h2 и h3
Заголовки используются для организации и структурирования содержимого на сайте. В HTML существует шесть уровней заголовков, обозначаемых тегами от <h1> до <h6>. Каждый уровень заголовка имеет свой семантический вес, где <h1> имеет наибольший вес, а <h6> — наименьший.
Часто кажется, что заголовок — это простой и понятный тег. Но это впечатление обманчиво, потому что не всегда крупный и выделенный текст на макете является заголовком.
При вёрстке сайта важно соблюдать семантику, чтобы все теги использовались корректно и ресурс работал без ошибок. Если напутать уровни заголовков, то структура страницы будет не семантичной, а скринридеры неправильно прочтут сайт.
В статье разберёмся, как верно определять заголовки по макету, какие из них лучше делать скрытыми и почему.
- 8 июня 2023