Проектирование Доступной Навигации

, Построение доступного вебсайта является целостным усилием. Чтобы обеспечить свободный проход информации относительно каждой страницы, несметное число , факторы нужно рассмотреть. Один из руководителя среди них - создание доступной навигации. Имеют ли, рассматривая бизнес логика или принципиальная перспектива на веб дизайне, позволяя пользователю участка переместиться в пределах Ваших страниц ключевое значение. Эта статья опишет принципы доступной навигации и продемонстрирует способы создать ее использующий CSS и XHTML .

кодовые отрывки, обеспеченные в этой статье, предназначены, чтобы быть демонстративными доступной практики проекта - они не полны примеры живого CSS меню. Есть много других статей на сети, которая обеспечит технические детали построения CSS на основе меню.

Понимание Доступного Меню

, Что делает меню доступным?

Любое число обстоятельств может произвести удобство и простоту использования Вашей навигации. Недоступность присутствует всякий раз, когда любой пользователь, используя любое устройство, неспособен использовать в своих интересах информацию, Вы предлагаете. Действительно доступное меню рассмотрит все эти возможности:

большинство этих проблем достигнуто очень легко при использовании простого формата списка в HTML / XHTML с ясным, простым тексты. Это - основание доступной навигации. , Когда все дополнительные инструменты сняты, меню должен оставаться годным к употреблению. Одна часть искусства доступного проекта - удаление всех барьеров к доступу.

<ul>
<li><a href="/">Home</a></li>
<li><a href="/news.php">News</a></li>
<li><a href="/bio.php">Biography</a></li>
</ul>

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

из-за этого, важно обеспечить два навигационных бара на любой странице. Главная навигация может быть расположена любой где на страница и где-нибудь в кодексе. Вторичная навигация должен быть расположенной очень рано в кодексе - предпочтительно, первое элемент после <body> признак. Эта навигация, также используя простой список для повышения, должна обеспечить внутренние связи страницы. Быстрая навигация, чтобы пропустить непосредственно к навигации, содержанию, нижней сноске - любое дискретное подразделение страницы, которая содержит уникальную информацию. Держите эту навигацию короткой, чтобы не потратить впустую время посетителя потратил слушание их экрана читатель.

Ваш кодекс теперь должен содержать это:


Скачать эротические комиксы можно здесь!
<ul id="skiplinks">
<li><a href="#content">To Content</a></li>
<li><a href="#navigation">To Navigation</a></li>
<li><a href="#footer">To Footer</a></li>
</ul>
...
<ul id="navigation">
<li><a href="/">Home</a></li>
<li><a href="/news.php">News</a></li>
<li><a href="/bio.php">Biography</a></li>
</ul>

В этом пункте, Вы создали полностью доступную навигацию. Поздравления! Не используя Вспышку, Javascript, или любое моделирование, Вы создали совершенно доступное меню. Это - однако, вероятно не точно взгляд, который Вы ищете.

Моделирование Вашего Доступного Меню

Льющиеся каскадом таблицы стилей могут быть сильным инструментом, чтобы преобразовать Вашу скучную доступную навигацию в красивое навигационное меню. Они могут также использоваться, чтобы преобразовать Вашу скучную доступную навигацию в красивое, недоступное навигационное меню. В этом стадия, разрабатывая меню, Вы должны начать рассматривать своих пользователей, которые будут использовать визуальные браузеры и проводить глазом. Эти посетители могут быть отрицательно произведены низким цветным контрастом, нехваткой рассмотрения для дальтонизма, или карликовыми шрифтами.

Это не действительно статья о построении навигационного меню с CSS . CSS техника, которую Вы используете, чтобы разработать Ваше меню, не является a значительной частью того, что делает меню доступным. Однако, с тех пор CSS используется, чтобы управлять всеми факторами, которые могут иметь эффект или увеличить или умалить доступность меню, я буду обсуждать некоторые определенные методы, которые используются.

Это нормально, создавая навигационное меню в CSS , чтобы начаться, удаляя пули. Я не знаю, что это оказывает любое влияние на доступность вообще, хотите ли Вы делать это или нет. Навигация, как ожидают, не будет в формате маркированного списка от a визуальная перспектива, прямо вперед - также.

#navigation {
стиль списка: ни один;
край: 0;
дополнение: 0;
}

Цветной Контраст

