Привет! Меня зовут Таня Фокина. Работаю в JUG Ru Group, пишу и перевожу статьи о доступности, а ещё организовываю p… twitter.com/i/web/status/1…

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

Чтобы говорить на одном языке. Accessibility — набор требований, методов и технологий для разработки таких интерфей… twitter.com/i/web/status/1…

Accessibility часто заменяют нумеронимом a11y. Это немного иронично, потому что не сказать, чтобы он был «доступным… twitter.com/i/web/status/1…

Почему тема доступности в последние пару лет приобрела такую популярность и вряд ли её потеряет?

Можно её сравнить с адаптивным дизайном. Никто не думал об адаптивности пока рынок мобильных устройств не начал быс… twitter.com/i/web/status/1…

Всемирная организация здравоохранения в 2018 году установила, что в мире живёт больше одного миллиарда людей с инва… twitter.com/i/web/status/1…

Поводов для этого много: экология, естественное старение населения, генетические мутации, военные конфликты, плохая… twitter.com/i/web/status/1…

Активная борьба за права людей с инвалидностью. Она началась в прошлом веке и всё ещё продолжается. Благодаря ей пр… twitter.com/i/web/status/1…

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

А ещё мы стали забывать о сути веба. В его основе идея о доступности знаний и информации для всего человечества. Ко… twitter.com/i/web/status/1…

@jsunderhood Согласен. Сам Tim Berners-Lee говорит об этом. Вот его план как это исправить: contractfortheweb.org

Второй мини-тред. Почему уметь в доступность полезно разработчикам?

Вы поможете всем вашим пользователям. И, несмотря на то, что доступность решает в первую очередь проблемы людей с п… twitter.com/i/web/status/1…

Лично для меня тут есть важный психологический момент. Обычно, когда помогаешь кому-то, то чувствуешь себя нужным.… twitter.com/i/web/status/1…

Вы помогаете будущему себе себе. Если окажетесь в ситуации, когда не сможете пользоваться сайтами привычным способо… twitter.com/i/web/status/1…

Навыки доступности повышают ваш рейтинг в глазах работодателей. До России эта волна пока только начинает докатывать… twitter.com/i/web/status/1…

На рынке есть большой запрос на специалистов по доступности. Особенно активно их хантят в крупные компании вроде Mi… twitter.com/i/web/status/1…

Вы поможете компании избежать судебных исков. Например, в США и многих странах Европы действуют законы, которые не… twitter.com/i/web/status/1…

Одно из самых громких дел о нарушении закона о доступности в Штатах — дело Гила против Winn-Dixie. Гил не смог восп… twitter.com/i/web/status/1…

На сегодня всё. А завтра обсудим вспомогательные технологии.

@jsunderhood Столкнулся недавно - делаю апп на React Native для людей с диабетом. Одно из осложнений при диабете -… twitter.com/i/web/status/1…

