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

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

Достъпният дизайн. От Анитра Павка.

"Достъпност на Мрежата" е горещата тема днес. Вероятно вече сте чували за Инициативата за достъпност на Мрежата на W3C или за правилата в Секция 508 от щатските закони. Много страни също са въвели правила за достъпност на Мрежата, отнасящи се до правителствените сайтове. Сега частните компании също осъзнават ползите от създаването на по-достъпна технология. Нараства търсенето на достъпни сайтове, но често уеб разработчиците не са наясно как да правят сайтовете по-достъпни. Създаването на един достъпен сайт не е задължително по-трудно, но включва някои уникални ограничения, които ви карат да погледнете на дизайна от друга гледна точка.

Добрият уеб дизайн е достъпният уеб дизайн. Въпреки общоприетото разбиране, не е задължително тези две неща да бъдат на противоположните страни на скалата на красивото. Достъпните сайтове могат да бъдат привлекателни за всички потребители. Те не са просто картинки с ALT тагове и черен текст на бял фон. Дизайнът винаги е изправен пред някакви ограничения. В уеб дизайна основно изискване е съдържанието да бъде достъпно винаги. Дизайнът може да улесни работата на потребителите с физически недостатъци или да направи сайта абсолютно недостъпен за тях.

Посрещайки разнообразието

Лесно е да пренебрегнеш разнообразието в недостатъците на потребителите. Проблемите със зрението са само един вид недостатък. Докато ALT атрибутите са от особена важност за слепите потребители, то CAPTION елементите (бел. прев. добавят се към таблицата и чрез тях се обяснява съдържанието и структурата на таблицата) са от решаващо значение за глухите. Дори категорията на зрителните проблеми има различни подгрупи като: далтонизъм, катаракти и дългогледство. Други важни категории физически недостатъци са: когнитивни (свързани с възприятията), двигателни и слухови увреждания. Някои физически недостатъци, като например немотата няма да засегнат възможността на даден човек да използва Мрежата. Потребителите може да страдат от някакъв физически недостатък в различни степени или от няколко недостатъка едновременно. Физическите недостатъци са уникални, също като хората, които ги имат.

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

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

Как се създават достъпни документи?

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

Еквиваленти

ALT атрибута на <IMG> тага е необходимост, но когато го използвате, имайте предвид няколко неща. Описанието трябва да бъде възможно най-кратко и пълно. Разположете най-важните думи в началото на описанието. Ако изображението е връзка, може да бъде от полза, ако обозначите какво ще се случи щом потребителят я кликне. Ако описанието надвишава десет думи, обмислете поставянето на връзка към по-дълго описание.

Идеята на атрибута LONGDESC е да ви дава възможност да правите връзка към по-дълго описание на изображение, но не се поддържа добре от браузърите. Вместо това, сега е прието се поставя "d" връзка (бел. прев. "d" идва от description - описание). След тага за изображението, добавете буквата "d" като текст на връзка към отделна страница с пълното описание на изображението. Това е особено важно за сложни информационни изображения като схеми и графики.

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

За чисто декоративните или spacer графиките, използвайте "празен" ALT атрибут. НЕ слагайте интервал между кавичките: ALT="". Празният атрибут означава, че изображението няма конкретно съдържание или значение. Понеже стойността е му е нулева, браузърът няма да го покаже. Ако добавите интервал между кавичките, някои браузъри ще покажат празното място по непредвидим начин. Например, може да се появи tool tip със съдържание "[]".

Осигурявайте еквиваленти и за други елементи, които биха били недостъпни за потребителите. Например, добавяйте описания или транскрипции към аудио елементите. Осигурявайте полезно, алтернативно съдържание ако скриптовете и аплетите са изключени или неизползваеми. Ако използвате server-side image maps изброявайте излишните текстови връзки.

Навигация и връзки

Следвайте постоянство в навигацията на сайта. Постоянството е ключът и към достъпността, и към ползваемостта.

Избягвайте навигация или връзки състоящи се от изображения. Текстовите връзки се създават и поддържат по-лесно и са по-достъпни. Особено избягвайте image maps. Вместо тях, нарязвайте изображението на части. По този начин можете лесно да добавяте ALT атрибути и връзки към отделни части от изображението. Ако image maps са неизбежни, използвайте client-side такива, ако е възможно. Не забравяйте д добавяте описателни имена на връзките връзките към hot spots (бел. прев. онези части от изображението, които са активни). Ако ви се налага да използвате server-side image maps, ще трябва да добавяте и излишни текстови връзки, препоръчително веднага след image map. Server-side image maps могат да бъдат недостъпни за множество потребители.

