#A11Y

• Если сайты правильно спроектированы, разработаны и отредактированы, все пользователи имеют равный доступ к информации и функционалу. Wikipedia
• Able to be easily obtained or used; easily understood or appreciated. Oxford Dictionary
• Доступность ~ Юзабилити
• Все пользователи могут в равной мере использовать приложение, и оно должно быть простым в использовании для всех

Каким пользователям мы помогаем?

• Незрячие
• Слабовидящие
• Когнитивные расстройства
• Нарушения опорнодвигательного аппарата
• Дальтонизм

Совершенно другой User eXperience

• Screen Readers
• Screen magnifiers
• Keyboard-only
• Экраны Брайля
• Шрифтовые/контрастные настройки

WCAG 2.0

• The Standard
• Understanding WCAG
• Techniques
• Quick Reference
• FAQ

План такой:

• Ваш сайт должнен уметь работать keyboard-only
• Оставьте fallback для визуальной информации
• Формы должны работать идеально

Keyboard-only план

• Очевидные focus состояния

Скажем НЕТЪ!

			a, a:focus {
				outline: none;
				outline: 0;
			}
			
			

		

Keyboard-only план

• Очевидные focus состояния (Оставьте outline в покое)

Keyboard-only план

• Очевидные focus состояния (Оставьте outline в покое)
• Fallback для :hover & click
  :focus & keydown
• Добавьте tabIndex=0 & key events для non-focusable элементов
• Избегайте keyboard-traps & time-wasting

			$(‘a.trap’).keydown(function(event){
				event.preventDefault();
				var href = $(this).attr(‘href’);
				var text = $(this).text();;
				window.open(href, text);
			});
		

Keyboard-only план

• Очевидные focus состояния (Оставьте outline в покое)
• Fallback для :hover & click
  :focus & keydown
• Добавьте tabIndex=0 & key events для non-focusable элементов
• Избегайте keyboard-traps & time-wasting
• HTML вам поможет! И абсолютно бесплатно!

Визуальная часть

• Начнем с хороших размеров шрифтов & адекватного контраста
  • WCAG Contrast Checker
  • Contrast Checker
  • Contrast Ratio by Lea Verou

Визуальная часть

• Начнем с хороших размеров шрифтов & адекватного контраста (4.5+)
  • WCAG Contrast Checker
  • Contrast Checker
  • Contrast Ratio by Lea Verou
• И не забываем про em/rem. Почему?

Визуальная часть

• Начнем с хороших размеров шрифтов & адекватного контраста (4.5+)
  • WCAG Contrast Checker
  • Contrast Checker
  • Contrast Ratio by Lea Verou
• И не забываем про em/rem
• Не полагайтесь только на цвет
• Добавьте легенду, текстуру или символы

Визуальная часть

• Начнем с хороших размеров шрифтов & адекватного контраста (4.5+)
  • WCAG Contrast Checker
  • Contrast Checker
  • Contrast Ratio by Lea Verou
• И не забываем про em/rem
• Не полагайтесь только на цвет
• Добавьте легенду и текстуру или символы
• Все контентные изображения должны иметь смысловой alt

Формы

• Каждое поле должно включать в себя реальный label
  <label for="[INPUT ID]">
• Внутри может быть вспомогательный текст, предупреждения, ошибки
• Вам жизненно необходимы адекватные cообщения об ошибках

Screen Readers

• Для навигации и поиска по контенту используется клавиатура
• Простая и функциональная система шорткатов
• 98.6% пользователей screen reader'ов users не выключают JS!

Screen Reader игнорирует

• img с пустыми alt аттрибутами alt=""
• display: none;
• visibility: hidden;
• :before content, :after content (тип того)
• Держите в голове иконки и иконочные шрифты!

Screen Reader не забудет

• Контент, спрятанный через opacity, z-index, height
• off-screen позиционирование (text-indent, top, left)
• CSS clipping

CSS Clipping

			.wcag-hidden {
				border: 0;
				clip: rect(0 0 0 0);
				height: 1px;
				margin: -1px;
				padding: 0;
				position: absolute;
				width: 1px;
			}
		

			<a href="#" class="icon">
				<span class="wcag-hidden">Next</span>
			</a>
			

			a {
				background: url(next.png);
			}
		

Headings & Links

