Przewodnik projektanta po podstawach projektowania dostępności sieci

Sieć powinna być miejscem, w którym każdy może uzyskać dostęp do tej samej treści z dowolnego miejsca na świecie. Elastyczne techniki przeszły długą drogę urządzenia agnostyczne. Ale co z projekty agnostyczne dostępności?

Dostępność sieci istnieje już od lat, ale jej wdrożenie wymaga nowych osiągnięć w dziedzinie technologii i tworzenia stron internetowych. Wielu programistów chce pomóc, ale trudno jest zrozumieć, jak zaprojektować je pod kątem dostępności, ponieważ jest tak wiele ruchomych części. Obejmuje to tekst o wysokim kontraście, strony audio dla niewidomych, zoptymalizowane media i awarie dla przeglądarek innych niż JS / CSS.

W tym poście omówię podstawy projektowania dostępności, co to jest, co zamierza rozwiązać, i kroki, które możesz podjąć, aby zacząć. Pamiętaj, że jest to niezwykle szczegółowy temat, a pełne zrozumienie zajmie miesiące lub lata praktyki. Ale korzyści są warte wysiłku, a wszystkie twoje projekty internetowe pozostawiają każdego odwiedzającego trwałe wrażenie dostępnych treści.

Wstęp do dostępności

Ogólnie rzecz biorąc, dostępność jest ideą budowania treści, aby tak było może być spożywany przez każdego. Mogą to być osoby niewidome, które nie potrafią czytać, i mogą to być osoby niepełnosprawne fizycznie, które nie mogą obsługiwać myszy lub klawiatury (lub żadnej).

Ale może również obejmować ludzi z niewielkie braki w wizji. To może obejmować ludzi z dysleksja lub problemy ze zrozumieniem czytania. W rzeczywistości pomysł “dostępność sieci” zawiera wszelkie możliwe upośledzenia, które mogą mieć wpływ na to, jak ktoś wchodzi w interakcję lub korzysta ze strony internetowej.

Być może ważniejsze jest to, co może zaoferować dostępność sieci, jak opisano tutaj w definicji Wikipedii:

Jednak Anne Gibson twierdzi w swoim poście List Apart, że definicja Wikipedii jest zbyt ogólnikowa i nie jest właśnie o osobach niepełnosprawnych. Naprawdę chodzi o każdy w sieci z całego świata może nie mieć optymalnego dostępu do Internetu.

Wielu ludzi uważa, że ​​dostępność jest tylko dla osób niewidomych, które nie potrafią czytać. Ale w rzeczywistości istnieją cztery podstawowe kategorie dostępności sieci:

1. Wizualny - słaba widoczność lub słaba / brak wzroku
2. Słuchowy - niedosłyszący lub głuchy
3. Poznawczy - problemy ze zrozumieniem lub wykorzystaniem informacji
4. Silnik - problemy z dostępnością fizyczną, które mogą wymagać specjalnych urządzeń wejściowych, takich jak klawiatury lub programy poleceń głosowych

Każda z tych kategorii posiada rozległe techniki zmienia się tak szybko, jak standardy internetowe. Istnieje jednak poczucie stabilności dzięki tym standardom ratyfikowanym w WCAG (Wytyczne dotyczące dostępności treści internetowych).

Niektóre strony internetowe, takie jak instytucje rządowe są prawnie zobowiązane do przestrzegania tych wytycznych. Stosują się na arenie międzynarodowej za pośrednictwem W3C.

Przyjrzyjmy się biurokracji związanej z dostępnością sieci, a następnie zanurzmy się w odpowiednie wskazówki dotyczące projektowania.

W3C & Accessible Design

Jest ich sporo akronimy związane z dostępnością sieci. Mogą one być skomplikowane, jeśli jesteś nowy w temacie, ale po uproszczeniu mam nadzieję, że będą miały większy sens.

