Nagłówki – opis makiet w Figmie

Cześć wszystkim!

Dzisiaj rozpoczynamy serię artykułów: „Opis makiet w Figmie – jak przekazać to zgodnie ze standardami WCAG”.

Celem serii jest przybliżenie projektantom zasad opisywania makiet w Figmie zgodnie ze standardami WCAG (Web Content Accessibility Guidelines).

Pamiętajmy, że opisy makiet powinny uwzględniać kluczowe aspekty dostępności, takie jak kontrast, hierarchia treści, semantyka elementów oraz ich role. Dzięki temu projekty będą spełniać wymagania dostępności, a komunikacja między projektantami a deweloperami stanie się bardziej efektywna.

Zacznijmy w takim razie od istotnego tematu jakim są nagłówki (headings) – kluczowy element każdego projektu.

Na wstępie przypomnijmy zastosowanie nagłówków.

Główne funkcje nagłówków to:

• Organizacja treści – nagłówki pomagają uporządkować informacje na stronie, ułatwiając użytkownikom szybkie odnalezienie interesujących ich sekcji.
• Poprawa dostępności – osoby korzystające z czytników ekranu mogą nawigować po stronie za pomocą nagłówków, co zwiększa użyteczność serwisu.
• SEO (Search Engine Optimization) – odpowiednia hierarchia nagłówków pomaga wyszukiwarkom zrozumieć strukturę strony, co może pozytywnie wpłynąć na jej pozycję w wynikach wyszukiwania.
• Zwiększenie czytelności – dobrze dobrane nagłówki poprawiają czytelność treści, umożliwiając użytkownikom szybkie przeglądanie strony i skupienie się na najważniejszych informacjach.
• Prawidłowe stosowanie nagłówków (H1–H6) zgodnie z ich hierarchią pozwala na lepszą organizację strony oraz zapewnia lepsze doświadczenie użytkownika.

Przypomnienie funkcji nagłówków jest o tyle istotne, że to właśnie na etapie tworzenia projektu UX/UI należy odpowiednio rozplanować i zaprojektować treść strony.

A o czym należy pamiętać podczas projektowania nagłówków?:

• Każda strona powinna zawierać dokładnie jeden nagłówek H1.
• Struktura nagłówków powinna znajdować się w głównej części strony (czyli w main landmark).
• Należy zachować hierarchię nagłówków – po H1 powinien występować H2, a po H2 kolejny H2 lub H3 itd. Pomijanie poziomów (np. przejście bezpośrednio z H1 do H3) może wprowadzać chaos w strukturze strony.
• Unikaj stosowania obrazów z tekstem w nagłówkach (images of text). Nagłówki powinny być zwykłym tekstem, który ewentualnie można wzbogacić o grafiki dekoracyjne.
• Pamiętaj o minimalnych wymaganiach dotyczących kontrastu nagłówków względem tła. Więcej na ten temat: https://kinaole.co/wcag-2-1-kryterium-1-4-3-minimalny-kontrast-poziom-aa/).

Do opisywania nagłówków na makietach polecamy korzystanie z jednego z wielu dostępnych za darmo w Figmie tzw. annotation kits. Ja polecam A11y Annotation Kit, który można dostosować do własnych potrzeb: https://www.figma.com/community/file/953682768192596304 .

Na poniższej grafice przedstawiono przykład zastosowania A11y Annotation Kit do oznaczenia nagłówków.

Podsumowując, dobrze zaprojektowane i opisane nagłówki odgrywają kluczową rolę w zapewnieniu czytelności i dostępności treści na stronie internetowej. Ułatwiają one użytkownikom szybkie skanowanie strony, odnajdywanie istotnych informacji oraz zrozumienie hierarchii treści.

Dla osób korzystających z technologii asystujących, takich jak czytniki ekranu, logiczna struktura nagłówków pozwala na sprawne poruszanie się po stronie i lepsze zrozumienie kontekstu prezentowanych informacji. Ważne jest, aby stosować nagłówki w sposób zgodny z ich semantyką – H1 powinien być używany jako główny tytuł strony, a kolejne poziomy (H2, H3 itd.) powinny odzwierciedlać hierarchię sekcji.

Ponadto, nagłówki powinny być zwięzłe, jednoznaczne i opisowe, tak aby jasno komunikowały temat danej sekcji. Dobrze dobrane frazy kluczowe w nagłówkach mogą również pozytywnie wpłynąć na SEO, poprawiając widoczność strony w wynikach wyszukiwania.

W rezultacie, odpowiednie stosowanie nagłówków nie tylko poprawia doświadczenie użytkownika, ale także przyczynia się do lepszej organizacji treści i zwiększenia dostępności strony internetowej.