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