Skąd wiesz co będzie jutro? - o dostępności stron internetowych słów kilka

Skąd wiesz co będzie jutro?
o dostępności stron internetowych słów kilka
Szymon Kądzielawa
15.02.2019

Szymon Kądzielawa
frontend developer

Dostępność
ang. accessibility - a11y
„Dostępność jest praktyką dostosowywania stron internetowych
do użytku przez tak wielu ludzi, jak jest to możliwe”
MDN web docs
https://developer.mozilla.org/pl/docs/Learn/Accessibility/What_is_accessibility

Główne kategorie
niepełnosprawności
• wzroku
ślepota, słaby wzrok, zaburzenia widzenia kolorów
• słuchu
głuchota, problemy ze słuchem
• motoryki
niemożność używania myszy, problemy z precyzyjnymi ruchami, wolny czas reakcji
• funkcji poznawczych
problemy z pamięcią, skupieniem uwagi, spostrzegania świata zmysłami, myśleniem

Po co dbać o dostępność
stron www?

Ponieważ to powszechny problem!
1

Ponad miliard ludzi na świecie
ma jakąś formę niepełnosprawności
WHO - Disability and health
https://www.who.int/en/news-room/fact-sheets/detail/disability-and-health

Ponad 15% światowej populacji
ma jakąś formę niepełnosprawności
WHO - Disability and health
https://www.who.int/en/news-room/fact-sheets/detail/disability-and-health

Dostępne strony www
są dobre dla SEO
2

W niektórych przypadkach
dostępność stron jest
nakazana prawem
3

Wszyscy są wobec prawa równi.
Wszyscy mają prawo do równego traktowania przez władze
publiczne.
Każdy człowiek podlegający jurysdykcji państwa Polskiego,
niezależnie od swojego wieku, płci, wykształcenia, wyznania czy
niepełnosprawności musi być równo traktowany przez władze i
instytucje publiczne.
Konstytucja Rzeczypospolitej Polskiej, Art. 32.1

W systemie teleinformatycznym (…) należy zapewnić
spełnienie przez ten system wymagań Web Content
Accessibility Guidelines (WCAG 2.0), z uwzględnieniem
poziomu AA, (…)
Rozporządzenie Rady Ministrów z dnia 12 kwietnia 2012 r. 
http://dziennikustaw.gov.pl/du/2012/526/D2012000052601.pdf
§19.

Bo czynimy dobrze,
a dobro wraca
4
https://giphy.com/gifs/love-heart-valentine-3oriO6qJiXajN0TyDu

31 2+ + =
15% Populacji SEO Nakaz prawny

“Według wstępnych szacunków, w Polsce jest około 100
instytucji centralnych, 16 województw, 400 powiatów i 2500
gmin, z których znacząca większość ma lub będzie w niedługim
czasie miała własną stronę internetową.”
Prawne aspekty dostępności www 
http://utilitia.pl/?page_id=468

+ żłobki
+ szkoły
+ teatry
+ muzea
+ korporacje ( $$$ :) )
+ …

Agencje, freelancerzy
większy rynek zbytu

Właściciele stron
większe grono odbiorców

Właściciele sklepów
internetowych
więcej zamówień

Nigdy nie wiadomo kiedy to my
możemy potrzebować dostępnej
strony internetowej!
6

• Nieszczęśliwy wypadek
• Starość
• Inne sytuacje
ekran w słońcu, brak wolnej ręki do użycia myszki,
oglądanie wideo w nocy

Wytyczne
dla dostępności treści internetowych
WCAG
Web Content Accessibility Guidelines

WCAG
wersje standardów
• WCAG 1.0
1999r., szybko stracił na aktualności przez szybki rozwój technologii
• WCAG 2.1
5 czerwca 2018r., wstecznie kompatybilna
+ urządzenia mobilne,
+ osoby słabowidzące oraz osoby z niepełnosprawnością intelektualną
• WCAG 2.0
2008r., brak odniesienia do technologii - skupia się na użytkownikach stron

WCAG
poziomy zgodności
A AA AAA
https://www.w3.org/TR/WCAG21/

Wstępne zasady
dostępności
https://www.w3.org/WAI/test-evaluate/preliminary/

Używaj semantycznego kodu
HTML5
<main>
<aside>
<nav>
<header>
<footer>
<button>
<input>
<a>
<form> <ul>
<article>
<section>

Ustaw atrybut języka strony
<html lang=“”>
<html <?php language_attributes(); ?>>

