Kompletny przewodnik po dostępnych komponentach front-end

Spis treści

Poniżej znajdziesz alfabetyczną listę wszystkich dostępnych komponentów. Pomiń spis treści lub po prostu przewiń w dół, aby przeglądać je pojedynczo.

• : style ostrości
• autouzupełnienie
• guziki
• karty
• karuzele
• przyciski „zamknij”
• suwaki treści
• pola wyboru
• systemy kolorów
• palety kolorów
• komiksy
• biblioteki komponentów
• monity o zgodę na pliki cookie
• bieżąca nawigacja po stronie
• tryb ciemny
• wykresy danych
• wizualizacje danych
• selektory dat
• wyłączone przyciski
• dzielniki
• style formularzy
• przypisy
• ukrywanie treści
• linki do ikon
• wejścia
• nawigacja za pomocą klawiatury
• spinki do mankietów
• przewijanie multimediów
• modal
• Menu nawigacji
• pola hasła
• preferuje-obniżona-*
• przyciski radiowe
• szkielety
• „pomiń” linki
• SVG
• zakładki
• stoły
• testowanie
• dostępność komponentów innych firm
• przełącz przełączniki
• narzędzia
• podpowiedzi
• odtwarzacze wideo/audio

Dostępne :focus

Każda przeglądarka ma domyślne style fokusu, ale po wyjęciu z pudełka nie są one bardzo dostępne. Celem :focus jest przekazanie użytkownikowi wskazówek, gdzie dokładnie się znajduje w dokumencie i pomoc w poruszaniu się po nim. Aby to osiągnąć, musimy unikać skupienia, które jest zbyt subtelne lub w ogóle niewidoczne. W rzeczywistości usunięcie konturu jest złym pomysłem, ponieważ usuwa wszelkie widoczne oznaki fokusu dla użytkowników klawiatury. Im bardziej oczywiste jest skupienie, tym lepiej.

Są sposoby na zaprojektowanie lepszych stylów :focus . W swoim artykule Wskazówki dotyczące stylów skupienia , Nic Chan podkreśla kilka pomocnych wskazówek, jak poprawić style skupienia za pomocą lepszej afordancji i odrobiny dopełnienia, przesunięcia i odpowiednich konturów. Potrzebujesz więcej zabawy ze stylami :focus ? Lari Maza też cię wspiera.

Możemy również użyć :focus-within , aby nadać styl elementowi nadrzędnemu skoncentrowanego elementu, oraz :focus-visible , aby nie pokazywać stylów fokusu podczas interakcji z myszą/wskaźnikiem, jeśli powoduje to jakiekolwiek problemy w projekcie.

Ważne jest, aby wziąć pod uwagę kwestie dostępności związane z :focus-visible : jak zauważył Hidde de Vries, nie wszyscy ludzie, którzy polegają na stylach fokusa, używają klawiatury i tworzą style fokusu tylko za pomocą klawiatury - zabiera również afordancję użytkownikom myszy, ponieważ fokus również wskazuje, że coś jest interaktywne (dzięki Jasonowi Webbowi za wskazówkę!) .

Na koniec warto zauważyć, że ostatnio Chrome, Edge i inne przeglądarki oparte na Chromium przestały wyświetlać wskaźnik ostrości (pierścień ostrości ), gdy użytkownik kliknie lub naciśnie przycisk (dzięki Kim Johannesen za wskazówkę!) .

Dostępne autouzupełnianie

Za każdym razem, gdy masz do czynienia z większym zestawem danych, czy to z mapą, wizualizacją danych, czy po prostu z wyborem kraju w kasie, autouzupełnianie może znacznie zwiększyć wkład klienta. Ale tak jak pomaga przy wprowadzaniu danych, musi również pomóc w ogłaszaniu opcji i wyboru użytkownikom czytników ekranu.

Gov.uk, zespół stojący za rządową usługą cyfrową w Wielkiej Brytanii, ma między innymi open-source'owy dostęp do autouzupełniania, komponent JavaScript, który jest zgodny z najlepszymi praktykami WAI-ARIA. Możesz wybrać, kiedy rozpocząć wyświetlanie sugestii i pozwala wyświetlić menu jako nakładkę pozycjonowaną bezwzględnie, lub domyślnie wybrać pierwszą sugestię. Zespół udostępnia również stronę demonstracyjną z dziesiątkami dostępnych przykładów i implementacji autouzupełniania.

Dostępne przyciski i łącza do ikon

Często zdarza się, że łącze lub przycisk nie zawiera tekstu, ale składa się tylko z ikony — na przykład kompaktowego paska nawigacyjnego lub ikon społecznościowych. Ale jak upewnić się, że tego rodzaju linki do ikon są w pełni dostępne? Jak się okazuje, nie jest to tak proste, jak mogłoby się wydawać.

Aby pokazać, jak możemy działać lepiej, Kitty Giraudel poświęciła temu zagadnieniu artykuł „Dostępne linki do ikon”. Używają linku ikony składającego się z SVG z kultowym ptakiem Twittera, aby zilustrować ten punkt, i pokazują krok po kroku, jak to zrobić: z tekstem opisowym, który jest wizualnie ukryty, a następnie usuwając znaczniki SVG z drzewa dostępności za pomocą aria-hidden i, na koniec, skorygowanie faktu, że elementy svg mogą być skoncentrowane na Internet Explorerze poprzez dodanie atrybutu focusable . Na końcu artykułu Kitty pokazuje również, jak zamienić to wszystko w mały komponent React .

Mały szczegół, który zrobi ogromną różnicę dla wielu użytkowników.

W tworzeniu dostępnych przycisków ikon i inkluzywnie ukrytych Sara Soueidan i Scott O'Hara zajmują się wszystkimi drobnymi zawiłościami i szczegółami przycisków ikon, badając szereg technik, aby to zadziałało. Sara i Scott badają różne techniki, sugerując użycie odpowiedniej techniki dla dostępnego wizualnie ukrytego tekstu — tekstu, który będzie wizualnie ukryty, ale dostępny dla czytników ekranu. Można to zrobić za pomocą klasy narzędziowej .sr-only , albo hidden i aria-labelledby , albo samej aria-label . Sara nie polecałaby używania samej ikony SVG jako etykiety przycisku, kiedy mogę ją umieścić bezpośrednio na samym przycisku.

Ogólnie jednak nadal istnieje spore zamieszanie, którego elementu użyć do interakcji z użytkownikiem: kiedy używamy linków, a kiedy używamy przycisków? Marcy Sutton napisała szczegółowy artykuł na temat Łącza kontra przyciski w nowoczesnych aplikacjach. Za pomocą linku odwiedzający przechodzi do nowego zasobu, odrywając go od aktualnego kontekstu. Ale przycisk skłania do zmiany interfejsu.

Marcy przedstawia przypadki użycia zarówno linków, jak i przycisków w aplikacjach jednostronicowych, pokazując, że przycisk jest idealnym elementem do otwierania okna modalnego, wywoływania wyskakujących okienek, przełączania interfejsu lub odtwarzania treści multimedialnych. Możesz również sprawdzić artykuł Vadima Makeeva „Kiedy przycisk nie jest przyciskiem?”.

Dostępne przyciski niepełnosprawnych

W przypadku długich formularzy internetowych dość często zdarza się, że przycisk „Kontynuuj” jest wyłączony, dopóki klient nie poda poprawnie wszystkich danych. To zachowanie działa jako wskaźnik, że coś jest nie tak z formularzem i nie można go ukończyć bez przejrzenia danych wejściowych. Działa to, jeśli wbudowana walidacja dla każdego pola wejściowego działa dobrze i nie działa w ogóle, gdy jest usterka lub błędna.

