Podstawy accessibilityDorota Orzeszek

Cele szkolenia● poznanie podstawowych zasad accessibility● wykształcenie intuicji do odróżniania

rozwiązań dostępnych od niedostępnych

Zasady

SzacunekWspółpraca

O Was :)

Plan● podstawowe terminy● grupy docelowe● korzyści z dostępności● regulacje prawne i standardy● potrzeby różnych grup użytkowników● WCAG - podstawowe zasady dostępności● przykłady dobrych i złych praktyk

Czym jest accessibility?Tworzenie produktów:● których mogą używać osoby o szczególnych

potrzebach (np. osoby starsze, niepełnosprawne, dzieci)

● wygodniejszych i bardziej intuicyjnych w obsłudze dla wszystkich

Czym jest accessibility?Accessibility to nie tylko niepełnosprawni!

Komu to służy?● osoby niepełnosprawne● osoby starsze● niedoświadczeni użytkownicy technologii● częściowi analfabeci● użytkownicy starszych urządzeń● posiadacze wolnych łącz internetowych

Komu to służy?15% ludności świata to osoby niepełnosprawne.2 miliardy osób powyżej 60 roku życia w 2050.U osób starszych często współistnieje kilka niepełnosprawności.

Accessibility a UX

User Experience Ergonomia

UsabilityAccessibility

Korzyści● większe grono potencjalnych użytkowników● zgodność z wymogami prawa● przystosowanie dla rosnącej grupy osób starszych● wyróżnienie się spośród konkurencji● promowanie universal design● dotrzymanie kroku najlepszym na rynku

UN Convention on the Rights of People with Disabilitiesprzyjęta 13.12.2006; weszła w życie 3.05.2008.Section 508 Amendment to the US Rehabilitation Act przyjęta 7.08.1998; dotyczy agencji federalnych w USA.Standard EN 301 549 (Mandate 376) opublikowany w lutym 2014; dotyczy zamówień publicznych w UEWeb Content Accessibility Guidelines (WCAG 2.0) opublikowane 11.12.2008.

Akty prawne i standardy

Akty prawne i standardyAustralia → Disability Discrimination Act of 1992Indie →Persons with Disabilities Act of 1995Japonia → Act on the Elimination of Discrimination Against Persons with Disabilities of 2013Nowa Zelandia → Human Rights Amendment Act of 2001UK → Equality Act of 2010USA → Americans with Disabilities Act of 1990Polska → Rozporządzenie Rady Ministrów Krajowe Ramy Interoperacyjności z 12 kwietnia 2012

Typy niepełnosprawnościWzrokowa: niewidomi, niedowidzący, daltonizmRuchowa: osoby po amputacjach, sparaliżowane, o niepełnej sprawności kończynSłuchowa: głusi, niedosłyszącyIntelektualna: upośledzenie umysłowePsychiczna: depresja, schizofreniaNarządu mowyEpilepsja

TrudnościNiepełnosprawność wzrokowa:● orientacja w przestrzeni● wyszukiwanie● czytanie tekstu● rozpoznawanie obrazów● poruszanie się

TrudnościNiepełnosprawność ruchowa:● poruszanie się● obsługa urządzeń● precyzyjne wykonywanie ruchów i gestów

TrudnościNiepełnosprawność intelektualna:● rozumienie tekstu / poleceń● zapamiętywanie informacji● uczenie się● orientacja w nowym środowisku● rozwiązywanie problemów

WCAGStandard:http://www.w3.org/TR/WCAG20/

Praktyczny poradnik:http://www.w3.org/WAI/WCAG20/quickref/

Text alternatives● krótkie i proste teksty alternatywne● opisy do zdjęć, grafik, wykresów, diagramów● opisy do plików dźwiękowych, treści video● równoważniki zdań, proste zdania● nie opisujemy elementów o charakterze

wyłącznie dekoracyjnym● nie obrazki przedstawiające tekst

PrzykładyŹle

“Czerwony przycisk” =>“Proszę wprowadzić wybraną wartość” =>“Dekoracyjny banner z podobizną kotka” =>“Wykres” =>

Dobrze“Anuluj”

“Wpisz wartość”

“”“Wykres liczności populacji w zależności od wieku”

Time based media● unikać ograniczania czasu na podjęcie

decyzji / wykonanie polecenia● domyślny czas ograniczenia jest długi

(np. 30 s dla prostej czynności)● przycisk “Potrzebuję więcej czasu”

Adaptable● rozdzielenie treści i struktury od

formatowania● możliwość zastosowanie style-sheetów

użytkownika / screen readera itp.

Distinguishable● czytelna czcionka● color coding tylko w połączeniu z wzorami,

symbolami itp.● kontrast normalnego tekstu co najmniej 4.5● podświetlenie elementów sterujących● powiększenie czcionki do 200%● brak dźwięku w tle

Przykład

Źle

Lorem ipsum

Dobrze

Lorem ipsumLorem ipsum

Anuluj OK

- +

Keyboard accessible● obsługa systemu przy pomocy samej

klawiatury

Seizures● unikać migających dekoracji● do 3 błysków na sekundę

Navigable● wizualne wyróżnienie linków i elementów

sterujących● czytelna architektura informacji● ograniczenie liczby linków na stronie

Readable● prosty język● unikanie wyśrodkowania tekstu● unikanie “brzydkiego” wyjustowania● ograniczenie szerokości kolumn● unikalne nazwy linków (nie “kliknij tutaj”)● jednolite formatowanie● wykorzystanie nagłówków i tytułów

Predictable● jednolity interfejs i interakcje● stosowanie znanych użytkownikowi

widgetów, interakcji● kontekst nie zmienia się bez wyraźnej akcji

użytkownika

Input assistance● oznaczenie pól obowiązkowych w

formularzach● sygnalizowanie użytkownikowi błędów we

wprowadzonych danych● podpowiedzi i polecenia● dostępność odpowiednich do kontekstu

tematów pomocy

Compatible● unikanie przestarzałych technologii● nazwa, rola, wartość

RozwiązaniaNiepełnosprawność wzrokowa:● konfiguracja rozmiaru i kroju czcionek● ustawienia schematu kolorów, kontrastu, jasności● lupy ekranowe● czytniki ekranowe● tekst alternatywny dla grafik● sygnały dźwiękowe / wibracje● komendy głosowe● konfiguracja kursora (rozmiar, prędkość, wrażliwość)

RozwiązaniaNiepełnosprawność ruchowa:● wsparcie dla alternatywnych urządzeń I/O● wiele metod obsługi (gesty / klawiatura / mysz)● ergonomiczny design● duże, wygodne w użyciu przyciski● komendy głosowe● systemy przewidujące działania użytkownika● konfiguracja kursora / wskaźnika (wrażliwość, prędkość)

RozwiązaniaNiepełnosprawność intelektualna:● prosty język● krótkie, zrozumiałe polecenia● proste, powtarzalne interfejsy● standardowe interakcje● podkreślanie ważnych informacji● dostępne zasoby pomocy● różne kanały informacji zwrotnej dla użytkownika

Przydatne linki● WCAG 2.0

● WCAG Checklist

● WCAG Quick Reference

● EN 301 549

● Section 508 Standards Guide

● Section 508 Checklist

● Color Contrast Checker

● WebAIM

Dziękuję za uwagę :)