Wzorce, komponenty i systemy projektowania

W procesie programowania wiele osób korzysta z programowania opartego na komponentach, korzystając z przewodników po stylu wzorca, bibliotek komponentów lub pełnych systemów projektowania. Nawet jeśli nie korzystasz z tych narzędzi oficjalnie, prawdopodobnie korzystasz z podobnego procesu, aby podzielić duży projekt witryny, aplikacji lub innego produktu cyfrowego na łatwe do zarządzania elementy.

Podobnie jak w przypadku budowy fizycznej budowli, ważne jest, aby budować jeden element po drugim. Po pierwsze: fundament, struktura, ściany, okna, dach i wszystko pomiędzy. Narzędzia programistyczne oparte na komponentach pozwalają nam to robić w przypadku witryn, aplikacji i innych produktów cyfrowych.

Do korzyści płynących z programowania opartego na komponentach należą m.in. podział elementów na części, którymi łatwo zarządzać, co skraca czas potrzebny na opracowywanie komponentów wielokrotnego użytku. Umożliwia współpracę projektantów, programistów frontendów i backendów oraz kontrolę jakości. Z kolei klientom, projektantom i menedżerom ds. partnera ceni się to, bo po uruchomieniu witryny mogą podglądać proces tworzenia i korzystać z naszych wskazówek dotyczących stylu.

Jednak gdy spojrzymy na wzorce, komponenty i systemy projektowania z myślą o ułatwieniach dostępu, pojawiają się pewne pytania. Skąd wiadomo, które wzorce są najlepsze, jeśli chodzi o ułatwienia dostępu? Czy należy użyć gotowego wzorca lub istniejącej biblioteki czy utworzyć nowe? Skąd wiadomo, czy te wzorce pomogą Twoim użytkownikom?

Przy tak szerokiej gamie możliwości szybko łatwo się pogubić. Ten moduł zawiera ogólne informacje o tym, jak oceniać wzorce, komponenty i systemy projektowania pod kątem ułatwień dostępu, a także punkt wyjścia, który pomoże Ci dokonywać bardziej przystępnych wyborów.

Myśl krytycznie:

Wybór łatwo dostępnych wzorców, komponentów lub systemu nie jest kosmitą, ale wymaga czasu i krytycznego myślenia. Nie istnieje coś takiego, jak „jeden idealny wzór”, ale może istnieć wiele opcji, które mogą zadziałać. Chodzi o to, żeby nauczyć się wyboru najlepszej opcji w danej sytuacji.

W kolejnych modułach testowych dowiesz się więcej o technikach i metodach oceny wzorców, komponentów i projektów systemów pod kątem ułatwień dostępu. Jednak przed tym etapem musisz się cofnąć i zadać sobie kilka podstawowych pytań, takich jak:

• Czy istnieje już dostępny wzorzec, komponent lub system projektowania?
• Jakie przeglądarki i technologie wspomagające osoby z niepełnosprawnością są obsługiwane?
• Czy są jakieś ograniczenia kodu/ramki lub inne integracje/czynniki/potrzeby użytkowników, które muszę wziąć pod uwagę?

W zależności od środowiska programistycznego i potrzeb użytkowników możesz mieć dodatkowe lub inne pytania. Potraktuj te pytania jako punkt wyjścia do oceny ułatwień dostępu.

Zaufane zasoby

Zanim zbudujesz coś zupełnie nowego, zachowaj szczególną ostrożność i przeanalizuj istniejące wzorce pod względem łatwości dostępu, komponentów i systemów projektowych. Po niewielkich poszukiwaniach możesz zdziwić się, czy uda Ci się znaleźć rozwiązanie (lub większą ich liczbę) odpowiadające Twoim potrzebom.

Doskonałymi materiałami na temat przystępnych wzorców, komponentów i systemów projektowania są:

• Ułatwienia dostępu
• Biblioteka Deque University
• System projektowania Gov.UK
• Komponenty
• MagentaA11y
• U.S. Web Design System (USWDS), stworzony na potrzeby rządu federalnego USA.
• Lista dostępnych wzorców z magazynu Smashing

W przypadku platform JavaScript poniższe zasoby są dość bezpośrednio dostępne i można je łatwo dostosować pod kątem ułatwień dostępu:

