Логотип не відповідає або тимчасово недоступний • Про CSS

Логотип не відповідає або тимчасово недоступний

Зацікавилася питанням: як краще верстати логотипи на сайті? Як правильно та чому? Картинкою чи тлом? Який логотип буде виглядати під час друку? Як забезпечити доступність для скринридерів і як зробити підказки для пошукових систем?

Є різні способи вставити логотип на сторінку:

фоновою картинкою (зазвичай на елементі заголовка)
звичайною картинкою
інлайновим SVG

Мені найбільше подобається варіант із фоновим зображенням, заданим для H1. Чому саме цей? Тому що логотип зазвичай містить назву компанії або сайту, і цю назву логічно зробити головним заголовком на сторінці. Найчастіше логотип - це просто красиво оформлена назва, тому можна написати назву текстом, а потім за допомогою стилів оформлення приховати його і замість нього показати картинку. Крім доступності тексту для скринридерів, такий варіант розмітки дозволяє без проблем додати будь-які ефекти по наведенню (наприклад, міняти картинку).

Начебто чудовий спосіб, але ні. Логотип у разі неможливо скопіювати чи зберегти, і якщо користувач переглядає сторінку без картинок, замість логотипу він побачить порожнє місце, тобто заголовок сайту виявиться йому недоступний.

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

— при поганому з'єднанні з інтернетом, коли на сторінці може бути стилів чи картинок; - Під час друку сторінки; - Для копіювання; - Для пошукачів; - Для маніпуляцій за допомогою CSS.

Ми звикли до хорошого інтернету, який є практично скрізь, і можемо думати, що так у всіх, поки нам раптово не знадобиться терміново відкрити якусь сторінку, перебуваючи в метро або, наприклад, у відпустці, в готелі з напівдохлим вайфаєм. Якщо ви бували в такій ситуації, напевно відвалилися стилі або картинки, що недовантажилися, з розряду рідкісних міфічних істот для вас різко перейшли в розряд гострих нагальних проблем. «Та хто взагалі робив цей гальмівний сайт?!». Загалом стилі могли не доїхати, а картинки могли бути відключені користувачем для економії трафіку та прискорення завантаження сторінок. Таке трапляється.

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

Питання копіювання є актуальним для контент-менеджерів, яким може знадобитися скопіювати логотип з сайту компанії. Якщо на сайті роздобути не вийде, можна вдатися до пошукових систем. Чи зможуть пошукові роботи знайти на сторінці ваш логотип?

Доступність для CSS може бути актуальним питанням для розробників. Як зробити доступний та інтерактивний логотип одночасно?

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

Для тестів у MacOS використовувався VoiceOver (вбудований скрінрідер) та браузери Chrome, Firefox та Safari. На Windows 7 використовувала NVDA та браузери Chrome, Firefox та IE10.

Логотип фоном

Зазвичай VoiceOver виділяє елемент, що читається, помітною чорною рамкою:

З цими способами, в залежності від браузера, рамки може не бути взагалі, або вона вказуватиме на інший елемент.

Підсумкова розмітка виглядатиме якось так:

Ще можна приховувати текст за допомогою .visuallyhidden (про нього можна почитати тут). У цьому випадку для забезпечення доступності не потрібні допоміжні атрибути, але для тексту буде потрібна додаткова обгортка з класом .visuallyhidden :

У цьому випадку VoiceOver також виділить елемент чорною рамкою, але за формою та розміром вона відповідатиме прихованому тексту:

VoiceOver у всіх браузерах поводиться більш-менш однаково: щоб він коректно сприймав елемент, йому достатньо задати role з aria-label або використовувати .visuallyhidden .

У NVDA на Windows все не так райдужно:

в Chrome взагалі не читається елемент з .visuallyhidden
у Firefox у елемента з .visuallyhidden обрізається текст

Цікаво, що при цьому в IE10 взагалі прочитався весь можливий текст, ігноруючи навіть role = "img".

Доступність: 3/6

без стилів так
без картинок немає
для друку погано
для копіювання немає
для скринрідерів так
ефекти з наведення так

Без картинок на сторінці замість логотипу буде пусте місце. Зберегти як картинку такий логотип не вийде, якщо просунутий користувач не скористається веб-інспектором.

За промовчанням фони, задані у стилях, не друкуються. Друк фонових зображень можна увімкнути у параметрах друку, але якщо користувач не зробить це руками, замість логотипу знову буде порожнє місце.

Проблему можна вирішити розділенням стилів для друкованої та екранної версій: для цього можна використовувати @media screen (стилі тільки для екранів) та @media print (стилі для друкованої версії). Таким чином, друк логотипу не буде проблемою, якщо подбати про це наперед.