Добавяйте интервал и някакъв символ, който не е връзка между връзките, които са една до друга. Това помага на потребителите със зрителни проблеми, особено онези използващи софтуер за четене от екрана, по-добре да различават текста към всяка връзки. За тази цел често се използват вертикална линия (|), звездичка (*) или двоеточие (:). Ако не ви харесва как изглеждат, можете да ги скриете чрез стилове.

Правете текста на връзката достатъчно описателен сам по себе си, дори когато е изваден от контекста. Текстът не трябва да бъде по дълъг от около 10 думи. Направете го възможно най-кратък и ясен. Можете да го тествате, като просто го прочетете на някой друг. Ако той разбере за какво става въпрос, значи текстът на връзката е добър. Някои подпомагащи технологии [1] дават възможност на потребителите да прочетат само текста на връзките в една страница. Ако връзките са описателни, те ще помогнат на потребителите да открият търсеното по-бързо.

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

Шрифтове

Два често срещани начина за относително определяне на размерите на шрифта са използването на проценти и em. За сравнение 1 em е равно на 100%. Аз препоръчвам употребата на проценти заради проблемите, които има Internet Explorer 3.x (IE3) за Windows с em-размерите. Em не се поддържат правилно. IE3 ги интерпретира като пиксели. Ето защо големина на шрифта от 1.25 ems ще бъде показана като 1.25 пиксела.

Казвайки това, трябва да ви предупредя, че IE3 има проблеми и с процентите. Вместо да прави шрифта ситен до нечетливост, той може да направи шрифт с размери в проценти невероятно голям. Той прибавя процента, който сте задали, към стандартния размер на елемента. Това означава, че ако по принцип за IE3 <H1> заглавието е два пъти (200%) по-голямо от стандартния текст, а вие също укажете <H1> тага да бъде с големина на шрифта 200%, то общо ще се получат 400% за <H1>. Ще бъде огромно, но четливо.

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

Относителните размери на шрифта са страхотна идея на теория, но на практика се оказват проблематични. Ако използвате стилове за определяне на размерите на шрифта, бъдете внимателни при структурирането на страницата. Наследствеността (отношението между родителски тагове и "деца") може да се окаже проблем. Примерно ако имате текст с големина на шрифта 80% от големината на елемент, който от своя страна също е 80% от друг елемент, в края на краищата ще имате шрифт с 80% от размера, който желаете. Дори и с тези главоболия, положителните страни на шрифтовете с относителни размери далеч превъзхождат отрицателните.

Таблици

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

Задавайте в проценти размера на таблиците, използвани само за оформяне на външния вид. Използвайте проценти както за ширината на цялата таблица, така и за ширината на отделните й клетки. По този начин съдържанието ви ще пасва по-добре към резолюцията на екрана на потребителя. Много хора се съобразяват с резолюция 800 х 600 пиксела, но това може да създаде проблеми на хора с по-малки размери на екрана. Относителните размери намаляват риска част информацията да "изпадне" от екрана и да не бъде забелязана. Това ще направи сайта по-ползваем за много потребители, не само тези с физически недостатъци.

Уверете се, че съдържанието в таблиците за оформяне на външния вид се "линеаризира" правилно. Линеаризирана таблица [2] е тази, в която съдържанието се показва в същия ред, в който са разположени клетките в HTML кода на страницата. Софтуерът, който използват слепите потребители, ще чете всяка клетка, една след друга. Ако оформяте страницата в колони, могат да възникнат проблеми. В зависимост от това как сте оформили външния вид, потребителят може да получи информацията не в определения от вас ред. Вписаните таблици (таблици една в друга) още повече усложняват начина, по който се линеаризира таблицата, а дори една проста таблица с лош програмен код, може да предизвика объркване сред потребители, които не могат да видят как всъщност са подредени нещата.

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

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

Таблиците с данни са по-сложни и изискват по-сложен код, за да бъдат едновременно достъпни и ползваеми. Има няколко прости неща, които дизайнерите могат да направят. В тага <TABLE> използвайте атрибута SUMMARY, за да дадете кратко описание на информацията в таблицата. Освен това можете да добавите и атрибута CAPTION, за да дадете един вид заглавие на таблицата. Това ще помогне на потребителите с физически недостатъци да решат дали да пропуснат таблицата. Обозначете главата на таблицата, използвайки <TH> тага, вместо да правите текста в една обикновена клетка удебелен. Вашата цел е да напишете кода на таблицата така, че да дава възможно най-богата информация.

Цвят

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

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

