How to become an author
Search
Write a publication
Pull to refresh

Comments 65

UFO just landed and posted this here
Да, мне тоже они весьма не понравились. Надо будет переделать и предложить pull request.
Total votes 2: ↑2 and ↓0+2
Как я понял, автор тоже столкнулся с некоторыми связанными со статьёй deseases, так что упрекать, думаю, не стоит.

По теме:
1) Со стороны сочувствующего программера на повремёнке, действительно, это ничего не стоит, если есть что добавить и приписать полезный alt дополнительно к подписи к картинке, где уже есть текст — минута максимум.
2) Контентщики — тоже не особо заинтересованы, если работают не solo. Начальству не надо — зачем лезть на рожон, к примеру, альтернативный текст для alt у КДПВ тут, там же тема уже есть, она и типа подпись, пройдёт.
4) Дизайнеры — нет пока культуры. Тёмно-серый (gray) arial 12px на cветло-сером (silver) фоне — пока в порядке вещей, «красиво же». И иконки к чему перерисовывать, если макет сдали-приняли.
5) Начальство. В это всё и упирается. Думаю, эта статья более должна быть направлена на них, если мы говорим о массовом решении проблемы. Пандусы кое-как, но в MSK всё-таки ставят, хотя и дорого.

Так что в основном упирается в тех, кто ставит задачу исполнителям или их консультантам. Да, не особо дорого, но пока они не понимают этого.
Total votes 3: ↑3 and ↓0+3
3) Никто не пересчитывает пункты.
Total votes 3: ↑3 and ↓0+3
Как минимум половина всех рекомендаций даже не для пользователей с нарушениями каких-либо функций, а вообще для всех людей «как сделать нормальный сайт, которым удобно пользоваться».
Total votes 13: ↑13 and ↓0+13
Хотел написать то же самое, только вместо «половина» написать «практически все».
Total votes 6: ↑6 and ↓0+6
Объявляю ветку «Хабр уже не торт» открытой!
Total votes 4: ↑1 and ↓3-2
Круто, сам задавался вопросом семантики и создания доступных сайтов. Ваш доклад как-раз ставит все точки над И. Спасибо!
Total votes 3: ↑3 and ↓0+3

А что случилось с текстом в левой колонке на плакате в пункте "1.5. Слабовидящие"?

Total votes 2: ↑2 and ↓0+2

При масштабировании тексты абзацев и рекламы налезают друг на друга. Добро пожаловать. (Еще обожаю серый текст на сером фоне, как в комментах выше. /Сарказм)

This comment wasn’t rated yet0

Ясно. Инфографика по доступности, которую приходится объяснять создаёт немного странное впечатление.

This comment wasn’t rated yet0
UFO just landed and posted this here
В разделе про дислексию не совсем понял про «используйте автокорректор». Почему это не нужно делать и как это связано с текстом в левой колонке?
Total votes 1: ↑1 and ↓0+1

ibakaidov А ваш сайт тоже не очень. На бутоны (которые появляются по наводке курсора) нельзя кликать, только на текст ссылки.


А пишу это не чтобы придраться, а чтобы иллюстрировать тот факт, что сделать сайт доступным, дело весьма непростое и даже неоднозначное. Вот вам например кликать только на текст показалось вполне доступным. А мне (у меня все в порядке с здоровья) показалось, что если бутон появляется при наведению, то можно кликать туда.

Total votes 5: ↑5 and ↓0+5
У меня к вам несколько вопросов, на которые в интернете неоднозначная информация:

1) Если блок скрывается с помощью 
display: none
, нужно ли ему ставить атрибут aria-hidden="true"? Задача скрыть блок от всех, и от зрячих, и от скринридеров. Одни говорят нужно, другие говорят что 
display: none
скрывает контент полностью от всех.

