Lubię automatyzować procesy, ułatwiać sobie życie, mądrze zarządzać czasem i energią. Lubię pracę kreatywną, efektywną, która mnie rozwija. Nie lubię nudnego klepania kodu i nie lubię wynajdowania koła na nowo. Dlatego jestem zwolennikiem szablonów wszelakich. Jak to mówi mój kolega: “zawsze jest jakiś Chińczyk, który już to zrobił i do tego lepiej od Ciebie”. Zamiast rozkminiać dokumentację za każdym razem, kiedy chcemy stworzyć dostępny modal, proponuję zatem skorzystać z… gotowców, sprawdzonych szablonów pełnych dobrych praktyk.
Tak więc podrzucam dziś listę kilku dobrych miejsc, w których znajdziesz dostępne wzorce projektowe popularnych komponentów. Kolejność subiektywna, nieprzypadkowa.
Inclusive Components
https://inclusive-components.design/
Pierwsze miejsce, do którego bym spojrzała, gdybym szukała dostępnego rozwiązania dla swojego komponentu. Ilość opisanych tutaj wzorców nie jest szalona (ok. 10), jednak umieszczam to źródło na pierwszym miejscu ze względu na bardzo dokładne wyjaśnienie każdego rozwiązania. Oczywiście szegółowe opisy oraz liczne przykłady mogą być przytłaczające, jednak dają możliwość dogłębnego zrozumienia tematu. A nie tylko bezmyślnego kopiowania kodu.
ARIA Authoring Practices Guide (APG)
https://www.w3.org/WAI/ARIA/apg/patterns/
Uwaga, ten przewodnik dotyczy tylko WAI-ARIA w wersji 1.2. Znajdziemy w nim kilkadziesiąt szablonów komponentów oraz widgetów zbudowanych na bazie ARIA. Pamiętajmy jednak, że z ARII należy korzystać w ostateczności! W pierwszej kolejności wybieramy stary, dobry HTML. Po ARIA sięgamy dopiero wtedy, kiedy HTML nie umożliwia zbudowania dostępnego komponentu w naszym konkretnym przypadku.
Także widząc na powyższej stronie pattern o nazwie “Button”, nie powinniśmy go lekkomyślnie kopiować za każdym razem, kiedy tworzymy przycisk! Owszem, button z tej strony to widget, który działa jak przycisk i jest dostępny. Ale korzystamy z niego tylko wtedy, kiedy z jakiegoś powodu nie możemy użyć zwykłego elementu <button>.
Accessibility Developer Guide – patterns
https://www.accessibility-developer-guide.com/examples/
Accessibility Developer Guide to obszerny przewodnik o dostępności internetowej dedykowany programistom. W tym przypadku wzorce projektowe to tylko jego część. Niemniej jednak warto o niej pamiętać, ponieważ przedstawione tutaj szablony dotyczą nie tylko komponentów, ale też… funkcjonalności (np. ukrywanie elementów). Ponadto posiadają szczegółowe opisy implementacji i są oparte na konkretnych przykładach.
A11Y Style Guide
https://a11y-style-guide.com/style-guide/
Niech nazwa “style guide” Ciebie nie zmyli! Oczywiście w tym zbiorze kilkudziesięciu wzorców mamy do czynienia ze wskazówkami stylistycznymi, jednak każdy z przykładów posiada też podstawowy kod oraz jego wytłumaczenie. Znajdziesz tutaj zarówno przykłady rozbudowanych widgetów typu tablisty, jak i podstawowych elementów, np. przycisków oraz linków. Przejrzyście, zwięźle i na temat.
Deque University ARIA examples
https://dequeuniversity.com/library
Podobnie, jak w przypadku powyższego ARIA APG – tutaj również znajdziemy kilkadziesiąt widgetów z wykorzystaniem ARIA. Są to przykłady wykorzystywane w kursach uniwersytetu Deque. Brakuje tutaj dokumentacji i szczegółowego wyjaśnienia rozwiązań, ale mamy z kolei kod (zarówno HTML, jak i JS, CSS) oraz (w niektórych przypadkach) krótki opis implementacji. Umieszczam wysoko, ponieważ ufam wszystkiemu, co tworzy Deque.
Accessible Components by Scott O’Hara
https://scottaohara.github.io/accessible_components/
Repozytorium zawierające listę kilkunastu komponentów napisanych według najlepszych praktyk dostępności. Warto zerknąć, ponieważ jego autor to specjalista w branży. Miło, że dzieli się swoją wiedzą w tak praktyczny, przystępny dla każdego programisty sposób.
a11ymatters patterns
https://www.a11ymatters.com/patterns
Kilka wzorców projektowych, a wśród nich zarówno podstawowe (np. checkbox, skip navigation link), jak i zaawansowane (np. mobile navigation, pagination). Nie jest tego wiele, ale każdy z wzorców jest szczegółowo opisany zarówno pod kątem rozwiązań technicznych, przypadków użycia, jak i tzw. dobrych praktyk.
BBC GEL Technical Documentation
https://bbc.github.io/gel/#components
Zbiór wzorców kilkudziesięciu komponentów dedykowany głównie developerom pracującym dla BBC. Niemniej jednak każdy z przykładów jest zbudowany w taki sposób, że bardzo łatwo go adaptować do swojego projektu. Mamy tutaj zarówno kod, jak i opis, przykłady oraz źródła techniczne.
eBay MIND Patterns
https://ebay.gitbook.io/mindpatterns/
https://opensource.ebay.com/mindpatterns/index.html
Wzorce projektowe kilkudziesięciu komponentów dedykowane dla zespołów pracujących w branży e-commerce. Skrót MIND bierze się stąd, że wzorce zostały podzielone na 4 kategorie: Messaging, Input, Navigation oraz Disclosure. Mamy dostęp osobno do dokumentacji oraz przykładów. Bardzo fajne jest to, że te źródła są nieustannie uzupełniane, poprawiane, zgodne z najnowszymi zaleceniami WCAG 2.1 poziom AA. Ponadto bazują na powyżej podlinkowanych ARIA APG.
GOV.UK Design System
https://design-system.service.gov.uk/components/
https://design-system.service.gov.uk/patterns/
Gov.uk również dzieli się swoimi wzorcami projektowymi. Co ciekawe, mamy tutaj osobną zakładkę z szablonami komponentów oraz wzorcami funkcjonalnymi (np. zapytanie o adres, potwierdzenie adresu email, prośba o podanie danych bankowych). Znajdziemy tutaj również wzorce całych stron – confirmation page, cookies page, page not found, step by step navigation i inne. Wszystkie przykłady zgodne z najlepszymi praktykami dostępności, szczegółowo wytłumaczone, większość z nich poparta kodem. Ciekawe!
Access & Use
Zbiór szablonów… koncepcyjnych. Pigułki dobrych praktyk, praktyczne przykłady video, lecz niestety bez kodu. Liczne odniesienia do standardu WCAG 2.1 oraz szczegółowych artykułów.
I to koniec na dziś. Uwaga, nie wyczerpuję tutaj tematu wzorców projektowych dostępnych komponentów. Dzielę się jedynie tymi źródłami, które uważam za pomocne i godne zaufania. Jeśli chcielibyście dodać cokolwiek do tej listy – piszcie w komentarzach!
