1  Что такое доступность

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

                  ...
Как сделать
сайт доступным


                               что такое
                             доступность

Конференци...
что такое                      «Доступный» - такой, по
                                 которому можно проехать.
доступнос...
Законодатели                   •  WCAG – для веб-
                                 разработчиков
                         ...
Как сделать
сайт доступным


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

Конференци...
Почему об этом                  •  Аудитория взрослеет

нужно думать                    •  «Мобильные» серферы

          ...
Как сделать
сайт доступным


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

Конференция Clien...
Как проверять                    •  Не белое и черное

                                 •  Firefox Web Developer

        ...
10 базовых тестов                •  Alt для картинок

                                 •  Доступность форм

              ...
Как сделать
сайт доступным


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

Конференция Cli...
Методики                        •  Graceful degradation – от
                                  полной версии сайта, к
разр...
Верстка                         •  Семантика

                                •  Семантика

                              ...
Типичные ошибки                         •  Divitis (classitis) –
                                           антисемантичес...
Формы и AJAX                    •  HIJAX(последовательная
                                  разработка)
                  ...
Flash? Video?                   •  Flash

                                   •  HTML или текстовая
                       ...
PDF?                            •  PDF таги

                                   •  <H>, <H1>-<H6> -
                      ...
Доступность для                 •  Вменяемая линеаризация
                                     страниц
мобильных
         ...
Как сделать
сайт доступным


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

Конференц...
Как продать слово              •  Кроссплатформенность
“accessibility”                •  Повышение юзабилити

            ...
Письмо Дагу                    Hi, I really like your wired.com
                                  redesign!
Бауману про
  ...
Как это происходит



http://www.assistiveware.com/videos.php
Как сделать
сайт доступным


                                      accessibility
                                         ...
Кого проверим?




Как сделать      Accessibility
                                         23 из 26
                      ...
Ссылки
     Truwex Online
• 

           http://checkwebsite.erigami.com/accessibility.html
      • 

     Webxact
• 

   ...
Ссылки
     WebAIM – отличная подборка практических статей из первых рук
• 

           http://www.webaim.org/articles/
  ...
Спасибо!




               вопросы
Юрий «akella» Артюх
http://cssing.org.ua
akella.a@gmail.com
Конференция Client2007 6-7...
Upcoming SlideShare
Loading in …5
×

How to make your site accessible

1,855 views
1,796 views

Published on

Basic info and reasoning on accessibility

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,855
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
21
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

How to make your site accessible

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

×