Здоровий глузд: дописи з тегом доступність

Гайди з доступності центру Barbican

Thu, 20 Oct 2022 15:37:10 +0200

Ще приклад гайдів доступності (access guides) на сайті центру Barbican у Лондоні: https://www.barbican.org.uk/your-visit/accessibility

Там є гайди, який можна роздрукувати з собою, при чому зроблений з урахуванням людей з вадами зору (великий шрифт, контрастні кольори), а також аудіогайди.

У гайдах детально писано що і де на яких поверхах, де є туалети, як їздять ліфти тощо.

Навігація заздалегідь

Thu, 20 Oct 2022 10:39:06 +0200

Коли знайшов цю картинку входу у музей мистецтв у Філадельфії (Philadelphia Museum of Art), то зайшов на їхній сайт та побачив гарний підхід до інформування.

Шлях відвідувача (customer journey) починається ще до того, як людина попадає на локацію: відвідує сайт, знаходить інформацію як дістатись до локації різними видами транспорту, дивиться онлайн-карти, планує подорож, формує очікування тощо.

—

Ось, наприклад, аналіз сценаріїв з нашого проєкту навігації для MacPaw Space, який знаходиться у БЦ «Торонто». Частина навігації на самій локації не така велика, як шлях до неї.

На картинках 4 сценарії відвідувачів: на івент, у музей, у кафе і як спікер.

Ще до входу на локацію треба цей вхід знайти: не зі всіх боків можна підійти до БЦ, щоб знайти правильний вхід, не зі всіх вулиць можна просто під’їхати до БЦ. А сценарій на візку взагалі на цій локації окремий, бо ліфт доступний для цього розташований з іншого входу біля іншої вулиці.

І навіть до самого БЦ є точки комунікації про події (сайт, соцмережі, розсилки та квитки), в яких так само можна розповісти про те як і куди йти до входу на локацію.

—

Тому важливо окрім навігації на самій локації подивитись на весь шлях відвідувача від моменту, коли він тільки захотів кудись піти, та зрозуміти інші точки дотику у комунікації з ним: наприклад, на сайті, у соцмережах, у поштових розсилках тощо.

І в цих місцях також можна давати всю потрібну інформацію для орієнтування, наприклад:

карту та інструкцію як дійти пішки від метро чи зупинок транспорту, вказавши характерні орієнтири;
фото або відео інструкцію з проходом до локації;
інформацію про паркування для відвідувачів на авто (де паркінг, як доїхати, скільки це коштуватиме, які є орієнтири біля дороги);
інструкції для відвідувачів на велосипедах та самокатах;
інструкції (текстові, графічні, аудіо та відео) для людей з різними порушеннями (зору, слуху, маломобільні, на візках тощо), це також покращує загальну доступність (за кордоном це називається assistance guide або access guide);
можливо якісь ще особливості міста, які існують тільки тут.

На сайті музею є окрема сторінка з інформацією про те, як до них дістатись ріхними видами транспорту: philamuseum.org/visit/getting-here

Розділ Getting Here

—

Окремо хочеться відзначити дуже приємну схему самого музею. Подивіться, як на ній показані дуже характерні кругові сходи, які є в реальності. Це стає додатковим орієнтиром та дуже допомагає зв’язати картинку та будівлю. Плюс цю карту можна завантажити у вигляді окремого PDF зі всією інформацією та взяти з собою.

Схема музею

Фото музею Джерело: https://www.dezeen.com/2021/05/06/frank-gehry-philadelphia-museum-of-art-opens/

Ще з прикладів — офлайн Подія X від Projector у Unit.City. Після реєстрації на пошту разом з підтвердженням надіслали карту з проходом від входу до локації.

Розсилка про Подію X від Projector

Або Епіцентр під час замовлення на сайті показує, де в самому магазині шукати відповідну зону. При цьому вже на місці немає ніяких вказівників до пункту видачі замовлень ¯\_(ツ)_/¯.

Підтвердження замовлення на сайті Епіцентру

Перевірка дизайну на доступність

Thu, 31 Jan 2019 18:24:00 +0200

У своїй роботі ми завжди дотримуємось принципів універсального дизайну, основний з яких — рівність та доступність використання. Тому у цій статі опишемо, як можна перевіряти дизайн та кольори на доступність для людей із порушенням зору.

Дальтонізм

Близько 8% чоловіків та 0,5% жінок народжуються з одним із видів дальтонізму. Тому будь-які макети треба перевіряти на доступність при кольоровій сліпоті, особливо, коли одночасно використовуються червоний та зелений кольори.

Adobe

У Adobe Photoshop, Illustrator та InDesign є вбудована функція перевірки макетів на два найпоширеніші види кольорової сліпоти: View / Proof Setup / Color Blindness Protanopia та Deuteranopia type. Для комфортної роботи можете додати гарячу клавішу для ввімкнення цих режимів у Edit / Keyboard Shortcuts.

Перевірка схеми метро на дейтеранопію

Color Oracle

