Доступность сайтов для «самых маленьких» Google Webmaster Guidelines Использование WAI-ARIA Disabled Buttons More Inclusive Как люди с особыми потребностями пользуются сайтом Как люди с особыми потребностями пользуются сайтом

• Стандарты тестирования доступности: чтобы протестировать страницу, используйте WAVE.Wave testing.
• Навигация с помощью клавиатуры: проверьте свой сайт, пользуясь только клавиатурой. Все элементы на сайте должны быть доступны для использования.
• Скрин-ридер: все страницы сайта должны работать в программах для чтения информации (VoiceOver, ChromeVox, NVDA или Lynx).
• Фокус: если фокус для элементов отключен, он заменяется видимым в CSS состоянием

Около 15% людей от всего мирового населения или примерно 1 миллиард живёт с инвалидностью. При разработке надо учитывать доступного сайта: например, структуру заголовков, контролы, цветовой контраст и другое. Ответственность только разработчика. Это командная работа. Дизайнеры создают доступный UI, разработчики его разрабатывают, тестировщики проводят тестирование доступности, менеджеры проектов следят за тем, чтобы доступность была частью рабочих процессов. Для пользователей со слепотой, глухотой, дальтонизмом, с моторными нарушениями и ментальными расстройствами, для пожилых и вообще для всех. Необходимо кому-то, полезно для всех. Это удовлетворённость пользователей и репутация компании. Веб-доступность — это о понимании потребностей всех пользователей, а также об эмпатии и осведомлённости.

Что такое семантическая вёрстка и зачем она нужна Почему семантика важна Продвинутая семантика и доступность Семантика для циников, Вадим Макеев

validator

• валидный HTML не гарантирует accessibility
• валидный HTML не гарантирует хороший UX (user experience)
• валидный HTML не гарантирует функционирующий сайт
• валидный HTML не гарантирует корректное отображение сайта
• множество сайтов, в том числе топовых, невалидны

Продвинутый выбор даты

В стандарте для input type="date" поддерживаются атрибуты min, max и step, благодаря которым можно частично ограничить выбор даты прямо в HTML

Несколько email-ов в одном поле

Указать атрибут multiple input type="email" inputmode="text" multiple

Mark

Текст, выделенный в справочных целях из-за своей актуальности в определённом контексте

Accept

Указывает, файлы какого типа разрешены в качестве входящих данных. accept=".jpg, .png"

Autofocus

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

Inputmode

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

Pattern

Задает регулярное выражение, с шаблоном которого сравнивается значение input при отправке формы.

Autocomplete

Указывает, можно ли браузеру помогать пользователю в заполнении поля формы (например, email-адрес, номер телефона, страну и т. п.).

Contenteditable

Дает возможность пользователю редактировать содержимое элемента.

Spellcheck

Определяет, будет ли проверяться орфография в данном элементе.

Translate

Определяет, должен ли элемент переводиться при локализации страницы.

Loading

Указывает, должен браузер сразу начинать загрузку изображений или отложить ее. Загрузка может начаться, например, когда пользователь прокрутит страницу до этих изображений.Поведение по умолчанию — eager, а для отложенной загрузки используется значение lazy («ленивая загрузка).

Onerror

Дает возможность добавить запасное изображение (fallback) на случай, если основное не загрузится.

Poster

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

Draggable

Указывает, можно ли перетаскивать элемент.

Проверка кроссбраузерности: browsershots browserstack Основные движки:
Blink — Google (Opera, Яндекс.Браузер, Vivaldi )
WebKit — Apple (Safari)
Gecko — Mozilla
Использование префиксов
свойство написано для конкретного браузера, и оно не содержится в стандартном списке свойств;
свойство экспериментальное, еще находится в разработке;
свойство реализует частичный функционал.
-moz- используется в Firefox;
-ms- используется в Edge и Internet Explorer;
-webkit- используется в Safari, Chrome и браузерах на основе движков WebKit и Blink;
@-moz-document url-prefix() { .hackBlock { background: blue; } }
Разделение стилей для браузеров (для IE)
!—[if IE 9]
link rel="stylesheet" href="style-for-ie9.css"
![endif]—

