24 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.
Проблемът с "кликнете тук"
Четците на екрана също имат способността да четат само хипервръзките на страница, по същия начин, по който зрящ човек би сканирал страница за връзки. Ако текстът на връзката винаги е "кликнете тук", всичко, което потребителят ще чуе, е "кликнете тук, кликнете тук, кликнете тук, кликнете тук, кликнете тук, ..." Всички връзки сега са неразличими една от друга.
Добър текст на връзките
Добър текст на връзките накратко описва какво има от другата страна на връзката. В горния пример за малките пингвини, връзката е към страницата в Wikipedia за вида. Фразата малки пингвини би била перфектен текст на връзката, тъй като ясно показва какво ще научи някой, ако кликне върху връзката - малки пингвини.
Малкият пингвин, понякога наричан феен пингвин, е най-малкият пингвин в света. Малки пингвини.
✅ Сърфирайте в интернет за няколко минути, за да намерите страници, които използват неясни стратегии за връзки. Сравнете ги с други, по-добре свързани сайтове. Какво научавате?
Бележки за търсачките
Като допълнителен бонус за гарантиране, че вашият сайт е достъпен за всички, ще помогнете на търсачките да навигират във вашия сайт. Търсачките използват текста на връзките, за да научат темите на страниците. Така че използването на добър текст на връзките помага на всички!
ARIA
Представете си следната страница:
| Продукт | Описание | Поръчка |
|---|---|---|
| Джаджа | Описание | Поръчка |
| Супер джаджа | Описание | Поръчка |
В този пример дублирането на текста на описание и поръчка има смисъл за някой, който използва браузър. Въпреки това, някой, който използва четец на екрана, ще чуе само думите описание и поръчка, повторени без контекст.
За да поддържате тези типове сценарии, HTML поддържа набор от атрибути, известни като Достъпни богати интернет приложения (ARIA). Тези атрибути ви позволяват да предоставите допълнителна информация на четците на екрана.
NOTE: Както при много аспекти на HTML, поддръжката от браузъри и четци на екрана може да варира. Въпреки това, повечето основни клиенти поддържат ARIA атрибути.
Можете да използвате aria-label, за да опишете връзката, когато форматът на страницата не ви позволява. Описанието за джаджа може да бъде зададено като
<a href="#" aria-label="Widget description">description</a>
✅ По принцип използването на семантичен HTML, както е описано по-горе, има предимство пред използването на 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 текста. Така че, отново, осигуряването на достъпност на вашата страница носи допълнителни бонуси!
Клавиатурата
Някои потребители не могат да използват мишка или тъчпад, вместо това разчитат на взаимодействия с клавиатурата, за да преминават от един елемент към друг. Важно е вашият уебсайт да представя съдържанието си в логичен ред, така че потребителят на клавиатура да може да достъпи всеки интерактивен елемент, докато се движи надолу по документа. Ако изграждате вашите у Много правителства имат закони, свързани с изискванията за достъпност. Проучете законите за достъпност във вашата страна. Какво е обхванато и какво не е? Пример за това е този правителствен уебсайт.
Задача
Анализирайте недостъпен уебсайт
Кредити: Turtle Ipsum от Instrument
Отказ от отговорност:
Този документ е преведен с помощта на AI услуга за превод Co-op Translator. Въпреки че се стремим към точност, моля, имайте предвид, че автоматичните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия изходен език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален превод от човек. Ние не носим отговорност за каквито и да е недоразумения или погрешни интерпретации, произтичащи от използването на този превод.