web-standards-ru / weblind.ru Goto Github PK

View Code? Open in Web Editor NEW

111.0 111.0 19.0 2.88 MB

Рекомендации по разработке сайтов для людей с нарушениями зрения

Home Page: https://weblind.ru/

CSS 12.93% HTML 77.33% JavaScript 9.74%

a11y css frontend html manual russian

weblind.ru's Introduction

Веб-стандарты

Исходный код сайта «Веб-стандарты» для совместной разработки и поддержки проекта силами редакции ВСТ.

weblind.ru's People

Contributors

Stargazers

Watchers

Forkers

bezdna irastrel einomi dyaroman mmurlyka neonick pryazhnikov discoder-git dmitriys87 yurchenko-dmytro-mss 102 vasil-polucohvich denis-gerc penumbra1 maniyax furtivite hercules261188 pavel97107 nbrodel

weblind.ru's Issues

Возможно некорректные значения для атрибутов aria-labelledby и aria-describedby

Если верить документации mdn (aria-labelledby, aria-describedby), эти атрибуты должны иметь значения a space-separated list of element IDs; в примерах значения указаны через запятую

Применение cursor:help закрывает тултип

В CSS настройка abbr[title], dfn[title] {cursor: help;} мешает считывать тултип, у курсора появляется знак вопроса и всегда закрывает начало текста всплывашки (Windows, размер курсора "огромный"). Можно просто убрать это изменение курсора.

Сделать сайт более доступным

Я не знаю, было ли это специально задумано, но я с ходу не нашёл ни однорй картинки у которой был бы alt. aria-hidden="true" или так далее.

Автозаполнение форм

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

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

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

Сами же браузеры предлагают сохранить данные о "своем хозяине" - https://support.google.com/chrome/answer/142893 , нам остаётся только подсказать браузеру, о чём тот или иной input.

Для подсказки следует использовать атрибуты name и autocomplete.

В спецификации даётся длинющий список:

"name"
"honorific-prefix"
"given-name"
"additional-name"
"family-name"
"honorific-suffix"
"nickname"
"username"
"new-password"
"current-password"
"organization-title"
"organization"
"street-address"
"address-line1"
"address-line2"
"address-line3"
"address-level4"
"address-level3"
"address-level2"
"address-level1"
"country"
"country-name"
"postal-code"
"cc-name"
"cc-given-name"
"cc-additional-name"
"cc-family-name"
"cc-number"
"cc-exp"
"cc-exp-month"
"cc-exp-year"
"cc-csc"
"cc-type"
"transaction-currency"
"transaction-amount"
"language"
"bday"
"bday-day"
"bday-month"
"bday-year"
"sex"
"url"
"photo"

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

тип контента	name	autocomplete
Имя	name fname mname lname	name (полное имя), given-name (имя), additional-name (отчество), family-name (фамилия)
Адрес эл. почты	email	email
Адрес	address city postal country	street-address, postal-code, country
Телефон	phone mobile country-code area-code exchange suffix ext	tel

из таблицы следует, что инпут должен получится вот таким

<label for="name">Введите ваше имя</label>
<input type="text" id="name" name="name" autocomplete="name">

<label for="email">Введите адрес электронной почты</label>
<input type="email" id="email" name="email" autocomplete="email">

<label for="tel">Введите номер мобильного телефона</label>
<input type="tel" id="tel" name="mobile" autocomplete="tel">

Баги вёрстки под мобильные устройства

Все не наберу, но есть как прямые косяки, с развиливающимися блоками, так и несоответсиве, например размеров шрифтов.

Сделать новую, более верную HTML-разметку

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

Починить слетающий вотчер

Когда несколько раз сохраняешь HTML при запущенном вотчере, то иногда выскакивает белая страница. Примерно на втором-третьем сохранении. Нужно почитать gulpfile.js и разобраться, в каком месте я накосячил.

Оптимизировать стили

Склеить их в один файл, сжать. Сделать это средствами сборки наверное. Добавить автопрефиксер.

Починить Яндекс.Метрику

Почему-то перестал работать сбор статистики. Разобраться, почему это случилось, починить.

Убить float

Это всё можно заменить на Flex. Главная страница вообще идеально ложиться на Grid Layout

Привести все стили к единому стилю

font.css

В интернете рекомендуют строки обрамлять кавычками в независимости от местонахождения - html, css, js.

Было

src:
  url(../fonts/helvetica-light.woff2) format('woff2'),
  url(../fonts/helvetica-light.woff) format('woff');

Стало

src:
  url('../fonts/helvetica-light.woff2') format('woff2'),
  url('../fonts/helvetica-light.woff') format('woff');

nav.css

Разброд и шатание, то есть перенос строки между селекторами, то его нет.

Пример

nav [class*="level-"].active {
  background-color: #f4f4f4;
  color: #0000fe;
}
nav [class*="level-"].active  > a {
  color: #000;
}

nav [class*="level-"].active  > a:hover {
  cursor: default;
}

Селекторы с одним свойством, то в одну строку, то в несколько.
Пример:

[class*="level-"] > a {text-decoration: none;}

nav [class*="level-"].active  > a {
  color: #000;
}

Предлагаю все простые свойства сделать в несколько строк. У нас нет проблем с вертикальным чтением.

якобы сортировка
Пример

.menu-v {
  display: block;
  box-sizing: border-box;
  font-size: 1.3rem;
  line-height: 1.6rem;
  
  margin-bottom: 1.5rem;
}