• Gdy CSS jest niewystarczający: wymagania dotyczące JavaScriptu dla komponentów z dostępem
• Dodaj reakcję
  • ReachUI
  • Reakit
  • Czakra
• Angular: biblioteka materiałów
• Vue: Vuetensils

Nie należy jednak polegać na stresowaniu, dlatego nie należy po prostu kopiować i wklejać kodu. Należy przy tym zakładać, że będzie pasować do danego środowiska i automatycznie spełniać potrzeby użytkownika. Dotyczy to wszystkich wzorców, komponentów i systemów projektowych, nawet jeśli są oznaczone jako w pełni dostępne.

Wszystkie zasoby należy traktować jako punkt wyjścia. Pamiętaj, aby przetestować wszystko.

Obsługa przeglądarek i technologii wspomagających osoby z niepełnosprawnością (AT)

Po zbadaniu kilku wzorców podstawowych, komponentów lub pełnego systemu projektowania, który może sprawdzić się w Twoim środowisku programistycznym, możesz przejść do pomocy w zakresie technologii wspomagających. Jednym z głównych rodzajów AT, na których warto się skupić przy ocenie wzorców, komponentów i systemów projektowania, są czytniki ekranu.

Czytniki ekranu zostały opracowane z myślą o konkretnych przeglądarkach i najlepiej będą działać z nimi. Zagadnienie to omówimy bardziej szczegółowo w module dotyczącym testowania AT, ale do oceny wzorców warto rozumieć, jakie kombinacje występują w tych kombinacjach, aby wiedzieć, czego potrzebujesz w zakresie wsparcia.

Obsługa przeglądarek jest zasadniczo skomplikowana, a po dodaniu urządzeń AT i specyfikacji ARIA wszystko staje się jeszcze trudniejsze.

Nie wszystkie to jednak złe wieści. Na szczęście przydatne materiały, takie jak Ułatwienia dostępu w HTML5, Pomoc dotycząca ułatwień dostępu i Lista kontrolna programowania niestandardowego na potrzeby kontroli dostępu opracowane przez WCAG, pomagają nam lepiej zrozumieć bieżącą obsługę przeglądarek i urządzeń AT, a nawet dowiedzieć się, kiedy w ogóle należy używać ARIA.

W tych materiałach opisujemy różne dostępne podelementy wzorców HTML i ARIA, w tym testy społecznościowe typu open source. Możesz też zapoznać się z przykładami wzorców dla przeglądarek komputerowych i mobilnych oraz urządzeń w sieci AT. Te materiały pomogą Ci w podjęciu bardziej przystępnych decyzji dotyczących wzorców, komponentów i systemów projektowania, z których możesz skorzystać.

Inne uwagi

Po wybraniu kilku dostępnych wzorców podstawowych lub komponentów oraz uwzględnieniu obsługi przeglądarki i urządzenia w sieci AT możesz przejść do bardziej szczegółowych pytań kontekstowych dotyczących wzorca, komponentu, systemu projektowania i środowiska programistycznego.

Jeśli na przykład pracujesz w systemie zarządzania (CMS) lub masz starszą wersję kodu, możesz korzystać z pewnych ograniczeń w zakresie wzorców. Po sprawdzeniu można szybko wybrać kilka wzorców do 1 lub 2.

Wiele platform JavaScript umożliwia programistom korzystanie z prawie każdego wybranego wzorca. W takich przypadkach możesz mieć mniej ograniczeń i wybrać najbardziej dostępną opcję wzoru.

Przy wyborze wzoru, komponentu lub systemu projektowania warto wziąć pod uwagę dodatkowe kwestie, takie jak:

• Występy
• Bezpieczeństwo
• Optymalizacja witryn pod kątem wyszukiwarek
• Obsługa tłumaczeń
• Integracja z rozwiązaniami innych firm

Te czynniki niewątpliwie będą miały wpływ na Twój wybór wzoru, ale musisz też wziąć pod uwagę osoby, które tworzą treść i kod. Wybrany wzór musi być na tyle rozbudowany, by obsłużyć potencjalne ograniczenia dotyczące treści użytkowników.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o wzorcach