Доступность, часть 2: Воспринимаемые

18 января 2018

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

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

Предоставить текстовые альтернативы для изображений (1.1)

Использовать теги Alt для изображений

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

Обратите внимание, что описание alt может не обязательно быть описанием того, что изображение, а скорее, что изображение пытается передать. Alt tag говорит словами, что вы пытаетесь сказать с изображением.

Хотя этот совет в основном подходит редактору, я поднимаю его здесь, потому что разработчики темы часто предоставляют логотип вместо текста, чтобы передать имя веб-сайта или компании. В этом случае, вероятно, лучше всего использовать имя сайта (get_bloginfo ( 'name ')) в качестве альтернативного описания:

echo '<p class="site-title"><a href="' . esc_url( home_url( '/' ) ) . '"><img id="logo" alt="'.esc_attr(get_bloginfo('name')).'" src="' . $logo . '">' . get_bloginfo('name') . '</a></p>';

Знаки Alt не должны использоваться для чисто декоративных изображений, иначе вы по существу вынуждаете пользователя просеивать чрезмерную и ненужную информацию.

Предоставление альтернатив CAPTCHA

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

Убедитесь, что контент может быть распознан (1.4)

Нельзя полагаться только на положение, цвет или форму для передачи значения

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

Например, типичным примером могут быть кнопки контактных форм, полагающиеся исключительно на значок из популярного шрифта значка Font Awesome:

<button><span class="fa fa-envelope fa-lg"></span></button> 
<button><span class="fa fa-times fa-lg"></span></button>

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

<button aria-label="Email">
    <span class="fa fa-envelope fa-lg"></span>
</button>

Это всего лишь один пример протокола ARIA, который мы рассмотрим более подробно в следующей статье.

Убедитесь, что существует достаточный контраст между текстом и фоном

Это почти очевидное требование. Даже для хорошо видимого человека сайт с низким контрастом между текстом и фоном трудно читать и может вызвать напряжение глаз. Для тех, у кого есть нарушения зрения, требуется еще большая степень контрастности, поэтому WCAG утверждает, что цвет фона и текста должен иметь коэффициент контрастности 4,5: 1.

Не сразу видно, какое отношение это отношение или означает, но есть множество инструментов, которые помогут вам проверить соотношение:

http: leaverou.github.io контрастное отношение http: juicystudio.com services luminositycontrastratio.php # указать http: www.colorsontheweb.com colorcontrast.asp

Более крупный текст имеет более низкое требование 3: 1 и логотипы, текст, который является чистым украшением или не отображается, и 'disabled ' текстовые кнопки не имеют требования к контрастности.

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

Избегайте белых фолов

Британская ассоциация дислексий рекомендует избегать чисто белых фонов для текста и вместо этого использовать не совсем белый цвет, крем или мягкий пастельный цвет. Причиной этого является то, что яркость белой страницы может «ослепить» читателя.

Для тех, кто страдает синдромом чувствительности к Скотопическому синдрому (или синдромом Ирлена), слишком высокий контраст между фоном и текстом может усугубить такие симптомы, как:

text, появляющийся для перемещения по странице (подъем, падение, завихрение, тряска и т. Д.).) "потерять" содержимое текста и видеть только белые белые тексты в тексте text появляются нечеткие

Эти симптомы делают чтение затруднительным и неудобным и могут вызывать усталость глаз, напряжение глаз, сонливость и головные боли.

В соответствии с предыдущим разделом лучший совет - обеспечить хороший контраст, но не слишком большой контраст. По мере того, как предпочтения варьируются между отдельными людьми, то, что составляет «слишком много», будет ограничено личным суждением.

Организация структуры вашей страницы (1.3)

Структурированный макет с соответствующим использованием заголовков облегчает пользователям понимание информации, предоставляемой им. Пользователи экранного считывателя полагаются на «разумную» структуру, чтобы помочь им найти дорогу вокруг страницы.

Структура макета вашей темы

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

Это довольно просто: обеспечить маркировку HTML отражает предполагаемый визуальный порядок. Это вполне естественно, и если вы обнаружите, что ваш сайт не читает без CSS, то вы, вероятно, намеренно отклонили его. Как общее правило, ваш веб-сайт должен следовать шаблону:

Title Навигация Общий контент Общий контент Footer

Использовать заголовки надлежащим образом

Это довольно легко получить право. Правила просты:

    Используйте тегитолько для заголовков - не только для применения определенного стиля к некоторому тексту. NИнструкции поиска и устройства чтения с экрана используют теги заголовков для структурирования вашей страницы, поэтому подумайте о том, как вы используете их. Они должны отражать страницу Структура. Используйте их по порядку:

    должно быть вложено внутри

    и

    внутри

    . (Это следует из (2)).

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

? Рекомендации W3C показывают, что, хотя есть случаи, когда это было бы правильной вещью, в контексте тем WordPress, вероятно, лучше не использовать теги

для названия сайта. Существует несколько причин:

    Примечание сайта должно быть включено в тег. Хотя это часто упускается из виду и немного уродливо для зрителей, это первое, что читают читатели экрана. Поэтому обертка заголовка сайта в<h1>дает ему избыточную известность для пользователей экранных читателей, при этом заголовок становится более очевидным для зрячих пользователей, который может быть достигнут без использования тега заголовка. NТеки заголовка используются для организации информации. Название вашего сайта не особенно полезно для такой цели. </h1>

