# Створення доступних веб-сторінок ![Все про доступність](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.uk.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**: Відкрийте DevTools вашого браузера, запустіть аудит доступності 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%. Чи адаптується ваш макет гармонійно? Чи можете ви все ще отримати доступ до всіх функцій без надмірного прокручування? ## Сучасні інструменти тестування доступності Тепер, коли ви розумієте, як люди навігають веб за допомогою допоміжних технологій, давайте дослідимо інструменти, які допомагають вам створювати та тестувати доступні веб-сайти. Думайте про це так: автоматизовані інструменти чудово виявляють очевидні проблеми (наприклад, відсутність alt-тексту), тоді як ручне тестування допомагає вам переконатися, що ваш сайт зручний у реальному використанні. Разом вони дають вам впевненість, що ваші сайти працюють для всіх. ### Тестування контрасту кольорів Ось гарна новина: контраст кольорів — одна з найпоширеніших проблем доступності, але вона також одна з найпростіших для виправлення. Хороший контраст приносить користь усім — від користувачів з порушеннями зору до людей, які намагаються читати свої телефони на пляжі. **Вимоги 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/) - Знаходьте доступні палітри кольорів ✅ **Створюйте кращі палітри кольорів**: Почніть з кольорів вашого бренду та використовуйте перевірки контрасту для створення доступних варіацій. Документуйте їх як доступні кольорові токени вашої дизайн-системи. ### Комплексний аудит доступності Найефективніше тестування доступності комбінує кілька підходів. Жоден інструмент не виявляє все, тому створення рутини тестування з різними методами забезпечує повне охоплення. **Тестування в браузері (вбудоване в DevTools):** - **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 ``` **🔍 Відчутний**: Інформація повинна бути представлена у спосіб, який користувачі можуть сприймати через доступні їм органи чуття - Надавайте текстові альтернативи для нетекстового контенту (зображення, відео - **Тестуйте на різних браузерах, пристроях і допоміжних інструментах** - **Структуруйте контент так, щоб він залишався функціональним навіть без підтримки розширених функцій** ### 🎯 **Перевірка принципів 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 дають найбільший приріст доступності за найменших витрат! ## Створення доступного візуального дизайну Хороший візуальний дизайн і доступність йдуть рука об руку. Дизайн з урахуванням доступності часто відкриває шлях до чистих, елегантних рішень, які приносять користь усім користувачам. Давайте розглянемо, як створювати привабливі дизайни, які працюють для всіх, незалежно від їхніх зорових можливостей або умов перегляду контенту. ### Стратегії кольору та візуальної доступності Колір має потужну комунікаційну силу, але він ніколи не повинен бути єдиним способом передачі важливої інформації. Дизайн, який виходить за межі кольору, створює більш надійний і інклюзивний досвід, який працює в різних ситуаціях. **Дизайн для різних типів кольорового зору:** Приблизно 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 товщини навколо всього елемента - **Стійкість**: Повинні залишатися видимими, поки фокус не переміститься - **Розрізнення**: Повинні візуально відрізнятися від інших станів UI > 💡 **Порада з дизайну**: Чудові індикатори фокусу часто використовують комбінацію обведення, тіні та змін кольору для забезпечення видимості на різних фонах і в різних контекстах. ✅ **Перевірте індикатори фокусу**: Переміщуйтеся по вашому сайту за допомогою клавіші 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 змінює доступність:** | Семантичний елемент | Призначення | Перевага для екранного читача | |---------------------|-------------|------------------------------| | `
` | Заголовок сторінки або секції | "Орієнтир банера" - швидка навігація до верху | | `