W „Disabled Buttons Suck” Hampus Sethfors podkreśla wady nieaktywnych przycisków. Mając je na miejscu, komunikujemy, że coś jest nie tak, ale tak naprawdę nie wyjaśniamy, co jest nie tak ani jak to naprawić. Jeśli więc klient przeoczył komunikat o błędzie — czy to w długiej formie na komputerze, czy nawet w krótkiej formie na telefonie komórkowym, zostanie on zgubiony. Pod wieloma względami utrzymywanie aktywnych przycisków i komunikowanie błędów jest bardziej wydajne.

A jeśli nie jest to możliwe, zapewnij przynajmniej wyjście za pomocą przycisku „Nie mogę wypełnić formularza, pomóż”, aby obsługa klienta mogła skontaktować się z klientami w przypadku problemów. Jeśli potrzebujesz bardziej szczegółowego odświeżenia formularzy internetowych, „Projektowanie formularzy od jednego do zera” zapewni Ci zajęcie.

W swoim artykule na temat CSS-Tricks, Sandrina Pereira bada problem polegający na tym, że powszechny sposób używania <button disabled> uniemożliwia nie tylko kliknięcie, ale także fokus. Choć może się to wydawać nieszkodliwe, powoduje zamieszanie wśród użytkowników czytników ekranu. Jej sugestia: Zamiana disabled z wyłączonym aria-disabled sprawia, że ​​wrażenia są przyjemniejsze, ponieważ przycisk jest nadal dostępny po fokusie i może również wywołać podpowiedź — chociaż jest oznaczony jako wyłączony.

Dostępne karty

Karty mają wiele zalet. Działają dobrze na urządzeniach mobilnych, zapewniają duże obszary kliknięć, a fakt, że można je układać zarówno w poziomie, jak i w pionie, ułatwia wiele decyzji dotyczących układu. Jednak nie ma standardu ułatwień dostępu, który należy przestrzegać, nie ma elementu <card> ani wzorca projektowego ARIA. Zamiast tego potencjalne bariery dostępności, które możesz napotkać, zależą od przeznaczenia i zawartości karty. W swojej kolekcji elementów dołączanych Heydon Pickering analizuje kilka kombinacji prostego komponentu karty i jak zachować równowagę między strukturą dźwięku HTML a ergonomiczną interakcją.

Adrian Roselli napisał również świetny artykuł, w którym omawia aspekt kart, który może łatwo zmienić się w ich główną pułapkę ułatwień dostępu: duże obszary kliknięć. Mogą tworzyć bardzo szczegółowe kontrolki, gdy użytkownik używa czytnika ekranu do poruszania się po nich; dla użytkowników głosowych wybór wezwania do działania może być mylący. Adrian pokazuje, jak małe planowanie może rozwiązać ten problem.

Kolejny szczegółowy opis dostępnych komponentów kart pochodzi od zespołu Nomensa: w swoim poście na blogu przyglądają się typowym problemom związanym z kartami i blokują linki oraz dzielą się cennymi wskazówkami, jak uczynić Twoje karty bardziej dostępnymi — poprzez zmianę kolejności treści w celu ulepszenia na przykład semantyka.

Dostępne karuzele i suwaki treści

Dostępna karuzela brzmi trochę jak oksymoron — chociaż istnieje wiele skryptów zapewniających tę funkcjonalność, tylko kilka z nich jest dostępnych. Teraz są oczywiście dostępne suwaki zasięgu, ale karuzele to nieco inny element. Jak zauważa Alison Walden w swoim artykule „Jeśli musisz korzystać z karuzeli, udostępnij ją”, osoba widząca nie jest w ogóle zmuszana do korzystania z karuzeli, ale użytkownicy klawiatury są zmuszeni do poruszania się po całej karuzeli. Przynajmniej ukryty link „pomiń” może pojawić się na fokusie klawiatury. Ponadto, gdy osoba przejdzie przez wszystkie zestawy paneli, uwaga powinna przesunąć się na kolejny interaktywny element, który następuje po karuzeli.

Heydon Pickering sugeruje używanie znaczników listy do grupowania slajdów, dołączania przycisków poprzedniego i następnego, punktów przyciągania oraz używania niewidocznych połączonych elementów usuniętych z fokusa. Artykuł zawiera również przykładowy kod, który wykorzystuje IntersectionObserver, więc możesz potrzebować do niego wypełnienia.

Dostępne przyciski zamykania

Przyciski „Zamknij” są wszędzie — w modach, reklamach, wiadomościach potwierdzających, monitach o pliki cookie i wszelkich nakładkach, które pojawią się w Twoim interfejsie. Niestety, funkcjonalność ta jest często ograniczona do użytkowników myszy, pozostawiając poza tym użytkowników czytników ekranu i klawiatury. Możemy to naprawić.

W „Dostępnych przyciskach zamykania” Manuel Matuzovic wnika w szczegóły, podkreślając 11 przykładów i wzorów niedostępnych przycisków zamykania, a także 5 przykładów przycisków zamykania, które działają całkiem dobrze. Najłatwiejszym sposobem rozwiązania tego problemu jest umieszczenie przycisku z widocznym tekstem i tylko wizualnie dostępną ikoną oraz upewnienie się, że opis przez czytniki ekranu nie jest zanieczyszczony opisem ikony. Manuel podaje również przykłady kodu 5 przycisków zamykających, które możesz od razu zastosować w swojej pracy.

Dostępne pola wyboru i przyciski radiowe

Stary dobry problem: jak stylizować pola wyboru i przyciski opcji, aby upewnić się, że wyglądają, no cóż, przynajmniej podobnie, w większości przeglądarek — jednocześnie zapewniając, że są również dostępne? W swoim artykule Sara Soueidan omawia kilka technik, o których należy pamiętać, aby osiągnąć pożądany efekt.

Sara omawia różne techniki ukrywania elementów, jak każdy z nich wpływa na dostępność treści i jak je ukrywać wizualnie, aby można je było zastąpić bardziej stylową alternatywą: SVG.

Ukrywając element interaktywny, musimy upewnić się, że wybraliśmy technikę ukrywania, która sprawi, że będzie on dostępny dla czytnika ekranu, umieść go na tym, co go wizualnie zastępuje, tak aby użytkownik korzystający z nawigacji dotykowej mógł znaleźć go tam, gdzie tego oczekuje, a następnie uczynić go przezroczystym. Sara udostępnia również demonstracje na żywo, z których możemy skorzystać od razu, wraz z przydatnymi odnośnikami do artykułów do dalszej lektury.

Dostępne systemy kolorów

Właściwy kontrast kolorów jest niezbędnym elementem zapewnienia, że ​​nie tylko osoby z wadami wzroku mogą z łatwością korzystać z Twojego produktu, ale także wszyscy inni, gdy znajdują się w słabym oświetleniu lub korzystają ze starszych ekranów. Jeśli jednak kiedykolwiek próbowałeś samodzielnie stworzyć dostępny system kolorów, prawdopodobnie wiesz, że może to być nie lada wyzwaniem.

Zespół Stripe postanowił niedawno podjąć wyzwanie i przeprojektować istniejący system kolorów. Korzyści, jakie powinien zapewniać po wyjęciu z pudełka: przekazywanie wskazówek dotyczących ułatwień dostępu, stosowanie wyraźnych i żywych odcieni, które użytkownicy mogą łatwo odróżnić od siebie, oraz jednolita wizualna waga, w której kolor nie wydaje się dominować nad innymi. Jeśli chcesz dowiedzieć się więcej o ich podejściu, ich post na blogu na temat dostępnych systemów kolorów dostarczy Ci cennych informacji.

Dostępne palety kolorów

