Jak przyrządzić dostępną stronę?

Transkrypt

DOSTĘPNOŚĆ W SYSTEMACH
ZARZĄDZANIA TREŚCIĄ (CMS)
Przemysław Bielecki
AA
Jak przyrządzić
dostępną stronę?
DOSTĘPNOŚĆ W SYSTEMACH
ZARZĄDZANIA TREŚCIĄ (CMS)
WPROWADZENIE
DOSTĘPNOŚĆ WWW
(WEB ACCESSIBILITY)
strony i serwisy dostępne dla jak
najszerszego grona odbiorców
ze szczególnym uwzględnieniem
osób narażonych na wykluczenie
cyfrowe (niepełnosprawnych,
starszych, gorzej wykształconych,
pozbawionych dostępu
do szerokopasmowego internetu)
WCAG
Web Content Accessibility Guidelines (WCAG)
zbiór dokumentów opublikowany
przez WAI zawierający zalecenia dotyczące
tworzenia dostępnych serwisów
internetowych.
Od 15 października 2012 roku wytyczne WCAG
w wersji 2.0 zyskały status międzynarodowej
normy ISO/IEC 40500:2012.
Dlaczego stosować
zasady WCAG?
Dlaczego stosować zasady WCAG?
• Nigdy nie wiemy, co
spotka nas i naszych
bliskich w przyszłości.
• Tworząc rozwiązania
uniwersalne dajemy
wszystkim użytkownikom
równe szanse
w dostępie do informacji
i swobodę w korzystaniu
z cyfrowych zasobów
sieciowych.
Dlaczego stosować zasady WCAG?
• Obowiązujące ustawodawstwo
• Od 30 maja 2012 roku, w polskim
prawie obowiązują przepisy, które
nakładają na wszystkie instytucje
administracji publicznej,
obowiązek dostosowania
istniejących serwisów
internetowych do potrzeb osób
niepełnosprawnych.
Oprogramowanie asystujące dla
niewidomych a rzeczywistość
• Firmy produkujące komercyjne
oprogramowania asystujące chciały wyjść
naprzeciw osobom niewidomym, wymyślając
coraz doskonalsze wersje swoich aplikacji
(nierzadko drogich).
• Pomimo wielu usprawnień aplikacje nie
zdawały egzaminu w cyfrowym świecie.
• Dlaczego?
• Dlaczego?
• Programy asystujące
napotykały na szereg błędów
już na stronach internetowych,
co uniemożliwiało sprawne
korzystanie z witryn.
Przykładowe problemy: zapętlanie, jąkanie się czytników, czy
zagubienie w strukturze strony.
• Wniosek: aby oprogramowanie asystujące sprawnie działało na
stronie WWW, musi mieć przyjazne środowisko (ryba lubi
pływać).
Zaobserwowane trendy: na szczęście dostępność zyskuje
coraz większe znaczenie i producenci wiodących systemów
operacyjnych przewidują już w pakiecie ułatwienia dostępu.
Nie jest to więc już taka droga sprawa.
KRÓTKA
CHARAKTERYSTYKA
WYTYCZNYCH WCAG 2.0
4 bardzo ważne zasady
Postrzegalność
Funkcjonalność
Zrozumiałość
Solidność
Postrzegalność
•Czy przewidziano rozwiązania dla informacji
nietekstowych typu grafiki, pliki video i audio? (tekst
alternatywny, audiodeskrypcja, transkrypcje)
•Czy treści są prezentowane na różne sposoby
(dostępne dla użytkowników z różnymi dysfunkcjami)?
•Czy w tekstach zastosowano zabiegi pozwalające
odróżnić od siebie poszczególne treści (linki, ważne
informacje, cytaty)?
Funkcjonalność
•Dostępność z klawiatury
•Zapewnij wystarczający czas na zapoznanie się z
treścią
•Nie projektuj elementów, które mogą wywołać ataki
padaczki (migotanie obrazu, czerwone rozbłyski)
•Możliwość nawigacji (zapewnij narzędzia, które
ułatwiają użytkownikowi nawigację, znajdowanie
treści oraz określanie, gdzie się aktualnie znajdują)
Zrozumiałość
•Zapewnij czytelną i zrozumiałą treść
•Zadbaj, aby wszystkie elementy interfejsu
użytkownika w serwisie pojawiały się i działały w
sposób przewidywalny
•Pomóż użytkownikowi uniknąć błędów i zapewnij
korektę
Solidność
•Czy serwis jest kompatybilny z różnymi
przeglądarkami oraz technologiami wspomagającymi?
•Czy kod waliduje się w sposób poprawny (czy nie ma
duplikatów id, czy kontenery są zamykane, itp.)
LISTA KONTROLNA WCAG
- NA CO ZWRÓCIĆ
UWAGĘ?
Nawigacja przy użyciu
klawiatury
Możliwość płynnej i szybkiej nawigacji przy
użyciu klawiatury to jeden
z najważniejszych aspektów dostępności
serwisów internetowych.
Aktywny fokus
Upewnij się, że każdy interaktywny
komponent interfejsu użytkownika posiada
stan wizualnego fokusa i jest dostępny
z poziomu klawiatury
UI
Nawigacja przy użyciu
klawiatury
a:active, a:focus, a:hover {
color: #........;
font-weight: bold;
outline: #...... solid 3px;
}
Wzmocnij widoczność
domyślnego fokusa
{ outline: none; }
{ visibility: hidden ; }
TAB + SHIFT
Nawigacja w odwrotnym
kierunku
TABULACJA
(kierunek od lewej do prawej,
z góry do dołu)
Symulacja nawigacji
przy użyciu klawisza
tabulacji
Menu
Menu
Menu
Menu
Slajder
Pasek boczny (h3)
Główna treść (h1)
Tab (kieruje od lewej do prawej, z góry do dołu)
Menu
Menu
Menu
Menu
Slajder
Pasek boczny (h3)
Menu
Menu
Menu
Menu
Slajder
Pasek boczny (h3)
Menu
Menu
Menu
Menu
Slajder
Pasek boczny (h3)
Menu
Menu
Menu
Menu
Slajder
Pasek boczny (h3)
Menu
Menu
Menu
Menu
Slajder
Pasek boczny (h3)
Menu
Menu
Menu
Menu
Slajder
Pasek boczny (h3)
Menu
Menu
Menu
Menu
Slajder
Pasek boczny (h3)
Zadbaj o właściwą kolejność nawigacji
przy użyciu klawiatury
Menu
Menu
Menu
Menu
Slajder
Pasek boczny (h3)
Menu
Menu
Menu
Menu
Slajder
Pasek boczny (h3)
Menu
Menu
Menu
Menu
Slajder
Pasek boczny (h3)
Menu
Menu
Menu
Menu
Slajder
Pasek boczny (h3)
Menu
Menu
Menu
Menu
Slajder
Pasek boczny (h3)
Menu
Menu
Menu
Menu
Slajder
Pasek boczny (h3)
Menu
Menu
Menu
Menu
Slajder
Pasek boczny (h3)
Menu
Menu
Menu
Menu
Tab powinien kierować nas najpierw do treści głównej, później
do pobocznej. Nawet, jeśli kierunek na to nie wskazuje.
Slajder
Pasek boczny (h3)
Skip link
link szybkiego przejścia
do głównej treści
Przejdź do
głównej treści
Menu
Menu
Menu
Slajder
Pasek boczny (h3)
Menu
Przejdź do
głównej treści
Menu
Menu
Menu
Slajder
Pasek boczny (h3)
Menu
<body>
<a href=“#glownatresc”>
Przejdź do głównej treści
</a>
.....
<section id=“# glownatresc”>
...
</section>
Skip link <a href>
TabIndex
Unikaj używania atrybutu tabIndex, który
w sposób wymuszony pozwala zmienić
naturalną kolejność nawigacji przy użyciu
klawiatury.
tabindex
Etykiety
FORMULARZ REJESTRACYJNY
Nazwa użytkownika
np. Jan Kowalski
opcjonalnie
Adres e-mail*
[email protected]
pole wymagane
Hasło*
Hasło powinno zawierać min. 8 znaków
pole wymagane
* Wypełnienie pól oznaczonych gwiazdką (*) jest obowiązkowe
Zaloguj
Dostępne etykiety
<label for="imie">Imię:</label>
<input id="imie" type="text" />
label for = input id
Grupowanie pól formularzy
<fieldset>
<legend> ….. </legend>
…
</fieldset>
FORMULARZ REJESTRACYJNY
<fieldset> <legend>
Kontrolki formularzy
<fieldset>
<legend>Select your pizza
toppings:</legend>
<input id="ham" type="checkbox"
name="toppings" value="ham">
<label for="ham">Ham</label>
<br>
Webaim techniques forms controls
Uwaga
Atrybut placeholder znacznika input nie jest
równoważny z etykietą aktywnego pola.
np. Jan Kowalski
hasło
Zaloguj
label for
placeholder
Wymagane pola muszą
być wyraźnie
i zrozumiale oznaczone
Specjalne instrukcje dotyczące
formatowania wprowadzanych danych
powinny być również dostępne dla
czytników ekranu.
Ważne informacje nie powinny opierać się
wyłącznie na wyróżnieniu kolorem!
Wymagane pola
HTML 5 / ARIA
HTML 5 / required
<label for=„nazwisko">Imię
i nazwisko:</label>
<input id="nazwisko"
type="text"
aria-required="true" />
<label for=„nazwisko">Imię
i nazwisko:</label>
<input id="nazwisko"
type="text" required />
REQUIRED lub ARIA
Nazwa użytkownika
np. Jan Kowalski
opcjonalnie
Adres e-mail*
[email protected]
pole wymagane
Hasło*
pole wymagane
Zaloguj
Nieprawidłowe dane
<p role="alert" id=„instrukcja1">Hasło musi składać się
z minimum 8 znaków</p>
role="alert„ | Ostrzeżenie
Nazwa użytkownika
np. Jan Kowalski
opcjonalnie
Adres e-mail*
[email protected]
pole wymagane
Hasło*
pole wymagane
Zaloguj
Nawigacja
wewnętrzna serwisu
SKRÓTOWCE
Hiperłącza (odnośniki, odsyłacze, linki) to
jeden z najważniejszych elementów
nawigacyjnych.
Nawigacja wewnętrzna
serwisu
CSS
.czytnik {
border: 0;
clip: rect(0 0 0 0);
height: 1px; margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px; }
CSS | Bezpieczna metoda ukrywania
treści dostępna dla czytników ekranu
SKRÓTOWCE
<a href="#" >Czytaj więcej<span
class="czytnik">Ukryta informacja
wyjaśniająca kontekst oraz przeznaczenie
linku</span> </a>
Nawigacja wewnętrzna
serwisu
ARIA
<element aria-labelledby="p" ... >
<element aria-label="..." />
<element aria-describedby="p" ... >
Zobacz: aplikacja php
Dostępne grafiki
Grafiki
<img src="#" alt="Minister Halicki
wita nową minister cyfryzacji Annę
Streżyńską”>
https://mac.gov.pl/aktualnosci/a
nna-strezynska-ministremcyfryzacji
alt="opis alternatywny"
Dekoracyjne grafiki
<img src=“strzalka.png” alt=“”/>
Pusty opis alternatywny
Złożone Grafiki
<img src=“wykres.png” aria
describedby=“opis” alt=“wykres”/>
<a href=“wykres_objasnienie.html”
id="opis">Dane statystyczne przedstawione
w formie tekstowej …</a>
ARIA-DESCRIBEDBY ID
Dostępne nagłówki
Nagłówki
<h1>1. Tytuł</h1>
...
<h2>1.1. Rozdział</h2>
...
<h2>1.2. Rozdział</h2>
...
<h3>1.2.1. Podrozdział</h3>
<h1> - <h6>
Zaburzona hierarchia
<h3> Rozdział</h3>
...
<h2>Rozdział</h2>
...
Nie duplikujemy poziomu <h1>
<h1> Tytuł</h1>
...
<h2>Rozdział</h2>
...
<h1> Rozdział</h1>
Tylko jeden nagłówek <h1>
na danej podstronie
Kontrast
Kontrast
Brak odpowiedniego kontrastu
czcionek względem tła jest dużym
utrudnieniem dla osób słabo
widzących.
Prezentacje graficzne również
Interfejs użytkownika
Wszystkie elementy interfejsu
użytkownika oraz prezentowane treści
powinny być dopracowane pod kątem
zachowania przynajmniej podstawowych
norm kontrastu.
Przyciski, linki, aktywne pola
Kryterium AA
14pt = 1.2em (120%) podstawowego
rozmiaru czcionki (czyli ok. 19px)
Wartość minimalna 4.5:1 (14pt)
Badanie kontrastu
Colour Contrast Analyser
Protanopia
Kolory tęczy postrzegane przez
osobę cierpiącą na protanopię.
Kolory tęczy widziane przez osobę bez
zaburzeń postrzegania kolorów.
Protanopia – wada wzroku polegająca
na nierozpoznawaniu barwy czerwonej.
Daltonizm
Kolory tęczy postrzegane przez
osobę cierpiącą na deuteranopię.
Kolory tęczy widziane przez osobę bez
zaburzeń postrzegania kolorów.
Deuteranopia (daltonizm) – wada wzroku,
ślepoty barw, polegająca na nierozpoznawaniu
barwy zielonej (lub myleniu jej z barwą czerwoną).
DRUPAL
Reputacja
Drupal ma reputację jednego
z najbardziej dostępnych systemów
zarządzania treścią, w zawiązku z czym
jest często wykorzystywany przez
administracje państwowe.
Lista w języku angielskim. Łącznie ponad 1.000.000 stron
internetowych wykorzystuje system Drupal.
Moduły, szablony, rdzeń
Drupal obsługuje standardy dostępności na wiele
różnych sposobów, zarówno poprzez integrację
dedykowanych modułów jak i zastosowanie natywnych
funkcjonalności dostarczanych przez rdzeń systemu.
Wiele różnych sposobów
Społeczność
Jeśli masz jakiś problem albo pomysł, którym chcesz się
podzielić, to zerknij na oficjalny kanał dostępności
systemu Drupal.
Społeczność wspierająca
dostępność systemu Drupal.
Rdzeń
Twórcy platformy zapewniają, że wszystkie funkcje
standardowej wersji systemu Drupal (znane jako "Drupal
core") są zgodne z wytycznymi WCAG 2.0.
FUNDAMENT
Twórcy serwisów internetowych powinni
mieć na uwadze, że pomimo dużej
implementacji natywnych
funkcjonalności rdzenia wspierających
dostępność, system nie gwarantuje
w każdym przypadku pełnej dostępności.
To dobry początek
TAG D#AX
Autorzy modułów poszerzających zakres
funkcjonalności systemu Drupal mogą
dodać specjalny tag D#AX, którego
obecność wskazuje użytkownikom, że tak
oznaczone rozszerzania wspierają
standardy dostępności.
Szczegółowy opis zagadnień
dostępności w języku angielskim.
Wybrane moduły
wspierające dostępność
systemu Drupal CMS.
SUPERFISH
Integrując zewnętrzne biblioteki (jQuery
Superfish plugin) uzyskujemy możliwość
wygodnego tworzenia dostępnego,
wielopoziomowego sytemu nawigacji
wybranego regionu strony.
System dostępnej
wielopoziomowej nawigacji
A11Y CHECKLIST
Wtyczka zawiera listę kontrolną modułów
i zadań związanych z zapewnieniem
dostępności w platformie Drupal.
Lista kontrolna: a11y_checklist
TEXTSIZE
Moduł dodaje blok kontrolek pozwalający
na regulację wielkości czcionek w sekcji
body.
Pozwól użytkownikom
powiększyć czcionkę: textsize
ACCESSIBLE FORMS
Dzięki funkcjonalności tego modułu
poprawiamy znacząco dostępność pól
formularzy serwisu opartego o system
Drupal.
Moduł poprawia również dostępność etykiet
pól informujących o błędach wynikających
z nieprawidłowej walidacji.
JOOMLA
Solidny fundament
Filozofia twórców systemu opiera się na założeniu:
„Dostarczamy podstawowe narzędzia zgodne
z zasadami dostępności; pełna ich implementacja zależy od
Ciebie”.
Dostępność w systemie Joomla CMS –
Forum dyskusyjne
Wspólna odpowiedzialność
Dostępność w systemie Joomla znacząco
zależy więc od działań programistycznych
twórców szablonów oraz ich działań
administracyjnych.
Dostępność w systemie Joomla CMS –
Forum dyskusyjne
Domyślny szablon
Beez3 - szablon instalowany wraz
z dystrybucją systemu Joomla,
spełniający większość podstawowych
założeń w kwestii zapewnienia dostępnej
struktury. Uwaga! W standardzie szablon
nie obsługuje wielopoziomowego menu.
Beez3
Joomla dla wszystkich
Joomla! FAP (Joomla For All)
jest dostępną dystrybucją systemu
Joomla opracowaną dla włoskiego rządu,
wykorzystywaną przez setki gmin,
stowarzyszeń i innych jednostek
publicznych.
Isis Dostępny szablon
administracyjny
Isis - następca motywu Hathor, jednego
z pierwszych dostępnych szablonów przeznaczonych
dla administracji systemu Joomla.
Forum Dostępnej
Cyberprzestrzeni
FDC – Forum Dostępnej Cyberprzestrzeni
Szablon jest znakomitą propozycją
dostępnego oraz wolnego oprogramowania
przeznaczonego dla szerokiego grona
Odbiorców.
Wolne oprogramowanie
Komercyjne szablony
https://www.joomla-monster.com/
Moduły
Repozytorium rozszerzeń wspierających
dostępność dla systemu Joomla.
WORDPRESS
ACCESSIBILITY READY
Twórcy pakietu Wordpress ułatwiają tworzenie
dostępnych stron.
Wystarczy stworzyć skórkę w oparciu
o wymagania zamieszczone pod tym adresem .
Jeśli motyw przejdzie pozytywnie audyt
dostępności, społeczność Word Press przyzna jej
tag „accessibility-ready".
https://wordpress.org/them
es/tags/accessibility-ready
Przykładowy szablon
Dostępne szablony WP
WordPress goes WCAG
https://make.wordpress.org/accessibility/2016/03/21/wordpress-goeswcag/
ACCESSIBLE
DROPDOWN MENUS
Accessible Dropdown Menus (ADM) to
skrypt przekształcający funkcjonalność
nawigacji systemu Wordpress w strukturę
menu reagującą na polecenia klawiatury.
Funkcjonalność wtyczki dostępna jest tuż
po procesie jej instalacji.
ACCESS MONITOR
Wtyczka Access Monitor umożliwia badanie oraz raportowanie
dostępności stron opartych o silnik systemu WordPress.Instalacja
wtyczki odbywa się w sposób standardowy. Ponieważ rozszerzenie
korzysta z API aplikacji zewnętrznej Tenon.io niezbędna jest
autoryzacja wszelkich danych oraz kluczy
API Tenon.io „A11Y Check”
WP ACCESSIBILITY
Wtyczka autorstwa Joe Dolsona, jednego z czołowych
developerów wspierających dostępność środowiska
WordPressa. Prawdopodobnie jest to jedno z najlepszych
rozszerzeń poprawiających funkcjonalność w
zakresie dostępności dedykowane WordPress-owi.
Pełna lista funkcjonalności wtyczki .
Joe Dolson
WCAG 2.0 FORM FIELDS
Wtyczka Gravity Forms – WCAG 2.0 form
fields jest zależna od zainstalowanego
rozszerzenia z pakietu premium Gravity Forms
Premium | pola walidacji
etykiety
Źródła
• Web Content Accessibility Guidelines WCAG 2.0
• Web Content Accessibility Guidelines WCAG 2.0 Autoryzowane
tłumaczenie na język polski
• ZAŁĄCZNIK Nr 4 - WYMAGANIA Web Content Accessibility
Guidelines (WCAG 2.0) DLA SYSTEMÓW TELEINFORMATYCZNYCH W
ZAKRESIE DOSTĘPNOŚCI DLA OSÓB NIEPEŁNOSPRAWNYCH
•
•
•
•
•
Walidatory
http://validator.w3.org
http://jigsaw.w3.org/css-validator
http://wave.webaim.org
http://tenon.io
Kontrast
• http://webaim.org/resources/contrastchecker
• Colour Contrast Analyser
Drupal Accessibility
• Drupal Accessibility Statement
• Drupal group on accessibility
• Accessibility tools and best practices for site
builders
• Drupal Modules that Improve Accessibility
Joomla Accessibility
• Joomla Accessibility Statement
Word Press Accessibility
• WordPress Accessibility Statement
• Joe Dolson WordPress
• Joe Dolson – presentation on WordPress
Accessibility
• WP Accessibility plugin
• Make WordPress Accessible Team
• Accessible WP themes
WikiDos – wiki dostępności
http://imm.home.pl/wiki
Znajdziesz tu:
• artykuły z poradami, jak wykonać dostępne elementy
interfejsu użytkownika w środowiskach JScript, PHP, C++, C#,
Java, Drupal, WordPress oraz wskazówki dotyczące bibliotek, z
jakich należy skorzystać,
• pokazowe desktopowe aplikacje C++ i C# do pobrania
i zainstalowania, internetowe aplikacje PHP i Java,
demonstrujące na swoich przykładach dostępne rozwiązania
i ich kod źródłowy,
• prezentacje poradnikowe o tworzeniu dostępnego kodu
w CMS Drupal, WordPress i Joomla,
• informacje o istniejących w środowiskach developerskich,
brakach, powodujących kłopoty z utworzeniem dostępnego
kodu i o metodach ich pokonywania.

Jak przyrządzić dostępną stronę?

Transkrypt

Podobne dokumenty

przy ul. Gołębiej - Resto Illuminati

Lunch Menu - Zielona Góra - Due Mondi Restauracja Pizzeria