@jsunderhood Как глухая я не люблю слово «нарушения». Мне также не нравится слово «инвалидность» (по латыни значит… twitter.com/i/web/status/1…

Тред о вспомогательных технологиях.

Вспомогательные технологии в широком смысле — это технологии, которые помогают людям с определённым состоянием здор… twitter.com/i/web/status/1…

С точки зрения информационных технологий — это аппаратное и программное обеспечение, которое помогает таким пользов… twitter.com/i/web/status/1…

Вспомогательных технологий много. Есть, например, SNP-устройства (сокращение от “sip-and-puff”). Они позволяют упра… twitter.com/i/web/status/1…

Головной указатель (head pointer) крепится на голову и заменяет мышь и даже руки. С его помощью люди могут нажимать… twitter.com/i/web/status/1…

Программируемая клавиатура — клавиатура без предустановленных клавиш. Работа с ней основана на горячих клавишах, ко… twitter.com/i/web/status/1…

Трекбол — это альтернативная мышка, в которой управление курсором осуществляется при помощи роллера и кнопок.
apple.com/us_smb_83039/s…

Выносная компьютерная кнопка — разновидность переключателя (switch) в виде кнопки. Может работать как мышь, если по… twitter.com/i/web/status/1…

Стивен Хокинг пользовался такой кнопкой, пока у него не атрофировались мышцы на руках. После этого он управлял инте… twitter.com/i/web/status/1…

На самом деле теми же трекболами или программируемыми клавиатурами могут пользоваться любые люди. Но есть и более с… twitter.com/i/web/status/1…

@jsunderhood @svknyc Мне нравится мысль из статьи dev.to/maxwell_dev/th…, что a11y — не про «disabilities», а про… twitter.com/i/web/status/1…

Экранные лупы — ПО для увеличения или уменьшения определённой области экрана. Можно настроить лупу так, чтобы при у… twitter.com/i/web/status/1…

Брайлевский дисплей — устройство вывода, которое преобразует текстовую информацию в символы из азбуки Брайля.
en.wikipedia.org/wiki/Refreshab…

На iOS-устройствах есть режим брайлевского ввода: пользователи вводят символы из Брайля, и они преобразуется в симв… twitter.com/i/web/status/1…

Самая известная вспомогательная технология — скринридер. Это ПО, которое интерпретирует и озвучивает контент и прои… twitter.com/i/web/status/1…

Скринридерами пользуются не только слепые и слабовидящие люди. Их используют пользователи, которым проще воспринима… twitter.com/i/web/status/1…

Если вы никогда сами не трогали скринридеры и не видели, как ими пользуются, то рекомендую посмотреть видео Молли: youtube.com/watch?time_con…

В них есть много разных настроек. Можно выбрать голос, каким образом читать числа, какие знаки произносить и с како… twitter.com/i/web/status/1…

А в этом видео программист кодит со скринидером: youtube.com/watch?v=94swlF…

Топ-3 скринридеров: NVDA (для Microsoft), JAWS (для Microsoft) и VoiceOver (встроен в macOS и iOS).
Рейтинг можно п… twitter.com/i/web/status/1…

Встречала мнение, что JAWS лучше всего работает на десктопах, а VoiceOver хорош на мобильных платформах.

На сегодня всё. Завтра мы плавно перейдём к тому, как вспомогательные технологии взаимодействуют с нашими сайтами и… twitter.com/i/web/status/1…

@jsunderhood Есть ещё крутая штука от Xbox, контроллер для людей с инвалидностью. К нему же можно подключать все эт… twitter.com/i/web/status/1…

@vasiliy_dudin @jsunderhood Всё субъективно, как обычно, а лучше он тем, что он вшит в систему, всё что так или ина… twitter.com/i/web/status/1…

@jsunderhood А вот это сейчас обидно было, есть вот и моё видео: youtube.com/watch?v=HA2rEy… и как раз про то же самое. :-(

@SelenIT2 @jsunderhood Вот пример моего доклада о субтитрах на исходном языке, которые помогают всем и не только гл… twitter.com/i/web/status/1…

Вчера мы обсудили вспомогательные технологии и теперь переходим к Accessibility API.

Вспомогательным технологиям нужно брать откуда-то нужную информацию. Он мог бы это делать напрямую из DOM и CSSOM,… twitter.com/i/web/status/1…

И здесь нам на помощь приходит Accessibility Tree или дерево доступности. Это дерево представляет собой совокупност… twitter.com/i/web/status/1…

Accessibility API как раз принимает участие в его построении. По сути это часть операционной системы, которая обращ… twitter.com/i/web/status/1…

Больше про Accessibility API можно узнать из документа W3C: w3.org/TR/core-aam-1.…

Объект — это один или несколько HTML-элементов. Событие — программное сообщение об изменении состояния объекта.

Получается, что Accessibility API берёт из DOM и CSSOM нужную вспомогательным технологиям информацию и строит на её… twitter.com/i/web/status/1…

Насколько я знаю, из CSSOM в дерево доступности попадает не так много данных. Это информация о значениях свойства d… twitter.com/i/web/status/1…

Если знаете о ещё каких-то CSS-свойствах, которые попадают в дерево доступности, то делитесь ими :)

Так что же содержится в объектах доступности такого важного? Это их описание, состояние, события, действия, которые… twitter.com/i/web/status/1…

Ещё Accessibility API собирает некоторую информацию о User Agent: их названия и версии.

Роль — это функция элемента. Роли могут быть заданы явно в атрибуте role или неявно, по умолчанию. У <a> неявная, в… twitter.com/i/web/status/1…

Имя (name или accessible name) — название объекта. Имя может содержаться в разных местах. Например, для <input> оно… twitter.com/i/web/status/1…

Содержимое элемента (textual content) — текст, который в нём содержится.

Действие: что именно пользователи могут делать с объектами. Например, интерактивный ли это элемент.

Состояние (state): каким образом в данный момент времени себя ведёт элемент. Например, чекбокс может быть сейчас checked.

Событие: из-за чего изменилось состояние объекта. Например, на кнопку нажали или кликнули по чекбоксу.

На тему Accessibility API есть клёвая статья Леони Ватсон "Accessibility APIs: A Key To Web Accessibility": smashingmagazine.com/2015/03/web-ac…

Посмотреть дерево доступности можно в инструменте разработчика в Chrome во вкладке «Доступность». В ней вы найдёте… twitter.com/i/web/status/1…

Чтобы изучить дерево доступности в Firefox, нужно включить режим поддержки доступности. Тогда вы сможете найти дере… twitter.com/i/web/status/1…

В Safari тоже можно найти много интересного про дерево доступности в консоли разработчика во вкладке Node: список A… twitter.com/i/web/status/1…

Есть много реализаций Accessibility API: Microsoft Active Accessibility (MSAA), IAccessible, IAccessible2 (IA2), Mi… twitter.com/i/web/status/1…

Разные браузеры работают с разными реализациями API. Chrome полностью поддерживает MSAA, IAccessible, почти полност… twitter.com/i/web/status/1…

Firefox поддерживает MSAA, IAccessible и IAccessible2, ISimpleDOM, ATK и AT-SPI.
developer.mozilla.org/ru/docs/Web/Ac…

Internet Explorer: MSAA, IAccessible и UIA-EXPRESS. В Edge реализована поддержка UI Automation.

Safari: NSAccessibility на OS X, UIAccessibility на iOS.

Их главное отличие друг от друга в том, сколько они поддерживают ролей объектов, их имён, состояний.
developer.mozilla.org/en-US/docs/Moz…

На сегодня всё :) Завтра расскажу о том, почему для доступности так важен семантический HTML-код.

