Вся боль доступного Веба

или WCAG 2.0 для людей

Станислав Зубович, EPAM

#Д9Ь

#A11Y

#A11Y

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

Кто все эти люди? О_о

~20% активных пользователей

Совершенно другой
способ восприятия

Совершенно другой пользовательский опыт

WCAG

Сложно!

Чек-лист?

W3C чек-лист

A11Y чек-лист

Доступность

это не только

Чек-лист

Начнем-с

Первые шаги

План такой:

Было?

Ну было же :)

Доступ с клавиатеры. План:

Скажем НЕТЪ!

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

Доступ с клавиатеры. План:

Доступ с клавиатуры. План:

Клавиатурные ловушки

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

Клавиатурные ловушки

			<input type="text" tabindex="0"/>
			<input type="password" tabindex="1"/>
			<a href="forgot.html" tabindex="2">Forgot Password?</a>
			<button>Next</button>
			<button tabindex="3">Back</button>
		

Доступ с клавиатеры. План:

Wanted: Free Events!

Wanted: Free Events!

Wanted: Free Events!

Формы

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

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

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

Reasons Why I hate Pie Charts

Because i'm Color
blind

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

И дело не только в этом

Нам нужна помощь?

Try Me

Как работают скрин-ридеры?

Скрин-ридеры

Скрин-ридеры игнорируют

This is your super image

Скрин-ридеры игнорируют

Скрин-ридеры видят

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); }
Link Next

HTML
имеет значение

Заголовки и ссылки

За границами банального

Должно же быть что-то еще, да?

WAI-ARIA

WAI-ARIA

Cтандарт доступности активных
веб-приложений

WAI-ARIA предоставляет нам

Плюсы

Роли

Роли в HTML

			<span class="btn">Click me</span>
			
...

Роли в HTML

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

Роли в HTML

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

Роли в HTML

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

Роли в HTML

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

Роли в CSS

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

Виджет роли

Состояния и Свойства

Доступные формы

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

Доступные формы

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

Доступные формы

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

Доступные формы

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

Динамика

			<div aria-live="polite" class="status">
				Content is loading
			</div>
			
...

Динамика

			<div aria-live="polite" class="status">
				Content is successfully loaded
			</div>
			
Content is successfully loaded

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

Режим высокой контрастности

Что под капотом?

Как нет фоновых изображений?!

Fix it!

Fix it!

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

Режим высокой контрастности. Чеклист

Кому нужны контрастные настройки?

Поддержка браузерами

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

Let's make web a better place

j.mp/WSD_WCAG

Логотип Шовера

Shower

@BigBadDev

Спасибо за внимание

Вопросы?

Fork me on Github