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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Проблема

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

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

Предложение

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

Плюсы:

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

Минусы:

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

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