Art is like masturbation.

Design is like sex.

 
Съвети за достъпност в web

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

В тази статия ще ви предложа семпли идеи, чрез които можете да подобрите достъпността на вашия сайт, а добрата достъпност влияе на индексирането ви от търсещите машини.., както и по-добрата комуникация с потребителя или все повече КЛИЕНТА!

Можете да разгледате и този материал на w3:
Web Content Accessibility Guidelines 1.0
Web Content Accessibility Guidelines 2.0ново

Първата стъпка е лесна. Всяко изображение и обект във вашата уеб-страница трябва да има ALT (основно за изображения) и TITLE (почти без икзключения) параметър в тага си, който описва обекта. Бъдете сигурни, че текстът е информативен. Ролята на този текст е да замени обекта в определени ситуации, например:

<img src="taj-mahal.jpg" alt="Snimka na Taj Mahal">

<iframe src="weather-forecast.html"><a href="weather-forecast.html">Открийте прогнозата за време в Намибия</a></iframe>

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

Тази стъпка довежда и до следващата:

Все повече видео материали се публикуват в Интернет пространството, но това може да представлява огромна бариера в орпеделени случаи. Следния пример: политическа кампания, в която се публикуват видео материали с приоритетите в политическата програма на съответния кандидат, но вие нямате достъп до съответното видео, защото:
– вашият компютър не поддържа и/или няма въпросния плъгин/кодек, за да гледате видеото
– имате здравословни причини (визирам хората с увреждания)
или поради някаква друга причина...

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

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

Един доста досаден навик, който се използва все повече е линкове със съдържание: "Натисни тук"; "Точно ТУК!"; "Отвори ТОВА!" и много други. Тази практика е обречена и търсещите машини, които всъщност определят (неписано) стандартите ограничават/игнорират подобни недоразумения и наистина ми прави впечатление, че все по-малко подобни некадърни изпълнения има, което ме радва. От друга страна подобни линкове не се разбират от хората с увреждания, защото не описват (както винаги и АКО липсва alt или title) съдържанието на връзката, вижте този пример:

НЕправилно: <p><a href="/taj-mahal.html">Натисни тук</a> за да прочетете статията за Taj Mahal.</p>
ПРАВИЛНО: <p><a href="/taj-mahal.html" title="индийска архитектура - тадж махал">The Taj: История и Архитектура сляти в едно</a>.</p>

Котвата (както е по известно) трябва да е част от съдържанието на текста и да описва връзката, а не просто една дума или нещо невероятно акцентиращо, като "Натисни ТУК".

Тази стъпка е съществена поради две причини: (не е от голямо значение за индексирането)
– бързо интерпретиране на кода от браузерите и особено от текстовите и специализираните за хората с увреждания
– лесно четене на изходящия код при добре структуриран такъв

Ето и следния пример:

НЕправилно: <a href="1.html">Page 1</a> <a href="2.html">Page 2</a> <a href="3.html">Page 3</a> <a href="4.html">Page 4</a>

ПРАВИЛНО:
<ul>
<li><a href="1.html">Page 1</a></li>
<li><a href="2.html">Page 2</a></li>
<li><a href="3.html">Page 3</a></li>
<li><a href="4.html">Page 4</a></li>
</ul>

това е един блок да приемем, че е навигацията на вашата страница. Много често кода е "спагети", когато се генерира от WYSIWYG редактори. Няма да ви отнеме много време да подредите кода си за да е четлив.

Освен това използвайте пълният "потенциал" на CSS и xHTML, все пак те за това са създадени, нали?...а не за шев и кройка?!

Всъщност, няма нищо лошо да използвате JS за (каквото и да е било, дава функционалност) да повишите ползваемостта на страницата ви, но бъдете сигурни, че линковете не са зависими от JS. Пример – ако искате да изведете дадена информация в pop-up, бъдете сигурни, че линка ви е опростен (т.е. дори и да е забранен JS ще проработи) например:

НЕправилно: <a href="javascript:popup('/weather-forecast.html')">Прогнозата за време в Намибия</a>

ПРАВИЛНО: <a href="/weather-forecast.html" onclick="popup('/weather-forecast.html');return false;">Прогнозата за време в Намибия</a>
Да помислим и за тези, които са забранили Js макар да са малко...

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

Много лесна стъпка, която можете да приложете веднага без много усилия: проверете дали сте декларирали какъв е езика на съдържанието във вашата страница? Ако вашата страница е едноезична, просто декларирайте съответния език:

<html lang="bg" xml:lang="bg">

Другото мое откритие, е че можете да изполвате lang и в други тагове ако само определена част от съдържанието ви е на друг език например:

<p lang="fr">Ceci est en français</p>

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

През 1996 година беше модерно да се слагат gif анимации на разголващи се мадами за да се печелят пари от трафик, а днес е модерно да се слагат същите разголени мацки или ОТСЛАБВАЩИ тела, но в по-съвременен вариант флаш. Както преди 10 така и днес все още не си обяснявам как някои собственици на сайтове си позволяват да пренебрегнат потребителите си и цялостната концепция на сайта си за да спечелят пари...

Много често ме наричат противник на Flash & As но това не е така. Аз подкрепям анимацията, но не намирам приложението и в 99% от сайтовете.
А и от към достъпност както Java така и Flash са все още в черния списък.
Ако наистина нямате нужда от анимация-избягвайте я...

Един от основните проблеми в пространството е невежеството към цветовете.
(не напразно има наука за възприатието на цветовете)