Это - остающиеся шаги, которые более важны: выбор второстепенных цветов, подчеркнуть ли или нет, текстовые цвета, любой использование символических реплик. Формулы для того, чтобы вычислить цветные контрастные ценности сложны. Не необходимо понять их формулы, к счастью, потому что другие люди делают, и эти люди глубокомысленно обеспечили инструменты онлайн для того, чтобы они проверили Ваши ценности. Вы можете желать проверить свои выбранные тона краски, используя Gez Цвет Лимона Контрастный Анализатор или его Отношение Контраста Яркости Анализатор . Цветной контрастный анализатор - старший инструмент, основанный на руководящих принципах от Руководящие принципы Доступности Веб-содержимого 1.0 . Яркость тесты анализатора основана на формуле, используемой в WCAG 2.0 .

#navigation {
показ: блок;
фон: #f5f5f5;
цвет: #222;
}

у Этой специфической комбинации цветов есть отношение контраста яркости 15.61; который передает руководящие принципы ловко. Кроме того, выбранные цвета не предоставят конфликта любому страдающему дальтонизмом зрителю - это может быть проверено, используя Vischeck , обслуживание, которое моделирует Ваш участок, поскольку страдающий дальтонизмом человек может рассмотреть его.

Однако, это недостаточно, чтобы выбрать ряд цветов для Ваших связей и быть сделанным с этим. Ваш :hover государство должен также иметь достаточный контраст, как должен друг друга заявить связи - :active , :focus , и :visited . Это может быть проблемой - обеспечение государств, которые уникальны для каждого государства, все же совместимого с Вашим цветом схема, и высоко контрастируют. Не необходимо удостовериться, что каждое государство различно - однако, важно, что Вы определяете по крайней мере три уникальных государства: нормальный, :hover , и :focus / :active .

распространено разрабатывать :active и :focus государства, чтобы быть идентичным. Причина для этого состоит в том, что Интернет Исследователь, демонстрируя бесконечную мудрость Microsoft, принимал решение, чтобы использовать Активное государство в ситуациях обычно сохраненный для Центра другими браузерами. Активное моделирование предназначено, чтобы играть роль, в то время как связь используется. В то время как Ваша мышь кнопка подавлена, это государство вызвано. Моделирование центра должно использоваться, в то время как связь отобрана, но не активизирована. Это обычно замечено, проводя через участок, используя Вашу клавиатуру, a без обозначения даты это - то, почему это - особенно решающее, чтобы использовать это.

Для просмотра мыши, государство:hover достаточно, чтобы идентифицировать связь. Кроме того, курсор самой мыши ясно укажет к пользователь, где на странице они в настоящее время являются активными. Однако, пользователь, использующий дополнительную навигацию, нуждается в дополнительном индикаторе , чтобы указать их в настоящее время отбираемый выбор. Много неплатежей браузеров к обеспечению 1 пиксела усеянная граница к сосредоточенному элементу - если Вы рассматриваете возможность, что у пользователя может также быть даже небольшая визуальная неспособность, это абсолютно недостаточно.

Подчеркивание

, Чтобы подчеркнуть или не подчеркнуть, , который является вопросом . есть некоторые дебаты, предоставляет ли подчеркивание связи выгоду пользователям. Я думаю, как со всем, что это - a вопрос контекста. Если Ваше навигационное меню очень напоминает остальную часть Вашего содержания, которое никакие ясные лейблы или другой план, у Вас есть проблема удобства и простоты использования. Однако, пока это ясно (и это - очень субъективный вопрос), что Ваше меню предназначено для навигации, Вы должны быть прекрасными. Как со многими проблемами доступности, это - просто проблема суждения.

Размер Шрифта

то, Что является самым важным о Вашем размере шрифта по умолчанию, - то, что это гибко. Хотя я поощряю размер по умолчанию быть разумно удобочитаемый, является самым важным, что Вы не препятствуете тому, чтобы пользователь изменил тот размер. Использование пикселов, чтобы управлять Вашим размером шрифта предотвратит посетителей, использующих Internet Explorer 6 от изменения размера Вашего текста. Все размеры шрифта должны идеально быть выражены или в них единицы или в процентах. С их 's, показанный размер шрифта базируется относительно размера шрифта по умолчанию пользователя агент. Это помещает Вашего посетителя в контроль.

Другие Визуальные Реплики

Выше, я упоминал, что некоторые пользователи с познавательными препятствиями могут бороться с письменным текстом. Даже при том, что неспособный к чтению или относящийся к аутизму пользователь может быть совершенно способным к чтению текста, это может быть борьба. Графические реплики могут быть очень полезными. Придумывая logical "signposts" поскольку Ваши связи могут быть проблемой. Не необходимо попробовать и изобрести кое-что, однако - лучше использовать стандартную науку о символах. Для Вашей домашней страницы маленькая графика дома может быть полезной. Для страницы контакта, возможно телефонный приемник или конверт. Для Вашей страницы об обезьянах; мультипликация, графическая из обезьяны. Эта графика не замена для Ваш текст; они действуют, чтобы добавиться, Ваш текст связывается, чтобы облегчить различать подразумеваемый смысл.

