Rozszerzenia pozwalają użytkownikom stworzyć idealne środowisko przeglądania, dostosowane do indywidualnych umiejętności i preferencji. Rozszerzenia powinny zawierać ułatwienia dostępu, które zachęcają użytkowników do integracji społecznej, umożliwiając dostęp do rozszerzenia osobom z wadami wzroku lub słuchu, ograniczoną sprawnością ruchową lub innymi niepełnosprawnościami.
Każdy, nie tylko użytkownicy o specjalnych potrzebach, może korzystać z ułatwień dostępu. Dzięki skrótom klawiszowym osoby z wadą wzroku, mają małą sprawność ruchową i doświadczeni użytkownicy. Napisy są bardzo ważne dla użytkowników z wadą słuchu, ale są też pomocne w nauce języków.
Użytkownicy mogą wchodzić w interakcje z rozszerzeniem na różne sposoby. Niektórzy użytkownicy korzystają ze standardowego monitora, klawiatury i myszy. Mogą też korzystać z lupy i czytnika ekranu. Nie da się przewidzieć, z jakich narzędzi użytkownicy będą korzystać, aby uzyskać dostęp do rozszerzenia, ale każdy programista może podjąć pewne kroki, aby rozszerzenie było jak najbardziej dostępne.
Integracja elementów sterujących ułatwień dostępu
Jeśli użytkownicy nie mają dostępu do elementów interfejsu, nie mogą korzystać z rozszerzenia. Najłatwiejszym sposobem utworzenia łatwo dostępnego interfejsu jest użycie 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 z użyciem klawiatury, łatwe do skalowania i przejrzyste dla czytników ekranu.
WAI-ARIA w ustawieniach niestandardowych
WAI-ARIA Web Accessibility Initiative – Accessible Rich Internet Applications to specyfikacja umożliwiająca dostęp do elementów sterujących interfejsu czytnikami ekranu za pomocą standardowego zestawu atrybutów DOM. Atrybuty te dostarczają czytnikowi ekranu informacji o funkcji i bieżącym stanie elementów sterujących na stronie internetowej.
Aby dodać obsługę WAI-ARIA do niestandardowych elementów sterujących, należy zmodyfikować elementy DOM rozszerzenia tak, aby zawierały atrybuty używane przez Chrome do wywoływania zdarzeń podczas interakcji użytkownika. Czytniki ekranu reagują na te zdarzenia i opisują ich funkcję. Atrybuty DOM określone przez WAI-ARIA są klasyfikowane na role, stany i właściwości.
<div role="toolbar">
Właściwość aria-activedescendant określa, który element podrzędny paska narzędzi zostanie zaznaczony, gdy zostanie zaznaczony. Kod tabindex="0" określa, że pasek narzędzi jest zaznaczony w kolejności dokumentów.
Przeanalizuj 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>
Po dodaniu ról, stanów i właściwości WAI-ARIA do interfejsu DOM elementu sterującego Google Chrome wysyła odpowiednie zdarzenia do czytnika ekranu. Obsługa WAI-ARIA jest wciąż w przygotowaniu, dlatego Google Chrome może nie zgłaszać zdarzeń dla każdej właściwości WAI-ARIA, a czytniki ekranu mogą nie rozpoznawać wszystkich zgłaszanych zdarzeń.
Aby zapoznać się z krótkim samouczkiem dotyczącym dodawania elementów sterujących WAI-ARIA do niestandardowych elementów sterujących, zobacz prezentację Dave'a Raggetta z WWW2010.
Przejdź do niestandardowych elementów sterujących
Korzystanie z klawiatury jest niezbędne dla użytkowników, którzy korzystają z internetu bez myszy. Zadbaj o to, aby funkcje i elementy sterujące nawigacji, takie jak przyciski, pola list i paski menu, były aktywne.
Domyślnie jedynymi elementami DOM HTML, które mogą być aktywne za pomocą klawiatury, są kotwice, przyciski i elementy sterujące formularza. Ustawienie dla atrybutu HTML tabIndex wartości 0 umieszcza elementy DOM w domyślnej kolejności kart, umożliwiając sterowanie nimi z klawiatury.
element.tabIndex = 0
element.focus();
Ustawienie tabIndex = -1 usuwa element z sekwencji kart, ale nadal pozwala programowo otrzymywać zaznaczenie z klawiatury.
Obsługa dostępu z klawiatury
Rozszerzenia powinny być obsługiwane tylko z klawiaturą, aby użytkownicy, którzy nie korzystają z myszy, oraz użytkownicy, którzy jej nie używają, mogą z nich korzystać.
Nawigacja
Sprawdź, czy użytkownik może przechodzić między różnymi częściami rozszerzenia bez używania myszy. Sprawdź, czy wyskakujące okienko umożliwia nawigację za pomocą klawiatury. Za pomocą skrótów klawiszowych Chrome możesz określić, czy po rozszerzeniu można się poruszać.
Upewnij się, że na ekranie widać, na których częściach interfejsu jest aktywna klawiatura. Zwykle kontur zaznaczenia porusza się po interfejsie, ale jeśli używasz zbyt wielu plików CSS, może on zostać przycięty lub zmniejszyć kontrast.
Skróty
Najpopularniejsza strategia nawigacji przy użyciu klawiatury obejmuje używanie klawisza Tab do obracania zaznaczenia w interfejsie rozszerzenia, ale nie zawsze jest to najprostsza i najskuteczniejsza opcja.
Prosta obsługa klawiatury JavaScript może wyglądać tak: Zwróć uwagę, jak właściwość WAI-ARIA aria-activedescendant jest aktualizowana w odpowiedzi na dane wejściowe użytkownika, aby odzwierciedlała bieżący aktywny przycisk paska narzędzi.
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ć wyraźne 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.
Zapewnij łatwo dostępne treści
Dbanie o przystępność treści jest ważne dla wszystkich użytkowników. Wiele z tych wskazówek może wydawać się znajomych, ponieważ odzwierciedlają sprawdzone metody dotyczące wszystkich treści internetowych.
Tekst
Na czytelność treści rozszerzenia wpływają ustawienia czcionek i rozmiar tekstu. Użytkownicy mający problemy ze wzrokiem muszą zwiększyć rozmiar tekstu w rozszerzeniu. Jeśli korzystasz ze skrótów klawiszowych, upewnij się, że nie przeszkadzają one w skrótach powiększenia wbudowanych w Chrome.
Aby określić elastyczność interfejsu rozszerzenia, zastosuj test 200%. Czy jeśli rozmiar tekstu lub powiększenie strony zwiększy się o 200%, czy nadal będzie można z niego korzystać?
Unikaj wypieku tekstu na obrazach. Użytkownicy nie mogą zmieniać rozmiaru, a czytniki ekranu nie mogą interpretować obrazów. Zamiast tego używaj czcionki internetowej ze stylem, np. jedną z czcionek dostępnych w interfejsie GoogleFont API. Czcionki internetowe mogą się skalować do różnych rozmiarów i będą dostępne dla osób korzystających z czytników ekranu.
Kolory
Należy zachować odpowiedni kontrast między kolorem tła a kolorem tekstu w rozszerzeniu. Za pomocą narzędzia do sprawdzania kontrastu możesz sprawdzić, czy kolory tła i pierwszego planu zapewniają odpowiedni kontrast.
Podczas oceny kontrastu sprawdź, czy każda część rozszerzenia, której informacje są przekazywane za pomocą grafiki, jest wyraźnie widoczna. W przypadku określonych obrazów możesz użyć narzędzi takich jak Coblis – symulator daltonizmu, aby sprawdzić, jak wygląda obraz w przypadku różnych form niedoboru kolorów.
Rozważ oferowanie różnych motywów kolorystycznych lub danie użytkownikom możliwości dostosowania schematu kolorów, aby uzyskać lepszy kontrast.
Dźwięk
Jeśli informacje w rozszerzeniu tworzą dźwięk lub film, upewnij się, że są dostępne napisy lub transkrypcja. Więcej informacji na temat napisów znajdziesz w wytycznych programu tworzenia napisów.
zdjęcia;
Dodaj opisowy tekst alternatywny dla obrazów.
<img src="img.jpg" alt="The logo for the extension">
Używaj tekstu alternatywnego, by określić przeznaczenie obrazu, a nie dosłowny opis jego zawartości. Obrazy odstępowe lub czysto dekoracyjne powinny mieć pusty tekst alternatywny "" lub zostać całkowicie usunięte z kodu HTML i umieszczone w kodzie CSS.
Jeśli rozszerzenie musi używać tekstu na obrazie, umieść ten tekst w tekście alternatywnym. Zapoznaj się z artykułem na temat odpowiedniego tekstu alternatywnego do WebAIM.
Więcej
Więcej informacji o ułatwieniach dostępu w Chrome znajdziesz na kanale A11ycasts i w dokumentacji technicznej dotyczącej ułatwień dostępu w Chromium.