accessibility сайтов с точки зрения временно зряче-слышашего на примере
accesskeys.org

Первый взгляд и переадресация

в мае 2010г в броузере ff v.3.5.9 при разрешении экрана монитора 1024х768 сайт выглядел примерно так:

Для просмотра оригинального изображения откройте его в отдельном окне

Для просмотра вида сайта в вашем броузере перйдите по ссылке http://www.accesskeys.org/

Для просмотра вида сайта при других разрешениях экрана и в других броузерах воспользуйтесь к примеру сервисом http://browsershots.org/

Резиновый дизайн

Сайт сохраняет функциональность и структуру оформления страницы при ширине от 400 до 1600 пикселей ( больше не проверял ). Для просмотра оригинального изображения откройте его в отдельном окне

Для лучшего понимания механизма позиционирования элементов на этом сайте я удалил из кода весь текст, оставив лишь основные заголовки

вторым шагом я заменил в остатках кода содержимое блоков текстовыми метками этих блоков

Если идти до логического конца то мы увидим голый разметочный каркас

Для полного понимания механизма резиновой разметки осталось посмотреть соответствующие строки в файле styles.css

Все содержимое страницы помещено внутрь блока <div id="master"> шириной почти во всю ширину окна броузера (width:95.5%) а все внутренние элементы позиционируются относительно этого блока (position:relative)

Содержимое главного блока <div id="master"> по вертикали разделено на основной блок <div id="skeleton"> занимающий 100 процентов ширины главного блока (width: 100%) и расположенный под ним подвальный блок <div id="keycard">. В основной блок <div id="skeleton"> вложен блок <div id="paracentric">. Его содержимое в свою очередь поделено на верхний навигационный блок <div id="topBar"> шириной 100 процентов вмещающего его блока, а также блок <div id="siteLeft"> шириной 70 процентов (#siteLeft { float: left; width: 70%; margin-right: 1%; position: relative} ) и блок <div id="siteRight"> (#siteRight { float: right; width: 29%; margin-left: -1%; position: relative} ) шириной 29 процентов.

Указав ширину блоков в процентах и использовав относительное позиционирование элементов (position: relative) внутри блоков авторы сайта получили дизайн страницы, занимающий всю ширину окна броузера ( резиновый дизайн ).

alt для jpg

title для jpg

title для текстовых гиперссылок

не используется на данном сайте

table для разметки

не используется на данном сайте

Комментарии к таблицам

не используется на данном сайте

Размер шрифта в относительных единицах

Размер основного шрифта сайта установлен в 80 процентов от установленного по умолчанию в броузере посетителя сайта (body {font-size:80%;background:#fff url(/images/bg2.png) repeat-x 0 top;/* for ie5 align centre */ text-align:center} ). Размер шрифта отдельных элементов текста задан в относительных единицах (em). Например размер шрифта заголовков установлен в 1.5em (h1, h2, h3 { background:transparent url(/images/h1-bg.png) repeat-x bottom;padding:.1em .4em .4em;color:#000;margin-bottom:.2em;font-family:georgia,garamond,arial;font-size:1.5em;font-weight:normal }). Такой подход позволяет посетителю сайта самостоятельно изменять размер шрифта даже в IE6 (удерживая нажатой кнопку Ctrl и прокручивая колесо мыши).

Access key

Поддержка Access Keys описана на странице http://www.accesskeys.org/accessibility.html

Для просмотра оригинального изображения откройте его в отдельном окне

Проверить функционирование не смог :(

Skip to Content

Текст ссылки "Skip to main content" визуально скрыт от "зрячего" посетителя сайта и легко доступен для голосового броузера. Это хорошо видно в броузере ff с отключенными внешними стилями:

Для просмотра оригинального изображения откройте его в отдельном окне

в коде страницы гиперссылка #skip размещена в самом начале тела страницы и упакована внуть абзаца с id="skip" ( в броузере выглядит например как http://www.accesskeys.org/audits.html#skip )

в файле styles.css свойства этих элементов описаны так, чтобы скрыть их от глаз "зрячего" пользователя. Решение неоднозначное. С одной стороны визуально упрощает навигацию для пользователей с мышкой. С другой стороны я знаю много "зрячих" пользователей, не имеющих возможности пользоваться мышкой или клавиатурным имитатором мыши. К таковым отношу себя к примеру, когда просматриваю сайты на экране старого сотового телефона без сенсорного экрана. Кнопка быстрого перехода к контенту минуя главное меню в данной ситуации очень выручает :)

На всех страницах сайта контент начинается с заголовка с id="skip". На всех, кроме первой страницы сайта как ни странно :) в коде это выглядит например так:

Для просмотра вида сайта в FF используйте меню Вид - Стиль страницы - Без стиля

change Font Size

Измененить размер шрифта на сайте можно в верхнем меню. Для выбора "нормального" шрифта используется первая буква А (class="fontScaler normal" id="font-normal"). Для увеличения размера шрифта используются две другие буквы А.

change Contrast, Change Colors & More

Измененить контраст шрифта и фона на сайте можно в верхнем меню. Для выбора белого шрифта на черном поле служит вторая кнопка (class="contrastChanger wob" id="contrast-wob"), для возврата привычного черного шрифта на белом фоне - первая

Функция access.js после загрузки/ПЕРЕзагрузки страницы проверяет Cookie и выставляет сохраненные на компьютере посетителя шрифт/цвет страницы либо записывает "значение по умолчанию". Предусмотрены три размера шрифта и две цветовые схемы.

библиотека jquery.js используется для взаимодействия JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими.

a:link a:visited a:hover

Все текстовые ссылки на сайте выделены подчеркнутым шрифтом - это вполне компенсирует отсутствие привычного синего цвета.

При наведении мыши на ссылку я был неприятно удивлен разной реакцией в разных блоках страницы.

В вверхнем меню видимой реакции не было, а вот выделение жирым шрифтом без подчеркивания названия ссылки текущей страницы приятно порадовало. Еще больше порадовало, перейти по ссылке можно нажав по свободной области вокруг текста ссылки. Целиться точно в текст не надо. Мелочь - а приятно ;)

в коде страницы это реализовано следующим образом:

и соответственно в файле styles.css

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

Текст посещенных ссылок не выделен цветом практически на всех страницах сайта

Я понимаю, что дизайнер настоял - так красивее. Для меня это существенно затрудняет знакомство с контентом. Уже после третьей страницы я не помню, где был а где нет. Выделение посещённых ссылок другим цветом позволяет увеличить количество посещенных страниц сайта и глубину просмотра при первом знакомстве. При повторном посещении такого сайта посетителю проще повторно найти заинтересовавшую его информацию.

Мне кажется для информационных сайтов дизайн должен СЛУЖИТЬ удобству а не доминировать ;)