Рубрика «accessibility»

HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 10 - 1

Хабр, я снова пришёл к вам с практическими советами про доступность вместе с Ильёй. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья — мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке.

Сегодня мы рассмотрим следующие аспекты:

  • Почему в наших дизайн-системах и библиотеках есть сломанные нестандартные радиокнопки;
  • Мой способ отказаться от ссылки для изображения с сохранением интерактивности;
  • Дублирование стилей при наведении для фокуса вводит меня в ступор;
  • Можно ли скрыть кнопку с помощью атрибута disabled от скринридера.

Давайте начнём!

Читать полностью »

На сайте платформы по цифровой грамотности для детей и подростков с нарушениями зрения и моторики появился новый раздел — «Вебинары». Это очередное обновление платформы beelineforkids.ru

Недавно мы вместе с партнерами из Everland опубликовали обзор компьютерных игрЧитать полностью »

Веб-доступность российских госсайтов

Веб-доступность российских госсайтов

Меня зовут Воля Готовцева, я юрист и начинающий frontend-разработчик. Оказалось, пересечение моих экспертиз может дать кое-что полезное IT-сообществу. Например, растолковать формальные требования простым языком. Этим в материале и займемся.

Читать полностью »

HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 9 - 1

Хабр, я снова пришёл к вам с практическими советами про доступность вместе с Ильёй. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья — мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке.

Сегодня мы рассмотрим следующие аспекты:

  • какие сюрпризы есть при использовании свойства display;
  • о чём нужно помнить при вёрстке кнопки «Показать пароль»;
  • зачем нужны подсказки с помощью атрибута aria-label при разметке областей навигации;
  • как можно переборщить с заголовками и какие проблемы будут.

Давайте начнём!

Читать полностью »

HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 8 - 1

Хабр, я снова пришёл к вам с практическими советами про доступность вместе с Ильёй. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья — мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке.

Сегодня мы рассмотрим следующие аспекты:

  • какие скрытые проблемы с паттерном «visually-hidden» нас ждут;
  • в каких ситуациях кнопка «Закрыть» указывает на выход;
  • чем вредно значение contents у свойства display;
  • почему подсказка с помощью атрибута aria-label вызывает недоумение.

Давайте начнём!

Читать полностью »

HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 7 - 1

Хабр, я снова пришёл к вам с практическими советами про доступность вместе с Ильей. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке.

Сегодня мы рассмотрим следующие аспекты:

  • К чему приводят распространённые ошибки с элементом <label>;
  • Лучший лайфхак с inputmode="numeric" улучшающий мою жизнь;
  • Как пользователи скринридера понимают, что модальное окно открыто.

Давайте начнём!

Читать полностью »

HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 5 - 1

Хабр, я снова пришёл к вам с практическими советами про доступность вместе с Ильёй. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке.

Сегодня мы рассмотрим следующие аспекты:

  • Какое количество символов следует использовать для текста подсказки для атрибута alt;
  • В чём польза атрибута lang;
  • Почему использование текстовых символов для декоративных задач — это плохая идея;
  • Для чего существует режим повышенной контрастности.

Давайте начнём!

Читать полностью »

HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 4 - 1

Хабр, я снова пришёл к вам с практическими советами про доступность вместе с Ильёй. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке. Мы уже написали первую, вторую и третью часть. Как думаете, нужно ли уже делать отдельный хэштег?

Сегодня мы рассмотрим следующие аспекты:

  • Как сверстать поиск, чтобы им мог воспользоваться пользователь скринридера;
  • Чем полезно свойство outline-offset;
  • Зачем вам нужно использовать медиа-функцию prefers-color-scheme;
  • Где должен находиться заголовок в разметке блока с новостью.

Давайте начнём!

Читать полностью »

Вам не нужен для этого JavaScript - 1


Прошу вас не возмущаться названием статьи. Я не ненавижу JavaScript, я люблю его. Ежедневно я пишу на нём кучу кода. Но ещё я люблю CSS и даже люблю JSX HTML. Я люблю все эти три технологии по причине, которая называется…

▍ Правило наименьших полномочий

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

В случае веба это означает, что нужно по возможности выбирать HTML вместо CSS, а затем CSS вместо JS. JS — самый универсальный язык из всех трёх, потому что на нём вы описываете, как должен вести себя браузер; но также он может ломаться, отказываться загружаться, требует дополнительных ресурсов для скачивания, парсинга и исполнения. Кроме того, при его использовании очень легко ограничить доступ пользователей, выполняющих браузинг при помощи клавиатуры или специальных возможностей.

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

Так как функции HTML и CSS обрабатываются браузером, они могут быть более производительными, более нативными, более адаптируемыми к предпочтениям пользователя и в общем случае иметь бОльшую accessibility. Это не значит, что так будет всегда (особенно когда дело касается accessibility), но когда все сложные задачи берёт на себя браузер, от этого обычно выигрывают конечные пользователи.Читать полностью »

Привет, я Таня Миронова — руководитель направления доступности Госуслуг в компании РТЛабс.

В этой статье я расскажу, для кого мы делаем наши сервисы доступными и поделюсь секретной техникой экспресс-тестирования доступности.

Для кого мы делаем сервисы доступными

Доступность — это определённый уровень вашего сервиса. Это не бонус, не особые потребности и не то, что можно предложить по запросу — так просто должно быть. 

Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js