Знайомтесь це мій особистий сайт. Перший знімок те яким він був ДО другий - ПІСЛЯ сьогоднішнього патчу. І в цій короткій статті я хочу зробити маленьке ревью та розказати на прикладах ЧОМУ я реалізував деякі дивні речі.
Про Header
Почну з самого низу - header.
Так, хоч цей елемент візуально виглядає як типовий футер сайту, технічно це хедер. В розмітці він знаходиться найвище та саме з нього починається навігація скрінрідера.
Чому він внизу? Все просто - для зручнішої навігації з мобільного пристрою. Оскільки нижня зона дисплею зазвичай доступніша за верхню.
Звісно, якщо у користувача немає попсокета. Тоді активна зона зміщується вище.
З цієї ж причини головні елементи розміщуються приблизно між центром та нижньою частиною дисплею. Так, за моїм задумом, вони будуть легкодоступні переважній кількості користувачів.
В останньому патчі я поміням меню та перемикач мови місцями.
Для користувача смартфоном (правші) він має стати ще доступніший.
Для користувачів скрінрідера, найперше що буде озвучено на сайті - це пропозиція змінити мову.
Сам перемикач мови теж зазнав змін. Раніше я додавав лейбл до іконки перекладу, розраховуючи що вона буде зачитуватись як звичайний текст.
<a href="...">
<svg aria-label="Switch language">...</svg>
English
</a>Однак це не надто добре працювало. Іконка могла не озвучуватись або ж озвучуватись як Посилання «Українська» .
Тому в новій версії, я повністю переніс лейбл для скрінрідерів на саме посилання переписавши вміст який тепер працює виключно для візуального сприйняття.
<a
href="..."
aria-label="Switch language to English"
lang="en"
>
<svg>...</svg>
English
</a>Також я додав атрибут lang. Фактично перемикач мови має протилежну мову до решти сторінки. Тому важливо підказати скрінрідеру, що в цьому елементі мова відрізняється та як саме її інтерпретувати.
І поки ми не пішли далі. Мій футер порушує одне з вагомих правил - візуальне розміщення елементів та їх порядок табуляції повинні співпадати. В моєму випадку це не так — меню табулюється першим проте візуально в самому кінці сторінки. Але я готовий на це піти розуміючи ризики.
Про іменування секцій
Рухаємось далі і поговоримо про блок з посиланнями на соціальні мережі.
Зізнаюсь, я до кінця не визначився які посилання я хочу мати, тому періодично щось додаю, щось видаляю. Але зараз їх стало надто багато, тому довелось візуально та семантично розбити цей блок на два.
В старій версії не було нічого цікавого. Це був нудний і не найкраще зроблений div з посиланнями. 🤢
<div>
<a>Eмeйл</a>
<a>Kyпити Kaви</a>
<a>Teлerpam</a>
<a>Твіттер</a>
<a>Ютуб</a>
<a>Інстаграм</a>
</div>CSS я опускаю, оскільки він не важливий для UI та семантики.
В новій версії, по перше я використовую section щоб логічно згрупувати елементи.
<section aria-label="Основні контакти">
<a>Eмeйл</a>
<a>Kyпити Kaви</a>
</section>
<section aria-labeledby="secondary">
<h2 id="secondary">Інші соц.мережі</h2>
<a>Teлerpam</a>
<a>Твіттер</a>
<a>Ютуб</a>
<a>Інстаграм</a>
</section>А по друге, обом секціям я додав лейбли. Завдяки цьому при навігації скрінрідером, коли фокус провалюється в середину буде зачитано як лейбд секції так і посилання Основні контакти. Емейл. Або Інші соціальні мережі. Твіттер. Чи навіть Основні контакти. Регіон. 2 елементи. Емейл. Посилання.
Аналогічно додав лейбл для контейнера банера вгорі сайта. Таким чином при потраплянні фокусу на посилання в середині, скрінрідер озвучить назву банера надавши контекст посиланню.
<article aria-labelledby="banner-title">
<p>
<strong id="banner-title">Дякую за підтримку України!</strong>
</p>
<p>
Оскільки росія веде геноцидну війну проти моєї країни,
я вдячний усім, хто продовжує підтримувати Україну
в нашій боротьбі за свободу.
</p>
<p>
<a href="...">Подивіться, як ви можете допомогти</a>
</p>
</article>Домашнє завдання
І на останок, питання на домашнє завдання, раз ви дочитали аж сюди: Хто пояснить, чому для групування соц.іконок я використав <section> а для групування банера <article>?
