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

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

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

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

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

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

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

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

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

Я думаю пользователю очень понравится, когда сайт предложит ему автозаполнить стандартную форму - имя, 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"

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

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

<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">

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

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

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

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

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

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

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

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

Проблема

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

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

Предложение

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

Плюсы:

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

Минусы:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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) {

}

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

Иначе сейчас на внутренюю страницу приезжает полметра JS от Ютуба для иллюстративного видео. Можно сделать по примеру WSD: HTML, CSS, JS.

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

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

Чтобы было понятно, куда идти с вопросами:

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

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

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

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

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

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