Tytuł strony
<title>
• czy opis odpowiednio i krótko opisuje treść strony?
• czy jest inny, niż na pozostałych stronach witryny?
• zamiast:
Scriptbird Limited | O ﬁrmie
Scriptbird Limited | Kontakt
• lepiej:
O ﬁrmie Scriptbird Ltd
Kontakt Scriptbird Ltd

Linki
• unikaj nazw typu “kliknij tutaj”, “więcej” itp.
• unikaj pełnych URLi jako nazw linków
• unikaj nazw linków pisanych dużymi literami
• używaj stronnicowania zamiast nieskończonego przewijania
• podkreślaj linki
• używaj tej samej nazwy linków do danych stron

Justowanie tekstu
na www jest złe!

Tekst alternatywny obrazków
<img src=“image.jpg” alt=“”>
• Opis funkcjonalny każdego obrazka, który nie jest dekoracją
Szkło powiększające
Szukaj
• Dekoracja? alt=“”

Parametr alt w WordPressie
<img src=“image.jpg” alt=“”>

Nagłówki
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
• Poprawna struktura nagłówków

Odpowiedni kontrast
między tekstem a tłem
Dysleksja

Odpowiedni kontrast
między tekstem a tłem

Zmiana rozmiaru tekstu
bez szwanku

Dostęp z klawiatury
Przycisk tab
• Tab na wszystkie elementy
linki, pola formularzy, przyciski, kontrolki w odtwarzaczu mediów
• Tab ze wszystkich elementów
“pułapki” z których nie można uciec
• Kolejność przeskakiwania między elementami
niemożność używania myszy, problemy z precyzyjnymi ruchami, wolny czas reakcji
• Pełna funkcjonalność witryny dostępna z klawiatury?
• Listy ‘Dropdown’ czy działają?

Dostęp z klawiatury
Widoczny :focus
Nigdy nie deklaruj w CSSie:
outline: none;
dla elementów :focus
jeśli nie zapewnisz
alternatywnego,
widocznego stylowania

Formularze
etykiety powiązane z polami
<label>Imię
<input type=“text”>
</label>
<label for=“imie”>Imię</label>
<input id=“imie” type=“text”>

Formularze
etykiety - pozycja, required
Imię*:
Co sądzisz o prezentacji:
Jest super
Jest wspaniała
Podoba mi się
Lubię:
Słuchać prowadzącego
Kolor czerwony
Placki
Wypełnij zgodnie ze swoimi przekonaniami:

Formularze
Nie używaj placeholder=“” zamiast <label>
Imię Nazwisko
Adres e-mail Rozmiar buta

Formularze
obsługa błędów
• przedstawienie co jest nie tak i jak to naprawić
format daty, numeru telefonu? wymagane pole?
• błędy są łatwe do znalezienia
lepiej przed niż za formularzem
• wartości poprawnych pól zostają
z wyjątkiem wrażliwych pól (hasło, numer karty itp.)

Ruchoma / błyskająca / migająca
zawartość
• karuzele, reklamy, video, ruchome paski z informacjami itp.
• problemy z przyswojeniem ruchomych treści
np. znikają za szybko
• drgawki u osób z padaczką fotogenną 
> 3x/s, duży obszar ekranu, wystarczająco jasny

Alternatywa dla multimediów
audio & video
• multimedia nie startują same!
a jeśli muszą, to stop po 3 sek. lub zawierają kontrolki (start, stop, głośność)
• napisy dla ﬁlmów
• transkrypt dla ﬁlmów i plików audio

Dostępność i WordPress
„All new or updated code released into WordPress core and
bundled themes must conform with the WCAG 2.0 guidelines at
level AA.”
Rian Rietveld
21 Marzec, 2016

Nie jestem koderem!
Jak żyć?
Gotowe dostępne motywy
https://wordpress.org/themes/tags/accessibility-ready/

Wtyczki
związane z dostępnością
https://wordpress.org/plugins/wp-accessibility/
poprawia dostępność witryny
https://wordpress.org/plugins/accessible-video-library/
zarządzanie plikami video (napisy, transkrypt)
https://wordpress.org/plugins/access-monitor/
sprawdza dostępność witryny

Dostępność stron
jest istotna

Ty także
będziesz jej potrzebować!

Praca nad dostępnością
to praca całego zespołu

Praca nad dostępnością
to proces ciągły

Skąd wiesz co będzie jutro? - o dostępności stron internetowych słów kilka

Recommended

Recommended

More Related Content

Similar to Skąd wiesz co będzie jutro? - o dostępności stron internetowych słów kilka

Similar to Skąd wiesz co będzie jutro? - o dostępności stron internetowych słów kilka (20)

Skąd wiesz co będzie jutro? - o dostępności stron internetowych słów kilka