2) Если уже есть сайт на огромнейшей куче div-ов (например spa на react-е). Чтобы добавить щепотку доступности без изменения дизайна, достаточно ли просто главным смысловым секциям подописывать атрибуты aria-label="описательное имя секции, например - форма заказа билетов, отзывы, контакты и т.д."? Или необходимо всё-таки добавить заголовки H1-H6 и доступно их спрятать с помощью css? Но тогда таких секций может быть не более шести на странице?

3) Некоторые кнопки внутри себя могут содержать свг-иконки. Зачем их советует прятать с помощью атрибута aria-hidden="true"? Скрин-ридер что, будет читать свг-документ разве?..)
Total votes 1: ↑1 and ↓0+1
UFO just landed and posted this here
  1. display: none скрывает блок от всех, включая скринридеры
  2. Разбавьте ваш суп из дивов ориентирами: header, footer, main, nav и заголовками секций
  3. SVG-иконки лучше прятать, там может случайно оказаться <title> или какой-то текст

Посмотрите доклад «Людоедский интерфейс» и почитайте сайт «Веблайнд».

Total votes 2: ↑2 and ↓0+2
Спасибо, за довольно полезную статью, действительно очень многие дизайнеры забывают о людях у которых есть проблемы со здоровьем. Например, совсем не давно столкнулся с сайтом глазной хирургической больницы и конечно они не позаботились о своих клиентах, благо редизайн делаем мы.
Total votes 3: ↑3 and ↓0+3
UFO just landed and posted this here
Наоборот, как уже отметили в комментах выше, большая часть советов будет удобной для здоровых людей.
На самом деле, это бич 99% современных дизайнеров — делать красиво в ущерб удобству.
Total votes 5: ↑5 and ↓0+5
Ну прям мелкие чек боксы и кнопки рядом сильно красивее больших тогл батонов и кнопок на разных строках? Думаю дело не в красоте, а в привычке. А привычка образовалась во времена 800 на 600, когда нужно было налепить по больше в малую площадь. Ну и еще индивидуальные предпочтения веберов зари интернета. Кто-то любил анимацию, кто-то кислотные цвета и по больше, а кто-то миниатюризацию менюшек. Это отчасти прижилось, особенно потому что люди с особенностями только начинают осваивать интернет, а на заре их практически не было. Сейчас просто нужно преодолеть инерцию мышления и дизайна, но это будет сделать сложно, т.к. коммерческий продукт смотрит прежде всего на деньги, и если доп траты на адаптацию не отобьются — заказчики будут не охотно на это соглашаться.
This comment wasn’t rated yet0
А вот меня бесит, что на моём текущем телефоне при экране в 3.5 раза больше, чем HQ iPaq 22ХХ информации влезает меньше, чем во времена WinCE. И вёрстка в стилем мегапостов, наверное удобная для людей с дислексией и проблемами с моторикой, вынуждает меня крутить десяток экранов мышкой вместо прочтения одного. Как никак любое прокручивание это перепозиционирование взгляда, что время и усталость.
Total votes 1: ↑1 and ↓0+1
Согласен, я и сам олдфаг, люблю интерфейсы в стиле панели боинга. С огромной плотностью информации. Я так-же хорошо ориентируюсь в «рабочем бардаке» на столе. Видимо это связанные характеристики. Большинство так не может, даже те у кого нет дислексии, им нужно по проще, по меньше информации за раз. А миром правит большинство. Если мы хотим изменить мир — то мы должны изобрести адаптивные интерфейсы и продвинуть их клиентам, в том числе под соусом «для инвалидов». Тогда будет три положения переключателя плотности информации.
This comment wasn’t rated yet0
UFO just landed and posted this here
Да, согласен, не знаю как там технология Брайля работает, на самом деле. Но они живут и пользуются, по ТВ сегодня показывали, как мальчик 10 лет и читал и довольно шустро набирал текст. Может, на статью кто-то разрадится, очень интересно. Именно про Брайля, скринридеры уже все знают.

По цветам gray on silver — просто переключалка в правом верхнем углу под бутербродом, через CSS это не сложно. Надо делать контраст, который мы тут обсуждаем, а насколько правильный этот контраст? А у начальства — бюджет.
This comment wasn’t rated yet0

