Захтеви за веб дизајн све више укључују побољшану веб приступачност. Али зар оптимизација веб локације није довољна за све главне прегледаче са компатибилношћу са више уређаја? Помоћу Гоогле Лигхтхоусе -а можете лако мерити перформансе веб странице, приступачност, најбоље праксе и СЕО. Па зашто је приступачност важна?

Према ЦДЦ -у (Центри за контролу и превенцију болести), више од 60 милиона Американаца живи са инвалидитетом. Пратећи Смернице за приступачност веб садржаја, можете представити нека прелиминарна разматрања која ће допринети стварању приступачне веб локације. Ево свега што вам је потребно за почетак коришћења веб приступачности помоћу ХТМЛ -а и ЦСС -а.

Структурирани ХТМЛ са одговарајућом семантиком

Док веб страницу чине визуелно привлачном, корисници помоћне технологије не би требало да се збуњују. Иако многи системи за управљање садржајем, попут ВордПресс -а, примењују ХТМЛ, ваша је одговорност да поново проверите и потврдите да се правилно примењује.

На пример, а

Опширније: Једноставни примери ХТМЛ кода које можете научити за 10 минута

Семантички ХТМЛ је лакше развити јер ћете уз њега добити и додатне функционалности. Одлично ради на мобилним уређајима. Такође, када придајете важност кључним речима унутра

или таг, помаже у СЕО -у.

Структурирани садржај за кориснике читача екрана

Ево примера семантичког ХТМЛ -а наспрам лоше.

Добар семантички ХТМЛ
Мој смер

Ево како можете да направите приступачну веб локацију користећи ХТМЛ и ЦСС

Мој други наслов

Лош семантички ХТМЛ
Мој смер

Ево како можете да направите приступачну веб локацију користећи ХТМЛ и ЦСС

Први случај је прилично једноставан за навигацију читачима екрана. Прочитаће заглавље које обавештава о наслову и пасусу. Зауставиће се на секунду након сваког елемента. Можете прескочити неке наслове или се вратити на претходни помоћу Ентер/Ретурн. Такође можете формирати садржај помоћу ознаке заглавља.

Када пишете презентацијски ХТМЛ уместо семантичког ХТМЛ -а (у другом случају), ред се непотребно прекида и резултира лошим искуством. То је као да припремате џиновски блок који је теже каскадирати и манипулисати јер нема потенцијалних селектора.

Језик и распоред за приступачну веб локацију

Требали бисте користити прецизан језик са проширеним акронимима и скраћеницама. Ако је могуће, покушајте да избегнете цртице уписивањем 9-5 -> 9 до 5. Раније су ХТМЛ табеле коришћене за креирање изгледа странице. Раније је ометао исправно очитавање због угнежђених табела које су чиниле прилично сложен распоред. Ево савремене структуре веб странице:

Ово је заглавље



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

који садржи чланак

Наслов чланка

садржај чланка



Подножје веб локације

Дакле, као што видите, овај распоред је прилагођен читачу екрана. Ознаке су разумљиве јасним и концизним кодом. Такође, лако се одржава и захтева мању пропусност приликом преузимања. Уверите се да сте изворно поставили изворни код; то ће направити разлику.

Преиспитајте контроле корисничког интерфејса, табеле и замењени текст

УИ контроле су најчешће дугмад, контроле облика и везе вашег веб документа. Опште правило је да се њима може манипулисати помоћу тастатуре. Они имају неки подразумевани стил (могу се разликовати у различитим прегледачима) где можете прећи на друге опције помоћу тастера таб и притиснути Ентер/Ретурн да бисте дошли до закључка. Текстуалним ознакама можете управљати додавањем карактеристичних и смислених сидрених текстова уместо „кликните овде“.

Да бисте креирали приступачне табеле, додајте заглавља табела

и наведите редове или колоне помоћу атрибута опсега. Осим тога, можете користити или атрибут резимеа да читачима екрана пружи брз преглед садржаја табеле.

