Basic info and reasoning on accessibility

1. 1 Что такое доступность
2 Зачем нужна доступность
3 Как проверить сайт на
доступность
4 Как сделать Ваш сайт
доступным
5 Как продать доступность
Конференция Client2007 6-7 ноября 2007 • Докладчик: Юрий Артюх (www.cssing.org.ua)

2. Как сделать
сайт доступным
что такое
доступность
Конференция Client2007 6-7ноября 2007 • Докладчик: Юрий Артюх (www.cssing.org.ua)

3. что такое «Доступный» - такой, по
которому можно проехать.
доступность Открытый для глаз.
(толковый словарь)
Два лагеря:
• Доступность «для всех» -
мобильные устройства,
старые броузеры,
медленный интернет и т. п.
• Доступность для людей с
ограниченными
возможностями (зрения,
физическими недостатками)
Как сделать Что такое
3 из 26
Слайд
сайт доступным доступность

4. Законодатели • WCAG – для веб-
разработчиков
• ATAG – для разработчиков
ПО для создания сайтов
WAI
• UAAG – для разработчиков
ПО для «чтения» сайтов
Как сделать Что такое
4 из 26
Слайд
сайт доступным доступность

5. Как сделать
сайт доступным
зачем нужна
доступность
Конференция Client2007 6-7ноября 2007 • Докладчик: Юрий Артюх (www.cssing.org.ua)

6. Почему об этом • Аудитория взрослеет
нужно думать • «Мобильные» серферы
• Больше юных пользователей
• Dial Up и старые компьютеры
• Люди с недостатками(зрение и
др.)
• Google (SEO)
• Потому что это просто
• Потому что это правильно
• Потому что это
профессионально
Как сделать Зачем
6 из 26
Слайд
сайт доступным нужна доступность

7. Как сделать
сайт доступным
как проверять
доступность
Конференция Client2007 6-7ноября 2007 • Докладчик: Юрий Артюх (www.cssing.org.ua)

8. Как проверять • Не белое и черное
• Firefox Web Developer
• Отключенный CSS или
Javascript
• Отключенные картинки
• Двойное увеличение
шрифта
• Онлайн проверки
• Webxact, Truwex, Cynthia
Says
• Скрин ридеры (Jaws, Windows
Eyes)
• Люди
Как сделать Как проверять
8 из 26
Слайд
сайт доступным доступность

9. 10 базовых тестов • Alt для картинок
• Доступность форм
• Изменяемые шрифты
• Lynx или CSS-off
• Images – off, CSS – on.
• Весь функционал с клавиатуры
• Карта сайта (sitemap)
• Имеет ли смысл текст в
ссылках?
• Проверить онлайн чекером
• Спросить у знакомого не из IT-
сферы
Как сделать Как проверять
9 из 26
Слайд
сайт доступным доступность

10. Как сделать
сайт доступным
практические
советы
Конференция Client2007 6-7ноября 2007 • Докладчик: Юрий Артюх (www.cssing.org.ua)

11. Методики • Graceful degradation – от
полной версии сайта, к
разработки доступной
• Progressive Enhancement –
от базовой доступной версии
сайта к полной
Как сделать Практические
11 из 26
Слайд
сайт доступным советы

12. Верстка • Семантика
• Семантика
• Структура заголовков
• Alt для картинок
• Эластичный дизайн,
изменяемые шрифты
• Навигация внутри страницы
(“skip to content”)
• Порядок контента
• Доступность с клавиатуры
• Осмысленный текст в
ссылках (<del>click here</
del>)
Как сделать Практические
12 из 26
Слайд
сайт доступным советы

13. Типичные ошибки • Divitis (classitis) –
антисемантические болезни
• Проверка форм только
Javascript
• Сложные таблицы без
summary, logdesc, scope
• Alt для картинок
• Нечитабельность при
ресайзе
<div class=“heading”>Заголовок</div> • Перед контентом большое
<div class=“paragraf”>…</div>
кол-во «неконтента»
<div class=“paragraf”>…</div>
Как сделать Практические
13 из 26
Слайд
сайт доступным советы

14. Формы и AJAX • HIJAX(последовательная
разработка)
• Базовая рабочая версия
• Затем добавляем AJAX
• Проверка форм на сервере
обязательна
• Странички должны работать
при отключенном javascript
Как сделать Практические
14 из 26
Слайд
сайт доступным советы

15. Flash? Video? • Flash
• HTML или текстовая
альтернатива
• Видео
• MAGpie (полная
стенограмма видео)
• SMIL & SAMI– стандарт
субтитров для видео
Как сделать Практические
15 из 26
Слайд
сайт доступным советы

16. PDF? • PDF таги
• <H>, <H1>-<H6> -
заголовки
• <Art> - статья
• <BlockQuote> - цитата
• etc.
Как сделать Практические
16 из 26
Слайд
сайт доступным советы

17. Доступность для • Вменяемая линеаризация
страниц
мобильных
• Навигация по странице
• Javascript – нет
• Маленький размер
страниц(медленные
процессоры и дорогой
трафик)
• Можно предоставлять
мобильные версии страниц
через google
(google.com/gwt/n?u=URL)
•
• media=handheld
• a:focus
Как сделать Практические
17 из 26
Слайд
сайт доступным советы

18. Как сделать
сайт доступным
как продать
доступность
Конференция Client2007 6-7ноября 2007 • Докладчик: Юрий Артюх (www.cssing.org.ua)

19. Как продать слово • Кроссплатформенность
“accessibility” • Повышение юзабилити
• Доступностью можно
гордиться и пиарить её
• Закон, или скоро им станет
• Возраст аудитории растет
• Google & Co
• Купите её и Вы попадете в
рай
Как сделать Как продать
19 из 26
Слайд
сайт доступным доступность

20. Письмо Дагу Hi, I really like your wired.com
redesign!
Бауману про
...
wired.com (2000)
...
By the way, I’m blind.
Как сделать Как продать
20 из 26
Слайд
сайт доступным доступность

21. Как это происходит
http://www.assistiveware.com/videos.php

22. Как сделать
сайт доступным
accessibility
линч
Конференция Client2007 6-7ноября 2007 • Докладчик: Юрий Артюх (www.cssing.org.ua)

23. Кого проверим?
Как сделать Accessibility
23 из 26
Слайд
сайт доступным линч

24. Ссылки
Truwex Online
•
http://checkwebsite.erigami.com/accessibility.html
•
Webxact
•
http://webxact.com/
•
WAI Resources (список полезных ресурсов на тему доступности)
•
http://www.w3.org/WAI/Resources/
•
Accesssites.org – The Art Of Accessibility
•
http://accessites.org/
•
Видео людей с недостатками использующих айти-продукты
•
http://www.assistiveware.com/videos.php
•
Как сделать Полезные
24 из 26
Слайд
сайт доступным ссылки

25. Ссылки
WebAIM – отличная подборка практических статей из первых рук
•
http://www.webaim.org/articles/
•
Книга «Building Accessible Websites»
•
http://joeclark.org/book/sashay/
•
Dive into Accessibility – 30-дневный курс доступности
•
http://diveintoaccessibility.org
•
Accessify
•
http://www.accessifyforum.com/ - коммьюнити по доступности
•
http://www.accessify.com
•
Microsoft
•
http://microsoft.com/enable
•
Как сделать Полезные
25 из 26
Слайд
сайт доступным ссылки

26. Спасибо!
вопросы
Юрий «akella» Артюх
http://cssing.org.ua
akella.a@gmail.com
Конференция Client2007 6-7 ноября 2007