how to make your site accessible
DESCRIPTION
Basic info and reasoning on accessibilityTRANSCRIPT
Конференция Client2007 6-7 ноября 2007 • Докладчик: Юрий Артюх (www.cssing.org.ua)
1 Что такое доступность
2 Зачем нужна доступность
3 Как проверить сайт на доступность
4 Как сделать Ваш сайт доступным
5 Как продать доступность
Как сделать сайт доступным
Конференция Client2007 6-7ноября 2007 • Докладчик: Юрий Артюх (www.cssing.org.ua)
что такое доступность
что такое доступность
Слайд 3 из 26 Что такое доступность
Как сделать сайт доступным
«Доступный» - такой, по которому можно проехать. Открытый для глаз. (толковый словарь)
Два лагеря:
• Доступность «для всех» - мобильные устройства, старые броузеры, медленный интернет и т. п.
• Доступность для людей с ограниченными возможностями (зрения, физическими недостатками)
Законодатели
Слайд 4 из 26 Что такое доступность
Как сделать сайт доступным
• WCAG – для веб-разработчиков
• ATAG – для разработчиков ПО для создания сайтов
• UAAG – для разработчиков ПО для «чтения» сайтов WAI
Как сделать сайт доступным
Конференция Client2007 6-7ноября 2007 • Докладчик: Юрий Артюх (www.cssing.org.ua)
зачем нужна доступность
Почему об этом нужно думать
Слайд 6 из 26 Зачем нужна доступность
• Аудитория взрослеет
• «Мобильные» серферы
• Больше юных пользователей
• Dial Up и старые компьютеры
• Люди с недостатками(зрение и др.)
• Google (SEO)
• Потому что это просто
• Потому что это правильно
• Потому что это профессионально
Как сделать сайт доступным
Как сделать сайт доступным
Конференция Client2007 6-7ноября 2007 • Докладчик: Юрий Артюх (www.cssing.org.ua)
как проверять доступность
Как проверять
Слайд 8 из 26 Как проверять доступность
• Не белое и черное
• Firefox Web Developer
• Отключенный CSS или Javascript
• Отключенные картинки
• Двойное увеличение шрифта
• Онлайн проверки
• Webxact, Truwex, Cynthia Says
• Скрин ридеры (Jaws, Windows Eyes)
• Люди Как сделать сайт доступным
10 базовых тестов
Слайд 9 из 26 Как проверять доступность
• Alt для картинок
• Доступность форм
• Изменяемые шрифты
• Lynx или CSS-off
• Images – off, CSS – on.
• Весь функционал с клавиатуры
• Карта сайта (sitemap)
• Имеет ли смысл текст в ссылках?
• Проверить онлайн чекером
• Спросить у знакомого не из IT-сферы
Как сделать сайт доступным
Как сделать сайт доступным
Конференция Client2007 6-7ноября 2007 • Докладчик: Юрий Артюх (www.cssing.org.ua)
практические советы
Методики разработки
Слайд 11 из 26 Практические советы
• Graceful degradation – от полной версии сайта, к доступной
• Progressive Enhancement – от базовой доступной версии сайта к полной
Как сделать сайт доступным
Верстка
Слайд 12 из 26 Практические советы
• Семантика
• Семантика
• Структура заголовков
• Alt для картинок
• Эластичный дизайн, изменяемые шрифты
• Навигация внутри страницы (“skip to content”)
• Порядок контента
• Доступность с клавиатуры
• Осмысленный текст в ссылках (<del>click here</del>)
Как сделать сайт доступным
Типичные ошибки
Слайд 13 из 26 Практические советы
• Divitis (classitis) – антисемантические болезни
• Проверка форм только Javascript
• Сложные таблицы без summary, logdesc, scope
• Alt для картинок
• Нечитабельность при ресайзе
• Перед контентом большое кол-во «неконтента»
Как сделать сайт доступным
<div class=“heading”>Заголовок</div> <div class=“paragraf”>…</div> <div class=“paragraf”>…</div>
Формы и AJAX
Слайд 14 из 26 Практические советы
• HIJAX(последовательная разработка)
• Базовая рабочая версия
• Затем добавляем AJAX
• Проверка форм на сервере обязательна
• Странички должны работать при отключенном javascript
Как сделать сайт доступным
Flash? Video?
Слайд 15 из 26 Практические советы
• Flash
• HTML или текстовая альтернатива
• Видео
• MAGpie (полная стенограмма видео)
• SMIL & SAMI– стандарт субтитров для видео
Как сделать сайт доступным
PDF?
Слайд 16 из 26 Практические советы
• PDF таги
• <H>, <H1>-<H6> - заголовки
• <Art> - статья
• <BlockQuote> - цитата
• etc.
Как сделать сайт доступным
Доступность для мобильных
Слайд 17 из 26 Практические советы
• Вменяемая линеаризация страниц
• Навигация по странице
• Javascript – нет
• Маленький размер страниц(медленные процессоры и дорогой трафик)
• Можно предоставлять мобильные версии страниц через google
• (google.com/gwt/n?u=URL)
• media=handheld
• a:focus Как сделать сайт доступным
Как сделать сайт доступным
Конференция Client2007 6-7ноября 2007 • Докладчик: Юрий Артюх (www.cssing.org.ua)
как продать доступность
Как продать слово “accessibility”
Слайд 19 из 26 Как продать доступность
• Кроссплатформенность
• Повышение юзабилити
• Доступностью можно гордиться и пиарить её
• Закон, или скоро им станет
• Возраст аудитории растет
• Google & Co
• Купите её и Вы попадете в рай
Как сделать сайт доступным
Письмо Дагу Бауману про wired.com (2000)
Слайд 20 из 26 Как продать доступность
Hi, I really like your wired.com redesign!
...
...
By the way, I’m blind.
Как сделать сайт доступным
Как это происходит
http://www.assistiveware.com/videos.php
Как сделать сайт доступным
Конференция Client2007 6-7ноября 2007 • Докладчик: Юрий Артюх (www.cssing.org.ua)
accessibility линч
Кого проверим?
Слайд 23 из 26 Accessibility линч
Как сделать сайт доступным
Ссылки
Слайд 24 из 26 Полезные ссылки
Как сделать сайт доступным
• 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
Ссылки
Слайд 25 из 26 Полезные ссылки
Как сделать сайт доступным
• 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
Спасибо!
Конференция Client2007 6-7 ноября 2007
вопросы Юрий «akella» Артюх http://cssing.org.ua [email protected]