# Создание доступных веб-страниц ![Все о доступности](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.ru.png) > Скетчноут от [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid journey title Your Accessibility Learning Adventure section Foundation Understanding Users: 5: You Testing Tools: 4: You POUR Principles: 5: You section Build Skills Semantic HTML: 4: You Visual Design: 5: You ARIA Techniques: 4: You section Master Practice Keyboard Navigation: 5: You Form Accessibility: 4: You Real-world Testing: 5: You ``` ## Викторина перед лекцией [Викторина перед лекцией](https://ff-quizzes.netlify.app/web/) > Сила Интернета заключается в его универсальности. Доступ для всех, независимо от ограничений, является важным аспектом. > > \- Сэр Тимоти Бернерс-Ли, директор W3C и изобретатель Всемирной паутины Вот что может вас удивить: создавая доступные веб-сайты, вы помогаете не только людям с ограниченными возможностями, но и делаете Интернет лучше для всех! Вы когда-нибудь замечали пандусы на углах улиц? Они изначально были разработаны для инвалидных колясок, но теперь помогают людям с детскими колясками, курьерам с тележками, путешественникам с чемоданами на колесах и даже велосипедистам. Именно так работает доступный веб-дизайн — решения, которые помогают одной группе, часто оказываются полезными для всех. Здорово, правда? В этом уроке мы изучим, как создавать веб-сайты, которые действительно подходят для всех, независимо от того, как они пользуются Интернетом. Вы узнаете практические техники, которые уже встроены в веб-стандарты, попробуете инструменты тестирования и увидите, как доступность делает ваши сайты более удобными для всех пользователей. К концу урока вы будете уверенно включать доступность в свой рабочий процесс разработки. Готовы узнать, как продуманные дизайнерские решения могут открыть Интернет для миллиардов пользователей? Давайте начнем! ```mermaid mindmap root((Web Accessibility)) Users Screen readers Keyboard navigation Voice control Magnification Technologies HTML semantics ARIA attributes CSS focus indicators Keyboard events Benefits Wider audience Better SEO Legal compliance Universal design Testing Automated tools Manual testing User feedback Real assistive tech ``` > Вы можете пройти этот урок на [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon)! ## Понимание вспомогательных технологий Прежде чем мы перейдем к кодированию, давайте немного разберемся, как люди с различными возможностями на самом деле взаимодействуют с Интернетом. Это не просто теория — понимание реальных моделей навигации сделает вас гораздо лучшим разработчиком! Вспомогательные технологии — это удивительные инструменты, которые помогают людям с ограниченными возможностями взаимодействовать с веб-сайтами так, как вы даже не могли себе представить. Как только вы поймете, как работают эти технологии, создание доступных веб-опытов станет гораздо более интуитивным. Это как научиться видеть свой код глазами другого человека. ### Читатели экрана [Читатели экрана](https://en.wikipedia.org/wiki/Screen_reader) — это довольно сложные технологии, которые преобразуют цифровой текст в речь или вывод на шрифт Брайля. Хотя они в основном используются людьми с нарушениями зрения, они также очень полезны для пользователей с нарушениями обучения, такими как дислексия. Я люблю думать о читателе экрана как о очень умном рассказчике, который читает вам книгу. Он читает контент вслух в логическом порядке, объявляет интерактивные элементы, такие как «кнопка» или «ссылка», и предоставляет клавиатурные сокращения для перемещения по странице. Но вот в чем дело — читатели экрана могут работать только если мы создаем веб-сайты с правильной структурой и содержательным контентом. Здесь вы вступаете в игру как разработчик! **Популярные читатели экрана на разных платформах:** - **Windows**: [NVDA](https://www.nvaccess.org/about-nvda/) (бесплатный и самый популярный), [JAWS](https://webaim.org/articles/jaws/), [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) (встроенный) - **macOS/iOS**: [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) (встроенный и очень функциональный) - **Android**: [TalkBack](https://support.google.com/accessibility/android/answer/6283677) (встроенный) - **Linux**: [Orca](https://wiki.gnome.org/Projects/Orca) (бесплатный и с открытым исходным кодом) **Как читатели экрана взаимодействуют с веб-контентом:** Читатели экрана предоставляют несколько методов навигации, которые делают просмотр эффективным для опытных пользователей: - **Последовательное чтение**: Читает контент сверху вниз, как при чтении книги - **Навигация по ориентирам**: Перемещение между разделами страницы (заголовок, навигация, основной контент, подвал) - **Навигация по заголовкам**: Перемещение между заголовками для понимания структуры страницы - **Списки ссылок**: Генерация списка всех ссылок для быстрого доступа - **Элементы управления формами**: Перемещение непосредственно между полями ввода и кнопками > 💡 **Вот что меня удивило**: 68% пользователей читателей экрана в основном ориентируются по заголовкам ([WebAIM Survey](https://webaim.org/projects/screenreadersurvey9/#finding)). Это означает, что ваша структура заголовков — это как дорожная карта для пользователей. Если вы сделаете ее правильно, вы буквально помогаете людям быстрее находить нужный контент! ### Построение рабочего процесса тестирования Хорошая новость — эффективное тестирование доступности не обязательно должно быть сложным! Вам нужно будет сочетать автоматизированные инструменты (они отлично выявляют очевидные проблемы) с ручным тестированием. Вот систематический подход, который, как я обнаружил, позволяет выявить большинство проблем, не занимая весь ваш день: **Основной рабочий процесс ручного тестирования:** ```mermaid flowchart TD A[🚀 Start Testing] --> B{⌨️ Keyboard Navigation} B --> C[Tab through all interactive elements] C --> D{🎧 Screen Reader Testing} D --> E[Test with NVDA/VoiceOver] E --> F{🔍 Zoom Testing} F --> G[Zoom to 200% and test functionality] G --> H{🎨 Color/Contrast Check} H --> I[Verify all text meets contrast ratios] I --> J{👁️ Focus Management} J --> K[Ensure focus indicators are visible] K --> L[✅ Testing Complete] style A fill:#e3f2fd style L fill:#e8f5e8 style B fill:#fff3e0 style D fill:#f3e5f5 style F fill:#e0f2f1 style H fill:#fce4ec style J fill:#e8eaf6 ``` **Пошаговый контрольный список тестирования:** 1. **Навигация с клавиатуры**: Используйте только Tab, Shift+Tab, Enter, Space и клавиши со стрелками 2. **Тестирование с читателем экрана**: Включите NVDA, VoiceOver или Narrator и попробуйте навигацию с закрытыми глазами 3. **Тестирование увеличения**: Проверьте на уровнях увеличения 200% и 400% 4. **Проверка контраста цветов**: Проверьте весь текст и элементы интерфейса 5. **Тестирование индикатора фокуса**: Убедитесь, что все интерактивные элементы имеют видимые состояния фокуса ✅ **Начните с Lighthouse**: Откройте инструменты разработчика в браузере, выполните аудит доступности с помощью Lighthouse, а затем используйте результаты для определения областей ручного тестирования. ### Инструменты увеличения и масштабирования Вы знаете, как иногда увеличиваете текст на телефоне, если он слишком мелкий, или щуритесь на экране ноутбука при ярком солнечном свете? Многие пользователи ежедневно полагаются на инструменты увеличения, чтобы сделать контент читаемым. Это включает людей с нарушениями зрения, пожилых людей и всех, кто когда-либо пытался читать сайт на улице. Современные технологии увеличения вышли за рамки простого увеличения. Понимание того, как работают эти инструменты, поможет вам создавать адаптивные дизайны, которые остаются функциональными и привлекательными на любом уровне увеличения. **Современные возможности увеличения в браузерах:** - **Увеличение страницы**: Пропорционально масштабирует весь контент (текст, изображения, макет) — это предпочтительный метод - **Только текст**: Увеличивает размер шрифта, сохраняя исходный макет - **Увеличение с помощью жестов**: Поддержка мобильных устройств для временного увеличения - **Поддержка браузеров**: Все современные браузеры поддерживают увеличение до 500% без нарушения функциональности **Специализированное программное обеспечение для увеличения:** - **Windows**: [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) (встроенный), [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) - **macOS/iOS**: [Zoom](https://www.apple.com/accessibility/mac/vision/) (встроенный с расширенными функциями) > ⚠️ **Дизайнерское соображение**: WCAG требует, чтобы контент оставался функциональным при увеличении до 200%. На этом уровне горизонтальная прокрутка должна быть минимальной, а все интерактивные элементы должны оставаться доступными. ✅ **Проверьте свой адаптивный дизайн**: Увеличьте браузер до 200% и 400%. Адаптируется ли ваш макет? Можно ли по-прежнему пользоваться всеми функциями без чрезмерной прокрутки? ## Современные инструменты тестирования доступности Теперь, когда вы понимаете, как люди взаимодействуют с Интернетом с помощью вспомогательных технологий, давайте изучим инструменты, которые помогут вам создавать и тестировать доступные веб-сайты. Думайте об этом так: автоматизированные инструменты отлично выявляют очевидные проблемы (например, отсутствие альтернативного текста), а ручное тестирование помогает убедиться, что ваш сайт удобен в реальном использовании. Вместе они дают уверенность, что ваши сайты работают для всех. ### Тестирование контраста цветов Вот хорошая новость: контраст цветов — одна из самых распространенных проблем доступности, но она также одна из самых простых для исправления. Хороший контраст полезен для всех — от пользователей с нарушениями зрения до людей, пытающихся читать свои телефоны на пляже. **Требования WCAG к контрасту:** | Тип текста | WCAG AA (минимум) | WCAG AAA (улучшенный) | |-----------|-------------------|---------------------| | **Обычный текст** (менее 18pt) | Контрастное соотношение 4.5:1 | Контрастное соотношение 7:1 | | **Крупный текст** (18pt+ или 14pt+ жирный) | Контрастное соотношение 3:1 | Контрастное соотношение 4.5:1 | | **Элементы интерфейса** (кнопки, границы форм) | Контрастное соотношение 3:1 | Контрастное соотношение 3:1 | **Основные инструменты тестирования:** - [Colour Contrast Analyser](https://www.tpgi.com/color-contrast-checker/) — настольное приложение с выбором цвета - [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) — веб-приложение с мгновенной обратной связью - [Stark](https://www.getstark.co/) — плагин для инструментов дизайна Figma, Sketch, Adobe XD - [Accessible Colors](https://accessible-colors.com/) — поиск доступных цветовых палитр ✅ **Создавайте лучшие цветовые палитры**: Начните с цветов вашего бренда и используйте проверку контраста для создания доступных вариаций. Документируйте их как доступные цветовые токены вашей системы дизайна. ### Комплексный аудит доступности Наиболее эффективное тестирование доступности сочетает несколько подходов. Ни один инструмент не выявляет все проблемы, поэтому создание рутины тестирования с использованием различных методов обеспечивает тщательную проверку. **Тестирование в браузере (встроено в инструменты разработчика):** - **Chrome/Edge**: Аудит доступности Lighthouse + панель доступности - **Firefox**: Инспектор доступности с подробным представлением дерева - **Safari**: Вкладка аудита в Web Inspector с симуляцией VoiceOver **Профессиональные расширения для тестирования:** - [axe DevTools](https://www.deque.com/axe/devtools/) — стандарт автоматизированного тестирования в отрасли - [WAVE](https://wave.webaim.org/extension/) — визуальная обратная связь с выделением ошибок - [Accessibility Insights](https://accessibilityinsights.io/) — комплексный набор инструментов тестирования от Microsoft **Интеграция командной строки и CI/CD:** - [axe-core](https://github.com/dequelabs/axe-core) — библиотека JavaScript для автоматизированного тестирования - [Pa11y](https://pa11y.org/) — инструмент тестирования доступности командной строки - [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci) — автоматизированная оценка доступности > 🎯 **Цель тестирования**: Стремитесь к оценке доступности Lighthouse 95+ в качестве базового уровня. Помните, что автоматизированные инструменты выявляют только около 30-40% проблем доступности — ручное тестирование по-прежнему необходимо! ### 🧠 **Проверка навыков тестирования: готовы искать проблемы?** **Давайте проверим, как вы относитесь к тестированию доступности:** - Какой метод тестирования кажется вам наиболее доступным на данный момент? - Можете ли вы представить себе использование только клавиатуры для навигации в течение целого дня? - С какой проблемой доступности вы лично сталкивались в Интернете? ```mermaid pie title "Accessibility Issues Caught by Different Methods" "Automated Tools" : 35 "Manual Testing" : 40 "User Feedback" : 25 ``` > **Уверенность**: Профессиональные тестировщики доступности используют именно эту комбинацию методов. Вы изучаете практики, принятые в отрасли! ## Создание доступности с самого начала Ключ к успеху в обеспечении доступности — это включение ее в основу с самого начала. Знаю, заманчиво думать: «Я добавлю доступность позже», но это все равно, что пытаться добавить пандус к дому после его постройки. Возможно? Да. Легко? Не совсем. Думайте о доступности как о планировании дома — гораздо проще включить доступность для инвалидных колясок в первоначальные архитектурные планы, чем переделывать все позже. ### Принципы POUR: основа вашей доступности Руководство по доступности веб-контента (WCAG) основано на четырех основных принципах, которые образуют аббревиатуру POUR. Не переживайте — это не скучные академические концепции! На самом деле, это практические рекомендации для создания контента, который подходит всем. Как только вы освоите принципы POUR, принятие решений о доступности станет гораздо более интуитивным. Это как иметь мысленный контрольный список, который направляет ваши дизайнерские решения. Давайте разберем их: ```mermaid flowchart LR A[🔍 PERCEIVABLE
Can users sense it?] --> B[🎮 OPERABLE
Can users use it?] B --> C[📖 UNDERSTANDABLE
Can users get it?] C --> D[💪 ROBUST
Does it work everywhere?] A1[Alt text
Captions
Contrast] --> A B1[Keyboard access
No seizures
Time limits] --> B C1[Clear language
Predictable
Error help] --> C D1[Valid code
Compatible
Future-proof] --> D style A fill:#e1f5fe style B fill:#e8f5e8 style C fill:#fff3e0 style D fill:#f3e5f5 ``` **🔍 Воспринимаемость**: Информация должна быть представлена так, чтобы пользователи могли воспринимать ее через доступные им органы чувств - Предоставляйте текстовые альтернативы для нетекстового контента (изображения, видео, аудио) - Обеспечивайте достаточный контраст цветов для всего текста и элементов интерфейса - Предлагайте субтитры и расшифровки для мультимедийного контента - Разрабатывайте контент, который остается функциональным при увеличении до 200% - Используйте несколько сенсорных характеристик (не только цвет) для передачи информации **🎮 Оперативность**: Все элементы интерфейса должны быть доступны через доступные методы ввода - Сделайте всю функциональность доступной через навигацию с клавиатуры - Предоставьте пользователям достаточно времени для чтения и взаимодействия с контентом - Избегайте контента, вызывающего приступы или вестибулярные расстройства - Помогайте пользователям эффективно ориентироваться с помощью четкой структуры и ориентиров - Убедитесь, что интерактивные элементы имеют достаточные размеры (минимум 44px) **📖 Понятность**: Информация и работа интерфейса должны быть ясными и понятными - Используйте четкий, простой язык, подходящий для вашей аудитории - Убедитесь, что контент отображается и работает предсказуемо и последовательно - Предоставляйте четкие инструкции и сообщения об ошибках для ввода данных пользователем - Помогайте пользователям понимать и исправлять ошибки в формах - Организуйте контент с логическим порядком чтения и иерархией информации **💪 Надежность**: Контент должен работать надежно на разных технологиях и вспомогательных устройствах - **Используйте валидный, семантический HTML как основу** - **Обеспечьте совместимость с текущими и будущими вспомогательными технологиями** - **Следуйте веб-стандартам и лучшим практикам разметки** - **Тестируйте на разных браузерах, устройствах и вспомогательных средствах** - **Структурируйте контент так, чтобы он оставался доступным, даже если продвинутые функции не поддерживаются** ### 🎯 **Проверка принципов POUR: Закрепляем материал** **Краткое размышление о базовых принципах:** - Можете ли вы вспомнить функцию веб-сайта, которая нарушает каждый из принципов POUR? - Какой принцип кажется вам наиболее естественным как разработчику? - Как эти принципы могут улучшить дизайн для всех, а не только для пользователей с ограниченными возможностями? ```mermaid quadrantChart title POUR Principles Impact Matrix x-axis Low Effort --> High Effort y-axis Low Impact --> High Impact quadrant-1 Quick Wins quadrant-2 Major Projects quadrant-3 Consider Later quadrant-4 Strategic Focus Alt Text: [0.2, 0.9] Color Contrast: [0.3, 0.8] Semantic HTML: [0.4, 0.9] Keyboard Nav: [0.6, 0.8] ARIA Complex: [0.8, 0.7] Screen Reader Testing: [0.7, 0.6] ``` > **Помните**: Начинайте с улучшений, которые требуют минимальных усилий, но дают максимальный эффект. Семантический HTML и текстовые описания (alt text) обеспечивают наибольший прирост доступности при минимальных затратах! ## Создание доступного визуального дизайна Хороший визуальный дизайн и доступность идут рука об руку. Когда вы проектируете с учетом доступности, часто оказывается, что эти ограничения приводят к более чистым и элегантным решениям, которые полезны для всех пользователей. Давайте рассмотрим, как создавать визуально привлекательные дизайны, которые подходят всем, независимо от их зрительных способностей или условий, в которых они просматривают ваш контент. ### Стратегии цветового и визуального дизайна Цвет — мощный инструмент коммуникации, но он никогда не должен быть единственным способом передачи важной информации. Дизайн, выходящий за рамки использования цвета, создает более надежные и инклюзивные впечатления, которые работают в любых ситуациях. **Дизайн с учетом различий в цветовом восприятии:** Примерно 8% мужчин и 0,5% женщин имеют какие-либо нарушения цветового восприятия (часто называемые "цветовой слепотой"). Наиболее распространенные типы: - **Дейтеранопия**: Трудности в различении красного и зеленого - **Протанопия**: Красный цвет кажется более тусклым - **Тританопия**: Трудности с синим и желтым (редко) **Инклюзивные стратегии использования цвета:** ```css /* ❌ Bad: Using only color to indicate status */ .error { color: red; } .success { color: green; } /* ✅ Good: Color plus icons and context */ .error { color: #d32f2f; border-left: 4px solid #d32f2f; } .error::before { content: "⚠️"; margin-right: 8px; } .success { color: #2e7d32; border-left: 4px solid #2e7d32; } .success::before { content: "✅"; margin-right: 8px; } ``` **За пределами базовых требований к контрасту:** - Тестируйте свои цветовые решения с помощью симуляторов цветовой слепоты - Используйте узоры, текстуры или формы вместе с цветовой кодировкой - Убедитесь, что интерактивные состояния остаются различимыми без использования цвета - Проверьте, как ваш дизайн выглядит в режиме высокого контраста ✅ **Проверьте доступность цветов**: Используйте инструменты, такие как [Coblis](https://www.color-blindness.com/coblis-color-blindness-simulator/), чтобы увидеть, как ваш сайт выглядит для пользователей с различными типами цветового восприятия. ### Индикаторы фокуса и дизайн взаимодействия Индикаторы фокуса — это цифровой эквивалент курсора, который показывает пользователям клавиатуры, где они находятся на странице. Хорошо разработанные индикаторы фокуса улучшают взаимодействие для всех, делая его понятным и предсказуемым. **Современные лучшие практики для индикаторов фокуса:** ```css /* Enhanced focus styles that work across browsers */ button:focus-visible { outline: 2px solid #0066cc; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.25); } /* Remove focus outline for mouse users, preserve for keyboard users */ button:focus:not(:focus-visible) { outline: none; } /* Focus-within for complex components */ .card:focus-within { box-shadow: 0 0 0 3px rgba(74, 144, 164, 0.5); border-color: #4A90A4; } /* Ensure focus indicators meet contrast requirements */ .custom-focus:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; box-shadow: 0 0 0 6px #000000; } ``` **Требования к индикаторам фокуса:** - **Видимость**: Должен иметь контрастность не менее 3:1 с окружающими элементами - **Ширина**: Минимальная толщина 2px вокруг всего элемента - **Сохранение**: Должен оставаться видимым, пока фокус не переместится - **Различие**: Должен визуально отличаться от других состояний интерфейса > 💡 **Совет по дизайну**: Отличные индикаторы фокуса часто используют комбинацию обводки, теней и изменения цвета для обеспечения видимости на разных фонах и в разных контекстах. ✅ **Проверьте индикаторы фокуса**: Перемещайтесь по вашему сайту с помощью клавиши Tab и отметьте элементы с четкими индикаторами фокуса. Есть ли элементы, которые трудно увидеть или которые полностью отсутствуют? ### Семантический HTML: основа доступности Семантический HTML — это как GPS для вспомогательных технологий на вашем сайте. Используя правильные HTML-элементы для их предназначения, вы предоставляете экранным считывателям, клавиатурам и другим инструментам подробную карту для эффективной навигации. Вот аналогия, которая мне действительно помогла: семантический HTML — это разница между хорошо организованной библиотекой с четкими категориями и полезными указателями и складом, где книги разбросаны случайным образом. В обоих местах есть одни и те же книги, но где вы предпочли бы искать что-то? Именно! ```mermaid flowchart TD A[🏠 HTML Document] --> B[📰 header] A --> C[🧭 nav] A --> D[📄 main] A --> E[📋 footer] B --> B1[h1: Site Name
Logo & branding] C --> C1[ul: Navigation
Primary links] D --> D1[article: Content
section: Subsections] D --> D2[aside: Sidebar
Related content] E --> E1[nav: Footer links
Copyright info] D1 --> D1a[h1: Page title
h2: Major sections
h3: Subsections] style A fill:#e3f2fd style B fill:#e8f5e8 style C fill:#fff3e0 style D fill:#f3e5f5 style E fill:#e0f2f1 ``` **Основные элементы структуры доступной страницы:** ```html

Your Site Name

Article Title

Published on

First Section

Content that relates to this section...

Second Section

More related content...

``` **Почему семантический HTML трансформирует доступность:** | Семантический элемент | Назначение | Преимущества для экранных считывателей | |-----------------------|------------|---------------------------------------| | `
` | Заголовок страницы или раздела | "Область баннера" - быстрая навигация к началу | | `