10 Инструменти за подобряване на достъпността на уебсайтове

Няма съмнение, че разбирате необходимостта уебсайтът ви да бъде достъпен за възможно най-много потребители. Но четенето на всички насоки и стандарти може да бъде малко преобладаващо. Тук можете да намерите най-новите препоръки на W3C, но трябва ли да знаете всяка дума и да следвате всяка насока?

Днес ще се опитаме да направим всичко малко по-лесно с някои инструменти и ресурси, които да ви помогнат да подобрите достъпността на уебсайтове (и може би дори някои проверки, за да смятате, че не са били на вашия радар!).

Независимо дали търсите да осигурите достатъчно визуален контраст, сайт, който е достъпен за екранни четци, или дори да създавате достъпни имейли, ние ви обхващаме!

1. Цвят безопасно

Color Safe ви помага да проверите (и дори да създадете) достъпни цветови палитри въз основа на Ръководствата на WCAG за контраст на текста и цвета на фона. Инструментът и стандартите използват формула, базирана на съотношение, за да определят цветови комбинации, които могат да бъдат прочетени от всички.

Ръководствата на WCAG препоръчват съотношение на контраст от 4, 5 за малък (основен) текст и 3 за голям текст (всичко над 24 точки).

Просто въведете вашите цветове - въз основа на HEX код - избор и размер на шрифта и генерирайте палитра. Можете да получите незабавно съотношение, за да проверите и можете да видите други подобни цветове. Разгледайте дали нещо подобно може да е по-добра опция въз основа на вашия шрифт и размер.

2. NoCoffee

NoCoffee е разширение за браузър Google Chrome, което ви помага да визуализирате дизайна си по същия начин, по който някой, който е с нарушено зрение, може да го види. (Нищо не подчертава важността на достъпността, като виждането по този начин.)

Той може да провери и да покаже следното:

Ниска острота с малки насочвания към текст или щракване
Проблеми с нисък контраст с текстови и фонови елементи
далтонизъм
Визуален сняг, отблясъци, призраци и катаракта
Нистагъм, който е бързо неволно движение на очите
Забранени зрителни полета

3. Проверка на контраста

Contrast Checker ви позволява да въвеждате цветове на фона и предния план на екрана и незабавно да проверявате няколко визуални стандарта с незабавно преминаване / неуспех, кодирано в цвят.

Хубавите характеристики на инструмента включват възможността да прелиствате между опциите за цвят и цвят на сивото, да споделяте проби от вашите чекове и да изтегляте цветове от изображения. Можете също да запазите PDF извадка. Това е лесен инструмент с множество функции, които всеки може да използва бързо.

Освен това осигурява съотношение на цветовете, както е посочено в Насоките на WCAG.

4. Tota11y

Tota11y е JavaScript файл, който поставя миниатюрен бутон в долния ъгъл на документите. Разширява се с лента с инструменти, която включва множество приставки за различни проверки на достъпността.

Нарушения на ред и заглавия за нарушения
Контраст (или липса на такъв)
Текст на връзката, който липсва или е объркващ
Етикети, които липсват на входовете
Изображения без алт-текст
Етикетите са ориентири за ARIA
Екранният четец „пръчка“, така че можете да „четете“ сайта, както би бил екранният четец

5. ВЪЛНА

WAVE или инструментът за оценка на достъпността в мрежата е надеждна колекция от проверки на едно място.

Инструментът използва визуално наслагване на икони, свързани с информация в страничната лента, за да предостави подробности за всичко - от цветен контраст до излишни заглавия до връзки към HTML и структурни елементи.

Безплатният пул за проверка ви дава почти всичко, което трябва да знаете за една страница, но WAVE включва и платени инструменти на ниво предприятие за собственици на няколко сайта или потребители, които искат да са повече от една страница наведнъж. Той също така включва разширения за браузър Chrome и Firefox, които могат да проверяват интранет, защитени с парола, динамично генерирани или чувствителни уеб страници в частна среда.

6. 508 Проверка

Проверката на 508 тества URL адреси, за да определи дали уебсайтът отговаря на указанията за спазване на изискванията на Съединените щати 508, които се изискват от закона за всяка организация, която получава федерално финансиране.

Въпреки че този инструмент е безплатен, трябва да се регистрирате, за да видите пълните резултати от сканирането.

Сайтът включва и други инструменти и ресурси, включително викторина за подпомагане на организациите да разберат дали те са обект на 508 съответствие и специфични ресурси за висше образование, нестопански организации и държавни органи.

7. HTML_CodeSniffer

HTML_CodeSniffer е скрипт от страна на клиента, който проверява изходния код и търси нарушения на определени стандарти. Той проверява както Указания за достъпност на уеб съдържанието 2.0, така и раздел 508 на САЩ.

Поставете код директно в уебсайта за проверка или използвайте маркера.

Лесна е за използване и можете да изберете какъв тип информация да се показва - грешки, предупреждения или известия и да видите отчет, в който подробно се отнасят всички проблеми от проверката.

8. Достъпен имейл

Достъпният имейл е онлайн проверка и HTML редактор, който ще ви помогне да подобрите кода на имейл бюлетин, преди да го изпратите. (Можете да проверите и минали / изпратени кампании.)

С толкова много дигитална комуникация и генериране на олово, идващи от имейл, тя не трябва да бъде един от забравените елементи на уебсайта по отношение на достъпността, но често е така. Същите правила за достъпност в мрежата важат и за изпращане по имейл.

Инструментът е безплатен за използване и е предназначен за насърчаване на достъпността и използваемостта на маркетинговия имейл.

9. Амара

Amara е инструмент за създаване на субтитри и затворени надписи за видео.

Предоставянето на начин за свързване без звук или на друг език може да отвори вашите дизайнерски елементи за повече хора, особено ако видеото е ключов елемент от дизайна.

Този инструмент включва безплатни и корпоративни опции, които улесняват поставянето на езика на екрана в четим формат, който работи на уебсайтове и платформи за стрийминг на видео, като YouTube.

10. MobiReady

MobiReady предоставя тест за мобилна достъпност във визуален формат и с доклад за резултатите, така че да можете да видите къде уебсайтът ви може да бъде недостатъчен на най-малките устройства.

Можете да сравните вашия сайт спрямо Alexa 1000, класация на най-добрите уебсайтове в света; получете подробни технически резултати с препоръки и вижте рендерирането на вашия уебсайт на различни екрани, включително устройства с висок, среден и нисък клас.

Една от най-добрите части на този тест е, че той се оценява в десетки области и има предложения за подобрение при всякакви „провали“.

заключение

Когато става въпрос за достъпност на уебсайтове, е важно да се вземе предвид използваемостта и четливостта за всички видове потребители. Помислете за цвят, размер и разположение на елементи, надписи и субтитри, подходящ HTML и структура и дори имейл, за да осигурите възможно най-доброто преживяване на колкото се може повече хора.

Също така е важно да проверите за всички регионални или национални правила за съответствие, които биха могли да се прилагат за вашите проекти, като споменатите по-горе стандарти за съответствие 508.

И когато се съмнявате, по-добре е да се объркате от страна на достъпността. Добре е да настроите цвят от палитра или да увеличите размера на шрифта, така че повече хора да разберат какво е на екрана с лекота.