margin-bottom зачем-то с отступом от line-height. Автор пытался объединить свойство по смыслу, но тогда это надо делать на протяжение всего файла/ов. Объединять свойства по смыслу хорошая идея, а вот делать отступы между группами сомнительно.

style.css

Имеет закомментированный код. Не комментарии к коду, а закомментированный код.

не используется

@media (max-width: 480px) {

}

Добавить на сайт озвученные скринридером примеры

У многих разделов есть примеры кода. Добавить озвучку кода скринридером «хорошего» и «плохого» примеров, чтобы показать, как улучшится восприятие сайта.

Завести автодеплой на сервер Веб-стандартов

Мы договорились перевезти сайт на сервер Веб-стандартов, чтобы завести HTTPS, автосборку Тревисом из мастера и вот это всё. Я наобещал, а тебе, @h4, теперь отдуваться :) Поможешь?

Как будет готово (по обычному пути, как и у других сайтов, можно пока коннектиться по ssh к web-standards.ru, наверное) — я уже сам настрою домен в nginx, перенесём NS и уже после посмотрим, как оно деплоится на живой.

Исправить орфографические ошибки

На странице weblind.ru/inner.html есть парочка ошибок.

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

На страницу добавить информацию о скринридерах, средств разработки и тестирования сайта. Добавить ссылки на полезную информацию (статьи, видео и т. д.)

Склеить CSS

Сейчас все файлы просто минифицируются, надо их склеить. Но хочется, чтобы сайт продолжал просто работать из src/index.html без сервера и сборки. А сборка всё просто улучшала. То есть нужно будет делать автозамены в HTML, наверное.

Избавиться от тега style

Визуально отделить блоки с примерами от основного текста

Примеры хорошо будет визуально выделить от основного текста, например обернуть рамкой 1px solid #000 или сереньким фоном.

Добавить страницу с пользовательским соглашением

Сейчас оно лежит в Гугл-доках и кажется какой-то совсем отдельной частью.

Формат изображений .png в примерах

https://weblind.ru/inner.html#image-content
В примерах кода используется неуместный для фотографий формат .png - лучше заменить на .jpg или даже продвигать более современный .avif.

Оптимизировать подключение JS

Видимо, поставить в конец документа с defer. Подумать, подходит ли такая модель — вроде да. Ничего критичного в скриптах нет, только красота.

Сломанная ссылка на Section 508

При переходе по ссылке получается так:

Перевести всю графику в SVG

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

@asuhoverhova, есть исходники иконок, логотипов и другой графики?

Добавить пометку в раздел Изображения

Может добавить заметку о том, что в alt="" не стоит писать слова изображение, картинка, иконка и пр.? Я такую ошибку регулярно делал до того как стал в скринридерах тестировать.

Отдельные страницы для каждой демки

Проблема

нахожусь в разделе Уведомления
хочу попробовать пример и пробежаться табом по полям
из поля Телефон (правильный пример) перелетаю в Язык содержимого на ссылку на сайте htmlbook.ru (что в общем-то правильно, потому что следующая ссылка там, но совсем не удобно, когда курсор прыгает по всей странице)

В добавление сложно тестировать на скрин ридере, т.к. много лишнего.

Предложение

Предлагаю сделать отдельные страницы для каждой демки.

Плюсы:

видишь только то, что нужно
просто тестировать скрин ридером
если сделать отдельный не минифицированный .js файл для каждой демки, то можно легко инспектить в DevTools

Минусы:

ну файлов только больше, но это же не проблема

Переписать скрипт для меню без jQuery

Нет смысла при таком объёме кода тащить лишнюю бибилиотеку, это всё можно решить нативным JavaScript

Обновить протокол ссылки в шапке репозитория на https

index.js привести код к единому стилю

Код писал один человек, а такое чувство, что несколько
Пример,

document.querySelector('.open-menu-btn').onclick = function (e) {
  e.preventDefault();
  ...
};
document.querySelector('.close-menu-btn').onclick = function (e) {
 ...
  e.preventDefault();
};

Отступы между скобочками тоже разные.

В заголовке есть ссылка без текста

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

Добавить aria-hidden="true" (рядом есть ссылка, ведущая по тому же адресу, но в которой есть текст)
Добавить с помощью приема visually hidden (который уже применяется на сайте) текст для скринридеров

https://github.com/web-standards-ru/weblind.ru/blob/4067b99400b4f3179f975cd3b9ddbe14e13f6506/src/inner.html#L43L47

Ссылка на версию Титаника с аудиодескрипцией ведёт на заблокированное видео

В этом тексте на сайте

Добавьте для видео аудиодескрипцию с описанием происходящего, как Иван Борщевский адаптировал фильм «Титаник».

ссылка ведёт на ютуб с заблокированным видео.

Предлагаю заменить фильм, например, на этот - https://www.youtube.com/watch?v=OOuX63uuy0o

В целом на ютубе множество фильмов с тифлокомментариями.

Сделать сборку JS

Сейчас три файла просто копируются, надо их наверное изуродовать и склеить. Но хочется, чтобы сайт продолжал просто работать из src/index.html без сервера и сборки. А сборка всё просто улучшала. То есть нужно будет делать автозамены в HTML.

Сделать статистику количества слепых более наглядной

Сейчас в анонсе сайта сказано:

В России 880 тысяч слепых и слабовидящих.

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

В России 880 тысяч слепых и слабовидящих, это примерно каждый 150 россиянин

<a href="https://github.com/web-standards-ru/weblind.ru">Код на Гитхабе</a>