#6 Dostępność i semantyka w HTML

Cześć!

W dzisiejszym wydaniu skupię się na dostępności i semantycznym HTML. Dlaczego? Bo to jest bardzo zaniedbany temat, często ignorowany podczas tworzenia aplikacji.

Ciekawostka: w 2020 roku żadna strona i aplikacja zarządzana przez instytucje publiczne w Polsce nie spełniała wymagań WCAG 2.1.

Na początek zachęcam Cię do obejrzenia prezentacji Be the browser’s mentor, not its micromanager.

Dowiesz się z niej:

• że pisząc semantyczny HTML dajesz solidne wskazówki użytkownikowi, przeglądarce, czytnikom ekranów i innym technologiom, które próbują zrozumieć co jest na Twojej stronie,
• nawet bez CSS powinno to wyglądać “ok” i logicznie,
• używaj article zamiast section → Tutaj znajdziesz wyjaśnienie dlaczego,
• nigdy nie wiesz, jaki rozmiar ekranu ma użytkownik, po prostu jest ich za dużo. Dlatego staraj się unikać skokowych rozmiarów elementów (np. small: 16px, medium: 24px, large: 32px), a dostosowuj to płynnie (np. calc(1rem + 3vw). Pewnie teraz na myśl przyszło Ci, że wymiary muszą się zgadzać z Figmą 💔 Dlatego tak ważna jest współpraca (i rozmowa!) developerów z designerami. Więcej od 14 min prezentacji.
• wykorzystuj minmax(), clamp() itd. w flex i grid. Przeglądarka zadba o poprawne wyświetlanie szablonu, a Ty nie będziesz musiał się martwić o każdy breakpoint i to co jest między nimi (szczegóły od 29 min.),
• używaj design tokenów i css variables.

Sprawdź również Cube CSS i zobacz jak współpracuje z przeglądarką.

Tutaj znajdziesz kod źródłowy z prezentacji (zobacz sobie config tailwind), a na stronie https://buildexcellentwebsit.es/ wspominają, z jakich innych narzędzi korzystają.

A11Y

Dostępność stron i aplikacji to wiedza dotycząca tworzenia stron i aplikacji, która umożliwia ich użytkowanie przez jak największą grupę ludzi.

Zazwyczaj myślimy o osobach niewidomych oraz niesłyszących, ale jest to zaledwie ułamek osób, które mogą mieć problem z użytkowaniem naszych aplikacji. Dostępność dotyczy ludzi niedowidzących, z dysfunkcjami wzroku, dla ludzi słabosłyszących, z zaburzeniami widzenia barw, dyslektyków, z niepełnosprawnością fizyczną rąk lub niepełnosprawnością intelektualną, osób starszych, ludzi korzystających ze starszych komputerów oraz urządzeń mobilnych.

Warto zapoznać się ze stroną A11Y Project, społeczności działającej na rzecz zwiększenia dostępności cyfrowej.

Jak sprawdzić, czy moja strona jest dostępna?

• a11y.css - wystarczy dodać plik css do strony i pokażą Ci się w problematycznych miejscach teksty z wyjaśnieniem, co jest nie tak. Jest też rozszerzenie do przeglądarki.
• tota11y - skrypt JSowy, który uruchamia na stronie okno z analizą i listą problemów.

Dzięki tym narzędziom jesteśmy w stanie przeprowadzić szybki i podstawowy audyt dostępności.

Inclusive web design checklist Heydona Pickeringa

To przydatna lista do sprawdzenia, o co warto zadbać, aby nasze strony i aplikacje internetowe były dostępne dla wszystkich!

Autor przy wielu punktach dodał źródło, które tłumaczy dane zagadnienie.

Mimo, że lista ma już swoje lata to nadal jest aktualna 🙂

Przykłady stron, które dobrze ogarniają temat

1. GOV.UK
2. Scope
3. BBC
4. https://www.paralympic.org/

To tyle na dziś. Mam nadzieję, że choć trochę przybliżyłem Ci temat dostępności, o którym zapominamy bo nas nie dotyczy.