Как начать работу с доступностью веб-сайтов

kak nachat rabotu s dostupnostyu veb sajtov

Когда я входил в ряды разработчиков front-end, со мной никто не говорил о доступности. Я не знал, что вы можете нарушить закон, имея недоступный веб-сайт, пока однажды в мою команду не обратился клиент университета за помощью по проведению аудита доступности. Муж был у меня над головой.

Я начал копаться и проводить исследования, но нашел много пугающих документов. Кое-что было над моей головой. Надо было многое переварить, но я наконец пробрался. (Ну, я действительно все еще пробираюсь).

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

В начале мне бы помогло несколько практических принципов, которые помогли бы мне понять основы.

Позвольте мне поделиться с вами: Домашние принципы веб-доступности Бена.

Они не являются правилами.

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

Давайте разберемся.

Принцип 1: Веб-дизайн – это больше, чем графический дизайн

Когда я начал свою первую работу в Интернете, мне дали фотографию веб-сайта и попросили его превратить в веб-сайт.

После того, как я это сделал, дизайнеры тщательно сравнили мой сайт со своим изображением сайта и рассказали мне обо всех ошибках, которые я совершил.

Высота строки должна быть 18 пикселей, а не 16 пикселей.

Этот серый является неправильным светло-серым. Он должен быть светло-серым.

Размытие тени коробки уменьшается на пиксель.

Такие вещи. Они были очень впечатляющими, и я многому научился.

Но никто из нас действительно не считал, что Интернет не является контролируемой средой. Мы были настолько озабочены визуальными элементами работы, что не задумывались о том, как сайт может работать на телефоне Android за 99 долларов через 3G, или для кого-то, кто не видит или кто-то не видит вообще.

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

Поэтому вместо того, чтобы сосредоточиться на визуальных элементах, я разделил свою работу на три основных задачи.

Три задания веб-дизайна

Задание 1: Напишите хорошую (читай: семантическую) разметку

Первая задача – написать хорошую разметку.

Это значит хорошо организовать содержимое на странице. Использование HTML так, как он был назначен. HTML доступен по умолчанию. Так что если мы все поймем с самого начала, наша работа станет гораздо легче. Мы уделим этому больше времени чуть позже.

Задание 2: улучшите разметку с помощью CSS

Вторая задача – использовать CSS для усилить отличная разметка, которую мы написали.

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

Задание 3: Расширьте интерактивность в вашем HTML и CSS с помощью JavaScript

Третья задача состоит в том, чтобы расширить интерактивность над структурой и стилем с помощью JavaScript.

До и после

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

Мне нужен большой текст, поэтому я буду использовать h1.

У меня сложный интерфейс аккордеона, поэтому я буду использовать кучу div.

Такие вещи. Но это сосредоточено только на визуальный аспекты Чтобы создать доступные веб-сайты, мы должны думать не только о том, как сайт соответствует картине. Это больше, чем визуальный или графический дизайн. Поэтому мы называем это веб-дизайном.

Это подводит нас к принципу 2.

Принцип 2: будьте как можно скорее (как можно более семантическим)

Вот как я рекомендую это сделать.

Каждый раз, когда вы начинаете печатать <div>…

СТОП.

Посмотрите в зеркало.

И спроси себя.

Могу ли я использовать более семантический элемент?

Как узнать, есть ли более семантический элемент для использования?

В сети разработки Mozilla есть страница всех элементов HTML, упорядоченных по назначению. (Эта ссылка отличная — используйте ее!)

tWhH-vQt-omDDVvjExK14iIeGOOn6qr1MWl9

Давайте рассмотрим некоторые семантические альтернативы, которые у нас есть для <div>s.

Альтернативы к <div>

Если у вас есть отдельный раздел страницы, подумайте об использовании <sectiна> тег.

Если у вас есть блог, статья новостей, сообщения на форуме или любое независимое содержимое, вы можете воспользоваться <article>.