Независимо от того, что вы решите, последующие заголовки на вашей странице должны находиться под ним. Итак, статьи в «The Loop» или названия ваших страниц должны иметь теги

, если вы использовали тег

для названия вашего сайта и теги

в противном случае.

После публикации контента большинство тем будут отображать комментарии к сообщению. Естественно иметь "Комментарии " в качестве заголовка, так как это логический разрыв с контентом, но, поскольку он привязан к сообщению, заголовок должен отражать это. Самое логичное, что нужно сделать, чтобы заголовок «Комментарии» на одном уровне под заголовком сообщения.

Вот фрагмент из файла single.php:

<div id="content" role="main"> 
    <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <h1 class="entry-title"> <?php the_title(); ?> </h1>
        <div class="entry-content">
            <?php the_content(); ?>
        </div><!--.entry-content-->
        <?php comments_template(); ?>
    </div>
</div>

В моем примере я использовал тег

для заголовка сообщения, поэтому шаблон комментариев (comments.php) может выглядеть примерно так:

<div id="comments"> 
    <h2 class="comments-title">
        <?php printf( _n( 'One Comment on %2$s', '%1$s Comments on %2$s', get_comments_number(), 'mytheme' ), number_format_i18n( get_comments_number() ), get_the_title() ); ?>
    </h2>
    //...
</div>

Убедитесь, что ваш сайт отвечает на повышенный размер текста (1.4)

Некоторые пользователи с умеренными нарушениями зрения могут полагаться на увеличение размеров шрифтов, а не на вспомогательные технологии, такие как экранные лупы. В связи с этим в рекомендациях WCAG указывается, что ваш сайт не должен «ломаться», когда текст увеличивается до 200%. "Разрыв " здесь означает, что текст исчезает, сталкивается, переполняется из его контейнеров или, в более общем плане, раскладка сайта нарушается, что затрудняет или затрудняет чтение.

Использовать относительные шрифтовые размеры

Поскольку современные браузеры стали лучше изменять размер текста, использование относительных размеров шрифта не так важно, как раньше (хотя IE9 не изменяет размер шрифта, определенного в пикселях). Несмотря на это, по-прежнему рекомендуется использовать относительные размеры шрифтов (проценты, ems или rems). Модуль rem устраняет некоторые проблемы с модулем em, и хотя он был введен только с помощью CSS3, вы можете использовать его обратно совместимым способом с устаревшими браузерами. Подробности о том, как реализовать относительные шрифты, немного выходят за рамки, но вы можете узнать больше здесь:

Внимание «Erm.. » Out of Ems Задать размер с помощью REM

Использовать макеты жидкостей

Однако изменение размера текста может привести к проблемам с макетом. Текст может быть вытолкнут с экрана, заставляя пользователя прокручивать или текст может истекать из его контейнера, потенциально в другой текст, делая части веб-страницы неразборчивыми. Это может помочь адаптивный (или жидкий) макет. «Реагирующие» сайты предназначены для адаптации к любому устройству, на котором они просматриваются; поэтому они редко используют фиксированные пиксели для высоты или размера шрифта. Следовательно, такие сайты обычно ведут себя хорошо, когда изменяются размеры шрифта: их макет не прерывается.

Руководящие принципы WCAG рекомендуют не только расширять текст до 200%, но также и то, что на веб-сайте может быть увеличен размер текста. Адаптивный веб-дизайн может помочь в этом, потому что:

a увеличенный экран настраивается на размер "меньшего " размера просмотра elements перемещаются, чтобы исключить горизонтальную прокрутку non-fixed размеры предотвращают перекрытие или обрезание текста images изменяются так, чтобы они соответствовали доступное пространство и не пересекаться с текстом

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

Правильно использовать отметку (1.3)

Использовать таблицы для представления данных

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

Считыватель экрана, например, будет считывать номера строк и столбцов перед чтением содержимого ячейки. Поскольку позиция ячейки в таблицах, используемых для чисто презентационных целей, не имеет значения, эта информация может вводить в заблуждение или, по крайней мере, раздражать: конечный пользователь говорит, что есть какая-то табличная структура, когда на самом деле нет.

Правильное использование табличной маркировки

Большинство разработчиков темы не получили таблицы (и календарь сообщений WordPress уже доступен). Однако плагины могут отображать таблицы через короткие коды или виджеты. Есть много вещей, о которых нужно знать при создании табличной надписи:

Можно, чтобы таблицы были простыми. Несмотря на то, что столбцы строк, включенных в состав строки, были стандартными наценками в течение многих лет, они не универсально поддерживаются программами чтения с экрана.
Каким образом, укажите элемент... Используйтедля заголовков таблиц идля данных таблицы.ячейки никогда не должны быть пустыми. Показать область дляячеек, указав, является ли это заголовком строки или столбца:или. Хотя масштаб часто определяется читателем экрана, он не может быть явным. NВы можете использовать,и, но они не предлагают никаких преимуществ с точки зрения доступности.
Используйте атрибут title заголовков для объяснения аббревиатуры, используемой в ячейке: 010203040506070809101112131415

...