• Один из основных способов навигации по контенту
• А ваш контент имеет заголовки?
• Они достаточно информативны?
• Они следуют иерархии? (h1 >> h6)
• Все линки имеют смысл?
• У вас нету пустых или бесполезных линков?

WAI-ARIA

• Давайте обеспечим аддекватную семантическую информацию
  и лучшее взаимодействие со Screen Reader'ами
• Пишем прямо в HTML
• Часть спецификации HTML5
• Roles, states & properties
• Не аффектает стили "нормального" поведения

Roles

• Мы можем создать новый семантический смысл элементов используя “role-” аттрибуты
• Принцип "Установи и забудь"
• <main role="main">
• <li role="list">
• <table role="presentation">

Roles in HTML

			<span class="btn toggle">Click</span>
		

Roles in HTML

			<span class="btn toggle">Click</span>
			<a href="#" class="btn toggle">Click</a>
		

Roles in HTML

			<span class="btn toggle">Click</span>
			<a href="#" class="btn toggle">Click</a>
			<a href="#" role="button" class="btn toggle">Click</a>
			
Click Button
		

Roles in HTML

			<table>
			<thead>
			...
			<a href="#">Info</a>
			...</table>
			
table with 2 rows and 1 columns ... Info Link
		

Roles in HTML

			<table role="presentation">
			<thead>
			...
			<a href="#">Info</a>
			...</table>
			
... Info Link
		

Roles in CSS

			.btn [role="button] {
				background: green;
				...
			}
		

Widget Roles

• Семантический смысл для ваших кастомных компонентов
• tooltip
• slider
• dialog
• tab
• menu
• alert
• and много чего еще!

States & Properties

• Описывают отношения между контентом и пользователем
• Без проблем апдейтаются с помощью JS
• Семантически залинкуйте label на контент или добавьте, если не было
• <section aria-labelledby="MainHeading">
• <div aria-expanded="true">
• и т.д.

Content Relationships

			<label for="choosePassword">Choose Password:</label>
			<input id="choosePassword">
			<span class="help">Passwords must be 8 characters</span>
			
Choose Password: edit protected
		

Content Relationships

			<label for="choosePassword">Choose Password:
   <span class="wcag-hidden">
   Passwords must be 8 characters long</span></label>
			<input id="choosePassword" type="password">
			<span class="help">Passwords must be 8 characters</span>
			
Choose Password:Passwords must be 8 characters long
		

Content Relationships

			<label for="choosePassword">Choose Password:</label>
			<input id="choosePassword" 
   aria-describedby="choosePasswordHelp">
			<span class="help" id="choosePasswordHelp">
   Passwords must be 8 characters long</span>
			
Choose Password:Passwords must be 8 characters long
		

Content Relationships

			<p id="error_choosePassword" class="error">Error</p>
			<label for="choosePassword">Choose Password:</label>
			<input id="choosePassword" aria-describedby=
   "choosePasswordHelp error_choosePassword">
			<span class="help" id="choosePasswordHelp">
   Passwords must be 8 characters long</span>
			
Choose Password:Passwords must be 8 characters long. Error
		

Используйте ARIA аккуратно

• ARIA это связь, а не замена.
• Используйте Pure HTML там, где это возможно
• Это не магия и не панацея
• Ответственность за events, focus management, keyboard support и смысл всё еще лежит на вас
• Есть только один способ быть на 100% уверенным... Потестить

Кому нужен High Contrast mode?

• Слабовидяшим пользователям
• Пользователям с дальтонизмом
• Пользователям с чувствительным зрением

А что под капотом?

• Изменяется цветовая гамма (text color, borders, etc.)
• Убираются фоновые цвета и изображения
• Также увеличиваются размеры шрифтов

No background???

• 
• Ииии...
• 

Fix it!

• У нас есть:
• HTML: <button type="button">Print</button>
• CSS: background: url(sprite.png);

Fix it!

			button {
				overflow: hidden;
			}
			button:before {
				content: url(sprite.png);
				margin: -X 0 0 -Y;
			}
		

High Contrast Mode mini checklist

• Background-color
• Background-image
• Colors
• Transparent borders
• Transparent Outlines
• <img> Images
• :before, :after

High Contrast Browser Support

• Internet Explorer. И даже
  @media screen and (-ms-high-contrast: active)
• Firefox
• Chrome (webkit-)
  Есть Extension, но там беда
• Safari

Про кого же еще мы забыли?

• Люди с нарушениями памяти
• Пожилые люди
• Опытные пользователи