Слепая доступность

26 Dec, 2016

Познакомился с парнем который не видит, но делает сайты.

Мастеркласс Blind Accessibility от Дмитрия Попова

Вчера побывал на мастер-классе незрячего разработчика Дмитрия Попова, он выступал на последнем киевском WSD, и ребята из Frontend-Science организовали отдельный развернутый воркшоп. И это было круто, немного информации, много ответов на вопросы, много реального опыта восприятия сайтов по-другому.

Что там было

Во-первых Дмитрий крутой перец.

Удивительное для лично меня

Совершенно и искренне перевернуло мой мир веб-разработчика когда Дмитрий Попов в Devtools браузера исправил HTML сайта, для того чтобы он стал более доступным для скринридера.

Подумайте об этом.

И еще немного.

Забавно, что Devtools браузера были свернуты так, что на экране их даже не было видно. Но все получилось. Потому что их и не надо было видеть. Ну да.
О том что Дмитрий абсолютно без проблем отредактировал html страничку в notepad, наверное даже лишне говорить. Но его родной редактор в котором он пишет код: Nodepad++, как он сказал.

Тестируем разные сайты на доступность, под рукой у Дмитрия его "шпаргалки" набранные шрифтом Брайля

Во-вторых поделюсь самыми главными мыслями, которые, надеюсь, помогут вам делать более доступные сайты.

Основное

  • Вы никогда не узнаете кто использует ваш сайт.
  • Сделать сайт доступным, несложно, обычно они почти все доступны из коробки. Но досадные ошибки разработчиков в мелочах, или их легкомысленность могут легко сделать сервис недоступным для других людей.
  • Чтобы сделать сайт доступным обычно не нужно ничего переделывать. Лишь добавить немного смысла в код.
  • Атрибут lang значит много, и если неверно задан доставляет много неудобств. Лучше не задавать никакой, чем неверный.

И несколько более конкретных примеров.

Кнопки-активные элементы

90% проблем при доступности сайтов возникает из-за того что активные элементы сделаны не кнопкой и не ссылкой. Если кнопка сделана как <div> то читалка не воспринимает его как активный элемент, и не помещает фокус на него при проходе страницы.

Чтобы решить эту проблему — просто используйте <button> или ссылку.

На худой конец используйте aria-label и role (role="button", например). Тогда читалка поставит фокус на этот элемент, и подскажет что он активный.

Например такая проблема есть на сайте Zakaz.ua

Кнопка сделана ссылкой без href, и читалка не воспринимает ее как управляющий элемент

Навигация по заголовкам

Оказывается очень удобно ходить по странице используя ее заголовки. На большинстве сайтов с этим все отлично, но на удивление на livejournal, заголовок статьи не является h1-h6 и тяжело найти начало текста. Вот например подобная тема в живом журнале

Отсылка к цветовой информации

Речь о всяких "Зеленые места свободны", это, причем распространяется не только на тех кто не видит, но и на тех кто видит цвета по-другому, а таких людей очень немало. Стоит дублировать эту информацию альтернативным способом.

Например, Яндекс Карты, показывая пробки, дублируют информацию о пробке(это красная заливка) плотностью стрелочек на дороге. Я и не задумывался зачем это, пока Сергей Пузанков не рассказал.

Обратите внимание на длину стрелочек там где пробка и где её нет

Атрибут lang

Когда он задан неверно, читалка пытается читать русский текст с английской транскрипцией, и на скорости 400 слов в минуту это ужасно и вообще непонятно. Дмитрий рекомендовал задавать его даже для частей страницы, чтобы читалки экрана правильно произносили слова.

Не забывать об этом

Это конечно не полный список, но все это несложно, нужно просто не забывать о том что вашим сайтом будут пользоваться совершенно разные люди. И прекрасно, что и поисковая оптимизация, и семантика кода, и многое другое на самом деле косвенно помогает нам делать сайты более доступными для всех.

2 комментариев к “Слепая доступность”

1.Подборка статей, переводов, докладов и ресурсов для Frontend-разработчика | Библиотека программиста | 12 Mar, 2017
[…] Слепая доступность. Юрий Артюх […]
2.Anthonyfen | 30 Jan, 2021
satin pajama set Womens satin pajamas are each of the rage in the summer season months. Through the winter months, however, satin isn't a well-liked wardrobe staple. But this period, it can be switching everything. Women of all ages who love to lounge from the evening can now Activity satin pajamas having an update really feel and style. For the timeless glance, try a pair of mens satin pajamas with a major brushed chenille thread, double-sided satin pajamas having an ombre print, or even a clean satin pajama with embroidery. Up-to-date trend's Adult men's satin pajamas are usually created from extremely-mild, stretchy poly-silk Together with the related glimpse and texture of pure silk. Showcasing a secure elastic waistband, one particular button fly, and a entrance flap pocket within the chest, mens satin pajamas also can be found in huge, further massive, and medium measurements. They can be very easy to look after with just a wash in very hot drinking water and a mild detergent, and will last quite a long time. Most Adult males's satin sleepwear sets consist of pajama bottoms and slipcovers to safeguard them also. A person great way to retain expenditures down is to get an entire satin pajama established. Even so, for people who want to invest in just one piece, there are plenty of alternatives, such as a zip entrance zip up one-piece pajama established, a crew neck a person-piece set, or a strong coloration with satin or charmeuse overlays. Together with Value, quality and healthy also are essential factors when buying any sort of intimate clothing. The leading detail to contemplate when getting satin pajamas is flammability requirements. Most sleepwear brands foundation their flammability ratings on the level of heat produced through a dry warmth exam. Your best option for satin pajamas is robes that meet up with these minimal flammability requirements. Even if you do not plan to make use of the robe in open flames, It is really nevertheless a good idea to invest in robes which are rated for these reduced temperatures. Just in the event your satin pajamas catch fireplace within a fireplace, the upper ranking will make certain that it won't distribute greatly flames. There are various components that will have an impact on the expense of satin pajamas. By natural means, the fabric must be good quality and sturdy. Certain components are dearer than others, Primarily given that polyester is so extensively Utilized in satin fabric. Designer satin pajamas also are typically costlier. For a more economical solution, have a look at lower price sleepwear models for instance Valisere. Eventually, consider some great benefits of the satin pajamas set. If you need to continue to keep warm on cold evenings, then a two-piece satin pajama set might be The obvious way to go. Having said that, if you want paying time in incredibly hot shower rooms or soaking up the Sunshine while in the sun room, then a one particular-piece satin pajama set is probably finest. No matter whether you decide on sound hues or designs, be sure you buy satin sleepwear from the trustworthy company that meets flammability benchmarks.