Znalezienie idealnego odcienia lub odcienia koloru to nie tylko kwestia gustu, ale także dostępności. W końcu, jeśli brakuje kontrastu kolorów, produkt może w najgorszym przypadku stać się bezużyteczny dla osób z wadami wzroku. Poziom AA WCAG 2.0 wymaga współczynnika kontrastu co najmniej 4,5:1 dla zwykłego tekstu.) i 3:1 dla dużego tekstu, a WCAG 2.1 wymaga współczynnika kontrastu co najmniej 3:1 dla grafiki i komponentów interfejsu użytkownika (takich jak wprowadzanie formularza granice). AAA wymaga współczynnika kontrastu co najmniej 7:1 dla zwykłego tekstu i 4,5:1 dla dużego tekstu. Bardzo szczegółowy kontroler kontrastu, który pomoże Ci wykryć potencjalne pułapki z wyprzedzeniem, pochodzi z Gianluca Gini: Geenes.

Narzędzie pozwala majstrować przy zakresach odcieni i nasycenia oraz zastosować palety kolorów do jednej z trzech wybieralnych makiet interfejsu użytkownika. Po nałożeniu możesz wywołać różne rodzaje wad wzroku, aby zobaczyć, jak osoby dotknięte chorobą widzą kolory, a na koniec podjąć świadomą decyzję dotyczącą najlepszych odcieni dla twojej palety. Aby od razu użyć kolorów, po prostu skopiuj i wklej ich kod lub wyeksportuj je do Sketch. W DevTools można również emulować niedobory wzroku.

Zrozumienie wad wzroku

Prawdopodobnie słyszałeś już o protanopii, deuteranopii lub jaskrze. Ale w jaki sposób osoby z takimi wadami wzroku faktycznie widzą twoje kombinacje kolorów? Narzędzie Who Can Use Coreya Ginnivana symuluje to za Ciebie.

Wprowadź tło i kolor tekstu, a narzędzie obliczy dla Ciebie współczynnik kontrastu oraz ocenę WCAG. Aby uczłowieczyć te raczej abstrakcyjne liczby, Kto może używać , pokazuje również listę różnych typów widzenia, ile osób ma na nie wpływ i oczywiście symulację kombinacji kolorów dla każdego typu. Świetny mały pomocnik, aby lepiej zrozumieć efekt koloru.

Dostępne komiksy

Kiedy używamy nieco bardziej złożonych kształtów i układów w Internecie, czasami wydaje się, że o wiele łatwiej jest po prostu zapisać je jako obraz pierwszego planu lub tła i wyświetlać różne obrazy na małych i dużych ekranach. Odnosi się to do skomplikowanych wykresów i wykresów, a także do starych dobrych komiksów z gadającymi dymkami, ale co by było, gdybyśmy mogli całkowicie zmienić to doświadczenie?

Comica11y to eksperyment Paula Spencera, którego celem jest osiągnięcie wszechstronnego doświadczenia z czytania komiksów online. Co by było, gdybyśmy mogli mieć różne tryby czytania komiksu, np. z napisami, odpowiednie zarządzanie fokusem do nawigacji między panelami, tryb wysokiego kontrastu, filtry dla ślepoty kolorów SVG, dymki programistyczne, tekst wybieralny i tłumaczony, obsługa LTR i RTL, a nawet regulowane rozmiary czcionek? Wspaniała inicjatywa, która pokazuje, jak daleko możemy sprostać wyzwaniom związanym z interfejsem użytkownika i korzystać z sieci, aby znacznie poprawić wrażenia.

Dostępne biblioteki komponentów

Podczas gdy wiele tworzonych przez nas bibliotek komponentów stara się uwzględnić wszystkie typowe elementy (akordeony, tabele, karuzele, listy rozwijane, a także typografię, kolory i cienie), skupiamy się na No Style Design System autorstwa Adama Silvera przede wszystkim wokół ułatwień dostępu i formularzy internetowych.

Jako system stworzony i używany w jego książce o wzorcach projektowania formularzy, biblioteka Adama zapewnia zestaw dostępnych komponentów do wszystkiego, od autouzupełniania, pól wyboru i ujawniania haseł po radia, pola wyboru i steppery. Większość z nich ma minimalistyczny styl CSS z czystymi, dostępnymi znacznikami.

A jeśli potrzebujesz nieco bardziej zaawansowanych komponentów, Heydon Pickering's Inclusive Components — wspomnieliśmy o kilku przykładach z niego powyżej — pomoże ci: z obszernymi samouczkami na temat dostępnych kart, tabel danych, powiadomień, suwaków, interfejsów z zakładkami, podpowiedzi, menu i przełączników.

Dostępne monity o zgodę na pliki cookie

Nakładki i wyskakujące okienka są zawsze problematyczne. Ale szczególnie dla użytkowników czytników ekranu, czasami te monity są niezwykle trudne do zniesienia, aby ustawić jakiekolwiek ustawienia, a nawet potwierdzić użycie plików cookie w witrynie. W swojej 15-minutowej rozmowie na temat „Czytniki ekranu i zgody na pliki cookie” Leonie Watson szczegółowo wyjaśnia, jakie są słabe doświadczenia związane z dostępnością wyskakujących okienek dotyczących zgodności. W niektórych przypadkach użytkownicy prześlizgują się po prośbach o zgodę, nie zdając sobie z nich sprawy, w innych monity są niemożliwe do zaakceptowania, co skutkuje niemożnością korzystania z witryny w ogóle.

Jak więc możemy je ulepszyć? W Banerach i dostępności plików cookie Sheri Byrne-Haber zwraca uwagę na typowe problemy, które zwykle mają podpowiedzi dotyczące plików cookie: od wyglądu, po pułapki skupiające, wygląd w kolejności zakładek, rodzaj akceptacji i alternatywne formaty ujawniania zgody. Quentin Bellanger zapewnia podstawowy przykład kodu modalności zgody na pliki cookie oraz samouczek wraz z nim. Istnieją również bezpłatne rozwiązania typu open source: Osano Cookie Consent i cookie-consent-box, ale mogą one wymagać pewnych prac w zakresie ułatwień dostępu.

Dostępne stany nawigacji bieżącej strony

Kolor to skuteczny sposób na przekazanie znaczenia, ale zawsze dobrym pomysłem jest posiadanie drugiego wizualnego wskaźnika dla osób słabo widzących lub z wadami widzenia kolorów. Na przykład ikona. Callum Hart opiera się na kombinacji kolorów i ikon, aby wskazać stronę, na której aktualnie znajduje się użytkownik. W swoim poście na blogu „Dostępny stan nawigacji na bieżącej stronie” dzieli się cennymi spostrzeżeniami na temat rozważań leżących u podstaw tej decyzji projektowej.

Od wstawienia ikony SVG w HTML i użycia funkcji aria-hidden w celu ukrycia jej przed technologiami pomocniczymi, po używanie ems zamiast pikseli i przekazanie dodatkowego kontekstu użytkownikom czytników ekranu za pomocą atrybutu aria-current , post zawiera szczegółowe informacje o tym, jak zapewnić prawdziwie dostępny stan nawigacji.

Kompletny przewodnik po trybie ciemnym w Internecie

Tryb ciemny szybko staje się preferencją użytkowników, a Apple, Windows i Google mają go zaimplementować w swoich systemach operacyjnych. Ale co z trybem ciemnym w sieci? Adhuham napisał obszerny przewodnik po trybie ciemnym, który zagłębia się w różne opcje i podejścia do wdrażania projektu trybu ciemnego w Internecie.

Na początek przewodnik przygląda się względom technicznym, jakie pociąga za sobą wdrożenie trybu ciemnego, obejmującym różne podejścia do przełączania motywów i sposobu przechowywania preferencji użytkownika, aby były one konsekwentnie stosowane w całej witrynie i podczas kolejnych wizyt. Wskazówki dotyczące obsługi stylów agenta użytkownika za pomocą metatagu color-scheme pomagają uniknąć potencjalnych sytuacji FOIT.

