ISSN 1312-0379
За сайта | Карта на сайта | Контакт | F.A.Q.

Главна > Статии > Достъпност

Как Pure-logic стана достъпен. От Николай Колев.

Въведение от главния редактор

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

Защо е необходимо да създаваме или преустройваме готовите си сайтове, така че да бъдат достъпни? Защото всеки десети човек на планетата, а в България дори и още повече хора, имат нужда от това. Защо трябва да ни интересуват тези хора? Причините за това са много. Накратко, хората с физически увреждания, старите хора и децата са много по-склонни да използват Интернет (те трудно се придвижват извън местата, в които живеят и възможността да извършват множество дейности онлайн за тях е огромно облекчение).

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

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

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

Към всеки, който започне да защитава обратната теза - за недостатъчната изгода, за загубите от създаване на достъпни сайтве и т.н.: първо, обърнете се към съвестта си, второ, ако се стремите към достъпност, използвайки правилните инструменти (прилагане на уеб стандартите като XHTML, CSS, XML, DOM и т.н.) по правилните начини (чрез създаване на ползваеми сайтове) достъпността ще дойде напълно естествено, а не като излишен присадък, който загрозява, затормозява и утежнява вашите сайтове.

След толкова много приказки е време да покажем как достъпността става реалност чрез примерите на хора като мен и вас. Първи ще бъде Николай Колев, направил своя личен сайт Pure-logic! достъпен чрез няколко лесни (както ще видим) стъпки. Давам му думата:

Pure-logic! добави достъпност

В началото бе словото. Моето слово, записвано във вечните анали на pure-logic!. Словото се четеше най-вече в четвъртък, между 23 и 24 часа от хора с win2K и IE6. Почти всички останали измамени се бяха въоръжили с IE5.5, Mozilla или Opera. Причини за безпокойство нямаше, Netscape 4 си беше останал вкъщи.

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

Ето четирите най-важни неща които аз добавих.

<!-- css -->

Скрийте стиловете си от Netscape 4.x и IE4 чрез @import правило. Няма по-грозно нещо от жена с чорапи в сутиена и стар Netscape, опитващ се представи сложен CSS дизайн.

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

<!-- /css -->

<!-- search -->

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

Bad: <p>Име: <input type="text" name="name" /></p>

Горният пример трудно ще се разбере от незрящи посетители, разчитащи на т.н. screenreaders (например JAWS) тъй като надписът "име: " и съответното поле са само поредица от несвързани елементи в един параграф. Не ме питайте "Е, колко слепи хора разглеждат моя сайт??" с онзи специален тон на големи експерти, ами си помислете кой е най-активния и важен за вас потребител, който не вижда...

Good: <p><label for="name">Име: </label><input type="text" name="name" id="name" /></p>

Тук полето и описанието имат истинска логическа връзка осъществена чрез "for-id" двойка. Хаха!

Къде ми е етикетът??

Защо след всичко написано по-горе полето за търсене в pure-logic! няма етикет? Отговорът гласи, че в колоната има твърде малко място за такъв лукс.

Ама нали...

Истината е, че етикет има, както ще се убеди всеки, погледнал кода.

Тук на сцената излиза Javascript.

Как:

<div><label for="searchField" id="searchLabel">Find</label><input type="text" name="keywords" id="searchField" class="field" onfocus="foc();" onblur="blu();" /></div> 
<script type="text/javascript">
<!--

var theLabel = document.getElementById("searchLabel");
var theField = document.getElementById(theLabel.htmlFor);

theField.value = theLabel.firstChild.nodeValue;
theLabel.style.display = 'none';

function foc(){
   if(theField.value == theLabel.firstChild.nodeValue) theField.value = '';
}

function blu(){
   if(theField.value == '') theField.value = theLabel.firstChild.nodeValue;
}

// -->
</script>

Какво се случи досега?

Епизод 1 "HTML": Както вече се научихме, слагаме полето и неговото описанието в съответните правилни тагове и ги свързваме с for и id атрибути. Даваме и на етикета id атрибут, за да можем да го адресираме директно в Javascript.

Епизод 2 "Javascript": Създаваме 2 референции, една за етикета и една за полето. Етикетът бива директно адресиран с id атрибута си (var theLabel = document.getElementById("searchLabel")), полето адресираме следвайки логическата връзка между двата елемента (използвайки htmlFor: var theField = document.getElementById(theLabel.htmlFor)). В празното досега поле се записва съдържанието на неговия етикет (theField.value = theLabel.firstChild.nodeValue), а самият етикет се скрива (theLabel.style.display = 'none').

Функциите foc() и blu() се викат при съответните събития и добавят черешката на тортата.

Този скрипт работи в IE5+, Netscape 6+ i Mozilla 0.94+, както и всички съвременни Gecko базирани браузъри.

Какво излиза? В повече от 90% от браузърите етикетът няма да се вижда, а неговото съдържание ще се намира изписано е полето. Във всички останали цялата чудесия ще деградира до синтактично правилна, достъпна и ползваема label-input двойка.

Long live the DOM!

<!-- /search -->

<!-- menus -->

Тъй като разглеждането на архива на pure-logic! разчита само на Javascript контролирани падащи менюта, редно е да предоставим и "нормални" връзки за агенти без Javascript. Не ме питайте "Е, колко хора нямат Javascript?" с онзи специален тон на големи експерти, ами си помислете кой е най-активния и важен за вас потербител, който няма (не шефа)...

Решението е просто и елегантно: <noscript> тагове заобикалят код, който се показва само, ако браузърът НЯМА Javascript. Сложете нормалните връзки там и сте готови. Потребирелите, които не разполагащи с JavaScript лукс ще виждат неизползваемите (голяма работа) менюта и работещите за тях връзки.

<!-- /menus -->

<!-- navigation -->

Винаги съдържанието трябва да се подрежда семантично (според значението, т.е. навигация, основен текст, други разни работи). За мен основният текст е с по-голямо значение от навигацията и редът им в страницата отразява това (което трябва просто да означава, че отгоре е текстът, а под него навигацията). С помощта на CSS лесно можете да преорганизирате екрана (в случая да сложите текст и навигация в 2 колони на едно ниво). За съжаление някои браузъри са толкова лоши, че даже не заслужават да виждат стиловете ни (да Netscape 4, към теб гледам). При тях навигацията остава на дъното и придвижването до нея е неприятно за потребителите.

За тази цел има именовани връзки (named anchors) и ние не се колебаем да ги добавим, скривайки ги от интелигентните браузъри (<a href="#links" title="to the links at the bottom of this page" style="display:none">navigation</a> и <a name="links" style="display:none">&nbsp;</a>).

<!-- /navigation -->

Вместо заключение

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