Преди време оформях едни 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, достъпност, картинки, шрифт
Ще го пробвам този начин, но при браузарите с изключени картинки не се ли показва онази рамка, като на IE, когато липсва картинка?
Не, няма, защото картинката има alt атрибут, който се показва вместо нея.