Якщо не прив’язуватись тільки до програм Adode, можна звернутись до більш універсальної програми — Color Oracle. Є версії для MacOS, Windows та Linux. Вона запускається незалежно від інших програм та переводить у режим перевірки на дальтонізм все, що відображується на екрані.

Sim Daltonism

Окремо для Mac є програма Sim Daltonism.

Sim Daltonism

Sketch + Stark

Для тих, хто проектує інтерфейси у Скетчі, є окремий плагін Stark. Ще плагін вміє порівнювати два кольори на контрастність.

Sketch + Stark

Figma + Color Blind

Для Фігми є плагін Color Blind, який копіює артборд чи об’єкт та перетворює його кольори так, як би це бачили люди з дальтонізмом.

Figma та плагін Color Blind

Контраст кольорів

Є такий розповсюджений стереотип: «Усім давно відомо, що жовтий текст на чорному тлі — максимально доступний та читабельний» (або жовтий на синьому, або будь-яка інша пара кольорів, просто найчастіше згадують жовтий). Але це все маячня, звернемось до науки.

Light Reflectance Value

Light reflectance value (LRV) — здатність поверхні певного кольору відбивати світло. Чим більше LRV, тим більше світла відбиває поверхня, тим яскравіший колір. Читабельність тексту напряму залежить від різниці LRV двох кольорів: тла і тексту. Більша різниця — більший контраст та розпізнаваність (legibility) тексту.

Різниця (P) рахується за формулою:

P = [(B1 — B2) / B1] x 100

де B1 — значення LRV світлого кольору, B2 — темного.

Наприклад, для київських адресних покажчиків LRV синього кольору (RAL 5013) дорівнює 3, а LRV білого — 88. Тому за формулою отримуємо контраст кольорів P = (88−3)/88 × 100% = 97%. І для порівняння розрахуємо різницю чорного та жовтого. Чорний — Traffic Black 9017 з LRV = 2 та найбільш «отрутний» жовтий RAL Sulful Yellow 71, з LRV = 71. Отримаємо P = (71−2)/71 × 100% = 97%. Як бачите, різниці по розпізнаваності немає.

Згідно зі стандартом The Americans with Disabilities Act accessibility guidelines (ADAAG) для знаків з піктограмами та текстом рекомендований контраст повинен бути більше ніж 70%. Хоча це не жорстке обмеження, для деяких кольорів 60-70% також працює непогано.

On signage with words or pictograms The Americans with Disabilities Act accessibility guidelines recommend a light reflectance value of 70%, but this is not a strict requirement. Several other color combinations in the 60-70% range also work well.

В Україні доступність регулює стандарт ДСТУ Б ISO 21542 2013 «Будинки і споруди. Доступність і зручність використання побудованого життєвого середовища» (ISO 21542 2011, IDT). У стандарті також використовуються розрахунки різниці LRV. Для тексту рекомендована така ж різниця у 70%.

Уривок з ДСТУ Б ISO 21542 2013 «Будинки і споруди. Доступність і зручність використання побудованого життєвого середовища»

Як розрахувати LRV

Простий калькулятор є у Asi Signage. Але у них замало відтінків і не зовсім ясно, яким реальним кольорам в палітрах RAL чи Pantone вони відповідають.

Приблизні значення LRV для реальних палітр RAL, Pantone та інших можна знайти на сайті e-paint.co-uk.

Саме значення з цього сайту лягли в основу сайту для порівняння контрасту кольорів реальних палітр (RAL, Pantone та інших) — color.a3.kyiv.ua. Працює не ідеально, але основні висновки можна робити.

Контраст кольорів реальних палітр

Ще один приклад від Designworkplan зі зрозумілою матрицею для порівняння основних кольорів.

UPD: інженер Віктор Петрук правильно помітив, що на попередній картинці деякі пари кольорів з низькою різницею контрасту читабельніші за інші пари з більшою різницею. Він порівнює кольори з картинки через яскравість у RGB. Але не коректно порівнювати RBG та LRV. RGB — адитивна колірна модель, яка відтворює зображення за допомогою випромінення світла екрану. LRV — параметр, що описує яскравість світла, яке відбивається від кольорової поверхні (це більше відноситься до субтрактивної моделі, як CMYK). Це все одно, що порівнювати фінальний вигляд картинки на моніторі та на паперовому носії.

Нюанси сприйняття шрифтів

За розрахунками різниці LRV контраст чорного на білому та білого на чорному може бути однаковим. Але сприйняття шрифтів працює по-різному: білий текст на темному тлі візуально здається трохи жирнішим, ніж чорний на білому.

Наприклад, шрифт FS Millbank має дві версії: для світлого тла та для темного (із врахуванням внутрішньої підсвітки знаків).

Шрифт FS Millbank

Можна це враховувати при підборі шрифтів для проекту.

P.S.

Ще один ненауковий метод визначення контрастності кольорів — переведення зображення у чорно-білий режим. У такому виді ми відкидаємо будь-який колір та дивимось лише на контраст яскравості. Більша різниця яскравості — краща розпізнаваність.

P.P.S.

Contrast-ratio.com —інструмент для перевірки контрасту для екранів