Ако трябва да използвате цвят, за да предадете някаква информация, имайте няколко неща наум. Цветовият контраст е от решаващо значение за далтонистите. Например, някои не разпознават кое е червено и кое е зелено, но могат да различат двата отделни цвята. Далтонистите обикновено правят разлика между много тъмни и много светли цветове, дори и да са от една тоналност. Ето защо е възможно да използвате червено и зелено ако осветеността им силно се различава и не са едно до друго. Ако ви се налага да използвате различни цветове с еднаква осветеност, използвайте комбинацията синьо, жълто, бяло или черно. Тези цветове се разпознават най-лесно [3]. Не използвайте цвят само, за да отбележите някоя специална част от дадено изображение (например статистически графики или навигация). По-ефективно е да смесвате цвят и текстура, форма или друг визуален елемент. Разбира се, използвайте текст, за да обясните на далтонистите значението на цветното съдържание.

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

В Мрежата има много източници, които ви помагат да направите това. BT's Color Transformations chart показва как далтонистите виждат цветовете от web safe палитрата. Vischeck е друг полезен ресурс, чрез който можете да проверите как ще изглежда вашия сайт през очите на потребители с различни форми на далтонизъм. Той има множество plug-ins и дава възможност за безплатна онлайн проверка за някои от най-често срещаните форми на далтонизъм.

Независимо от устройството

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

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

Други капани

Използвайте възможно най-ясния и прост език уместен за съдържанието на сайта. Бъдете кратки. Накъсайте съдържанието на малки логични парченца. Страниците да бъдат къси. Подравнявайте текста от ляво, защото това улеснява преглеждането му. Това ще е от полза за всички потребители и особено за тези с когнитивни недостатъци - такива са например дислексията или проблемите със заучаването на нови неща. Прост начин за проверка е да накарате детето на някой приятел да хвърли поглед върху сайта. Ако обикновено 10 до 12-годишно детенце "не схваща" сайта, ще е добре да преработите нещата. Сайтът трябва да е достатъчно лесно разбираем за всички потребители.

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

Използвайте правилно таговете за заглавия (като <H1> и <H2>), за обозначение на структурата на документа. Използвайте ги в строга последователност. Не използвайте <H4>, за да обозначите първото заглавие, просто защото шрифта ви харесва повече. Ако не ви харесва как изглежда винаги можете да промените външния му вид чрез стиловете.

Избягвайте употребата на фреймове. Ако трябва да ги използвате, уверете се, че сте ги им дали достатъчно описателно заглавие и съдържателно име (чрез атрибутите TITLE и NAME). Ако потребителите знаят какво е съдържанието на един фрейм, те ще могат да навигират из него по-добре.

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

Ако сайтът ви изисква употребата на plug-in, направете връзка към място, откъдето може да се изтегли.

Избягвайте употребата на връзки, които отварят нов прозорец на браузъра. Ако ги използвате - предупреждавайте потребителите. В противен случай е възможно потребителите да не усетят промяната. Това може да ги обърка или дезориентира. По този начин се създава и проблем пред ползваемостта, понеже потребителите не могат да използват бутона Back. Лесно е да затвориш погрешния прозорец и да изгубиш това, което ти е било нужно. Затова преди връзките, които се отварят в нов прозорец добавяйте предупредително съобщение или малка иконка (с предупреждение в ALT атрибута).

Избягвайте "pop-up" прозорците, когато е възможно. Те създават проблеми подобни на тези с връзките, отварящи се в нов прозорец, но към тях се добавят и JavaScript усложненията. Достъпът до "pop-up" прозорците не трябва да зависи от устройството за достъп. По-важното е съдържанието на "pop-up" прозорците да бъде достъпно и когато JavaScript е изключен.

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

Една нова перспектива

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

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

Бележки:

  1. The Definition of Assistive Technology from the Tech Act
    http://tatp.edb.utexas.edu/library/atdef.html

  2. Web Content Accessibility Guidelines 1.0 - линеаризирана таблица
    http://www.w3.org/TR/WCAG10/wai-pageauth.html#linearized-table

  3. Съвети и трикове при дизайна за далтонисти
    http://www.cimmerii.demon.co.uk/colourblind/design.html

Източници:

W3C WAI homepage
http://www.w3.org/WAI/

W3C Web Accessibility Initiative Checklist for Web Content Accessibility Guidelines 1.0
http://www.w3.org/TR/WAI-WEBCONTENT/full-checklist.html

Section 508 Official Web site
http://www.section508.gov/

Section 508 Standards § 1194.22 (Web guidelines)
http://www.section508.gov/index.cfm?FuseAction=Content&ID=12#Web

Web Design for Dyslexic Users
http://www.dyslexia.com/qaweb.htm

Vischeck
http://www.vischeck.com/index.php

A-Prompt accessibility verification software
http://aprompt.snow.utoronto.ca/

Lynx browser
http://lynx.isc.org/

Lynx Viewer
http://www.delorie.com/web/lynxview.html

Designing More Usable Web Sites
http://www.trace.wisc.edu/world/web/

WebABLE: Tools and Utilities
http://webable.com/library/linkspage.html