Насправді, за такого способу не обов'язковоприховувати текст — він може бути частиною логотипу, як це зроблено на сайті Лії Віру:

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

Доступність: 5/6

без стилів так
без картинок так
для друку так
для копіювання немає
для скринрідерів так
ефекти з наведення так

Логотип все ще не можна скопіювати, але з рештою проблем не буде: при відключених картинках і друку користувач хоча б побачить текст.

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

Логотип картинкою

Доступність: 5/6

без стилів так
без картинок так
для друку так
для копіювання так
для скринрідерів так
ефекти з наведення немає

У цьому варіанті при картинках, що не завантажилися, відобразиться вміст атрибуту alt. Можливо, це не дуже гарно виглядатиме, але текст все ще можна буде прочитати.

Перевага цього способу в тому, що він не зламається за відсутності стилів і друку, логотип легко можна зберегти зі сторінки, і все це без будь-яких зусиль з вашого боку.

Недолік — недоступність вмісту для CSS, якщо потрібно змінювати зображення для наведення або додати анімацію CSS.

У всіх браузерах читалки коректно читають картинку з alt. NVDA В IE10 прочитала не тільки alt, а й урли картинок.

Інлайновий SVG

Доступність: 4/6

без стилів так
безкартинок так
для друку так
для копіювання немає
для скринрідерів погано
ефекти з наведення так

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

Щоправда, якщо оформлення логотипу задано CSS, без стилів він може стати просто чорним, але його все ще можна буде прочитати.

Також векторному логотипу обов'язково потрібно задавати в атрибутах ширину та висоту, навіть якщо ви потім плануєте перевизначити їх стилями. Справа в тому, що SVG-зображення, у якого заданий viewBox, але не задані розміри, намагатиметься зайняти весь доступний простір. Щоб без стилів сторінка не перетворювалася на парад гігантських іконок, достатньо всім SVG на сторінці вказати ширину та висоту, потім ви легко зможете задати у CSS потрібні розміри (пріоритет у цьому випадку буде у CSS).

Також Леоні Вотсон рекомендує додати атрибут aria-labelledby, вказавши в ньому id заголовка та описи. Вийде приблизно таке:

Таким чином можна зробити SVG максимально доступним для скринридерів, але слід пам'ятати, що поведінка різних скринридерів може відрізнятися, так само як і доступність елементів у різних браузерах і різних операційних системах. Перед використанням коду на реальних сайтах обов'язково потрібно тестувати.

Що краще вибрати?

логотип картинкою- найнадійніший спосіб, але він може виявитися невідповідним, якщо потрібна інтерактивність;
логотип тломдозволить додати ефекти на кшталт заміни картинки з наведення. У разі використання SVG-зображення, код не захаращуватиме розмітку, доступність можна забезпечити допоміжними атрибутами, а проблема друку фонів вирішується стилями для друку;
інлайновий SVGдає більш широкі можливості взаємодії за допомогою CSS або JS, але код захаращуватиме розмітку, а про доступність для скринридерів потрібно подбати окремо.

Доступність для пошукових систем

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

Як я перевіряла: у гугле та яндексі робила запити на кшталт «logo», очікуючи побачити логотипи з сайту компанії на початку пошукової видачі пошуку за картинками. Яндекс чомусь рідко знаходив те, що потрібно, зате гугл завжди першими результатами показував логотипи, які шукали, якщо тільки міг їх знайти.

Так ось: на Яндексі, Youtube та Facebook логотип зроблений тлом, але при цьому логотипи всіх цих компаній легко знаходяться гуглом. Всі три компанії мають сторінки з логотипами і всі логотипи вказані в мікророзмітці.

У Гітхаба логотип зроблений інлайновим SVG, але PNG-версія вказана в мікророзмітці, а також є сторінка з логотипами. Логотипи Гітхаба Гугл знаходить без проблем.

За моїми спостереженнями, гугл спочатку показує картинку з мікророзмітки, але якщо є сторінка з логотипами, краще показувати картинки звідти. Якщо логотип зроблений картинкою, але на сайті є мікророзмітка, що містить посилання на логотип, Google вибере картинку з мікророзмітки. Наприклад, так зроблено на сайті Джеффрі Зельдмана, і Google показує картинку з мікророзмітки, картинка з назвою сайту при цьому в пошуку не виявляється.

З цього я роблю висновок, що гуглу абсолютно все одно, як виглядає розмітка вашого логотипу,тому що він ніяк її не використовує. Отже, якщо ви хочете допомогти пошуковим роботам, вкажіть посилання на логотип у мікророзмітці. Якщо ви хочете допомогти людям, які шукатимуть логотип компанії, зробіть сторінку з логотипами. Розмітка логотипу на сторінці не вирішує таких завдань.