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

Сега обаче те искат изображенията да се увеличат при нанасяне на мишката и да се опитат, тъй като може да намеря решение за мащабиране на фоновото изображение, изглежда, че има повече проблеми, отколкото си струва с текущото състояние на CSS3 поддръжка за размер на фона. (Моля, поправете ме, ако греша и има решение, което пропуснах.) И така, примирявам се с преминаването към IMG за всеки елемент от списъка.

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

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

Използвайте alt разбира се, но това не е начинът, по който повечето слепи потребители използват мрежата.

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

Поради това обикновено оставям обикновения текст в li таговете и текстовия отстъп: текстът -10000 пиксела надясно или наляво, тъй като това е по-близо до семантично правилно и по-полезно за потребителя, тъй като техният софтуер все още ще чете текста на връзката към тях правилно.

т.е.

<style>   ?> var13 ->

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

След като намерят нещо, което искат, alt е полезен, но дотогава връзките и етикетите на заглавията са много по-важни.

Използване на Alt атрибут би било много добър начин да се уверите, че това е достъпно, без да правите „бъркотия от нещата“. Това е просто и не изисква никакви хакове или допълнителен код, за да работи.

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

използвайте clip {} на вашите img елементи, по този начин можете да използвате css спрайт, който е достъпен за Retina устройства. можете да добавите size / fx върху: hover или просто да направите img на hover по-голям върху спрайта.

  • Какво е "клип {}"? И каква е връзката му с устройствата Retina?
  • 1 clip е свойство css, което контролира отрязани региони в елементи, които използват abs pos. можете да прочетете за това тук: reference.sitepoint.com/css/clip Устройствата на Retina имат 2х пиксела, така че трябва да вземете това предвид при настройката за увеличение; типичните css спрайтове са внедрени с помощта на background-image :, но това прекъсва a11y в iOS 4 Retina устройства.
  • Благодаря за разяснението. Ще трябва да го имам предвид в бъдеще.

Атрибутът alt е за маркера на изображението, а не за фонови изображения.

Можете да използвате фоново изображение и да имате текст във вашия списъчен елемент, но да скриете текста с CSS. По този начин четецът на екрана ще прочете текста, игнорира изображението и навигацията ви ще бъде напълно достъпна. Не използвайте дисплей, а по-скоро:

<?php .invisible { position:absolute; left:-9000px; } 

Добавете това към педя, обгръщаща текста във вашия списъчен елемент. Също така може да се използва многократно с всичко на вашата страница, което искате да скриете, но е семантично важно (като етикет h2 преди галета)

е работил за вас: Charles Robertson | Искате ли да се свържете с нас?