Алтернативни текст даје контекстуалне информације о слици или видео запису веб пописивачима и читачима екрана. Ако је ваша слика у декоративне сврхе, боље је да ознаку алт оставите празну. Иначе, давање детаљног описа слике много помаже.

У већини случајева читач екрана ће прочитати алтернативни текст, назив датотеке и насловни атрибут (можете га прескочити). Такође, ако не желите да користите алтернативни текст или желите да додате исту ознаку на више слика, ево кратког савета:

Црвени цвет ...

За позивање на тај ИД користили сте атрибут ариа-лабелледби. Омогућиће читачима екрана да користе алтернативни текст у облику тог пасуса.

Стандардни ЦСС за бољу приступачност

Стилизирање приступачних функција странице значи да би се ваш дизајн требао понашати према основном садржају странице. На пример, за

,

, и

елемент, типичан ЦСС би требао бити:

х1 {
величина фонта: 4рем;
}
п, ли {
величина фонта: 1,5рем;
боја: плава;
}

Величина фонта, размак између слова, породица фонтова итд. Требали би помоћи у угодном читању. Наслови треба да се издвајају од основног текста (подразумевани стил је такође добар). Осим тога, текст би требао имати контрастну боју од позадину коју одаберете помоћу ЦСС -а.

Стилизовање текста, веза и ознака

Микро интеракције су могуће са приступачним ЦСС-ом. Може бити мали као истицање текста до истицања веза на одговарајући начин. Можете користити и означите изразито. Можете додати тачкасту подвлаку помоћу елемент.

Стандардна веза треба бити подвучена подразумеваном бојом: плавом и претходно посећеном везом са подразумеваном бојом: љубичаста (можете је прилагодити).

а {
боја: #фф0000;
}
а: ацтиве {
боја: #000000;
бацкгроунд-цолор: #а60000;
}
а: ховер, а: висит, а: фоцус {
боја: #а60000;
декорација текста: нема;
}

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

Помоћу ЦСС -а дајте чист изглед елементима обрасца и ознакама. Такође, одлучите о фокусима/лебдењима која су доследна у већини прегледача. Запамтите да ови мали знаци помажу људима да разумеју вашу веб страницу.

Контраст боја и вредности скривања

Прилагодите шему боја веб локације тако да боја предњег плана (текст/слика) буде у контрасту са бојом позадине првенствено због тога што је особама са оштећењем вида (нпр. далтонизам) теже да читају садржај прописно. Можете користити Контрола контраста боја да бисте добили пристојну шему боја према критеријумима ВЦАГ -а. Такође покушајте да додате знакове означавања (попут звездице) заједно са упозорењима или одредбама и условима (не само црвено упозорење).

Читачи екрана немају разлога за бригу све док редослед изворног кода није пристојно написан. Покушајте да избегнете својства дисплаи: ноне или висибилити: хидден јер они скривају садржај од читача екрана.

Олакшајте замену стила

Кључна ствар је без обзира на то колико добро дизајнирали веб локацију, корисници имају различите разлоге да надјачају стил. На пример, можда неки желе већу величину текста или желе да промене боју текста и позадине ради читљивости. Дакле, ваша област садржаја треба да буде у стању да је у потпуности обради.

Закључак: Комбинујте ХТМЛ и ЦСС

Сада знате основе почетка са семантичким ХТМЛ -ом и писања разумног изворног кода правим редоследом за приступачну веб локацију. Фокусирајте се на ХТМЛ и крените ка стварању приступачног ЦСС -а када то заврши.

Користећи горе наведене технике, можете побољшати корисничко искуство и послужити прелепој публици. Дакле, почните да правите веб странице које одговарају и приступачне су.

Како направити веб страницу: За почетнике

Данас ћу вас водити кроз процес израде комплетне веб странице од нуле. Не брините ако ово звучи тешко. Водит ћу вас кроз то на сваком кораку.

Прочитајте следеће

О аутору

Проширите до Прочитајте целу причу