Rozszerzenia pozwalają użytkownikom tworzyć idealne środowisko przeglądania dostosowane do indywidualnych umiejętności i preferencji. Rozszerzenia powinny zawierać komponenty, które zachęcają użytkowników do integracji społecznej przez umożliwienie dostępu do rozszerzenia osobom z wadą wzroku lub słuchu, ograniczoną sprawnością ruchową i innym niepełnosprawnym.
Wszyscy, nie tylko użytkownicy o specjalnych potrzebach, mogą korzystać z ułatwień dostępu. Skróty klawiszowe mogą być przydatne dla użytkowników z wadami wzroku, mających niższą sprawność ruchową i zaawansowanych użytkowników. Napisy i transkrypcje są niezbędne dla osób niesłyszących, ale też pomagają uczącym się języków.
Użytkownicy mogą wchodzić w interakcje z rozszerzeniem na różne sposoby. Niektórzy użytkownicy mają standardowy monitor, klawiaturę i myszkę. Mogą też używać lupy i czytnika ekranu. Nie da się przewidzieć, z jakich narzędzi użytkownicy będą korzystać, aby uzyskać dostęp do danego rozszerzenia, ale każdy programista może podjąć pewne kroki, aby zapewnić jak największą dostępność rozszerzenia.
Integracja elementów sterujących ułatwieniami dostępu
Jeśli użytkownicy nie mają dostępu do elementów interfejsu, nie mogą używać rozszerzeń. 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 poziomu klawiatury, łatwe do skalowania i ogólnie zrozumiałe 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 zgłaszania 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ą 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 aktywny, gdy zostanie on zaznaczony. Kod tabindex="0" określa, że pasek narzędzi jest aktywny w kolejności dokumentów.
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>
Po dodaniu ról, stanów i właściwości WAI-ARIA do modelu DOM elementu sterującego Google Chrome wysyła odpowiednie zdarzenia do czytnika ekranu. Obsługa WAI-ARIA jest wciąż w trakcie opracowywania, dlatego Google Chrome może nie zgłaszać zdarzenia dla każdej właściwości WAI-ARIA, a czytniki ekranu mogą nie rozpoznawać wszystkich zgłaszanych zdarzeń.
Samouczek dodawania elementów sterujących WAI-ARIA do niestandardowych elementów sterujących znajdziesz w prezentacji Dave'a Raggetta z witryny WWW2010.
Przejdź do ustawień niestandardowych
Korzystanie z klawiatury jest niezbędne dla użytkowników, którzy korzystają z internetu bez myszy. Zadbaj o to, aby elementy sterujące i nawigacyjne, takie jak przyciski, pola list i paski menu, były aktywne na klawiaturze.
Domyślnie jedynymi elementami w modelu HTML DOM, które mogą otrzymywać zaznaczenie za pomocą klawiatury, są kotwice, przyciski i elementy sterujące formularza. Ustawienie atrybutu HTML tabIndex na 0 umieszcza elementy DOM w domyślnej sekwencji tabulacji, umożliwiając sterowanie tymi elementami z klawiatury.
element.tabIndex = 0
element.focus();
Ustawienie tabIndex = -1 powoduje usunięcie elementu z sekwencji kart, ale nadal pozwala na programowanie automatycznego wybierania opcji za pomocą klawiatury.
Obsługa dostępu z klawiatury
Rozszerzenia powinny być obsługiwane tylko za pomocą klawiatury (użytkownicy, którzy nie używają myszy), a 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 po użyciu wyskakującego okienka można poruszać się za pomocą klawiatury. Za pomocą skrótów klawiszowych Chrome możesz sprawdzić, czy po rozszerzeniu można korzystać.
Upewnij się, że łatwo jest zobaczyć, na których częściach interfejsu znajduje się klawiatura. Zwykle w interfejsie porusza się kontur zaznaczenia. Jeśli jednak używasz zbyt wielu elementów CSS, może on zostać pominięty lub zmniejszyć kontrast.
Skróty
Chociaż najczęstsza strategia nawigacji przy użyciu klawiatury obejmuje obracanie zaznaczenia za pomocą klawisza Tab w interfejsie rozszerzenia, nie zawsze jest to najłatwiejsza i najskuteczniejsza opcja.
Prosta metoda obsługi 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, tak 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="button2">
<img src="buttonpaste" role="button" alt="paste" id="button3">
</div>
Rozszerzenia mogą tworzyć wyraźne skróty klawiszowe do ważnych elementów interfejsu rozszerzeń. Aby wdrożyć te skróty, połącz odbiorniki zdarzeń klawiszowych z elementami sterującymi. Poinformuj użytkowników o dostępnych skrótach, umieszczając je na stronie opcji.
Udostępniaj łatwo dostępne treści
Zapewnienie łatwości dostępu jest ważne dla wszystkich użytkowników. Wiele z tych wytycznych może wydawać się znajome, ponieważ odzwierciedlają one sprawdzone metody dotyczące wszystkich treści w internecie.
Tekst
Wybór czcionek i rozmiar tekstu wpływają na czytelność treści rozszerzenia. Użytkownicy mający problemy ze wzrokiem muszą zwiększyć rozmiar tekstu rozszerzenia. Jeśli korzystasz ze skrótów klawiszowych, sprawdź, czy nie przeszkadzają one w skrótom powiększenia wbudowanemu w Chrome.
Aby określić elastyczność interfejsu rozszerzenia, przeprowadź test 200%. Czy jeśli rozmiar tekstu lub powiększenie strony zwiększy się o 200%, nadal będzie można z niego korzystać?
Unikaj wypiekania tekstu w obrazach. Użytkownicy nie mogą zmieniać rozmiaru, a czytniki ekranu nie interpretują obrazów. Zamiast tego wybierz stylową czcionkę internetową, np. jedną z czcionek dostępnych w interfejsie Google Font API. Czcionki internetowe mogą skalować się do różnych rozmiarów i są dostępne dla użytkowników korzystających z czytników ekranu.
Kolory
Należy zachować odpowiedni kontrast między kolorem tła a kolorem tekstu w rozszerzeniu. 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ó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żytkownikowi możliwości dostosowania schematu kolorów w celu uzyskania lepszego kontrastu.
Dźwięk
Jeśli rozszerzenie przekazuje informacje w formie dźwięku lub filmu, upewnij się, że są dostępne napisy lub transkrypcja. Więcej informacji na temat napisów znajdziesz w wytycznych dotyczących programu multimediów z opisem i napisami.
zdjęcia;
Zadbaj o przydatny tekst alternatywny obrazów.
<img src="img.jpg" alt="The logo for the extension">
Używaj tekstu alternatywnego, aby określić przeznaczenie obrazu, a nie dosłownego opisu jego zawartości. Obrazy odstępowe lub czysto dekoracyjne powinny mieć pusty tekst alternatywny "" lub całkowicie usunąć je z kodu HTML i umieścić w kodzie CSS.
Jeśli rozszerzenie musi używać tekstu z obrazu, umieść go w tekście alternatywnym. Warto się z nimi zapoznać, zapoznając się z artykułem na temat odpowiedniego tekstu alternatywnego dostępnego w WebAIM.
Więcej informacji
Aby dowiedzieć się więcej o ułatwieniach dostępu w Chrome, odwiedź kanał A11ycasts i zapoznaj się z dokumentacją techniczną Chromium na temat ułatwień dostępu.