Поговорим о том, зачем нужна семантика и почему она — основа доступности.

На самом деле, чтобы сделать что-то доступным, нужно просто использовать семантические HTML-теги. Их достаточно для… twitter.com/i/web/status/1…

А теги вроде <div> и <span> не имеют никаких неявных ролей. Это просто теги для стилизации. Чтобы добиться от них х… twitter.com/i/web/status/1…

В дереве доступности простой элемент div попадает без роли и другой важной для объектов доступности информации. pic.twitter.com/Xrryu45fx9

Если семантических HTM-тегов, а также атрибутов мало, то тут уже на помощь приходит ARIA, которую обсудим завтра.

Так что сначала мы максимально задействуем возможности HTML, а уже потом прикручиваем ARIA. Семантическая разметка… twitter.com/i/web/status/1…

А ещё она сильно экономит наше время. Вместо того, чтобы идти и читать про расширенную разметку ARIA, искать роль д… twitter.com/i/web/status/1…

Для заголовков мы используем теги от <h1> до <h6>. Почему они такие клёвые и важные? Например, у скринридеров есть… twitter.com/i/web/status/1…

Особенно важно в заголовках соблюдать правильную иерархию и формулировать их так, чтобы они чётко описывали, что бу… twitter.com/i/web/status/1…

Для параграфов текста используйте <p>. В скринридерах также есть встроенные шорткаты для навигации между абзацами.… twitter.com/i/web/status/1…

Теги для списков <ul> и <ol> тоже крайне полезны. Их можно использовать в меню и просто в тексте, где есть перечисл… twitter.com/i/web/status/1…

Крайне важны ссылки <a> и кнопки <button>. Ссылки нужны для того, чтобы переходить на другие страницы или части стр… twitter.com/i/web/status/1…

У пользователей клавиатуры и скринридеров есть свои устоявшиеся паттерны взаимодействия с кнопками и ссылками. А ещ… twitter.com/i/web/status/1…

Про разницу между кнопками и ссылками можно узнать подробнее из поста Марси Саттон "Links vs. Buttons in Modern Web… twitter.com/i/web/status/1…

Да, и не забывайте про атрибут языка lang! Он дико важен для автоматического браузерного перевода и скринридеров. Б… twitter.com/i/web/status/1…

А ещё есть клёвый <main>. Он нужен для важной части страницы, которая отражает самую главную мысль. У скринридеров… twitter.com/i/web/status/1…

Да, и есть требование стандарта про один <main> на страницу.