Есть рядом несколько однотипных компонентов? Рассмотрите возможность использования упорядоченного или неупорядоченного списка (<ul&gt; or

    ).

    Есть верхний раздел в своем блоге с заголовком и метаданными? Используйте а <headер>. Есть нижняя часть с тегами и т.д.? Use a <footer>.

    Есть боковая панель? Используйте an <aside>!

    У вас есть что-нибудь, что нужно нажимать? Используйте а <button>. Этот важный. Если она должна быть доступна для нажатия и не является ссылкой, вам, вероятно, следует воспользоваться кнопкой.

    Позвольте мне повторить это: если она должна быть доступна для нажатия и не является ссылкой, вам, вероятно, следует использовать кнопку. Больше об этом мы поговорим позже.

    Просто помните: будьте как можно скорее. Максимально семантический.

    Принцип 3: Веб-сайты должны хорошо выглядеть обнаженными

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

    Этот принцип действительно дает понять сущность принципа 2 ASAP.

    Подумайте об этом так: если ваша разметка семантическая, то вы используете элементы, которые передают значение. Это означает, что браузер предоставит доступные и означающие значения и/или функциональность вашей разметки.

    Итак, «голый тест» на самом деле является тестом того, насколько семантична ваша разметка.

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

    Как это проверить?

    Вот код. Если вы вставите это в свою консоль инструментов разработчика, оно удалит все из файла <head> вашего документа, включая стили.

    document.head.parentNode.removeChild(document.head);

    Он ориентируется на название документа, а затем удаляет все его дочерние элементы.

    Чаще я использую это как маленький букмарклет в своем браузере.

    javascript:(function() { document.head.parentNode.removeChild(document.head); })();

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

    Давайте посмотрим на пример этого действия.

    Форма входа в Google

    Я думаю, что все, вероятно, знакомы с формой входа в Google. Он имеет название, ввод электронной почты и пару кнопок для «Забыли электронную почту», «Создать аккаунт» и «Далее».

    mfAeK10fGQruahB-4ziHXJpOWi3hzENgN5LP
    Форма входа в Google

    Итак, что происходит, когда мы смотрим на него обнаженными?

    Голая форма входа в Google

    uiaI-fFomYCz8C8dFkKMnyWUFT-gWeNj7H2D
    Форма входа в Google с удаленным CSS.

    После того, как мы удалим стили, у нас останется хорошее название «Вход», поэтому мы знаем, о чем эта страница.

    У нас есть несколько введенных данных, но метки не совсем ясны.

    И…куда девались наши кнопки?

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

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

    Кнопки «Далее» и «Создать аккаунт» поменялись местами.

    Итак, все еще здесь, но я бы сказал, что главное меня волнует, что кнопки на самом деле не являются кнопками. Они непонятны.

    И позвольте мне сказать это только потому, что Google не использует HTML <button> элемент не означает, что эта форма по своей сути недоступна. Это просто означает, что им придется работать гораздо больше с JavaScript и управлять взаимодействием с клавиатурой, что обычно делало бы для вас браузер.

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

    На что обратить внимание во время голого теста

    Вот что я ищу, когда запускаю этот тест.

    Сначала я проверяю, имеет ли структура сайта смысл. Все ли в правильном порядке? Имеет ли каждый раздел четкое название с соответствующим уровнем тега заголовка?

    Далее, кажется ли содержимое организованным? Могу я пролистывать страницу и получить представление о содержимом так, будто я просматриваю контур?

    В-третьих, я смотрю, выглядят ли интерактивные элементы интерактивными. Если я создал кучу интерактивных элементов, используя <div>s, они не будут выглядеть интерактивными. Тогда я смогу потратить немного больше времени на проверку функциональности этих элементов на предмет доступности.

    И, наконец, я хочу убедиться, что вводы имеют четкие метки.

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

    Принцип 4: Поговорите со своим компьютером

    Вот мой четвертый и последний доморощенный принцип: общайтесь со своим компьютером.

    Хорошо, возможно, на самом деле не разговаривайте со своим компьютером. Я имею в виду общаться с компьютером — предоставьте браузеру определенный контекст, используя атрибуты ARIA.

    Атрибуты ARIA

    ARIA расшифровывается как Accessible Rich Internet Applications. Существуют состояния, роли и свойства ARIA, которые уведомляют браузер о некоторых веб-страницах, если вы решите их использовать.

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

    Вот несколько примеров:

    aria-label

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

    aria-labelledby

    Если вы хотите объединить несколько существующих текстовых узлов в один aria-labelвы должны использовать aria-labelledby. Этот атрибут будет принимать одну или несколько ссылок идентификатора на текстовые узлы, которые вы хотите использовать для обозначения введенных данных. Вот пример:

    <p id="sample-id">Some Text</p>
    <input aria-labelledby="sample-id another-id" value="" />
    <p id="another id">That defines this input.</p>

    Программа считывания с экрана прочтет введенные данные как «Некоторый текст, определяющий этот вход».

    Прекрасная вещь в этом состоит в том, что он объединяет текст всех идентификаторов, которые вы передаете. (aria-label не имеет такой же функциональности). Есть несколько примеров, почему вы можете объединить метки на сайте w3.

    aria-expanded

    The aria-expanded атрибут определяет открытый или закрытый элемент. Вы можете использовать это на кнопке гамбургера, управляющей основной навигацией. Когда программа считывания с экрана фокусируется на кнопке с помощью кнопки aria-expanded значение false, программа считывания с экрана скажет что-нибудь вроде «Главное меню, свернутая кнопка», и они узнают, что могут открыть меню.

    aria-describedby

    The aria-describedby атрибут указывает на элемент, описывающий текущий элемент. Если вы хотите добавить текст ошибки к вводу, вы можете воспользоваться этим.

    Вот пример:

    <label for="example-input">Email</label> 
    <input type="email" id="example-input" aria-describedby="email-error" /> 
    <div id="email-error"> 
      <p>The email address is in an invalid format.</p> 
    </div>

    В этом примере при отправке формы текст «Адрес электронной почты имеет неправильный формат». динамически прилагается к div. Когда ввод сфокусирован, это сообщение будет прочитано вслух программам считывания с экрана.

    aria-live

    aria-live сообщает компьютеру, что часть страницы будет обновлена ​​позже. Это очень удобно с материалами AJAX. Он может иметь значение вежливого, упорного или выключенного.

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

    Резюме принципов

    На этом заканчиваются четыре простых принципа.

    Просто подытожим:

    Принцип 1 состоит в том, что веб-дизайн – это больше, чем графический дизайн.

    Принцип 2 должен быть как можно более семантическим.

    Принцип 3 состоит в том, что веб-сайты должны хорошо выглядеть обнаженными.

    Принцип 4 – разговаривайте со своим компьютером, используйте ARIA.

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

    И если вы хотите увидеть, как начать применять это на практике, я запускаю бесплатный курс электронной почты: 9 распространенных ошибок доступности веб-сайтов и как их исправить. Получите доступ к курсу, зарегистрировавшись здесь!

    Распространены ошибки доступности и как их избежать
    Бесплатное поступление на веб-курс доступности для веб-разработчиков. Нажмите здесь, чтобы зарегистрироваться!benrobertson.io

    Первоначально опубликовано на benrobertson.io.

Добавить комментарий

Ваш адрес email не будет опубликован.