Omówiono również kwestie projektowe z cennymi wskazówkami, jak przygotować obrazy, cienie, typografię, ikony i kolory do trybu ciemnego. A na tym: aby upewnić się, że nie zepsujemy przypadkowo wysokiego kontrastu w trybie, spójrz na tryb Stylizacja dla trybu wysokiego kontrastu w systemie Windows ( dziękujemy za wskazówkę, Courtney Heitman! ).

Dostępne wykresy danych

Wizualizacje danych to świetny sposób na wyróżnienie informacji. Jednak wiążą się również z własnymi wyzwaniami związanymi z dostępnością. Kiedy Sara Soueidan połączyła siły z SuperFriendly, aby stworzyć dostępną mikro-stronę dla rocznego raportu Khan Academy, chciała się upewnić, że sposób prezentacji i implementacji danych jest jak najbardziej przystępny, niezależnie od tego, jak odwiedzający eksploruje witrynę. Jej rozwiązanie: SVG.

W studium przypadku dotyczącym dostępnych wykresów danych Sara podsumowała wszystko, co należy wziąć pod uwagę, aby udostępnić wykresy SVG i wizualizacje — zaczynając od najważniejszego kroku, jakim jest wybór odpowiedniej techniki osadzania. Wyjaśnia również, dlaczego należy unikać prób udostępnienia wykresu SVG za pomocą ról ARIA i dlaczego Sara nie wybrała <figure> do ich osadzenia. Fantastyczny przewodnik referencyjny. Plus: szczególnie na wykresach moglibyśmy również użyć lepiej dostępnych etykiet tekstowych, a Sara opisuje je również w osobnym artykule.

Dostępne wizualizacje danych

Wizualizacje danych często zawierają ważne informacje, na których użytkownicy muszą działać. Chociaż czasami zamiast tego możemy użyć dużych liczb z krótkimi zdaniami, wizualizacje mogą pomóc w szybszym zrozumieniu zmian i dużej ilości informacji. Ale to oznacza, że ​​informacje muszą być łatwe do zrozumienia, a dotyczy to przede wszystkim doboru kolorów, sposobu prezentacji informacji, etykiet, legend oraz wzorów i kształtów. W serii artykułów na temat dostępności w wizualizacjach danych Sarah L. Fossheim przedstawia przydatne wskazówki i zasoby na ten temat, a także przykłady, nakazów i zakazów, o których należy pamiętać podczas projektowania wizualizacji danych z ułatwieniami dostępu.

Sarah sugeruje, aby nie polegać na kolorze w celu wyjaśnienia danych i ogólnie unikać jasnych kolorów o niskim kontraście. Używanie wzorów i kształtów oprócz koloru jest przydatne, a przejrzysty język, etykiety i legendy mogą pomóc w jasnym wyjaśnieniu wizualizacji danych. Każdy artykuł zawiera mnóstwo przykładów i zasobów do dalszego czytania. Warto również sprawdzić: recenzję Sarah dotyczącą wizualizacji danych dotyczących wyborów prezydenckich w USA ( dzięki Stephanie Eckles za wskazówkę! ).

Dostępne selektory dat

Istnieją dziesiątki bibliotek selektorów dat, ale zawsze dobrze jest mieć niezawodne konie robocze, które działają tylko w różnych przeglądarkach, nie mają ciężkich zależności, są dość dobrze napisane i spełniają wszystkie główne wymagania dotyczące dostępności.

Duet Date Picker jest właśnie taki. Jest to dostępny, zgodny z WCAG 2.1 selektor dat, który można zaimplementować i używać w dowolnej strukturze JavaScript lub w ogóle jej nie używać. Jest wyposażony we wbudowaną funkcjonalność, która pozwala ustawić minimalną i maksymalną dozwoloną datę, i waży około 10 KB po zminimalizowaniu i zgzipowaniu (obejmuje to wszystkie style i ikony).

Jeśli potrzebujesz alternatywy, sprawdź React Dates, bibliotekę wydaną przez Airbnb, zoptymalizowaną pod kątem internacjonalizacji, a jednocześnie dostępną i przyjazną dla urządzeń mobilnych.

Stylizacja poziomych przegródek

Elementy <hr> są zwykle dość nudne. Proste, poziome linie, które zapewniają wizualną przerwę i dzielą treść. Ale czy wiesz, że można je stylizować za pomocą CSS i SVG, aby nadać treści i projektom miły osobisty charakter?

Sara Soueidan zrobiła dokładnie to: <hr> na jej osobistej stronie nie są wyświetlane jako nudne linie, zamiast tego zobaczysz ptaki siedzące na drucie. Aby pomóc Ci uatrakcyjnić także <hr> , Sara podsumowała, w jaki sposób stylizowała linie poziome za pomocą magii CSS i SVG. Szuka również sposobów na ich dalsze ulepszanie, tak aby dostosowywały się do różnych kontekstów, pozostając jednocześnie semantycznymi i dostępnymi. Ładny mały szczegół.

Dostępne style formularzy w różnych przeglądarkach

Czy kiedykolwiek zmagałeś się z ukrywaniem i stylizowaniem niestandardowych pól wyboru i przycisków radiowych? A co z niestandardowymi stylami wyboru? A może dostępne rozwijane menu nawigacyjne? Cały czas budujemy i przebudowujemy te same komponenty, więc zróbmy to raz na zawsze.

„<select> your poison” Sarah Higley to obszerne, dwuczęściowe, szczegółowe omówienie wszystkich wyzwań i zawiłości stylizacji elementu <select> , z wariantami edytowalnymi i wielokrotnego wyboru, ich użyteczności porównawczej (z danymi!) oraz praktycznymi zaleceniami jak to zrobić dobrze.

Nowoczesne rozwiązania CSS dla starych problemów CSS Stephanie Eckles podkreśla wiele przydatnych nowoczesnych technik rozwiązywania wielu problemów, ale niektóre artykuły z jej serii poświęcone są formularzom: niestandardowe pola wyboru CSS, stylizowane przyciski opcji, wybierz style, dane wejściowe i obszary tekstowe.

Na swoim blogu Sara Soueidan szczegółowo wyjaśnia, jak ukryć i stylizować pola wyboru i przyciski radiowe. Bonus: przykłady kodu Adriana Roselli zapewniają dodatkowy wgląd w niedopracowane przełączniki. Fantastyczne zasoby do natychmiastowego użycia i przystępne stylizowanie formularzy.

Odpowiedzialne ukrywanie treści

Jak odpowiedzialnie ukryć zawartość, aby była niewidoczna, ale nadal dostępna dla czytników ekranu? Kitty Giraudel podsumowała różne sposoby ukrywania czegoś, czy to za pomocą HTML czy CSS, i kiedy użyć którego.

Jak sugeruje Kitty, możesz chcieć uniknąć zbyt wielu rozbieżności między treścią wizualną a podstawową treścią wystawioną na warstwę dostępności. Im bardziej są zsynchronizowane, tym lepiej. Kitty definiuje trzy różne scenariusze, które pomogą Ci ocenić, kiedy użyć której techniki: Jeśli chcesz ukryć coś zarówno wizualnie, jak i w drzewie ułatwień dostępu (na przykład pokaż/ukryj widżety, nawigacja poza ekranem lub zamknięte okno dialogowe), użyj opcji display: none lub hidden atrybut HTML. Jeśli chcesz ukryć coś w drzewie dostępności, ale zachować to widoczne, użyj aria-hidden="true" (prawidłowe przypadki to treści wizualne pozbawione znaczenia, ikony). I na koniec, jeśli chcesz coś ukryć, ale zachować dostępność, użyj wizualnie ukrytej grupy deklaracji CSS (np. dla treści uzupełniających, które zapewniają więcej kontekstu, takich jak przyciski ikon lub linki). Świetny przegląd.