<header> и <footer> тоже облегчают навигацию по сайту с помощью скринридера. К ним можно также быстро переместиться, как и к <main>.

Крайне важная штука в вебе — это формы. Чтобы где-то зарегистрироваться, надо заполнить пару полей и вуаля! Чтобы э… twitter.com/i/web/status/1…

И, нет, фокус с placeholder вместо подписи к полю не сработает. Это абсолютно недоступный ни для кого атрибут.

Не забывайте использовать alt и делать это правильно. Для декоративных изображений вроде иконок, разделителей, прев… twitter.com/i/web/status/1…

Это полезно и для SEO, потому что тому же Google-боту не нужно будет долго и мучительно анализировать контекст и за… twitter.com/i/web/status/1…

На CSS Tricks, кстати, есть интересная статья про исопользование ИИ для генерации alt: css-tricks.com/using-artifici…

Конечно я не рассказала обо всех семантических тегах, так как тред получился бы огромным. Все теги можно найти в сп… twitter.com/i/web/status/1…

Свежий Web Almanac, из которого вы можете узнать о проблемах веба в 2019, в том числе связанные с семантикой: almanac.httparchive.org/en/2019/access…

Есть инструменты для проверки доступности кода в разных фреймворках. Для React можно использовать eslint-plugin-jsx… twitter.com/i/web/status/1…

Ценителям Angular может подойти codelyzer: github.com/mgechev/codely…

@jsunderhood Еще есть мега крутой axe, для реакта react-axe, который в рантайме может кидаться ошибками по доступно… twitter.com/i/web/status/1…

Сегодня будет ARIA и советы о том, как её правильно использовать.

ARIA или Accessible Rich Internet Applications — это набор специальных атрибутов, которые расширяют возможности HTM… twitter.com/i/web/status/1…

ARIA стандартизирует спецификация WAI-ARIA. Последняя версия на данный момент 1.1. Ей занимается отдельная рабочая… twitter.com/i/web/status/1…

Самое главное правило ARIA — лучше никакой ARIA. Конец треда :)

Но нет, так просто меня не остановить! Вы можете использовать ARIA-атрибуты и роли, когда у вас на странице есть ин… twitter.com/i/web/status/1…

Давайте обсудим роли и атрибуты, которые могут нам пригодиться.

Какой бы ни был дизайн, помните о правиле один элемент — одна роль. Более того, у вас всё равно не получится сделат… twitter.com/i/web/status/1…

Избегайте изменения семантики элементов без сильной необходимости.

Для панели вкладок можно использовать role="tablist", внутри для самих вкладок — role="tab", а для их содержимого —… twitter.com/i/web/status/1…

Пример разметки и скрипта для доступных вкладок можете посмотреть на MDN: developer.mozilla.org/en-US/docs/Web…

role="presentation" сбрасывает семантику элемента. Если встретите role=”none”, то это то же самое. Эта роль нужна н… twitter.com/i/web/status/1…

aria-selected="true" используем для выбранных по умолчанию элементов, а aria-selected="false" для элемента, который… twitter.com/i/web/status/1…

Атрибут aria-expanded пригодится для элементов, которые сворачиваются или разворачиваются, как в аккордеонах или в… twitter.com/i/web/status/1…

aria-hidden скрывает элемент от вспомогательных технологий, но оставляет его в DOM, если задать ему значение true.… twitter.com/i/web/status/1…

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

Чтобы скринридерам проще было работать с интерактивными элементами, есть ARIA Live Region. Это такие области страни… twitter.com/i/web/status/1…

Без таких областей пользователи вспомогательных технологий смогут узнать об изменениях только тогда, когда сделают… twitter.com/i/web/status/1…

Чтобы такие части сайта «оживали», достаточно задать ей aria-live=”polite”. Тогда скринридер будет «вежливо» объявл… twitter.com/i/web/status/1…

polite означает, что если в данный момент он читает в форме подпись поля, то он не прервётся, а сначала её дочитает… twitter.com/i/web/status/1…

Для сообщения об ошибке вам может пригодиться role="alert". Эту роль можно навесить на сообщение о системной ошибке… twitter.com/i/web/status/1…

Самые основные вещи про Aria Live Region я собрала в статье «Всё, что нужно знать про Aria Live Regions»: medium.com/web-standards/…

Атрибут aria-label подходит для случаев, когда у элемента нет видимого описания. Его можно использовать для любого… twitter.com/i/web/status/1…

