Wzorce, komponenty i systemy projektowania

Wiele osób korzysta z rozwoju opartego na komponentach, używając przewodników po stylach wzorców, bibliotek komponentów lub pełnych systemów projektowania w ramach procesu programowania. Nawet jeśli nie używasz tych narzędzi formalnie, prawdopodobnie stosujesz podobny proces do dzielenia dużego projektu strony internetowej, aplikacji lub innego produktu cyfrowego na części, które można łatwo zarządzać.

Podobnie jak w przypadku budowy fizycznej konstrukcji, ważne jest, aby tworzyć pojedyncze elementy. Najpierw fundamenty, konstrukcja, ściany, okna, dach i wszystko pomiędzy. Narzędzie do tworzenia aplikacji oparte na komponentach umożliwiają nam to w przypadku witryn, aplikacji i innych produktów cyfrowych.

Zalety tworzenia opartego na komponentach obejmują możliwość dzielenia się na części, które można łatwo zarządzać, dzięki czemu można skrócić czas potrzebny na tworzenie komponentów wielokrotnego użytku. Umożliwia ona projektantom, programistom front-endu i back-endu oraz zespołowi ds. kontroli jakości jednoczesną pracę. Klienci, projektanci, kierownicy projektów i inni użytkownicy cenią sobie tę funkcję, ponieważ mogą wyświetlić podgląd procesu tworzenia i korzystać z aktualnego przewodnika stylu po opublikowaniu witryny.

Gdy jednak spojrzymy na wzorce, komponenty i systemy projektowania pod kątem ułatwień dostępu, pojawiają się pewne pytania. Jakie wzorce są najlepsze pod względem ułatwień dostępu? Czy lepiej użyć sprawdzonego wzorca lub biblioteki, czy utworzyć nowe? Skąd wiesz, czy te wzorce rzeczywiście pomogą użytkownikom?

Wśród niezliczonych dostępnych opcji łatwo pogubić się w wzorach, komponentach i systemach projektowania. Z tego modułu dowiesz się ogólnie, jak oceniać wzorce, komponenty i systemy projektowania pod kątem dostępności. Podamy Ci też punkt wyjścia, który pomoże Ci podejmować bardziej dostępne rozwiązania.

Krytyczne myślenie

Wybór dostępnego wzorca, komponentu lub systemu projektowania nie jest trudny, ale wymaga czasu i krytycznego myślenia. W zasadzie nie ma czegoś takiego jak „jeden idealny wzór”, ale może być wiele opcji, które mogą się sprawdzić. Chodzi o naukę wybierania najlepszej opcji w konkretnej sytuacji.

W kolejnych modułach testowania znajdziesz więcej informacji o technikach i metodach oceny wzorów, komponentów i systemów projektowania pod kątem dostępności. Zanim to zrobisz, musisz zadać sobie kilka podstawowych pytań, takich jak:

• Czy istnieją już odpowiednie wzorce, komponenty lub systemy projektowania?
• Jakie przeglądarki i usługi wspomagające (AT) obsługuję?
• Czy istnieją jakieś ograniczenia dotyczące kodu lub platformy? Czy są inne integracje, czynniki lub potrzeby użytkowników, które powinienem wziąć pod uwagę?

W zależności od środowiska programistycznego i potrzeb użytkowników możesz mieć inne pytania lub pytania dodatkowe. Zacznij od odpowiedzi na te pytania.

Zasoby ustalone

Zanim zaczniesz tworzyć coś zupełnie nowego, sprawdź, co już istnieje w zakresie dostępnych wzorów, komponentów i systemów projektowania. Po krótkim zastanowieniu się możesz znaleźć rozwiązanie (lub kilka) odpowiednie dla Twoich potrzeb.

Oto kilka przydatnych zasobów dotyczących dostępnych wzorów, komponentów i systemów projektowania:

• Komponenty dostępne
• Biblioteka ARIA Deque University
• Gov.UK Design System
• Komponenty uwzględniające wszystkich
• MagentaA11y
• U.S. Web Design System (USWDS), stworzony dla rządu federalnego Stanów Zjednoczonych.
• Lista dostępnych wzorów z Smashing Magazine

