Rozszerzenia umożliwiają użytkownikom tworzenie idealnych warunków przeglądania, dostosowanych do ich potrzeb i preferencji. 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.
Z funkcji ułatwień dostępu mogą korzystać wszyscy użytkownicy, a nie tylko osoby o specjalnych potrzebach. Osoby niedowidzące, mało sprawne i zaawansowani użytkownicy będą mogli korzystać ze skrótów klawiszowych. 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, klawiaturę i myszą. Mogą też korzystać z lupy i czytnika ekranu. Nie da się przewidzieć, których narzędzi użytkownicy użyją do uzyskania dostępu do rozszerzenia, ale każdy deweloper może podjąć działania, aby rozszerzenie było jak najbardziej dostępne.
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. Najprostszym sposobem tworzenia interfejsu użytkownika z dostępnością jest użycie standardowego elementu sterującego HTML.
Standardowe ustawienia
W miarę możliwości używaj standardowych elementów interfejsu użytkownika 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 dostarczają czytnikowi 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 obejmowały atrybuty, których Chrome używa do zgłaszania zdarzeń w trakcie 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 element podrzędny paska narzędzi, na którym jest zaznaczony. 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 elementu sterującego zostaną dodane role, stany i właściwości WAI-ARIA, Google Chrome wysyła odpowiednie zdarzenia do czytnika ekranu. Obsługa WAI-ARIA jest wciąż rozwijana, dlatego Google Chrome może nie wywoływać zdarzeń dla niektórych właściwości WAI-ARIA, a czytniki ekranu mogą nie rozpoznawać wszystkich wywoływanych zdarzeń.
Krótki samouczek na temat dodawania elementów sterujących WAI-ARIA do elementów sterujących niestandardowych znajdziesz w prezentacji Dave'a Raggetta z WWW2010.
Skupienie w elementach sterujących niestandardowych
Zaznaczanie za pomocą klawiatury jest niezbędne dla użytkowników, którzy poruszają się po Internecie bez myszy. Upewnij się, że elementy sterujące i nawigacyjne, takie jak przyciski, pola list i paski menu, mogą obsługiwać klawiaturę.
Domyślnie jedynymi elementami w DOM HTML, które mogą być zaznaczane za pomocą klawiatury, są kotwy, przyciski i elementy sterujące formularzy. 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 usuwa element z sekwencji kart, ale nadal umożliwia mu automatyczne otrzymywanie zaznaczenia 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 okienko umożliwia nawigację za pomocą klawiatury. Za pomocą skrótów klawiszowych Chrome możesz określić, czy rozszerzenie działa.
Upewnij się, że łatwo jest zobaczyć, które części interfejsu są aktywne. Zazwyczaj obrysowanie obszaru fokusu porusza się po interfejsie, ale jeśli używasz zbyt dużej ilości CSS, obrysowanie może zostać stłumione lub kontrast zmniejszony.
Skróty
Chociaż najczęstszą strategią nawigacji za pomocą klawiatury jest używanie klawisza Tab do przełączania fokusu w interfejsie rozszerzenia, nie zawsze jest to najprostsza ani najskuteczniejsza opcja.
Prosty moduł 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 aktualną aktywność przycisku na pasku 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ć 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, umieszczając je na stronie opcji.
Przekazywanie treści z ułatwieniami dostępu
Udostępnianie treści dostępnych jest ważne dla wszystkich użytkowników. Wiele poniższych wskazówek może brzmieć znajomo, ponieważ są to sprawdzone metody postępowania w przypadku wszystkich treści w internecie.
Tekst
Dobór czcionek i rozmiar tekstu wpływają na czytelność zawartości rozszerzenia. Jeśli masz problemy ze wzrokiem, być może trzeba będzie zwiększyć rozmiar 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 sprawdzić elastyczność interfejsu, przeprowadź test 200%: czy interfejs jest nadal użyteczny, gdy rozmiar tekstu lub powiększenie strony zostanie zwiększone o 200%?
Unikaj umieszczania tekstu na obrazach. Użytkownicy nie mogą zmieniać rozmiaru, a czytniki ekranu nie są w stanie interpretować obrazów. Zamiast tego wybierz czcionkę internetową ze stylami, taką jak jedna z czcionek w interfejsie Google Font API. Czcionki internetowe mogą być skalowane do różnych rozmiarów, a osoby korzystające z czytników ekranu mogą z nich korzystać.
Kolory
W rozszerzeniu powinien być wystarczający kontrast między kolorem tła a kolorem tekstu. 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óra przekazuje informacje za pomocą grafiki, jest wyraźnie widoczna. W przypadku określonych obrazów możesz użyć narzędzi takich jak Coblis – symulator ślepoty barwowej, aby sprawdzić, jak obraz wygląda w różnych formach niedoborów kolorów.
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 dostępne są napisy lub transkrypcja. Więcej informacji o napisach znajdziesz w wytycznych dotyczących programu mediów z tłumaczeniem i napisami.
Obrazy
Dodaj opisowy tekst alternatywny dla 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 oddzielone lub czysto dekoracyjne powinny mieć pusty tekst alternatywny "" lub całkowicie usunięte z kodu HTML i umieszczone w kodzie CSS.
Jeśli rozszerzenie musi używać tekstu na obrazie, dodaj tekst obrazu do tekstu alternatywnego. Dobrym materiałem jest artykuł na temat WebAIM dotyczący 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.