Изискванията за уеб дизайн все повече включват подобрена уеб достъпност. Но не е ли оптимизиране на сайта за всички основни браузъри със съвместимост с множество устройства? Можете лесно да измервате ефективността на вашия уебсайт, достъпността, най -добрите практики и SEO с помощта на Google Lighthouse. И така, защо достъпността има значение?

Според CDC (Центрове за контрол и превенция на заболяванията), над 60 милиона американци живеят с увреждания. Следвайки Указанията за достъпност на уеб съдържание, можете да въведете някои предварителни съображения, които ще допринесат за създаването на достъпен уебсайт. Ето всичко, от което се нуждаете, за да започнете с уеб достъпността с помощта на HTML и CSS.

Структуриран HTML с подходяща семантика

Докато правят уебсайта визуално привлекателен, потребителите на помощни технологии не трябва да се бъркат. Въпреки че много системи за управление на съдържанието като WordPress прилагат HTML, ваша отговорност е да проверите отново и да потвърдите, че е приложен правилно.

Например, а

Прочетете още: Прости примери за HTML код, които можете да научите за 10 минути

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

или маркер, той помага в SEO.

Структурирано съдържание за потребители на Screen Reader

Ето пример за смислов HTML добър vs. лошо.

Добър семантичен HTML
Моето заглавие

Ето как можете да направите достъпен уебсайт с помощта на HTML и CSS

Второто ми заглавие

Лош семантичен HTML
Моето заглавие

Ето как можете да направите достъпен уебсайт с помощта на HTML и CSS

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

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

Език и оформления за достъпни уебсайтове

Трябва да използвате точен език с разширени съкращения и съкращения. Ако е възможно, опитайте се да избегнете тирета, като напишете 9-5 -> 9 до 5. Преди това HTML таблици бяха използвани за създаване на оформления на страници. Използва се за възпрепятстване на правилните показания поради вложени таблици, които образуваха доста сложно оформление. Ето една модерна структура на уебсайта:

Това е заглавка



Съдържание на главната страница

съдържаща статия

Заглавие на статията

съдържание на статията



Долен колонтитул на уебсайт

Така че, както можете да видите, това оформление е удобно за четеца на екрани. Маркировката е разбираема с ясен и кратък код. Също така, той е лесен за поддръжка и изисква по -малка честотна лента при изтегляне. Уверете се, че сте поставили изходния код логически; това ще направи разликата.

Преразгледайте контролите на потребителския интерфейс, таблиците и заместващия текст

Най -често контролите на потребителския интерфейс са бутони, контроли за формуляри и връзки на вашия уеб документ. Основното правило е, че те могат да бъдат манипулирани от клавиатурата. Те имат някакъв стил по подразбиране (може да се различават в различните браузъри), където можете да преминете към други опции, като използвате клавиша Tab и натиснете Enter/Return, за да стигнете до заключение. Можете да управлявате текстовите етикети, като добавяте отличителни и смислени текстове на котва вместо „щракнете тук“.

За да създадете достъпни таблици, добавете заглавки на таблици

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

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

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

Червено цвете ...

Използвахте атрибута aria-labelledby за препращане към този идентификатор. Това ще позволи на екранните четци да използват заместващ текст под формата на този параграф.

Стандартен CSS за по -добра достъпност

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

,

, и

елемент, типичен CSS трябва да бъде:

h1 {
размер на шрифта: 4rem;
}
p, li {
размер на шрифта: 1.5rem;
цвят: син;
}

Размерът на шрифта, разстоянието между буквите, семейството на шрифтовете и т.н., трябва да помогнат за удобно четене. Заглавията трябва да се открояват от основния текст (стилът по подразбиране също е добър). Освен това текстът трябва да има контрастен цвят от фон, който избирате с CSS.

Стилизиране на текст, връзки и етикети

Микровзаимодействията са възможни с достъпен CSS. Тя може да бъде толкова малка, колкото подчертаването на текста до подчертаването на връзките по подходящ начин. Можете да използвате и маркирайте отличително. Можете да добавите пунктирано подчертаване с помощта на елемент.

Стандартната връзка трябва да бъде подчертана с цвят по подразбиране: син и предварително посетена връзка с цвят по подразбиране: лилав (можете да го персонализирате).

a {
цвят: #ff0000;
}
a: активен {
цвят: #000000;
background-color: #a60000;
}
a: hover, a: visit, a: focus {
цвят: #a60000;
декорация на текст: няма;
}

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

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

Цветен контраст и скрити стойности

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

Екранните четци нямат за какво да се притесняват, докато редът на изходния код не бъде написан прилично. Опитайте се да избягвате използването на display: none или visibility: hidden свойства, тъй като те скриват съдържанието от екранните четци.

Улеснете преодоляването на стила

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

Обобщение: Комбинирайте HTML и CSS

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

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

Как да си направим уебсайт: За начинаещи

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

Прочетете Напред

За автора

Разгънете, за да прочетете цялата история