Przypisy i przypisy z ułatwieniami dostępu

W swej istocie przypisy to niewiele więcej niż linki do skoku — linki do opisu źródła, umieszczone na dole dokumentu lub na pasku bocznym, albo pojawiające się w linii, jako mały akordeon. Ponieważ jednak przypisy są linkami do przeskoku, musimy upewnić się, że użytkownicy czytników ekranu rozumieją, kiedy linki są odniesieniami do przypisów — i możemy to zrobić za pomocą atrybutu aria-describedby . Licznik dla każdego linku byłby zaimplementowany za pomocą licznika CSS. Za pomocą :target podświetlamy wiersz, do którego przeskoczył czytelnik, i podajemy link zwrotny do właściwego miejsca przypisu w treści.

Kitty Giraudel szczegółowo wyjaśnia, jak tworzyć dostępne przypisy, a także możesz sprawdzić, jak tworzyć dostępne przypisy w React i użyć przypisów reakcji-a11y-przypisów, aby utworzyć je w React with Eleveny (podziękowania dla Kitty Giraudel za wskazówkę!) .

Dostępne wejścia

W 2019 roku WebAIM przeanalizował dostępność miliona najlepszych stron internetowych, dochodząc do szokującego wniosku: odsetek stron wolnych od błędów oszacowano na mniej niż jeden procent. Aby nasze witryny były dostępne i użyteczne dla osób korzystających z technologii wspomagających, musimy dobrze opanować podstawy semantycznego kodu HTML. Artykuł Oscara Braunerta na temat inkluzywnych danych wejściowych, ze swoim credo, jakim jest rozpoczynanie od małych rzeczy, dzielenie się nimi i wspólna praca, jest świetnym punktem wyjścia do tego.

Zaczynając od podstaw WAI, ARIA i WCAG, artykuł wyjaśnia, jak zwiększyć dostępność danych wejściowych. Wskazówki można wdrożyć bez zmiany interfejsu użytkownika i, jak mówi Oscar: „Jeśli masz wątpliwości, po prostu to zrób. Nikt tego nie zauważy. Z wyjątkiem niektórych użytkowników. I podziękują ci za to.

Idealne połączenie

Link to link to link, prawda? Cóż, link to coś więcej niż tylko klikalne słowo lub obraz. W swoim artykule „Idealne łącze” Rian Rietveld analizuje, jak napisać, zaprojektować i zakodować łącze, które działa dla wszystkich na każdym urządzeniu.

Rian odpowiada na pytanie, czy link powinien otwierać się w nowym oknie lub nowej karcie, jak sprawić, by teksty linków były zrozumiałe, jak obsługiwać linki do adresu e-mail, numeru telefonu lub pliku, co należy wziąć pod uwagę, umieszczając obraz w link, kiedy go podkreślić i jak radzić sobie ze stylami najechania i skupienia, a także sprawami semantycznymi i linkami wewnętrznymi. 360-stopniowe spojrzenie na temat.

Dostępna nawigacja za pomocą klawiatury w całej aplikacji

Dobrze przemyślana koncepcja nawigacji za pomocą klawiatury przynosi korzyści wszystkim: umożliwia osobom, które nie potrafią wygodnie korzystać z myszy, pomaga użytkownikom czytników ekranu w interakcji z aplikacją i zapewnia użytkownikom zaawansowanym dostęp do większej liczby skrótów, aby mogli pracować tak wydajnie, jak to tylko możliwe. Zazwyczaj obsługa klawiatury ogranicza się do określonych skrótów, ale zespół Discord postanowił pójść o krok dalej ze swoją aplikacją i rozszerzyć obsługę klawiatury do, no cóż, wszystkiego.

Studium przypadku „Jak Discord zaimplementował nawigację po całej aplikacji za pomocą klawiatury” zawiera cenne informacje na temat tego, w jaki sposób poradzili sobie z zadaniem – i oczywiście wyzwaniami, przed którymi stanęli po drodze. Jedno okazało się szczególnie trudne: jak konsekwentnie wskazywać, gdzie na stronie jest skupienie? Ponieważ istniejące rozwiązania dla Focus Rings nie sprawdziły się, zespół musiał zbudować własne rozwiązanie od zera i uczynić kod open source. Jeśli stoisz przed podobnym wyzwaniem, to jest dla Ciebie.

Dostępne menu dotknij/kliknij

Czy nadal dobrym pomysłem jest zaprojektowanie mega-rozwijanych otwierających się po najechaniu kursorem? Prawdopodobnie nie. Hover menu ma wiele problemów z użytecznością i dostępnością, ponieważ są niespójne, mylące i oczywiście wymagają alternatywnego rozwiązania dla urządzeń mobilnych. W rzeczywistości Mark Root-Wiley sugeruje, że nadszedł czas, aby porzucić menu kursora na rzecz jednoznacznych i dostępnych menu kliknięć.

W swoim artykule Mark szczegółowo opisuje, jak zbudować dostępne menu kliknięć, wraz z przydatnymi wskazówkami i odniesieniami z jego badań. Pomysł polega na tym, aby zacząć budować menu jako menu kontekstowe tylko w CSS, które używa li:hover > ul i li:focus-within > ul do wyświetlania podmenu. Następnie używamy JavaScript do tworzenia elementów <button> , ustawiania atrybutów aria i dodawania obsługi zdarzeń. Ostateczny wynik jest dostępny jako przykład kodu w CodePen i jako repozytorium GitHub. Powinno to być również dobrym punktem wyjścia dla twojego menu.

Dostępne komponenty przewijania multimediów

Jak byś poszedł o stworzenie responsywnego komponentu przewijania multimediów, który działa zarówno na telewizorach, telefonach, jak i komputerach stacjonarnych? Adam Argyle prowadzi Cię krok po kroku przez cały proces.

Zaprojektowany do przechowywania miniatur multimediów lub produktów, składnik przewijania jest zbudowany na <ul> z dostępnymi znacznikami. CSS przekształca skromną listę w płynne przewijanie, które prezentuje obrazy i przyciąga je do siatki. Aby dodać trochę finezji, JavaScript ułatwia interakcje z wędrującym indeksem, pomagając użytkownikom klawiatury pominąć przechodzenie przez dużą liczbę elementów, a wreszcie eksperymentalne zapytanie o media prefers-reduced-data zamienia w razie potrzeby przewijacz multimediów w lekkie środowisko . Mądry!

Dostępne modalne

Możesz mieć prosty modalny lub nakładkę na stronie, na przykład w celu potwierdzenia wpisu klienta, wyświetlenia kilku zdjęć w galerii lub po prostu potwierdzenia preferencji użytkownika. We wszystkich tych przypadkach budowanie dostępnego modalu okaże się nie lada przygodą, znaną również jako pułapka skupienia .

Jak szczegółowo wyjaśnia Eric Bailey, musisz określić granice uwięzionej treści, w tym pierwszy i ostatni przedmiot, do którego można się skupić, a następnie usunąć wszystko, co nie jest w nim zawarte, przenieść uwagę na uwięzioną treść, nasłuchiwać zdarzeń, które uciekły. granicę, przywróć poprzedni stan i przenieś fokus z powrotem na element interaktywny, który wyzwolił uwięzioną zawartość.

Najlepiej byłoby użyć czegoś tak prostego, jak element dialog w HTML, ale niestety ma to ogromne problemy z dostępnością. Dzięki Shadow DOM zarządzanie skupieniem również nie jest łatwe. Możemy użyć atrybutu inert , aby usunąć, a następnie przywrócić zdolność interaktywnych elementów do odkrycia i skupienia. W przypadku starszych przeglądarek możemy użyć inert wypełniaczy z Google Chrome i WICG.