Кстати, некоторые дислектические проблемы иногда приходится решать и для вполне обычных людей. Вот у меня, программируя на ассемблере для x86 (важно что x86) появилась проблема неразличимости "ebx" от "edx" в ассемблерных текстах. Потому что ассемблер читается сверху вниз и так b и d выглядят одинаково.


Вот обсуждение на: https://ux.stackexchange.com/questions/43439/how-to-make-font-that-clearly-distinct-b-and-d-without-sacrificing-legibilit


В конце, концов, сделал "b" как "в" и все получилось как надо. :)

Total votes 2: ↑2 and ↓0+2
Вопрос по ходу: для видео на YouTube можно сделать титры и залить их туда, а вот как поступать с аудиофайлами, для которых есть расшифровка? Есть ли смысл пытаться синхронизировать звук и текст?

Как вариант представляется публикация транскрипта с возможностью прыгнуть на нужную секунду трека. Но пока что не нашёл ни одного внятного примера, откуда слизнуть вид и код.
Total votes 1: ↑1 and ↓0+1
Простите мой «разговор с самим собой» как одну из моих disabilities ;-)
Ответ примерно такой: есть html5 тег <track>, но он может относиться только к <video>, а внутри <audio> он будет проигнорирован. Можно конструировать <video> с mp3 вот так, например.

Либо действительно ставить звук, после него расшифровку, а возле каждого абзаца кнопку с примерно таким кодом: 
<button onclick="myaudio.currentTime=NNN;myaudio.play()" type="button">Прослушать с этого места</button>
Total votes 1: ↑1 and ↓0+1

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

Total votes 3: ↑3 and ↓0+3

Вопрос, как сделать эту пару: звук и текст красиво и удобно взаимодействующими между собой. Представьте себе, например, запись передачи, где умные люди беседуют о музыке и иногда включают ее фрагменты.

This comment wasn’t rated yet0

А зачем слушать, если текст имеется? Я читаю намного быстрее, чем слушаю. Для людей, которые не могут читать, да, там просто надо бутон "слушать" и возможность перемотки и ускоренное проигрывание. (Моя дочь так смотрит видео лекции – на скорость x4, потому что видео иначе очень медленно смотрится), правда для аудио не знаю пройдет ли номер. Пусть слушающие люди скажут.