Безсмислено е да коментирам стотиците сайтове, които висят в пространството с крещящи цветове и отблъсквайки потребителите просто се опитват да запълват пространството. Една от любимите комбинации, които често срещам е червено със зелено и разбира се много други комбинации, които освен, че не са правилни (генерално неправилни, както и в частност с тематиката на сайта) са и дори вредни за част от нас. Отново напомням за онази част потребители с увреждания-нака да обърнем внимание и обикнем техните нужди. Какво толкова има ако имате диаграма във вашия сайт тя просто да е черно бяла, а не изкрящо синя със зелоно и червено?

Ако не разбирате от цветове - моля Ви не правете дизайн!

Това е технология, чрез която ограничаваме спам-овете в системата по един или друг повод, но много често отказваме и реални потребители да използват формулярите с подобни защитени кодове. Понякога секретния код е дотолкова неразпознаем и неразчетим, че просто си казваме след третия опит "по дяволите" и затваряме тази страница.
Съветвам ви:
- използвайте само цифри или само букви, но не едновременно и двете (най-добре само цифри)
- да са на възможен-изчистен фон и да не се преплитат
- ЛОГИЧНИ думи или въпроси в секретния код
- Алтернатива със ЗВУК!

Самият аз НЕ харесвам REcaptcha - твърде неконтролируем е - няма опция за нагласяне какво да показва и т.н..

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

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

Това е стъпка, с която едновременно получаваме ползваемост и достъпност: използвайте label например:

<h4><label for="realname">Вашето име</label></h4>
<p><input type="text" name="realname" id="realname" size="35" maxlength="40"></p>

<h4><label for="email">Вашата електронна поща</label></h4>
<p><input type="text" name="email" id="email" size="35" maxlength="40"></p>

<h4><label for="subject">Относно</label></h4>
<p><input type="text" name="subject" id="subject" size="35" maxlength="40"></p>

<h4><label for="comment">Вашето съобщение</label></h4>
<p><textarea name="comment" id="comment" cols="45" rows="6"></textarea></p>

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

В този ред на мисли използвате ли fieldset tag във вашите формуляри? Той също е важен, защо ли?

Нека да разгледаме два примера:

НЕправилно: <p><font size="5">Заглавие на новината</font></p>

ПРАВИЛНО: <h1>Заглавие на новината</h1>

Такъв тип грешки основно се допускат от програмите за генериране на HTML код. Но сами виждате колко е безмислено да оказваме параграф, а вътре в него размер на шрифта (а, дори и с CSS ако го направим)... всичко това може да стане просто с един от h таговете от 1 до 6. От гледна точка на достъпност това е правилно и трябва да бъде закон в писането на код. Но нека да не забравяме и търсачките-те ще ви харесат и индексират доста по-напред, ако подсказвате, чрез тагове кое е заглавие и кое е съдържание...

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

Което довежда и до следващата буква:

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

Използвайте възможните HTML тагове, за да осмисляте вашия код. Както по-горе споменах, за заглавията ползваме <h..>, също можем да ползваме <p> за параграфи <ul>/<li> за списъци <acronym> за акроними...всеки таг си има определено предназначение, както в езика всяка дума има позиция и логика да бъде там (немците имат правило глагола да бъде винаги на втора позиция в словореда)... 

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

Използването на <noscript> е добра практика. Секцията код намираща се между <noscript></noscript> таговете ще бъде използван от потребителите забранили Js включително и ботовете от търсещите машини. В съвремието това според мен ще отпадне, но да видим...

В случая няма да коментирам конкретни размери, а използването на относителни мерни единици за размера. Да вземем за пример IE 6, който не интерпретира правилно размери фиксирани в пиксели (pixel - px). Ако искаме сайта ни да се вижда приблизително еднакво във всички браузери и операционни системи, то моят съвет е да ползваме ems или проценти.

Всъщност, не пречи да опитате как би функционирал (или НЕ) вашият код в текстови браузер.

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

В крайна сметка потребителя е този, който преценя дали за него един сайт е достатъчно достъпен, изчистен и полезен. Оставете вашите потребители да тестват и най-важното – дайте възможност да комуникират с вас. Един от основните приципи на open source  е именно обратната връзка. Когато един продукт се тества от милиони потребители по света с различни системи и навици на работа, се получават в пъти по-добри резултати от 20-тината тестери в офиса...
Един екстра съвет към българските портали, които предлагат някакви услуги – взимайте под внимание обратната връзка :)

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

Рядко, но се случва по невнимание потребител да забрави да въведе в някое от полетата данни или то да е объркано. За целта:
– проверявайте чрез server side programming (и не само, разбира се!) разгледайте полетата и върнете грешка, ако е пропуснато някое поле
– след правилно въвеждане на формуляра изведете въведените данни с бутон "Да, потвърждавам" по този начин давате на потребителя втори шанс да разгледа данните.

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

<param name="wmode" value="transparent" />

така се предпазваме от подобен гаф.

Чрез CSS можете да оформите вашата страница за хората със специални нужди. Имам предвид тези с уврежданията и предвидите за тях специална версия...
В съчетание на cookie & скрипт за проверка на настройките на потребителя бихте могли да предложите тази специална версия...

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

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

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

Лекции и Статии
 
Аз видях, погледни през моите очи
 фотогалерия на кристалин чавдаров  пейзажи от цяла българия  Снимки на българската природа - планини, море, забележителности. Фотогалерия и фотобанка.  фотография, пейзажи, снимки, сток, България, природа, забележителности, изкуство, тракове, пътешествия, истории, разкази, услуги  снимки от сватби, сватбен фотограф, сватбено заснемане, сватбена фотография  Информация относно фотозаснемането на вашата сватба от сватбен фотограф
Чурилик
Себеизлеяния
"Аз мога - тук и сега"