How to make your site accessible

Конференция 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



зачем нужна доступность

Почему об этом нужно думать

Слайд 6 из 26 Зачем нужна доступность

• Аудитория взрослеет

• «Мобильные» серферы

• Больше юных пользователей

• Dial Up и старые компьютеры

• Люди с недостатками(зрение и др.)

• Google (SEO)

• Потому что это просто

• Потому что это правильно

• Потому что это профессионально




как проверять доступность

Как проверять

Слайд 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-сферы




практические советы

Методики разработки

Слайд 11 из 26 Практические советы

• Graceful degradation – от полной версии сайта, к доступной

• Progressive Enhancement – от базовой доступной версии сайта к полной


Верстка


• Семантика

• Семантика

• Структура заголовков


• Эластичный дизайн, изменяемые шрифты

• Навигация внутри страницы (“skip to content”)

• Порядок контента

• Доступность с клавиатуры

• Осмысленный текст в ссылках (<del>click here</del>)


Типичные ошибки


• Divitis (classitis) – антисемантические болезни

• Проверка форм только Javascript

• Сложные таблицы без summary, logdesc, scope


• Нечитабельность при ресайзе

• Перед контентом большое кол-во «неконтента»


<div class=“heading”>Заголовок</div> <div class=“paragraf”>…</div> <div class=“paragraf”>…</div>

Формы и AJAX


• HIJAX(последовательная разработка)

• Базовая рабочая версия

• Затем добавляем AJAX

• Проверка форм на сервере обязательна

• Странички должны работать при отключенном javascript


Flash? Video?


• Flash

• HTML или текстовая альтернатива

• Видео

• MAGpie (полная стенограмма видео)

• SMIL & SAMI– стандарт субтитров для видео


PDF?


• PDF таги

• <H>, <H1>-<H6> - заголовки

• <Art> - статья

• <BlockQuote> - цитата

• etc.


Доступность для мобильных


• Вменяемая линеаризация страниц

• Навигация по странице

• Javascript – нет

• Маленький размер страниц(медленные процессоры и дорогой трафик)

• Можно предоставлять мобильные версии страниц через google

• (google.com/gwt/n?u=URL)

• media=handheld

• a:focus Как сделать сайт доступным



как продать доступность

Как продать слово “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



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]

How to make your site accessible

Technology

webxact http

microsoft http

accessify http

webaim http

akella http

art of accessibility

accessibility client2007

truwex online http