• W3C (World Wide Web Consortium) - Międzynarodowa grupa definiująca standardy sieciowe dla protokołów, języków i przepisów. Wszystkie oficjalne wytyczne dotyczące dostępności podlegają tej organizacji.
• WAI (Web Accessibility Initiative) - Oficjalny program, który obejmuje wszystko na temat dostępności. Termin ten zawiera wszystkie zasady, wytyczne i techniki nowoczesnej dostępności.
• WCAG (Wytyczne dotyczące dostępności treści internetowych) - Grupa standardów i reguł, które pomagają projektantom oceniać ich strony internetowe na podstawie poziomu dostępności.
• ARIA (Dostępne bogate aplikacje internetowe) - Specyficzny standard definiujący sposób tworzenia dostępnych bogatych aplikacji opartych na JavaScript / Ajax i podobnych technologiach. Przeczytaj więcej o tym w tym poście Anna Monus.

Inne wytyczne istnieją pod parasolem WAI, w tym UAAG dla aplikacji użytkownika i ZNACZNIK dla narzędzi do tworzenia stron internetowych. Na razie powinniście być najbardziej zainteresowani sugestiami WAI i wytycznymi sformułowanymi przez zestaw reguł WAI pod nazwą WCAG.

Doskonałym źródłem wiedzy na ten temat jest ten post z W3C na temat niepełnosprawności, dzielący się historiami o tym, jak niepełnosprawni uzyskują dostęp do Internetu. Zrozumienie wszystkich skomplikowanych problemów może być trudne, nie mówiąc już o tym, jak je rozwiązać. Ale najlepszym źródłem są ludzie, którzy codziennie zmagają się z tymi problemami.

Innym ważnym tematem, który powinieneś zrozumieć, jest zgodność z WCAG. Dotyczy to poziom dostępności strony internetowej obejmujące wiele różnych czynników. Poziomy oparte są na zgodności z system oceny A, AA i AAA. Możesz to sprawdzić za pomocą narzędzia do sprawdzania dostępności stron internetowych. Najlepszy wynik to AAA.

Aby dowiedzieć się więcej o tych wytycznych, zapoznaj się z W3C Wprowadzenie do zrozumienia artykułu WCAG 2.0. Aby uzyskać więcej informacji, spójrz na te powiązane linki:

• WCAG 2.0 uproszczony
• Sekcja 508 Wydajność WCAG

Kroki w dostępnym projekcie

Bardzo polecam odwiedzenie strony internetowej projektu A11Y w celu uzyskania praktycznych wskazówek dotyczących dostępności. A11Y (który jest również numeremonim) to darmowy projekt open source obsługiwany przez GitHub, oferowanie technik projektowania stron internetowych.

Możesz przeglądać listę kontrolną elementów ułatwień dostępu, a nawet kilka wzorców projektowych dla elementów takich jak listy rozwijane, karty, akordeony, przyciski i okna modalne (między innymi).

Trudno jest nauczyć się wszystkich tych rzeczy i wdrożyć je jednocześnie. Zrób to krok po kroku i bądź gotów na dalsze badania, jeśli będziesz zdezorientowany.

Sprawdź poradniki A11Y i szybkie wskazówki, jak zacząć. Będziesz wpadać na konkretne sugestie, takie jak linki do treści i schematy kolorów o wysokim kontraście. Każda z tych technik ma swój własny poziom szczegółowości, więc implementacja polega głównie na testowaniu, aby zobaczyć, co działa.

Rozważmy niewidomych użytkowników, którzy mogą korzystać z automatycznego czytnika treści. Mogą też mieć tłumacza audio, a nawet specjalną klawiaturę do poruszania się po sieci za pomocą klawiszy, a nie myszy. Dlatego poprawny semantyczny HTML (spójrz na ten artykuł) jest tak ważny przy takich właściwościach jak tabindex i klucz dostępu.

Jeśli chcesz się zanurzyć, rozważ wzięcie tematu gotowości do użycia. Możesz studiować architekturę i dostosować projekt do swojego projektu.

Narzędzia do testowania dostępności

Jeśli chcesz zacząć, wybierz obszar dostępności i wypróbuj go. Następnie możesz użyć narzędzi do testowania, aby ocenić swój poziom sukcesu.