Total votes 1: ↑1 and ↓0+1
Чтобы лучше воспринять эмоции говорящего. Радиоспектакли же никто не вычеркнул из исторической памяти человечества.
This comment wasn’t rated yet0
Для роликов на Youtube (и наверняка на других видеосайтах) есть возможность дать ссылку с указанием времени (для этого в конец ссылки присобачивается таймкод в виде "#t=12m34s"). Не уверен на 100%, но наверняка можно сделать так, чтобы при наличии этого видео выше на странице оно продолжало воспроизведение в этом встроенном плеере.
This comment wasn’t rated yet0
Для видео такой проблемы нет — есть штатные инструменты встраивания closed caption. Это сделано с видео в этом посте, хотя и криво: Иван говорит, что предоставил полный текст организаторам конференции, а вместо точного текста идёт кривое машинное распознавание звука. Видимо, расставлять ручками посекундную разбивку никто не захотел :-(
This comment wasn’t rated yet0
Сейчас набирают популярность умные колонки. Интересно, помогают ли они людям с особенностями здоровья?
This comment wasn’t rated yet0
Еще бы я порекомендовал посмотреть на расширение Funkify для Chrome.
Имитирует множество расстройств зрения, в т.ч. дислексию

Total votes 1: ↑1 and ↓0+1
Добавил в ссылки, спасибо
This comment wasn’t rated yet0
Нет, но теперь буду (с) Многие советы полезны и для простых юзеров, без нарушений и расстройств.
Total votes 2: ↑2 and ↓0+2
А кто-нибудь может подсказать научные источники (книги и статьи), посвященные проблеме доступного веба и мобильных приложений?
This comment wasn’t rated yet0
Реквестирую перевод картинок на английский.
This comment wasn’t rated yet0
Ага, и они же есть в той же репе, что и русские постеры
This comment wasn’t rated yet0
Полезная статья, спасибо.
ibakaidov, давно хочу (но никак не возьмусь) написать статью о том, как важно наличие на сайтах чатов — взять Ваш же пример про Yota. Или то же общение с банковской поддержкой.
Не хотите взяться за это? Мне кажется, такое живое описание примеров, как здесь, будет интересно читать, и, при должной подаче, может даже принести свои плоды)
Total votes 1: ↑1 and ↓0+1
Возможно, найду время на это, спасибо за идею.
Total votes 1: ↑1 and ↓0+1
UFO just landed and posted this here
Согласен, тут недавно была статья про такое (https://habrahabr.ru/post/345772/).
Но для некоторых общение в чате удобнее: автору в обычной жизни, мне — в рабочее время.
This comment wasn’t rated yet0
Я добавлю пример из Израиля, можно?

Двое студентов решили жить вместе, сняли себе квартиру и стали жить-поживать.
Как тут в одно прекрасное утро (20/12/16) у них испортился интернет. А он им очень нужен.

Девушка по имени Dafna Doron позвонила провайдеру Bezeq International ( בזק בינלאומי) с просьбой починить, а сама поехала на работу. Парень (Maor Ben Zeev) остался дома.

Девушка уже в дороге, как вдруг ей звонят из компании и спрашивают данные раутера.
Она объяснила, что дома остался ее парень, и он сможет общаться с компанией, но только текстом. Потому что он глухой. А у компании чат давно не работает, а смсом, скайпом и другими средствами текстовой связи они пользоваться не могут. Вот не могут и все. Пусть он попросит соседа, чтоб тот за него поговорил по телефону. Девушка поговорила с двумя представителями и одной начальницей, и так расстроилась, что написала про это в Фейсбук, и еще приложила туда их симпатичную фотку.
В течении суток история стала известна буквально всей стране (см. см. см.), а пост получил тысячи лайков и комментариев (при населении страны около 9 миллионов.)

По непроверенным данным, в течении недели у компании заработал чат.
Total votes 2: ↑2 and ↓0+2
Собственно, да. Вот это я и имел в виду (если, конечно, чат у компании действительно заработал). Спасибо за пример!
This comment wasn’t rated yet0
Я зашла на сайт компании. В ивритской версии есть кнопка с инвалидом в кресле на колесиках. Она дает роскошное меню — тут тебе и и адаптация для скринридера, и перевод в монохром, и увеличение шрифта, и навигация клавиатурой. Хотя большинство можно сразу встроить в страницу. В русской и английской версиях этой кнопки нет (дискриминация?).
Но видно, что старались для инвалидов.

Чата я не нашла, но, может, его показывают клиентам. Не знаю, как проверить, я не клиент.
This comment wasn’t rated yet0
Как пример использования вспоминаются только гос услуги и сайт росреестра. Больше я подобной заботы о людях с особенностями здоровья я вообще не видел. И то гос сайты наверняка обязывают, поэтому они и думают о таком типе верстки еще в момент написания тз. По коммерческим сайтам, вообще никогда не видел. Сейчас для примера зашел на озон и маркет, не нашел подобного функционала
Total votes 1: ↑1 and ↓0+1
Спасибо за интересный и живой материал. Много думал, пока читал.
Возможно, есть компании, которые не против провести проверку своих сайтов на доступность людям с ОВЗ. Может вам пора предлагать такие услуги? )
Total votes 1: ↑1 and ↓0+1
Отдельной компании я не знаю, но есть ребята, которые закончили ВУЗ по специальности тестировщик, думаю к ним можно обратиться.
This comment wasn’t rated yet0
Слово вуз пишется маленькими буквами.

0. gramota.ru/spravka/buro/29_413672

1. ru.wikipedia.org/wiki/Вуз