• Dostępne okno modalne Scotta O'Hary jest niezawodnym, w pełni dostępnym skryptem do użycia.
• Kitty Giraudel wkrótce wyda a11y-dialog Next, lekki skrypt (1,6 KB), który przechwytuje i przywraca fokus, przełącza atrybuty aria–* i zamyka okno dialogowe po kliknięciu nakładki i Escape. Ważne jest, aby nie pomylić tej wersji z poprzednią (6.1.0), ponieważ opiera się ona na <dialog> , który wciąż nie obsługuje implementacji i ma utrzymujące się problemy z dostępnością.
• Możesz zajrzeć do Parvus, prostego, dostępnego, otwartego źródła obrazów bez zależności. W typowym scenariuszu mielibyśmy obraz połączony z większą wersją obrazu. W Parvus wystarczy dodać klasę .lightbox do linku otaczającego obraz, a skrypt zrobi wszystko inne automatycznie.

Dostępne pola hasła

„Pokaż hasło” i podpowiedzi do hasła sprawiają, że pola formularzy są bardziej użyteczne. Pomagają użytkownikom dowiedzieć się, czy błędnie wpisali swoje hasło, a także jaki wzorzec jest akceptowalny podczas tworzenia nowego. Jednak, jak się okazuje, często brakuje dostępności, jeśli chodzi o te rzeczy.

Aby pomóc ci poprawić sytuację, Nicolas Steenhout przygląda się bliżej dostępności funkcji pokaż/ukryj hasło i sposobom, aby upewnić się, że podpowiedzi do haseł są przydatne dla wszystkich. Od ulepszenia przycisków pokaż/ukryj z rolą switch i funkcji aria-live i aria-pressed do obsługi autouzupełniania, Nicolas podsumował wszystko, co musisz wiedzieć, aby uczynić sieć bardziej dostępną pod tym względem.

Wsparcie preferencji użytkownika z preferencjami prefers-reduced-*

Nie każdy użytkownik jest taki sam i chociaż niektórzy użytkownicy uwielbiają animacje, inni mogą mieć problemy medyczne dotyczące ruchu. Zapytanie o media prefers-reduced-motion umożliwia włączanie i wyłączanie animacji, ale istnieje jeszcze więcej rozwiązań do zarządzania animacjami w zależności od preferencji użytkownika. W swoim poście na blogu Elijah Manor omawia różne techniki, takie jak @media, matchMedia i niestandardowy hak React do obsługi animacji CSS, SVG SMIL i JavaScript.

Jeśli chodzi o udostępnianie treści dla wszystkich, warto wiedzieć o innym zapytaniu o media prefers-reduced-* , które nie jest jeszcze obsługiwane przez przeglądarki (ale można je emulować w przeglądarkach Polypane i Chromium): prefers-reduced-data . Wskazuje, kiedy użytkownik chce wykorzystać jak najmniej danych — na przykład, jeśli jego połączenie jest wolne lub jeśli dane są ograniczone.

• Tatiana Mac napisała bardzo szczegółowy artykuł na temat podejścia do animacji bez ruchu, sugerując umieszczenie wszystkich stylów specyficznych dla animacji w arkuszu stylów specyficznych dla animacji i serwowanie go tylko wtedy, gdy odwiedzający nie wskazał „Zmniejsz ruch”.
• Kitty Giraudel dostarcza wskazówek na temat implementacji trybu ograniczonego ruchu w przykładzie bankowego interfejsu użytkownika i przykładu kodu.
• Zespół Polypane podsumował to, co musisz wiedzieć o zapytaniu o media, aby już dziś zabezpieczyć swoją witrynę na przyszłość.

Dostępne szkielety

Szkielety zwykle nie mają sensownego sposobu prezentowania się czytnikom ekranu. Często używają aria-busy="true" podczas ładowania widżetu, ale tylko kilka czytników ekranu faktycznie honoruje ten atrybut. Więc jak zrobić lepiej?

Jak sugeruje Adrian Roselli, możesz użyć CSS, aby znaleźć dowolny węzeł z aria-busy="true" i ustawić go na display: none , aby uzyskać ten sam efekt dla użytkowników czytników ekranowych i innych. W swoim artykule „More Accessible Skeletons” prowadzi cię krok po kroku przez ten proces. Demo działa w różnych przeglądarkach z aktualnymi wersjami JAWS, NVDA, VoiceOver i TalkBack.

Dostępne łącza „Pomiń”

Zwłaszcza na stronach z dużą ilością nawigacji, poruszanie się między sekcjami lub po stronie może być frustrujące i denerwujące. W tym miejscu linki „Pomiń” mogą być bardzo pomocne. Niestety, często zdarza się, że linki „Pomiń” są zaimplementowane, ale ukryte wraz z display: none i jako takie niedostępne dla nikogo (w tym użytkowników czytników ekranu i użytkowników klawiatury).

W artykule Jak utworzyć łącze „Pomiń treść” Paul Ryan przedstawia samouczek krok po kroku, jak zaimplementować łącze umożliwiające pominięcie treści. Zasadniczo używamy transformacji CSS, aby wypchnąć link pominięcia z ekranu, ale przywracamy go z powrotem na :focus . W komentarzach do artykułu Eric Bailey zauważył również, że możemy podać linki do pominięcia przed sekcjami treści, które zawierają wiele interaktywnych elementów lub elementy, które mogą być trudne w nawigacji (takie jak spis treści i elementy iframe ).

Dostępne pliki SVG

Mówiąc o SVG: to, co możemy dziś zrobić z SVG, wykracza daleko poza podstawowe kształty z przeszłości. Możemy nie tylko opisywać ikony SVG, ale także je stylizować i animować. Jeśli prawdziwa inkluzywność wykracza poza schematy — jakie inne czynniki powinniśmy wziąć pod uwagę przy projektowaniu i rozwijaniu dostępnych plików SVG?

Dokładnie na to pytanie odpowiada Carie Fisher w swoim artykule na temat dostępnych plików SVG: Inclusiveness Beyond Patterns. W artykule Carie przygląda się bliżej kolorowi i kontrastowi SVG, trybom jasnym i ciemnym, animacji SVG, zmniejszonemu ruchowi i wielu narzędziom skupionym wokół dostępności. W artykułach znajdziesz również dema i przykłady kodu, wraz ze szczegółowymi wyjaśnieniami i wskazówkami do dalszej lektury.

A jeśli chcesz głębiej zagłębić się w złożony świat dostępnych komponentów — nie tylko związanych z plikami SVG — opublikowaliśmy właśnie artykuł Carie na temat dostępnych wzorców kodu.

Dostępne karty

Twój interfejs może używać paneli kart, ale aby zawartość tych kart była dostępna dla użytkowników klawiatury i czytników ekranu, potrzebujemy bardzo ostrożnego i przemyślanego przedstawienia projektu wizualnego i semantyki ARIA. W interfejsach z kartami Heydon Pickering wnika w szczegóły, próbując znaleźć właściwe rozwiązanie, aby szanować zachowanie klawiatury i zarządzanie fokusem. Sugeruje stopniowe ulepszanie sekcji w panele kart (przykład kodu) (podziękowania dla Danieli Kubesch za wskazówkę!).

Jak zauważa Adam Silver, mniej doświadczeni użytkownicy czytników ekranu mogą nie wiedzieć, jak używać klawiszy strzałek do przełączania kart. Istnieje argument, aby ustawić skupienie na wszystkich kartach w normalnej kolejności kart przy niewielkiej interwencji programistów w celu zmiany sposobu działania kart za pomocą klawiatury.

Alternatywnie TabPanelWidget to responsywne i dostępne rozwiązanie dla kart. Opiera się na zwykłym, starym semantycznym HTML i zamienia się w akordeon, gdy karty nie mieszczą się w całości (dzięki ResizeObserver , ale jest też wypełnienie dla przeglądarek, które jeszcze go nie obsługują).