Критерии качества вёрстки Кроссбраузерность
Переполнение
Текст должен оставаться в рамках родительского блока при переполнении.
Текст не должен обрезаться или вываливаться из родительского блока при переполнении.
Текст не должен смещать другие блоки.
Родительский блок должен сохранять минимальные размеры при недополнении.
Слова, длиннее минимальной ширины, должны переноситься.
Размеры элементов
Контент больше ширины родителя не должен выходить за его пределы, ломать сетку или смещать другие блоки.
При увеличении количества элементов они должны оставаться в рамках родительского блока.
Элементы могут переноситься на следующую строку при уменьшении размера родителя. При минимальном количестве элементов или их отсутствии родительский блок должен сохранять минимальные размеры.
Последние блоки в сетках должны выравниваться по направлению текста.
Элементы могут переноситься на следующую строку при уменьшении размера родителя.
Стайлгайд
Для элементов форм, кнопок и ссылок:hover, focus, active.
Для элементов форм: disabled.
Валидация
Фавиконки 32×32 и в формате PNG
Фоновый цвет у фоновых картинок (картинка не загрузилась, но при этом цвет фона остался цвет, который соответствует преобладающему цвету изображения)

Конспект

События jQuery
События мыши
.click() клик
.dblclick() двойной клик
.mousedown() перетаскивание
.mousemove() передвижение мыши по стр
.mouseout() уведение указателя с эл-та
.mouseover() проведение по эл-ту
.mouseup() отпускание кнопки

События документа/окна .load() после загрузки всех файлов браузером
.resize() при изменении размера окна браузера
.scroll() при использовании полосы прокрутки
.unload() покидание стр (щелчок по ссылке для перехода на др. стр, закрываете вкладки или окна браузер)

События форм
.blur() поле формы выводится из фокуса
.change() при изменении статуса поля формы.focus() при переходе в поле
.reset() вернуть форму в первоначальное состояние, отменить изменения
.select() при выделении текста внутри текстового поля формы
.submit() при отправке формы (нажимая на кнопку)

События клавиатуры
.keydown() при нажатии клавиши
.keypress() при нажатии клавиши до тех пор, пока вы не отпустите
.keyup() отпускание клавиши
input

События jQuery
.hover() наведение / снятие указателя мыши
.toggle() запускается от щелчка кнопкой мыши ( открыть выпадающее меню одним щелчком и скрыть вторым)

Объект события
pageX Расстояние (px) от указателя мыши до левого края окна браузера
pageY Расстояние (px) от указателя мыши до верхнего края окна браузера
screenX Расстояние (px) от указателя мыши до левого края монитора
screenY Расстояние (px) от указателя мыши до верхнего края монитора
shiftKey TRUE при нажатой клавише SHIFT
which определение числового кода нажатой клавиши ( с shiftKey)
target объекту события щелкнули кнопкой мыши
data + bind() для передачи данных функции, управляющей событием

Селекторы jQuery
https://html5book.ru/jquery-selectors/
:even :odd :first :last :first-child :nth-child(n) :not(селектор) :contains(текст) :hidden :visible :active :checked :focus :hover :disabled :target :animated :button :checkbox

Манипуляции HTML-элементами

https://html5book.ru/jquery-manipulyacii/

.text() возврат / добавление текста
.append() добавляет содержимое
.appendTo()
.prepend() добавляется в начало
.prependTo()
.before() добавляет перед эл-том
.insertBefore() Вставляет содержимое перед элементом
.after() добавляет после эл-та
.insertAfter() Вставляет содержимое
.wrap() обертывает HTML-разметкой
.wrapAll() Оборачивает все элементы как единое целое в HTML-разметку
.wrapInner() Оборачивает содержимое элементов

.unwrap() Удаляет эл-т
.detach(селектор)
.remove() удаляет все элементы обернутого набора
.empty() Удаляет содержимое
.replaceWith() Заменяет элемент
.replaceAll()
.clone() Создает копии

Чтение и изменение CSS-свойств https://html5book.ru/jquery-svoistva-klassy-atribyti/
.addClass() .removeClass()
.toggleClass() добавляет при отсутствии / удаляет при присутствии
.hasClass() наличие класса true / false
.attr() .removeAttr()
.css() .width() .height()
.innerWidth() .innerHeight() с учетом padding
.outerWidth() .outerHeight() с учетом рамки и отступов
.offset() координаты (left и top)
.position()

Обход DOM и выборка html-элементов
https://html5book.ru/jquery-vyborka-elementov/

jQuery анимация
.fadeIn() прозрачность
.fadeOut() исчезание (opacity:0) .fadeTo() изменить степень прозрачности
.fadeToggle() исчезание/появление
.hide() скрыть видимый эл-т
.show() показать скрытый эл-т
.toggle() переключение состояния
.slideDown() появление скрытого эл-та
.slideUp() изменение height до 0, после display: none;
.slideToggle()
https://html5book.ru/jquery-animaciya/

.animate() JS