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

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

Всичко тръгва от максимата, че за картинките за презентационни цели следва да са вкарани чрез CSS, а не да са част от самия документ, тъй като не са част от съдържанието. Да, но това не е точно така. Ще дам най-яркия пример – заглавието на сайта. Да видим как го правим само със CSS:

<h1>Заглавието на сайта</h1>

h1 {
text-indent: -3000px;
background:url(thetitle.png) left top no-repeat;
}

Да помислим сега какво ще стане, ако потребителят разглежда страницата през мобилния си телефон, и за да не си товари сметката с излишни битове, е забранил картинките? Правилно се досетихте, ще види нищо. Сега да го направим по начина, по който го правехме през 90те:

<h1><img src="thetitle.png" alt="Заглавието на сайта" /></h1>

h1 {
font-family: Georgia, serif;
font-size: 20px;
color: #000;
background: #fff;
}

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

Както винаги, има и едно НО. Обаче този път то не е за IE, а за WebKit. Оказва се, че най-напредналия rendering engine (моля за превод на това словосъчетание) има неприятния навик да не показва alt атрибута на картинките, ако не се събира на един ред.

Етикети: CSS, достъпност, картинки, шрифт