Skrypt jest nie tylko semantycznym i przystępnym rozwiązaniem, ale także responsywnym i wszechstronnym, które pomaga tworzyć widżety Tabpanel i akordeon dla sieci. Jest przyjazny dla klawiatury i dostępny jako waniliowa biblioteka JS (lub jako widżet dla Vue, React i Angular).

Dostępne tabele

Istnieje wiele problemów z dostępnością związanych z tabelami, ale największym wyzwaniem jest przekształcenie reprezentacji wizualnej w liniową serię, która zostanie odczytana na głos przez czytnik ekranu, bez pomijania ważnych informacji. Na szczęście Adrian Roselli spędził dużo czasu na zgłębianiu wyzwań i rozwiązań dostępnych stołów.

W swoim poście na temat dostępnych tabel Adrian sugeruje, aby umieścić tabelę w <div> z role="region" , aria-labelledby i tabindex="0" , aby upewnić się, że użytkownik korzystający tylko z klawiatury może przejść do kontenera table otrzymuje fokus i <caption> w tabeli, aby upewnić się, że jest prawidłowo ogłaszany czytnikom ekranu. Adrian dostarcza również przykład kodu dla tabeli responsywnej, a także tabel z rozwijanymi wierszami, tabelą sortowalną i stałymi nagłówkami tabel.

Jak czytniki ekranu poruszają się po tabelach danych

Czy kiedykolwiek próbowałeś nawigować po tabeli za pomocą czytnika ekranu? Jeśli nie, zapoznaj się z artykułem Leonie Watson o tym, jak czytniki ekranu poruszają się po tabelach danych. Dzieli się cennymi spostrzeżeniami i pokazuje, co jest ważne, aby tworzyć wolne od frustracji stoły, z których może korzystać każdy.

W poście Leonie używa NVDA, aby przejść do tabeli, nawigować po jej zawartości i znaleźć określone informacje. Odpowiednie elementy HTML (lub role ARIA) informują ją o charakterystyce tabeli i dają jej dostęp do poleceń klawiaturowych służących do poruszania się po zawartości tabeli.

Ciekawy wniosek: fokus na klawiaturze i fokus czytnika ekranu to nie to samo. W przeciwieństwie do tego, co mogłeś słyszeć, nie musisz ustawiać ostrości w każdej komórce tabeli za pomocą klawiatury, aby ułatwić nawigację. Jeśli zawartość wewnątrz komórki nie jest interaktywna, prawdopodobnie sprawisz, że użytkownicy klawiatury będą pracować znacznie ciężej, aby poruszać się po tabeli, niż zamierzałeś. Możesz także obejrzeć film Smashing TV z Leonie na temat tego, jak użytkownik czytnika ekranu uzyskuje dostęp do sieci (73 min).

Dostępne przełączniki dwustabilne

Zawsze, gdy nasze formularze zapewniają naszym klientom wybór binarny — włącz/wyłącz, tryb ciemny/jasny itp. — moglibyśmy użyć przełącznika dwustabilnego. Przełącznik musi służyć kilku celom: musi jasno wyjaśniać aktualny wybór (i to wcale nie tak często!), musi wyjaśniać, że są dwie opcje i musi być wystarczająco oczywisty, aby klienci mogli zrozumieć, jak przełączać się między nimi. Kiedy Sara Soueidan zastanawiała się, jak zbudować przełącznik dwustabilny, oczywiście spędziła sporo czasu, zastanawiając się, jak zbudować dostępny przełącznik dwustabilny.

Rozwiązanie Sary wykorzystuje dwa przyciski radiowe, każdy z własną etykietą, zapowiedziane technologiom pomocniczym jako kilka oddzielnych opcji dostępnych za pomocą klawiatury i nie ma dodatkowych wymagań ARIA ani JS do działania. Rezultatem jest przykład kodu przełączania motywu, a możesz również rzucić okiem na przykład kodu Scotta O'Hary.

