frontend-guide

# Accessibility

# Czym jest accessibility na stronach internetowych?

Accessibility w kontekście stron internetowych jest związane z działaniami mającymi na celu dostosowanie stron internetowych dla użytku maksymalnie potencjalnych użytkowników. Działania te w dużej mierze skupiają się na udostępnieniu stron do użytkowania stron internetowych na maksymalnie dużej ilości urządzeń orac przeglądarek internetowych (co na dziś dzień jest już standardem). Mniej oczywistymi przykładami jest dostowywanie serwisów www dla potrzeb osób z ograniczonymi możliwościami percepowania stron w ich klasycznym ujęciu, np użytkownicy polegający jedynie na czytnikach ekranów.

# Korzyści płynące z wdrożenia stron intenetowych w duchu accessibility:

  • maksymalizacja pozytywnych doznań użytkowników;
  • polepszenie wyników związanych z SEO (związane w dużym stopniu ze stosowania poprawnego semantycznie HTML'a);
  • lepszy wizerunek publiczny organizacja (wrażliwość na potrzeby innych jak metka dobrej firmy);
  • większa dostępność to więcej użytkowników i szans na realizację celów biznesowych serwisu;

# Zakresy działań możliwych do podjęcia związanych z poprawą dostępności:

  • udostępnienie contentu bez względu na rodzaj urządzenia na którym wyświetla je użytkownik oraz na warunki techniczne:
  1. należy kierować się statystykami używania określonych urządzeń i przeglądarek internetowych; maksymalnie szerokie wsparcie jest istotne jednak nie jest możliwym wspieranie dosłownie każdego clienta; warto opierać się przy tego typu decyzjach na statystykach zbieranych przez usługi analityczne (jeżeli są dostępne);
  2. zadbanie o działaniu serwisu w przypadku jego użytkowania przy wykorzystaniu wolnego łącza internetowego;
  3. obsługa trybu offline;
  • przystosowanie interfejsu serwisu do obsługi z poziomu klawiatury:
  1. stosowanie poprawnego semantycznie HTML'a w dużej mierze zaspokaja potrzeby nawigowania się po serwisie z poziomu klawiatury
  2. dodatkowo należy pamiętać o zaplanowaniu alternatywnych handlerów dla eventów myszki na klawiaturze
  • działania wpierające czytniki ekranów:
  1. poprawna semantyka języka HTML (sztandarowym przykładem są opisy obrazków w trybucie alt)
  2. wykorzystawanie atrybutów aria oraz role do opisu elementów występujących na stronie
  • dostosowanie multimediów dla osób z ograniczonymi możliwościami słyszenia
  1. dodawanie napisów do multimediów

# Dobre praktyki związane z accessibility w projektach

  • skierowanie działań na komfort użytkowników serwisu
  • ewangelizacja klientów oraz biznesu w temacie istotności wdrażania zagadnień accessibility
  • konsekwentne wdrażanie accessibility na wszyskich etapach projektu, od koncepcji i designu po development
  • stosowanie narzędzi wspomagających podczas developmentu (odpowiednie pluginy do eslinta)
  • testowanie strony pod kątem accessibility zarówno poprzez narzędzia takie jak audyty lighthouse'a oraz klasyczne testy manualne

# Proces wdrożenia pluginu walidującego kod pod kątem praktyk accessibility na przykładzie vue-a11y

  • instalacja
$ npm install eslint-plugin-vue-a11y --save-dev
or
$ yarn add eslint-plugin-vue-a11y -D
1
2
3
  • rejestracja pluginu w pliku .eslintrc (lub innym pliku konfifuracyjnym eslinta)
{
    "plugins": [
        "vue-a11y"
    ]
}
1
2
3
4
5
  • konfiguracja poszczególnych reguł udostępnionych przez plugin w konfiguracji eslinta
{
    "rules": {
        "vue-a11y/rule-name": 2
    }
}
1
2
3
4
5
  • lub dodanie gotowego zestawu reguł w konfiguracji eslinta
{
  "extends": [
    "plugin:vue-a11y/base"
  ]
}
1
2
3
4
5

# Meteriały

  • https://www.w3.org/WAI/standards-guidelines/wcag/
  • https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques
  • https://developers.google.com/web/fundamentals/accessibility/semantics-aria/aria-labels-and-relationships
  • https://vue-a11y.com/

← Vue + Typescript →