Warto wspomnieć, że ten proces może być frustrujące. Jest tak wiele do rozważenia, a wytyczne WCAG są tak trudne do zrozumienia, że ​​możesz skończyć z przeładowaniem informacjami.

Ważną rzeczą jest po prostu ruszanie się. Wybierz jeden obszar dostępności i skup się na nim. Następnie użyj tych narzędzi, aby poprawić i poprawić swoją pracę.

Na przykład możesz spróbować pracować ze specyfikacjami kontrastu WCAG do poprawić czytelność. Po wybraniu kolorów użyj tego bezpłatnego narzędzia do sprawdzania współczynnika kontrastu, aby sprawdzić, czy działają razem.

Niestety wytyczne WCAG 2.0 są tak mylące, że możesz mieć trudności ze zrozumieniem wymagań. Ale im więcej będziesz próbował, tym więcej się nauczysz i tym lepiej zrozumiesz.

Aby przetestować witrynę, która jest już online, sprawdź WAVE. To jest darmowy wizualny sprawdzanie wyświetla błędy, alerty, problemy z kontrastem i inne szczegóły strony internetowej. Otrzymasz widok wizualny i listę problemów na pasku bocznym.

Na stronie Cynthia Says znajduje się kolejna darmowa aplikacja, która może sprawdź strony internetowe pod kątem oceny sukcesu WCAG A, AA, AAA, i sekcja 508 dotycząca zgodności z przepisami rządowymi.

A jeśli jesteś w open source, spójrz na te bezpłatne narzędzia do testowania dostępności w GitHub.

• HTML CodeSniffer
• Zautomatyzowane narzędzie do testowania dostępności
• Walidator WCAG

Dodatki do przeglądarki

Dodatki do przeglądarek zapewnią najszybsze i najłatwiejsze metody testowania dostępności. Możesz uruchomić je z dowolnego komputera na dowolnej stronie, aby uzyskać naprawdę użyteczne wyniki.

AInspector dla Firefoksa jest uważany za niezbędny element dostępności. Sprawdza to wszystko i jest znacznie dokładniejsze niż tester WAVE.

Użytkownicy Mozilli mogą także lubić WCAG Contrast Checker, który jest również darmowym dodatkiem.

Użytkownicy Chrome nie mają AInspectora, ale mają narzędzia programistyczne Accessibility utworzone oficjalnie przez Google. Dodaje to dodatkowe narzędzia do okna inspektora w celu sprawdzenia wytycznych dotyczących dostępności.

Użytkownicy Chrome mają także kontrolery jasności dla kontrastu kolorów i inne bezpłatne rozszerzenia.

Niestety nie mogłem znaleźć wiele dla użytkowników Safari, ale znalazłem jedno rozszerzenie dla Opery, które sprawdza zgodność z WCAG 2.0. Jeśli chcesz przeszukać Google wystarczająco mocno, możesz znaleźć więcej narzędzi.

Dalsze czytanie

Jeśli poważnie myślisz o nauce dostępności sieci, przygotuj się na długą drogę. To nie jest łatwe, ale jest bardzo satysfakcjonujące.

Do tej pory powinieneś dowiedzieć się więcej na temat rzeczywistej definicji dostępności sieci, powodów jej istnienia oraz drobnych szczegółów dotyczących tego, co deweloperzy powinni zrobić, aby ulepszyć swoje strony internetowe. Kolejnym krokiem są dalsze badania i praktyka, aby powiązać te zasady z przepływem pracy.

Sprawdź następujące posty, aby uzyskać więcej informacji, i zapoznaj się z wytycznymi WCAG, jeśli chcesz zdobyć wiedzę bezpośrednio ze źródła.

• Jak poprawić dostępność tabeli HTML za pomocą znaczników
• Dostępny projekt dla użytkowników niepełnosprawnych
• 6 porad dotyczących poprawy dostępności witryny
• Upewnij się, że Twoja witryna jest dostępna dla osób niedowidzących