Rozszerzenia umożliwiają użytkownikom tworzenie idealnego środowiska przeglądania dostosowanego do ich możliwości i preferencji. Rozszerzenia powinny zawierać komponenty ułatwień dostępu, które zachęcają do korzystania z nich przez osoby z wadami wzroku, niedosłuchem, ograniczoną sprawnością manualną i innymi niepełnosprawnościami.
Z ułatwień dostępu mogą korzystać wszyscy, a nie tylko użytkownicy ze specjalnymi potrzebami. Skróty klawiszowe są przydatne dla osób niedowidzących, z ograniczoną sprawnością manualną i zaawansowanych użytkowników. Napisy i transkrypcje są niezbędne dla osób niesłyszących, ale pomagają też w nauce języków.
Użytkownicy mogą wchodzić w interakcje z rozszerzeniem na różne sposoby. Niektórzy użytkownicy mają standardowy monitor, klawiaturę i mysz, a inni mogą korzystać z lupy ekranowej i czytnika ekranu. Nie można przewidzieć, jakich narzędzi będą używać użytkownicy, aby uzyskać dostęp do rozszerzenia, ale każdy programista może podjąć kroki, aby rozszerzenie było jak najbardziej dostępne.
Integracja elementów sterujących interfejsu z ułatwieniami dostępu
Jeśli użytkownicy nie mogą uzyskać dostępu do elementów sterujących interfejsu, nie mogą korzystać z rozszerzenia. Najłatwiejszym sposobem na utworzenie interfejsu z ułatwieniami dostępu jest użycie standardowego elementu sterującego HTML.
Standardowe elementy sterujące
Jeśli to możliwe, używaj standardowych elementów sterujących interfejsu HTML. Standardowe elementy sterujące HTML są dostępne za pomocą klawiatury, łatwo się skalują i są 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 udostępnianie elementów sterujących interfejsu czytnikom ekranu za pomocą standardowego zestawu atrybutów DOM. Te atrybuty przekazują czytnikowi ekranu informacje o funkcji i bieżącym stanie elementów sterujących na stronie internetowej.
Aby dodać obsługę WAI-ARIA do elementów sterujących niestandardowych, należy zmodyfikować elementy DOM rozszerzenia, aby zawierały atrybuty, których Chrome używa do wywoływania zdarzeń podczas interakcji użytkownika. Czytniki ekranu reagują na te zdarzenia i opisują funkcję elementu sterującego. Atrybuty DOM określone przez WAI-ARIA są podzielone na role, stany i właściwości.
<div role="toolbar">
Właściwość aria-activedescendant określa, które dziecko paska narzędzi otrzyma fokus, gdy
pasek narzędzi otrzyma fokus. Kod tabindex="0" określa, że pasek narzędzi otrzyma 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 role, stany i właściwości WAI-ARIA zostaną dodane do DOM elementu sterującego, Google Chrome wywoła odpowiednie zdarzenia dla czytnika ekranu. Obsługa WAI-ARIA jest nadal w fazie rozwoju, dlatego Google Chrome może nie wywoływać zdarzenia dla każdej właściwości WAI-ARIA, a czytniki ekranu mogą nie rozpoznawać wszystkich wywoływanych zdarzeń.
Krótki samouczek dotyczący dodawania elementów sterujących WAI-ARIA do elementów sterujących niestandardowych znajdziesz w prezentacji Dave'a Raggetta z WWW2010.
Fokus w elementach sterujących niestandardowych
Fokus klawiatury jest niezbędny dla użytkowników, którzy poruszają się po internecie bez myszy. Upewnij się, że elementy sterujące operacjami i nawigacją, takie jak przyciski, pola listy i paski menu, mogą otrzymywać fokus klawiatury.
Domyślnie jedynymi elementami w HTML DOM, które mogą otrzymywać fokus klawiatury, są kotwice, przyciski i elementy sterujące formularza. Ustawienie atrybutu HTML tabIndex na 0 umieszcza elementy DOM w domyślnej kolejności tabulacji, co umożliwia im otrzymywanie fokusu klawiatury.
element.tabIndex = 0
element.focus();
Ustawienie tabIndex = -1 usuwa element z kolejności tabulacji, ale nadal umożliwia mu otrzymywanie fokusu klawiatury programowo.
Obsługa dostępu za pomocą klawiatury
Rozszerzenia powinny być użyteczne tylko za pomocą klawiatury, aby mogły z nich korzystać osoby, które nie mogą używać myszy, oraz zaawansowani użytkownicy, którzy po prostu nie chcą jej używać.
Nawigacja
Sprawdź, czy użytkownik może poruszać się między różnymi częściami rozszerzenia bez użycia myszy. Sprawdź, czy wszystkie wyskakujące okienka są dostępne za pomocą klawiatury. Aby sprawdzić, czy rozszerzenie jest dostępne za pomocą klawiatury, użyj skrótów klawiszowych Chrome do określenia.
Upewnij się, że łatwo jest zobaczyć, które części interfejsu mają fokus klawiatury. Zwykle fokus jest oznaczony obramowaniem, ale jeśli używasz zbyt wielu stylów CSS, obramowanie może zostać ukryte lub kontrast może zostać zmniejszony.
Skróty
Najpopularniejsza strategia nawigacji za pomocą klawiatury polega na używaniu klawisza Tab do przełączania fokusu między elementami interfejsu rozszerzenia, ale nie zawsze jest to najłatwiejsza ani najbardziej wydajna opcja.
Prosty program obsługi klawiatury w 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ć aktualnie 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ć jawne skróty klawiszowe do ważnych elementów interfejsu rozszerzenia. Aby zaimplementować te skróty, połącz odbiorniki zdarzeń klawiatury z elementami sterującymi. Poinformuj użytkowników o dostępnych skrótach, podając je na stronie opcji.
Udostępnianie treści z ułatwieniami dostępu
Udostępnianie treści z ułatwieniami dostępu jest ważne dla wszystkich użytkowników. Wiele z tych wskazówek może Ci się wydać znajomych, ponieważ odzwierciedlają one sprawdzone metody dotyczące wszystkich treści internetowych.
Tekst
Wybór czcionki i rozmiar tekstu wpływają na czytelność treści rozszerzenia. Użytkownicy z problemami ze wzrokiem mogą potrzebować zwiększenia rozmiaru tekstu w rozszerzeniu. Jeśli używasz skrótów klawiszowych, upewnij się, że nie kolidują one ze skrótami powiększenia wbudowanymi w Chrome.
Aby sprawdzić elastyczność interfejsu rozszerzenia, zastosuj test 200%. Jeśli rozmiar tekstu lub powiększenie strony zostanie zwiększone o 200%, czy rozszerzenie nadal będzie użyteczne?
Unikaj umieszczania tekstu na obrazach. Użytkownicy nie mogą zmieniać rozmiaru obrazów, a czytniki ekranu nie mogą ich interpretować. Zamiast tego użyj stylizowanej czcionki internetowej, np. jednej z czcionek dostępnych w interfejsie Google Font API. Czcionki internetowe można skalować do różnych rozmiarów i są dostępne dla osób korzystających z czytników ekranu.
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.
Oceniając kontrast, sprawdź, czy każda część rozszerzenia, która opiera się na grafice w celu przekazywania informacji, jest wyraźnie widoczna. W przypadku konkretnych obrazów możesz użyć narzędzi takich jak Coblis – Color Blindness Simulator, aby zobaczyć, jak obraz wygląda w różnych postaciach niedoboru kolorów.
Aby uzyskać lepszy kontrast, rozważ udostępnienie różnych motywów kolorystycznych lub umożliwienie użytkownikowi dostosowania schematu kolorów.
Dźwięk
Jeśli rozszerzenie opiera się na dźwięku lub filmie w celu przekazywania informacji, upewnij się, że dostępne są napisy lub transkrypcja. Więcej informacji o napisach znajdziesz we wskazówkach programu Described and Captioned Media Program.
Grafika
Dodaj do obrazów informacyjny tekst alternatywny.
<img src="img.jpg" alt="The logo for the extension">
Użyj tekstu alternatywnego, aby określić 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 całkowicie i umieszczone w CSS.
Jeśli rozszerzenie musi używać tekstu na obrazie, umieść ten tekst w tekście alternatywnym. Dobrym źródłem informacji jest artykuł WebAIM o odpowiednim tekście alternatywnym.
Więcej informacji
Więcej informacji o ułatwieniach dostępu w Chrome znajdziesz na kanale A11ycasts oraz w dokumentacji technicznej Chromium Accessibility.