Это, конечно, требует некоторых изменений к Вашему миленькому навигационному кодексу. Чтобы послать уникальные изображения в каждый пункт меню, Вы будете , должен обеспечить крюк стиля каждому пункту меню.

<ul id="skiplinks">
<li><a href="#content">To Content</a></li>
<li><a href="#navigation">To Navigation</a></li>
<li><a href="#footer">To Footer</a></li>
</ul>
... <ul id="navigation">
<li class="home"><a href="/">Home</a></li>
<li class="news"><a href="/news.php">News</a></li>
<li class="biography"><a href="/bio.php">Biography</a></li>
</ul>

Моделирование Вашего Skiplinks

есть обширная статья, обсуждая за и против связи пропуска видимость Лимоном Gez и Майком Черимом. Это - сложная проблема; и я пошел оба пути. Создание видимых связей обеспечивает их оптимальным удобством и простотой использования, так как все посетители могут немедленно узнать их. Skiplinks преобладающе рассмотрели помощь для пользователей сети со слабым зрением, но есть действительный аргумент, что они также помогут людям с познавательным или моторным трудности.

Независимо, пропустите связи, должен будет быть разработан так или иначе, если Вам не нравится идея простого маркированного списка, выглядывающего вершина Вашей страницы. Я рекомендую читать Gez и статью Майка, чтобы действительно обратиться к этой проблеме!

Доступность и государство

Stateful и Не имеющий гражданства
Stateful и не имеющий гражданства являются прилагательными, которые описывают, разработаны ли компьютер или компьютерная программа, чтобы отметить и помнить один или более предыдущие события в данной последовательности взаимодействий с пользователем, другим компьютером или программой, устройством, или другим вне элемента.

"State" термин, использованный, чтобы описать способность взаимодействовать с кодексом таким образом, чтобы кодекс помнил и всунул их существующее условие. HTML - по своей природе, не имеющая гражданства технология. Чистый CSS и HTML / XHTML меню не может помнить информацию о Вашем взаимодействии с этим. В доступной навигации государство важно из-за проблем подвижности. Это важно , когда пользователь должен получить доступ к меню с, опускаются особенности (как "articles" секция этого участка). Для человека с средний моторный контроль, это тривиально, чтобы провести это меню, используя мышь.

Однако, к меню нельзя получить доступ, используя нормальную навигацию клавиатуры (при помощи клавиши TAB), если stylesheet не был инвалид. Поэтому, люди с моторными проблемами контроля будут ограничены использованием мыши. Если у Вас будет трудное хранение Ваша мышь в пределах определенного пути или на специфическом участке места монитора, то станет невероятно трудным использовать это вид меню. Обеспечивая государство меню, accomplishable использующий JavaScript, может быть очень полезным, потому что Вы можете тогда обеспечить средство заставить меню остаться в месте после того, как это было активизировано, до некоторых дополнительных изменений действия это - государство снова.

Любое использование JavaScript должно быть учтено тщательно; убедитесь, что потеря JavaScript не будет предотвращать Ваш меню от функционирования. Этот дополнительный scripting, как что-нибудь, должен только добавить дополнительные функциональные возможности. Для этого участка раскрывающийся список статей - просто дополнительный пункт доступа - ко всем статьям можно также получить доступ, выбирая связь с главная страница статей .

В Заключении

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

В конце, строя доступное меню простирается хорошо вне практики действительного XHTML . Хотя законно письменное меню будет доступно в некоторый уровень, важно рассмотреть способность пользователей достигнуть Вашего меню, разнообразие путей, которыми пользователи могут смотреть на или , слышит Ваше меню, и способности тех пользователей обработать информацию, которую Вы предоставили в своем меню. CSS может использоваться, чтобы максимизировать удобство и простота использования Вашего меню в визуальной окружающей среде; но должен использоваться с заботой, так как плохие выборы моделирования могут привести к меню с уменьшенное удобство и простота использования, независимо от качества и рассмотрения, которое Вы взяли в строительстве Вашего XHTML или HTML кодекс.

Дополнительная информация и Инструменты:

Меню с Льющимися каскадом Таблицами стилей

Возвращение, чтобы превысить