Вообще говоря, это принцип, по которому ваш сайт должен быть безопасным для всех пользователей . Это включает в себя рекомендацию, что весь ваш сайт должен быть доступен только с помощью клавиатуры. Кроме того, то, как ваш сайт реагирует на ввод пользователя (с клавиатуры или иным способом), должно быть предсказуемым, четким и безопасным.
Этот последний пункт относится главным образом к обеспечению того, чтобы любая потенциально вызывающая конфискацию функция вашего сайта была отключена по умолчанию, и пользователи предупреждали ее перед включением. Этот принцип также предоставляет рекомендации по предоставлению «достаточного количества времени» пользователям для выполнения задач, но мы не рассматриваем это здесь.
Доступность клавиатуры (2.1)
Возможность навигации и использования вашего сайта только с клавиатуры — один из самых важных аспектов доступности. Слепые пользователи будут полагаться почти исключительно на клавиатуры, а те, у кого проблемы с двигателем, могут испытывать трудности при управлении мышью, и поэтому также полагаются на доступ с клавиатуры. Некоторые люди могут почти или совсем не использовать свои руки и полагаться на более крупные клавиатуры, ротовые палочки, головные палочки, одиночные выключатели или Sip ‘n’ Puff.
Вы можете найти описания этих устройств на веб-сайте WebAIM , но все они по существу направляют пользовательский ввод в нажатия клавиш. Если ваш сайт недоступен с клавиатуры, то все пользователи, использующие эти устройства, не смогут использовать ваш сайт.
К счастью, сделать вашу тему или клавиатуру плагина доступной относительно просто. Вот несколько ключевых моментов:
Убедитесь, что все ваше меню может быть доступно с клавиатуры
Множество тем полагается на то, чтобы навести курсор на пункт меню, чтобы открыть любые подменю. Это нормально, но, как правило, подменю не будет отображаться, если родительский элемент меню имеет фокус (а не зависание). Если вы продублируете какие-либо релевантные правила для :hover и примените их к :focus также, это поможет вам на полпути: элементы подменю появятся в виде вкладок пользователя по всему меню. Однако, как только пользователь переходит к подменю, родительское меню теряет фокус, а подменю исчезает. Это можно исправить с помощью JavaScript. Подробная информация об этом и о том, как предоставить запасной вариант, отличный от JavaScript, будет рассмотрена в следующей статье этой серии.
Не «заманивать в ловушку» пользователей
Вам не нужно ничего делать, чтобы сделать доступными «родные» формы ввода (выбор, ввод, радио и т. Д.) С клавиатуры. Однако, если какой-либо аспект вашей страницы (включая поля формы) получает фокус, должна быть возможность отойти от него, используя только клавиатуру, иначе пользователь окажется в ловушке. Обычно это поведение по умолчанию, поэтому вам следует избегать его переопределения.
Сделать навигацию простой и понятной (2.4)
Это руководство имеет два типа рекомендаций: сделать поиск того, где пользователь в настоящее время очевиден, и сделать так, чтобы ему было легче идти туда, куда он хочет.
Выполнение этих рекомендаций частично связано с тем, что уже делают многие темы: имейте согласованное меню навигации по страницам, выделите текущую страницу и дайте пользователям возможность быстро определить, где они находятся на сайте (например, с помощью хлебных крошек).
Стиль: Сфокусируйся правильно
Ключевая часть возможности использовать клавиатуру для навигации по веб-странице — это возможность точно видеть, на что сейчас обращено внимание. Элемент, который в настоящее время имеет фокус, должен заметно отличаться и отличаться от остальной части страницы. По этой причине вам следует избегать outline:none; если вы не собираетесь предоставлять альтернативный стиль:
|
1
2
3
4
5
|
a:focus{
outline: none;
background: #ee7b00;
color: #fff;
}
|
Фокус Порядок и Табиндекс
Другой важной частью доступности клавиатуры является то, что вкладки ведут себя предсказуемо и естественным образом. Например, если фокус в настоящее время является полем формы, я ожидаю, что следующая вкладка приведет меня к следующему полю в этой форме. Если табуляция заставляет фокус перескочить вверх и вниз по странице, то это расстроит и дезориентирует пользователя.
Избегайте использования tabindex: Атрибут tabindex позволяет изменять порядок, в котором элементы достигаются с помощью табуляции. Однако, если вы следовали совету в статье 2 этой серии относительно структуры DOM, порядок табуляции должен отражать «естественный» порядок страницы. Хотя tabindex имеет свое применение, они редки, и его использование для «исправления» плохой структуры сайта может создать дополнительные проблемы. Лучший способ — избегать использования tabindex, и вместо этого ваша тема должна создавать логическую структуру DOM, а CSS используется для изменения визуального представления.
Избегайте «Читать дальше» или «Продолжить чтение»
Пользователи программы чтения с экрана часто переходят между ссылками, пропуская текст между ними, и при каждой ссылке программа чтения с экрана будет читать «link [link text]». Таким образом, это невероятно бесполезно для таких пользователей, если они постоянно слышат «ссылка подробнее», «ссылка здесь» или «ссылка продолжить чтение». Добавление контекста к ссылке в этом случае просто подразумевает предоставление заголовка сообщения. Таким образом, вместо «Продолжить чтение» мы имеем «Продолжить чтение [заголовок сообщения]».
Чтобы сделать это в теме WordPress, нам просто нужно подключиться к фильтру excerpt_more и добавить ссылку «продолжить чтение»:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
|
//Adds «continue reading X» link
function mytheme_continue_reading_link() {
return ‘<p class=»read-more»>’
.
__( ‘<a href=»%s»>Continue reading %s</a>’, ‘mytheme’ ),
esc_url( get_permalink() ),
esc_html( get_the_title() )
)
.'</p>’;
}
//Replaces «[…]» (appended to automatically generated excerpts) with an ellipsis and mytheme_continue_reading_link().
function mytheme_auto_excerpt_more( $more ) {
return ‘ …’
}
add_filter( ‘excerpt_more’, ‘mytheme_auto_excerpt_more’ );
|
Это дает ссылку «читать дальше» в правильном контексте. Однако есть несколько улучшений, которые можно сделать.
Во-первых, добавление заголовка статьи, как правило, разрушит эстетику темы и для зрячих пользователей будет излишним, поскольку положение ссылки «читать дальше» по отношению к заголовку статьи и выдержке сделает контекст очевидным. Чтобы обойти эти проблемы, мы можем «скрыть» заголовок статьи, но так, чтобы программы чтения с экрана все равно их читали.
Это означает, что мы не можем использовать display:none или visibility:hidden; поскольку программы чтения с экрана понимают эти свойства и будут игнорировать контент. Вместо этого мы можем расположить текст вне экрана или использовать свойство clip :
|
01
02
03
04
05
06
07
08
09
10
|
.screen-reader {
position: absolute!important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
|
Есть много разных примеров «классов чтения с экрана»; этот конкретный взят из Bootstrap 3. Затем добавьте соответствующий класс в заголовок статьи, в частности заменив строку 5 выше:
|
1
|
__( ‘<a href=»%s»>Continue reading <span class=»screen-reader»>%s
|
Во-вторых, хотя это и даст пользователям указание на то, куда указывает эта ссылка, им все равно придется прослушивать «ссылка продолжает читать …», прежде чем достигнуть заголовка сообщения. В идеале вы должны поместить избыточную информацию в конец текста ссылки или полностью исключить ее из тега привязки, чтобы сократить время, необходимое для идентификации ссылки.
Еще одно преимущество для пользователей программ чтения с экрана, не имеющих предшествующего связанного текста с избыточной информацией, заключается в том, что программы чтения с экрана часто генерируют список ссылок на странице. Если многие ваши ссылки начинаются с одного и того же текста, это может затруднить поиск нужной ссылки, особенно если ссылка для вашей страницы контактов находится под буквой «H», поскольку на ней написано «Как с нами связаться».
Используйте <title> правильно
Тег <title> должен использоваться для определения текущего местоположения пользователя. Это считывается программами чтения с экрана и отображается в результатах поиска, а также в окне экрана и на вкладке браузера. Чтобы пользователям было легко определять, где они находятся (или что нашел поиск), этот тег заголовка должен содержать заголовок страницы и название веб-сайта. В идеале имя сайта должно быть последним, чтобы люди, использующие программы чтения с экрана, не слушали название вашего сайта при каждой загрузке страницы, прежде чем услышали заголовок страницы.
Тег заголовка можно добавить в тему с помощью:
|
1
|
<title><?php wp_title();
|
Чтобы добавить заголовок сайта:
|
1
2
3
4
5
|
/** * Append site title to page title */
function mytheme_wp_title( $title, $sep, $seplocation ){
return $title .
}
add_filter( ‘wp_title’, ‘mytheme_wp_title’, 10, 3 );
|
Перейти к содержанию
Как правило, веб-сайты имеют общий заголовок и меню навигации, которые, за исключением выделения текущей позиции пользователя, останутся такими же. Необходимость просматривать все эти ссылки или слушать программы чтения с экрана, повторяя их при каждой загрузке страницы, утомительна и расстраивает. Те из нас, кто обладает хорошим (достаточным) зрением и моторными навыками, могут сразу же перейти к содержанию — и мы можем сделать это так же легко для тех, кто этого не делает.
Если вы являетесь администратором WordPress и нажимаете клавишу Tab после загрузки страницы, вы увидите ссылку с надписью « Перейти к основному содержимому» в левом верхнем углу (если вы снова нажмете клавишу Tab, появится ссылка « Перейти к панели инструментов» ) , Эта ссылка находится в самом верху страницы, так что это первая ссылка, которая получает фокус при вкладке, и первая ссылка веб-сайта, прочитанная программой чтения с экрана. По этой ссылке пользователь сразу переходит к основному контенту, пропуская все ненужные ссылки и логотипы сайтов между ними.
Создание пропуска к контенту — отличный способ облегчить навигацию по вашему веб-сайту, и это невероятно просто, требуя лишь небольшую часть HTML и немного CSS.
Сначала HTML. Ссылка должна идти в самом верху вашей страницы, непосредственно под <body> . В большинстве тем это будет файл header.php :
|
1
2
3
4
5
6
7
8
9
|
</head>
<body>
<a class=»skip-link» href=»#main»>
<?php _e( ‘Skip to main content’, ‘mytheme’ );
</a>
//Rest of page content
|
Единственное, на что стоит обратить внимание:
- Значение href, в данном случае «main». Это должно соответствовать идентификатору элемента, который содержит содержимое страницы.
- Класс ссылки, который мы будем использовать для стилизации.
Что касается (1), ваш цикл будет выглядеть примерно так:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
<div id=»main» class=»hfeed» role=»main»>
<?php if ( have_posts() ) : ?>
//The Loop
<?php else: ?>
//No posts found… display search
<?php endif;
</div>
|
и ваши шаблоны страниц могут выглядеть примерно так:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
<div id=»main» role=»main»>
<div id=»post-<?php the_ID(); ?>» <?php post_class();
<h1 class=»entry-title»> <?php the_title();
<div class=»entry-content»>
<?php the_content();
</div>
</div>
</div>
|
Теперь все, что осталось, это добавить немного стиля к ссылке.
Во-первых, мы хотим, чтобы ссылка была скрытой, но не скрытой для программ чтения с экрана, поэтому мы будем размещать ссылку вне экрана, а не с помощью display:none (в этом случае программы чтения с экрана игнорируют ее).
Во-вторых, когда мы получаем фокус, мы хотим сделать ссылку очевидной, поэтому становится ясно, что ранее скрытая ссылка теперь видна и имеет фокус.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
.skip-link {
position: absolute;
left:6px;
top:-100px;
z-index: 100000;
font-size: 1em;
font-weight: bold;
display: block;
background: #ee7b00;
color: white;
height: auto;
width: auto;
line-height: normal;
padding: 15px 25px;
text-decoration: none;
-webkit-transition: top 1s ease-out;
transition: top 1s ease-out;
}
.skip-link:focus {
top: 5px;
-webkit-transition: right 0s;
transition: right 0s;
}
|
Сделать навигацию по сайту безопасным (2.3)
Наконец, имейте в виду, что некоторые люди подвержены светочувствительным эпилептическим припадкам. Это может быть вызвано мерцающими или мигающими эффектами. В декабре прошлого года Джефф Чендлер удалил эффект «снега» из WP Tavern после того, как посетитель предупредил его, что это может вызвать приступ.
Это не ограничивается приступами — это может вызвать мигрени или приступы паники у некоторых людей. Он также не ограничивается эффектами снега — их также может запускать автоматическое воспроизведение видео, карусели или аудиофайлов.
Хотя это в значительной степени решение редактора, и, поскольку разработчики не должны предотвращать автоматическое воспроизведение, мы можем, по крайней мере, отговорить его, отключив его по умолчанию. Джефф упоминает в своей статье, что он не может найти плагин, обеспечивающий эффект «снега», который могут играть сами посетители.