W przypadku frameworków JavaScript te zasoby są domyślnie dostępne lub można je dostosować do potrzeb osób niepełnosprawnych:

• Gdy CSS nie wystarcza: wymagania dotyczące JavaScriptu w przypadku komponentów dostępnych
• Reakcja
  • ReachUI
  • Reakit
  • Chakra
• Angular: Biblioteka Material
• Vue: naczynia

Niezwykle ważne jest jednak, aby nigdy nie kopiować ani wklejać kodu, zakładając, że będzie on pasował do Twojego środowiska i automatycznie spełni potrzeby użytkowników. Dotyczy to wszystkich wzorców, komponentów i systemów projektowania, nawet jeśli są one oznaczone jako w pełni dostępne.

Wszystkie zasoby powinny być traktowane jako punkt wyjścia. Pamiętaj, aby wszystko przetestować.

Obsługa przeglądarek i technologii wspomagających (AT)

Po zapoznaniu się z kilkoma podstawowymi wzorami, komponentami lub pełnym systemem projektowania, który może być przydatny w Twoim środowisku programistycznym, możesz przejść do pomocy technicznej dotyczącej technologii wspomagających. Jednym z głównych typów technologii wspomagających, na których warto się skupić podczas oceny wzorów, komponentów i systemów projektowania, są czytniki ekranu.

Czytniki ekranu zostały zaprojektowane z myślą o konkretnych przeglądarkach i najlepiej działają w połączeniu z nimi. W modułach dotyczących testowania AT omówimy ten temat bardziej szczegółowo, ale na potrzeby oceny wzorców warto wiedzieć, że istnieją takie kombinacje, aby wiedzieć, jakiego wsparcia potrzebujesz.

Obsługa przeglądarek jest zazwyczaj skomplikowana, a sytuacja staje się jeszcze trudniejsza, gdy dodasz do tego urządzenia AT i specyfikacje ARIA.

Nie ma jednak tylko złych wiadomości. Na szczęście istnieją świetne zasoby, takie jak udostępnianie treści w HTML5, obsługa ułatwień dostępu i lista kontrolna dotyczące obsługi interfejsu ARIA, które pomagają nam lepiej zrozumieć obecną obsługę przeglądarek i urządzeń AT, a także kiedy należy używać ARIA.

Te zasoby opisują różne dostępne elementy podrzędne w schematach HTML i ARIA, w tym testy społeczności open source. Możesz też zapoznać się z kilkoma przykładami wzorów na potrzeby komputerów, przeglądarek mobilnych i urządzeń AT. Te zasoby mogą Ci pomóc w podejmowaniu bardziej przystępnych decyzji dotyczących wzorów, komponentów i systemów projektowania, których możesz użyć.

Inne uwagi

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

Jeśli na przykład pracujesz w systemie zarządzania (CMS) lub masz starszy kod, możesz mieć pewne ograniczenia dotyczące wzorów, których możesz używać. Po sprawdzeniu kilku opcji wzorów można szybko ograniczyć ich liczbę do jednej lub dwóch.

Wiele platform JavaScript pozwala deweloperom na używanie niemal dowolnego wzorca. W takich przypadkach możesz mieć mniej ograniczeń i wybrać opcję wzoru najbardziej odpowiadającą Twoim potrzebom.

Wybierając wzór, komponent lub system projektowania, należy wziąć pod uwagę dodatkowe kwestie, takie jak:

• Wyniki
• Bezpieczeństwo
• Optymalizacja witryn pod kątem wyszukiwarek
• Obsługa w zakresie tłumaczenia
• Integracje z rozwiązaniami innych firm

Te czynniki z pewnością wpłyną na wybór wzoru, ale musisz też wziąć pod uwagę osoby tworzące treści i sam kod. Wybrany wzór musi być wystarczająco niezawodny, aby obsługiwać wszelkie potencjalne ograniczenia dotyczące treści generowanych przez edytującego lub użytkownika, a także musi być zbudowany w sposób, który umożliwia korzystanie z niego deweloperom o różnym poziomie wiedzy o dostępności.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o wzorach