Rozszerzenia umożliwiają użytkownikom stworzenie idealnego sposobu przeglądania internetu, dostosowanych do ich potrzeb umiejętności i preferencje. Rozszerzenia powinny zawierać komponenty ułatwień dostępu, które zachęcają do tworzenia zróżnicowanej bazy użytkowników, umożliwiając dostęp do rozszerzenia osobom z wadami wzroku, słuchu, z ograniczoną zręcznością i z innymi niepełnosprawnościami.
Każdy, nie tylko użytkownicy ze specjalnymi potrzebami, może korzystać z ułatwień dostępu. Skróty klawiszowe są przydatne dla osób niedowidzących, z ograniczoną sprawnością manualną i intensywnie korzystających z urządzenia. Napisy i transkrypcje są niezbędne dla osób niesłyszących, ale pomagają też osobom uczącym się języka.
Użytkownicy mogą wchodzić w interakcje z rozszerzeniem na różne sposoby. Niektórzy użytkownicy mają standardowy monitor, klawiatury i myszy – lub też korzystać z lupy i czytnika ekranu. Chociaż nie da się przewidzieć, jakich narzędzi będą używać użytkownicy, aby uzyskać dostęp do danego rozszerzenia, może zapewnić możliwie największą dostępność rozszerzenia.
Integracja z interfejsem użytkownika z dostępnością
Jeśli użytkownicy nie mają dostępu do elementów interfejsu użytkownika, nie mogą korzystać z rozszerzenia. Najprostsze łatwym sposobem utworzenia interfejsu jest zastosowanie standardowego elementu sterującego HTML.
Standardowe ustawienia
W miarę możliwości używaj standardowych elementów interfejsu HTML. Standardowe elementy sterujące HTML są dostępne za pomocą klawiatury, łatwo je skalować i są one ogólnie zrozumiałe dla czytników ekranu.
WAI-ARIA w elementach sterujących niestandardowych
Web Accessibility Initiative – Accessible Rich Internet Applications (WAI-ARIA) to specyfikacja, która umożliwia czytnikom ekranu dostęp do elementów interfejsu użytkownika za pomocą standardowego zestawu atrybutów DOM. Te atrybuty przekazują czytnikowi ekranu informacje o funkcji i bieżącej elementów sterujących na stronie internetowej.
Aby dodać obsługę WAI-ARIA do niestandardowych elementów sterujących, elementy DOM rozszerzenia muszą być zmodyfikowany tak, aby zawierał atrybuty używane przez Chrome do zgłaszania zdarzeń występujących podczas interakcji użytkownika. Czytniki ekranu reagują na te zdarzenia i opisują funkcję elementu sterującego. Atrybuty DOM określone przez WAI-ARIA są klasyfikowane według ról, stanów i właściwości.
<div role="toolbar">
Właściwość aria-activedescendant określa, który element podrzędny paska narzędzi ma być aktywny, gdy pasek narzędzi otrzyma fokus. Kod tabindex="0" określa, że pasek narzędzi otrzymuje fokus w kolejności dokumentu.
Poniżej znajdziesz pełną specyfikację przykładowego paska narzędzi:
<div role="toolbar" tabindex="0" aria-activedescendant="button1">
<img src="buttoncut.png" role="button" alt="cut" id="button1">
<img src="buttoncopy.png" role="button" alt="copy" id="button2">
<img src="buttonpaste.png" role="button" alt="paste" id="button3">
</div>
Gdy do DOM kontrolki zostaną dodane role, stany i właściwości WAI-ARIA, Google Chrome wysyła do czytnika ekranowego odpowiednie zdarzenia. Obsługa WAI-ARIA jest nadal w fazie rozwoju, Google Chrome może nie zgłaszać zdarzeń w przypadku każdej właściwości WAI-ARIA, a czytniki ekranu mogą nie rozpoznają wszystkie zgłaszane zdarzenia.
Krótki samouczek na temat dodawania elementów sterujących WAI-ARIA do niestandardowych elementów sterujących znajdziesz w przewodniku Dave Raggetta: z prezentacji WWW2010.
Skoncentruj się na niestandardowych ustawieniach
Zaznaczanie klawiaturą jest niezbędne dla użytkowników, którzy poruszają się po Internecie bez myszy. Upewnij się, że operacja elementy sterujące nawigacji, takie jak przyciski, pola list i paski menu, mogą obsługiwać sterowanie za pomocą klawiatury.
Domyślnie jedynymi elementami interfejsu HTML DOM, które mogą odbierać fokus za pomocą klawiatury, są reklamy zakotwiczone, przyciski,
i elementy sterujące formularzem. Jednak ustawienie atrybutu HTML tabIndex na 0 powoduje umieszczenie elementów DOM w domyślnej sekwencji kart, co umożliwia im otrzymanie fokusa klawiatury.
element.tabIndex = 0
element.focus();
Ustawienie tabIndex = -1 powoduje usunięcie elementu z sekwencji kart, ale nadal pozwala na jego obsługę za pomocą klawiatury.
Dostęp z klawiatury
Rozszerzenia powinny być dostępne tylko za pomocą klawiatury, aby mogli z nich korzystać użytkownicy, którzy nie mogą używać myszy, oraz zaawansowani użytkownicy, którzy po prostu nie chcą z nich korzystać.
Nawigacja
Sprawdź, czy użytkownik może poruszać się między różnymi częściami rozszerzenia bez używania myszy. Sprawdź, czy wyskakujące okienka można obsługiwać za pomocą klawiatury. Używaj skrótów klawiszowych Chrome, aby: by określić, czy dane rozszerzenie jest aktywne.
Upewnij się, że łatwo jest zobaczyć, które części interfejsu są aktywne. Zwykle kontur zaznaczenia porusza się po interfejsie. Jeśli jednak za intensywnie korzysta się z CSS, kontur może zostać pominięty lub kontrast zostanie zmniejszony.
Skróty
Najczęściej wykorzystywana strategia nawigacji za pomocą klawiatury wymaga użycia klawisza Tab do obracania zaznaczenia za pośrednictwem interfejsu rozszerzenia, nie zawsze jest to najłatwiejsza lub najskuteczniejsza opcja.
Prosty moduł obsługi klawiatury JavaScript może wyglądać tak: Zwróć uwagę, że właściwość WAI-ARIA
Aplikacja aria-activedescendant jest aktualizowana w odpowiedzi na dane wejściowe użytkownika, aby odzwierciedlała aktualną aktywność na pasku narzędzi
Przycisk
function optionKeyEvent(event) {
var tb = event.target;
var buttonid;
ENTER_KEYCODE = 13;
RIGHT_KEYCODE = 39;
LEFT_KEYCODE = 37;
// Partial sample code for processing arrow keys.
if (event.type == "keydown") {
// Implement circular keyboard navigation within the toolbar buttons
if (event.keyCode == ENTER_KEYCODE) {
ExecuteButtonAction(getCurrentButtonID());
// getCurrentButtonID defined elsewhere
} else if (event.keyCode == event.RIGHT_KEYCODE) {
// Change the active toolbar button to the one to the right (circular).
var buttonid = getNextButtonID();
// getNextButtonID defined elsewhere
tb.setAttribute("aria-activedescendant", buttonid);
} else if (event.keyCode == event.LEFT_KEYCODE) {
// Change the active toolbar button to the one to the left (circular).
var buttonid = getPrevButtonID();
// getPrevButtonID defined elsewhere
tb.setAttribute("aria-activedescendant", buttonid);
} else {
return true;
}
return false;
}
}
<div role="toolbar" tabindex="0" aria-activedescendant="button1" id="tb1"
onkeydown="return optionKeyEvent(event);"
onkeypress="return optionKeyEvent(event);">
<img src="buttoncut" role="button" alt="cut" id="button1">
<img src="buttoncopy" role="button" alt="copy" id="button1">
<img src="buttonpaste" role="button" alt="paste" id="button1">
</div>
Rozszerzenia mogą tworzyć bezpośrednie skróty klawiszowe do ważnych elementów interfejsu rozszerzeń. Aby wdrożyć te skróty, połącz detektory zdarzeń klawiatury z elementami sterującymi. Poinformuj użytkowników o dostępnych skrótach, umieszczając je na stronie opcji.
Zadbaj o przystępność treści
Udostępnianie przystępnych treści jest ważne dla wszystkich użytkowników. Wiele z tych wytycznych może wydawać się znajomych, ponieważ odzwierciedlają one sprawdzone metody stosowane w przypadku wszystkich treści internetowych.
Tekst
Wybór czcionek i rozmiaru tekstu wpływa na czytelność zawartości rozszerzenia. Użytkownicy mający problemy z wzrokiem może być konieczne zwiększenie rozmiaru tekstu rozszerzenia. Jeśli używasz skrótów klawiszowych, sprawdź, czy nie kolidują one ze skrótami do powiększania wbudowanymi w Chrome.
Aby określić elastyczność interfejsu rozszerzenia, zastosuj test 200%. jeśli rozmiar tekstu lub powiększenie strony o 200%, czy nadal można jej używać?
Unikaj umieszczania tekstu na obrazach. Użytkownicy nie mogą modyfikować rozmiaru, a czytniki ekranu nie mogą interpretować obrazów. Zamiast tego można wybrać czcionkę internetową ze stylem, np. jedną z czcionek dostępnych w Google Font API. Czcionki na stronę internetową można skalować do różnych rozmiarów, a osoby korzystające z ekranu mają do nich dostęp. czytelników.
Kolory
W rozszerzeniu powinien być wystarczający kontrast między kolorem tła a kolorem tekstu. Użyj narzędzia do sprawdzania kontrastu, aby sprawdzić, czy kolory tła i pierwszego planu zapewniają odpowiedni kontrast.
Podczas oceny kontrastu sprawdź, czy każda część rozszerzenia, która przekazuje informacje za pomocą grafiki, jest wyraźnie widoczna. W przypadku niektórych obrazów można użyć narzędzi takich jak Coblis – symulator niedowidzenia barw, aby zobaczyć, jak obraz wygląda w przypadku różnych form niedowidzenia barw.
Rozważ oferowanie różnych motywów kolorystycznych lub daj użytkownikowi możliwość dostosowania schematu kolorów, aby uzyskać lepszy kontrast.
Dźwięk
Jeśli do przekazywania informacji rozszerzenie wykorzystuje dźwięk lub film, upewnij się, że napisy lub dostępna jest transkrypcja. Więcej informacji o napisach znajdziesz w wytycznych dotyczących programu mediów z tłumaczeniem i napisami.
Obrazy
Umieszczaj informacje na temat alternatywnego tekstu alternatywnego do obrazów.
<img src="img.jpg" alt="The logo for the extension">
W tekście alternatywnym podawaj cel obrazu, a nie dosłowny opis jego zawartości. Obrazy odstępów lub obrazy czysto dekoracyjne powinny mieć pusty tekst alternatywny "" lub zostać usunięte
z kodu HTML i umieścić go w kodzie CSS.
Jeśli rozszerzenie musi używać tekstu znajdującego się na obrazie, umieść ten tekst w tekście alternatywnym. Dobry materiał znajdziesz w artykule WebAIM na temat odpowiedniego tekstu alternatywnego.
Więcej informacji
Aby dowiedzieć się więcej o ułatwieniach dostępu w Chrome, obejrzyj kanał A11ycasts i przeczytaj dokumentację techniczną dotyczącą ułatwień dostępu w Chromium.