Należy pamiętać, że przełącznik Sary jest dostępny dzięki dwóm etykietom. Więc jeśli przełącznik nie ma dwóch etykiet, nie byłby to wzór do użycia. W repozytorium Scotta można znaleźć wzory znaczników dla przełączników. ( dzięki Scottowi O'Hara za napiwek! ).

Kitty Giraudel udostępnia również samouczek dotyczący małej implementacji przełącznika z ułatwieniami dostępu tylko w HTML i CSS, który możesz dostosować do własnych potrzeb. Podstawą dostępnego przełącznika jest odpowiednio oznakowane pole wyboru. Przekazuje swój status zarówno ikonografią, jak i kolorem i nie pozostawia żadnych artefaktów, jeśli CSS nie jest włączony. Przełącznik jest wyposażony w natywne style fokusu, które można dostosować, stan wyłączony i w razie potrzeby obsługuje również orientację od prawej do lewej.

Dostępne podpowiedzi i podpowiedzi

Komponentem, który jest ściśle powiązany z przyciskami ikon, jest podpowiedź. Dosłownie „wskazówki dotyczące narzędzi” to małe informacje wyjaśniające cel kontroli lub wizualizacji, które w przeciwnym razie mogłyby zostać źle zrozumiane. Za każdym razem, gdy chcemy wyjaśnić, dlaczego potrzebujemy określonej informacji osobistej w kasie, prawdopodobnie użyjemy starej, dobrej podpowiedzi. Jak więc mamy je naprawić?

Dołączające podpowiedzi i podpowiedzi Heydona Pickeringa zapewniają bardzo dokładny przegląd prawie wszystkiego, co jest potrzebne do zbudowania dostępnej podpowiedzi. Oznacza to podjęcie decyzji, czy treść podpowiedzi powinna być podana jako etykieta czy opis i odpowiedni wybór właściwości ARIA, nie poleganie na atrybutach title i unikanie umieszczania treści interaktywnych, takich jak przyciski zamykania i potwierdzania lub linki w podpowiedziach.

• Sara Soueidan oczywiście zajmuje się również drobnymi zawiłościami tworzenia w pełni dostępnej podpowiedzi pomocy i dochodzi do wniosku, że JavaScript jest niezbędny do tworzenia w pełni dostępnych komponentów interaktywnych.
• Sarah Higley wyjaśnia również złożoność podpowiedzi i opublikowała przykład kodu, który pokazuje niezawodny wzorzec w działaniu.
• Scott O'Hara ma repozytorium GitHub w podpowiedziach,
• Adrian Roselli dostarcza również wiele przykładów kodu dla przełączników, w tym dema z wyłączonymi podpowiedziami i kierunkiem RTL.

Dostępne odtwarzacze wideo/audio

Często zdarza się, że widzowie często używają napisów podczas oglądania krótkiego klipu lub długiego filmu. Być może oglądamy wideo w hałaśliwym otoczeniu, może lepiej rozumiemy język pisany, a może jesteśmy obecnie zajęci czymś innym i musimy szybko coś wyszukać bez konieczności sięgania po słuchawki. Poza tym, jak często używamy klawisza <space> aby wywołać pauzę lub strzałek klawiszy, aby przejść do tyłu i do przodu? Mimo to wiele odtwarzaczy wideo i niestandardowych rozwiązań nie zapewnia tej funkcji po wyjęciu z pudełka.

Dostępne odtwarzacze multimedialne HTML5 zapewniają przegląd dostępnych odtwarzaczy audio i wideo. Istnieje wiele świetnych opcji open source, np. AblePlayer wydaje się być jedną z niezawodnych. Zawiera pełny zestaw elementów sterujących odtwarzacza dostępnych za pomocą klawiatury, odpowiednio oznaczonych dla użytkowników czytników ekranu i kontrolowanych przez użytkowników rozpoznawania mowy, cechuje się wysokim kontrastem, obsługuje podpisy kodowane i napisy, rozdziały, audiodeskrypcję tekstową, funkcję interaktywnej transkrypcji i automatyczne podświetlanie tekstu. Obsługuje filmy z YouTube i Vimeo. Jednak zależy to od jQuery.

Alternatywnie możesz również zajrzeć do Vime.js: w pełni open-source, lekki, w pełni konfigurowalny i bez zależności od stron trzecich . Inne świetne opcje, takie jak Plyr i Accessible HTML5 Video Player firmy PayPal, są podobne. Ten ostatni jest w pełni dostępny dla użytkowników korzystających tylko z klawiatury i czytników ekranu, napisany w waniliowym JavaScript, jest dodatkowo dostarczany jako komponent React i wraca do natywnych kontrolek przeglądarki, jeśli JavaScript jest niedostępny ( dzięki za wskazówkę, @jamsandwich ! ).

Funkcje strony, które irytują użytkowników czytników ekranu

Brakujący napis alt, automatycznie odtwarzające się wideo, przyciski bez etykiet, słabe użycie nagłówków, niedostępne formularze internetowe — to, co może wydawać się drobnym problemem dla widzących użytkowników, może zadecydować o możliwości samodzielnego korzystania ze strony internetowej dla osób niewidomych i niewidomych. osoby niedowidzące. Holly Tuke wie o tym z własnego doświadczenia.

Aby zwiększyć świadomość typowych problemów z dostępnością, Holly podsumowała pięć irytujących funkcji witryny, z którymi boryka się każdego dnia jako użytkownik czytnika ekranu, i oczywiście, jak je naprawić. Chris Ashton opublikował również artykuł wyjaśniający typowe problemy użytkowników czytników ekranu, które są często pomijane w rozmowach skupiających się wyłącznie na semantyce i dostępie z klawiatury. Małe szczegóły, które robią ogromną różnicę ( podziękowania dla Alexa Chudesnova za wskazówkę! ).

Ale najpierw obsługa ułatwień dostępu

Istnieje wiele różnych sposobów interakcji technologii pomocniczych z przeglądarkami i kodem. Ponieważ nadal nie można w pełni zautomatyzować czytników ekranu i oprogramowania sterującego głosem, pozostaje nam przeprowadzanie testów ręcznych. I tu właśnie pojawia się a11ysupport.io.

Ta oparta na społeczności witryna, pierwotnie stworzona przez Michaela Fairchilda, ma na celu pomóc programistom w informowaniu o tym, co jest obsługiwane przez ułatwienia dostępu. To projekt, który jest aktywny, a wkłady są zawsze mile widziane, więc zacznij testować. Ponadto zawsze warto sprawdzić praktyki autorskie WAI-ARIA, które opisują podstawową semantykę, role i ARIA niezbędne dla wspólnych komponentów i wzorców (podziękowania dla Stephanie Eckles za wskazówkę!) .

Zasoby i listy kontrolne dotyczące ułatwień dostępu

Dostępność jest niezwykle ważna, ale niestety często pomijana. Kierowany przez społeczność projekt A11Y stara się ułatwić dostęp cyfrowy, zapewniając projektantom i programistom wiedzę potrzebną do tworzenia pięknych, dostępnych i integracyjnych doświadczeń.

Od podstawowych zasad projektowania ułatwień dostępu po przeprowadzanie audytu dostępności i kultywowanie społeczności, projekt A11Y przygląda się temu tematowi 360 stopni. Znajdziesz artykuły, takie jak krótkie wskazówki, porady dotyczące książek do przeczytania, biuletyny do obserwowania, a także przydatne narzędzia, grupy zaangażowane w ułatwienia dostępu i wiele więcej.

Repozytorium narzędzi ułatwień dostępu

Czy kiedykolwiek odczuwasz swędzenie, że zapominasz o czymś przed wysłaniem projektu? Cóż, wiadomo, że listy kontrolne są kluczem do zachowania przeglądu rzeczy, które należy zrobić i zająć się przed ostateczną rozgrywką. Jeśli chodzi o dostępność, stale rośnie lista narzędzi i zasobów, które z pewnością pomogą Ci mieć wszystko na oku: Zasoby A11y.

Ta lista, której kuratorem jest Hannah Milan, została początkowo stworzona, aby śledzić ponad 200 ręcznie wyselekcjonowanych wtyczek, narzędzi, artykułów, studiów przypadków, wzorców projektowych, zasobów projektowych, standardów dostępności, a nawet list kontrolnych. Oczywiście zawsze możesz przesłać narzędzie, jeśli czegoś brakuje.

Dostępność komponentów innych firm

Komponenty wielokrotnego użytku, takie jak niestandardowe selekcje, autouzupełniania lub selektory dat, są potężnymi pomocnikami. Jednak wiele komponentów innych firm, które twierdzą, że są dostępne, okazuje się być tylko częściowo dostępnymi, gdy zagłębisz się nieco głębiej. Jak podkreśla Hidde de Vries, nawet komponenty, które zaimplementowały ARIA Authoring Practices Guide 1:1, mogą mieć krytyczne znaczenie, ponieważ przewodnik nie zawiera twierdzeń dotyczących dostępności czytnika ekranu ani doświadczenia użytkownika. Jak więc znaleźć te komponenty, które są naprawdę dostępne?

Hidde opublikował listę kontrolną pytań, które można zadać, aby mieć nieco większą pewność co do dostępności komponentu: Jak przetestowali? Z kim testowali? Czy otwarcie mówią o zaletach i wadach swojego podejścia? A kto stworzył składnik? Dzieli się również cennymi wskazówkami od społeczności, które pomagają ocenić, czy komponent, który twierdzi, że jest dostępny, spełni swoją obietnicę.

Zawijanie

Zdecydowanie istnieją dziesiątki i setki ważnych wytycznych stworzonych przez niesamowitych ludzi ze społeczności dostępności, takich jak Steve Faulkner z ogromną serią artykułów na temat semantyki i dostępności oraz Leonie Watson z ogromną serią artykułów na temat dostępności w ogóle. Nie sposób wymienić wszystkich, ale jesteśmy szczerze wdzięczni za każdy wkład.

Prawdopodobnie przegapiliśmy kilka ważnych i cennych technik i zasobów! Więc zostaw komentarz i odnieś się do nich — chcielibyśmy zaktualizować ten post i aktualizować go, abyśmy wszyscy mogli do niego wrócić i szybciej budować niezawodne, dostępne komponenty.

Mamy szczerą nadzieję, że te narzędzia i techniki okażą się przydatne w Twojej codziennej pracy — a co najważniejsze, pomogą Ci uniknąć czasochłonnych, rutynowych zadań.

Bądź dostępny!

Dziękuję Ci! ️.

Ogromne podziękowania dla @jamsandwich, Courtney Heitman, Stephanie Eckles, Adam Silver, Danieli Kubesch, Tanisha Sabherwal, Manuel Matuzovic, Vadim Makeev, Kitty Giraudel, Ian James, Juha Lehtonen, Heydon Pickering, Shivani Gupta, Jason Webb, Alex Kallinikos, Scott O'Hara, Sara Soueidan, Sasha Chudesnov, Adam Liptrot, Holger Bartel, Kim Johannesen i wszyscy inni, którzy z pasją pracowali nad dostępnością w celu napisania tego artykułu. Sprawy wspólnotowe.

Więcej o dostępności

• Narzędzia audytu CSS
• Generatory CSS
• Rozplątywanie złożonego świata dostępnych wzorców
• Projektowanie ze zredukowanym ruchem dla czułości ruchu
• Korzystałem z Internetu przez jeden dzień za pomocą czytnika ekranu
• Ułatwienia dostępu w Chrome DevTools
• Rzeczy, które możesz dziś zrobić za pomocą CSS
• Zapisz się również do naszego newslettera, aby nie przegapić kolejnych.