Важно вот что: значение aria-label презаписывает другое текстовое содержимое элемента, в том числе у его детей.

С aria-label есть серьёзная проблема: его содержимое, как и у placeholder, не переводится автоматически: adrianroselli.com/2019/11/aria-l…

Если у элемента есть текстовое содержимое, то для того, чтобы связать его на программном уровне с другим элементом,… twitter.com/i/web/status/1…

aria-describedby подходит для расширенного описания элемента и установления программной связи между ним и каким-то… twitter.com/i/web/status/1…

У Аарона Густафсона есть небольшая заметка про aria-labelledby и aria-describedby с демкой: aaron-gustafson.com/notebook/aria-…

Сама WAI-ARIA: w3.org/TR/wai-aria-1.…

А подробнее о том, как именно использовать ARIA, можно узнать из черновика гайда W3C: w3c.github.io/using-aria/

Да, и помните, что скринридеры такие же уникальные и индивидуальные как браузеры. У них разная поддержка ролей и ат… twitter.com/i/web/status/1…

На сегодня всё, а завтра будет финальный тред про WCAG.

На неделе уже мелькал WCAG, давайте сегодня поговорим о нём.

Web Content Accessibility Guidelines или коротко WCAG — это руководство по доступности веб-контента. Первая версия… twitter.com/i/web/status/1…

В Руководстве даны рекомендации о том, как сделать контент сайтов и приложений максимально доступным для пользователей.

Эти рекомендации сами по себе не обязательны. Тут есть нюанс: законы, которые регулируют веб-доступность, ссылаются… twitter.com/i/web/status/1…

Руководством занимается отдельная рабочая группа W3C — Accessibility Guidelines Working Group.
w3.org/WAI/GL/

Все рекомендации можно разделить на 4 большие группы. Они основаны на главных принципах доступности: воспринимаемос… twitter.com/i/web/status/1…

Воспринимаемость означает, что интерфейсы и информацию в них должны понимать любые пользователи.

С управляемостью всё просто: навигация должна быть доступна для всех пользователей, включая тех, кто пользуется кла… twitter.com/i/web/status/1…

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

Надёжность значит, что контент должен отображаться на всех устройствах, во всех программах и приложениях, а также б… twitter.com/i/web/status/1…

У рекомендаций есть чёткие критерии выполнения, а также уровень соответствия им. На самом деле эти критерии универс… twitter.com/i/web/status/1…

Уровня соответствия всего три: А (низший), АА (средний) и ААА (наивысший). Законы о веб-доступности требуют выполне… twitter.com/i/web/status/1…

Расскажу о некоторых критериях со средним и наивысшим приоритетом.

Контраст между текстом обычного размера и фоном должен быть равен 4.5:1, а для большого — 3:1. Проверить контрастно… twitter.com/i/web/status/1…

Требования по контрастности можно не соблюдать для неактивных элементов в состоянии disabled, всяких декоративных элементов и логотипов.

Всем контентом сайта можно управлять с клавиатуры (уровень ААА). Также должно быть проработано состояние таких элем… twitter.com/i/web/status/1…

Всем контентом сайта можно управлять с клавиатуры (уровень ААА). Также должно быть проработано состояние таких элем… twitter.com/i/web/status/1…

Если одна сессия истекла, то пользователь должен иметь возможность авторизоваться снова и продолжить свою работу с… twitter.com/i/web/status/1…

Если используете анимацию, то частота мигания должна быть не больше 3 раз в секунду (уровень ААА). Проверить gif-ан… twitter.com/i/web/status/1…

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

Нужно программно определять основной язык в абзацах и в отдельных фразах. Например, при помощи атрибута lang. Исклю… twitter.com/i/web/status/1…

Изменения на странице должны происходить только если пользователь этого хочет. Он должен иметь возможность отключит… twitter.com/i/web/status/1…

Пользователей надо предупреждать обо всех ошибках. При этом при их возникновении уже введённые данные не должны про… twitter.com/i/web/status/1…

Это далеко не все требования Руководства. Они логичны и просты. Если появилось желание почитать WCAG 2.1, то сдела… twitter.com/i/web/status/1…

На русский пока переведена только предыдущая версия 2.0: w3.org/Translations/W…

Спасибо, что читали меня на этой неделе. Надеюсь, вы узнали что-то новое для себя, заинтересовались доступностью ил… twitter.com/i/web/status/1…