1. Логотип фоном
2. Доступність: 3/6
3. Доступність: 5/6
4. Логотип картинкою
5. Доступність: 5/6
6. Інлайновий SVG
7. Доступність: 4/6
8. Що краще вибрати?
9. Доступність для пошукових систем
10. Коментарі по роботі з читалки:

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

Дякуємо всім учасникам дискусії за корисні коментарі:) Я зробила кілька варіантів розмітки, провела ряд тестів і дізналася багато цікавого.

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

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

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

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

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

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

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

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

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

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

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

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

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

Приклад розмітки:

<H1 class = "logo"> Назва сайту </ h1> .logo {/ * задаємо розміри * / width: 200px; height: 50px; / * Ховаємо текст * / text-indent: -1000px; overflow: hidden; / * Задаємо фоном картинку з логотипом * / background: url (logo.png) 50% 50% no-repeat; }

Текст можна ховати різними способами: крім text-indent іноді використовують font-size: 0. Цікаво, що в обох випадках текст залишається доступним для скрінрідеров, хоча і з деякими застереженнями. Текст буде прочитаний, але при цьому скрінрідер не зможе коректно виділити елемент, який він читає в даний момент.

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

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

Це легко виправити, якщо додати елементу з логотипом role = "img". Правда, в цьому випадку скрінрідер почне читати його як картинку без alt - текст всередині виявиться недоступний. Щоб вирішити цю проблему, елементу потрібно додати aria-label, який містить назву сайту.

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

<H1 class = "logo" role = "img" aria-label = "Назва сайту"> Назва сайту </ h1>

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

<H1 class = "logo"> <span class = "visuallyhidden"> Назва сайту </ span> </ h1>

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

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

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

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

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

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

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

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

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

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

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

і на сайті HTML5 Doctor :

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

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

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

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

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

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

Приклад розмітки:

<Img src = "logo.png" alt = "Назва сайту">

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

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

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

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

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

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

Інлайновий SVG

Приклад розмітки:

<Svg width = "100" height = "50" viewBox = "0 0 100 50" xmlns = "http://www.w3.org/2000/svg"> <path d = "..." /> < / svg>

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

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

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

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

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

З доступністю для скрінрідеров все не так просто. У SVG є спеціальні елементи для опису вмісту: title і desc, але вони читаються не всіма читалки і не у всіх браузерах. Наприклад, Firefox і Safari їх читають, а Chrome - немає. Я розглядаю варіант послідовного читання сторінки зверху вниз, поведінка по наведенню на елемент може відрізнятися. Також в SVG можна вставити текст, але він прочитає тільки в хром. Якщо вказати в SVG заголовок, опис і текст одночасно, такий елемент може бути прочитаний в більшості браузерів.

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

<Svg width = "100" height = "50" viewBox = "0 0 100 50" xmlns = "http://www.w3.org/2000/svg" aria-labelledby = "title desc"> <title id = "title"> Title </ title> <desc id = "desc"> Description </ desc> <text y = "- 10"> Text </ text> <path d = "..." /> </ svg >

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

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

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

Взагалі якщо логотип одночасно виконує обов'язки назви сайту, можливо, для надійності має сенс перекласти ці обов'язки на який-небудь заголовок з .visuallyhidden, а логотип залишити тільки для візуального відображення. Щоб для скрінрідеров оголосити логотип картинкою (якщо він не картинка, звичайно), йому можна додати role = "img" + aria-label, після цього скрінрідери перестають читати вміст елемента як конент і починають сприймати його як зображення.

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

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

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

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

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

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

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

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

Коментарі по роботі з читалки:

• VoiceOver зручний, показує читається елемент і показує текст, який читає в даний момент, це дуже зручно для тестування;
• NVDA вільно поширюється, швидко встановлюється і готовий до роботи відразу. Читається елемент не показує, але може показувати читається текст в окремому вікні;
• Jaws платний, але є версія для тестування, яку потрібно перезапускати раз в 40 хвилин разом з перезавантаженням компа. У мене дуже довго завантажувати і ставилося, зажадавши в процесі кілька разів перевантажити комп. Поточний елемент не підсвічує, якого читають текст не показує. Можливо, він все це вміє, але я в настройках не знайшла, і скористатися ним як слід у мене не вийшло.

спасибі Ромі Комарову за допомогу з текстом.