2. Сайт: «Институт русского языка им. В. В. Виноградова РАН»
www.ruslang.ru/agens.php?id=aspirant (поиск по странице слова «вуз»)

3. Сайт GRAMOTA.RU www.gramota.ru/spravka/rules/?rub=sokr

4. В основе данного словаря лежит «Русский орфографический словарь», изданный под редакцией О.Е. Ивановой и В.В. Лопатина в 2004 году, – самый полный орфографический словарь русского языка на сегодняшний день.
orf.textologia.ru/definit/vuz/?q=532&n=18948

5. Лента ру lenta.ru/search?query=вуз

6. Кремль? www.kremlin.ru/assignments/9399

7. www.orfo.ru/tutorial/html/Spel_Capital.htm

8. Словарь Розенталя www.evartist.narod.ru/text1/24.htm#_top
(Розенталь Д.Э., Джанджакова Е.В., Кабанова Н.П.
СПРАВОЧНИК ПО ПРАВОПИСАНИЮ, ПРОИЗНОШЕНИЮ, ЛИТЕРАТУРНОМУ РЕДАКТИРОВАНИЮ М.: ЧеРо, 1999)

9. Ведомости
www.vedomosti.ru/search/?s=%E2%F3%E7

10. Российская Газета? search.rg.ru/wwwsearch/?text=вуз

11. therules.ru/#q=вуз
Total votes 1: ↑1 and ↓0+1
Хочу отметить проблему не только с веб-дизайном, но и с физическими гаджетами. Есть у меня bluetooth-гарнитура. В инструкции написано, что когда идёт зарядка, то индикатор горит красным цветом. Когда зарядка завершена, то индикатор горит зелёным цветом. Как её заряжаю я: ставлю примерно на 2 часа, предполагая, что за это время она зарядится. Трудно было сделать мигающий краный? Или офисные кулеры с водой. Когда вода не нагрелась, индикатор горит красным цветом, когда вода нагрелась, — то индикатор зелёный. Как я узнаю температуру воды: если воду не набирали в последнее время, то, скорее всего, вода уже успела нагреться. Далее — светофоры. Тут попроще. Горит верхний сигнал (или левый) — красный. Тот, который посередине, — жёлтый. Внизу (или справа) — зелёный, значит, можно ехать.
Все пытаются заботиться о людях с разными рассройствами здоровья, но заботу о дальтониках обходят стороной. А это, между прочим, 10% мужчин. Сравните, с теми же 10%, куда входят все остальные, перечисленные в статье.
This comment wasn’t rated yet0
Лайфхак — если приклеить зелёную изоленту поверх индикатора, то красный через неё будет светить очень приглушённо, а зелёный почти так же ярко.
Total votes 1: ↑1 and ↓0+1
Я не дальтоник, но ни разу не обращал внимания на то что есть цветовые индикаторы на планшетах и кулерах. Ни один девайс в доме ни чем не светит во время зарядки. И тем более не мигает. Представьте вы на ночь поставили заряжать девайсы всей семьи а они давай мигать да еще невпопад. Свихнуться можно. Есть индикторы зарядки на технике бош, на детских игрушках, на зарядках для АА-акб. Везде мигает пока заряжается. В крайнем случае два разнесенных светодиода с подписями возле каждого. Уже не в первый раз узнаю о проблемах, которые я бы не испытывал, будучи на чужом месте. Это создает ощущение, что это не забота о людях с особенностями, а попытка протолкнуть свои предпочтения под их видом. Первый раз я это заметил, когда левша по телевизору жаловался что двери не в ту сторону открываются и мясорубку крутить не удобно. В тот же день я начал пробовать делать эти вещи левой рукой и понял что в этом вообще нет ни какой проблемы, совершенно не важно какой рукой открывать дверь или крутить мясорубку, т.к. не очень грубые и простые движения, их можно даже ногой делать.
This comment wasn’t rated yet0
UFO just landed and posted this here
Sign up to leave a comment.

Your account

Sections

Information

Services

Support
© 2006–2024, Habr