A11Y

Web Page Accessibility

Přístupnost webových stránek

Lukáš Bařinka

Accessibility is the degree to which a product, device, service, or environment is available to as many people as possible. Accessibility can be viewed as the „ability to access“ and benefit from some system or entity.

Pod pojmem přístupnost chápeme takový stav, kdy daná věc neklade svým uživatelům při používání žádné překážky. Přístupnou budovu mohou tedy např. používat vozíčkáři a přístupný web zase např. slabozrací. Přístupnost je tedy bezbariérovost.

Table of contentsObsah

• About accessibility Co je přístupnost
• General guidelines on accessible web design Obecné zásady tvorby přístupného webu
• Web Content Accessibility Guidelines (WCAG)
• Accessibility Guidelines according to Czech Legislation Pravidla přístupnosti podle zákona ČR

About accessibilityCo je přístupnost

Web Accessibility DefinitionDefinice webové přístupnosti

• Web accessibility refers to the inclusive practice of making websites usable by people of all abilities and disabilities.
• Compared to the general concept of accessibility, web accessibility is narrowed into the web environment.
• Accessible site therefore does not put its users to any difficulties that would preclude to use the web effectively.

• Webová přístupnost odkazuje na postupy při tvorbě webu, které umožňují jeho používání lidmi s různými možnostmi a omezeními.
• Pojem přístupnosti webových stránek je tedy oproti obecnému pojmu zúžen na funkčnost webových stránek.
• Přístupné stránky tedy nestaví svým uživatelům žádné překážky, které by jim znemožnily daný web efektivně používat.

Why to Have Accessible WebProč mít přístupný web

• There is a plenty of handicapped users around the world
• Every user is a potential customer
• Accessible web is pleasant to use even for common users
• Accessible web is more understandable for robots

• Uživatelů s hendikepem je na světě spousta
• Každý uživatel je potenciální zákazník
• Přístupný web se příjemněji používá i běžným návštěvníkům
• Přístupný web je lépe čitelný pro roboty vyhledávačů

Handicapped Web UsersHendikepovaní uživatelé Internetu

• Visual Issues
• Auditory Issues
• Motor/Mobility Issues
• Display Issues
• Robots
• Cognitive/Intellectual Issues

• Zrakově postižení
• Sluchově postižení
• Pohybově postižení
• Uživatelé se zobrazovacími problémy
• Roboti
• Uživatelé s poruchami učení a soustředění

Visual IssuesZrakově postižení

• Blind or heavily visual impaired users
• Low vision and poor eyesight
• Short-sighted and long-sighted users
• Color blinded users
• Temporary visual impaired users

• Zcela nevidomí a jinak těžce zrakově postižení
• Slabozrací
• Krátkozrací a dalekozrací
• Barvoslepí
• Uživatelé s dočasně zhoršenou možností vidět

Short-sight and long-sight InfluenceVliv krátko- resp. dalekozrakosti

MIT: Monroe-Einstein

Auditory IssuesSluchově postižení

• Hearing impaired users
• Users without sound device E.g. speakers
• Users unable to hear due to external conditions E.g. noise

• Sluchově postižení
• Uživatelé bez zvukového zařízení Např. reproduktory
• Neslyšící vzhledem k externím podmínkám Např. hluk

Motor/Mobility IssuesPohybově postižení

• Long term inability to use mouse
• Temporary inability to use mouse E.g. broken arm
• Different pointing device abilities E.g. mouse, hand, stylus, gloves

• Dlouhodobě nemohou používat myš
• Dočasné nemohou používat myš Např. ruka v sádře
• Různé možnosti (přesnost) kurzoru Např. myš, ruka, pero, ruka v rukavici

Display IssuesUživatelé se zobrazovacími problémy

• Alternate browser users
• Users of alternate projecting devices

• Uživatelé alternativních prohlížečů
• Uživatelé jiných zobrazovacích zařízení

RobotsRoboti

• Don't see colors, don't hear sounds, hardly process images, JS…
• Text web browser simulation (Lynx View)

• Nevidí barvy, neslyší zvuk, nerozpozná obrázky, problém s JS…
• Simulace textového prohlížeče (Lynx View)

Assistive technologiesPodpůrné (asistivní) technologie

• Screen reader software
• Refreshable Braille display
• Screen magnification software
• Speech recognition
• Keyboard overlays
• Access to subtitled or sign language videos

• Čtečka obrazovky
• Braillův displej
• Lupa
• Rozpoznání hlasu
• Překrytí klávesnice
• Přístup k videům s titulky nebo znakovou řečí

General guidelines on accessible web designObecné zásady tvorby přístupného webu

Valid and Semantic CodeValidní a sémantický kód

• HTML code according to HTML specification meeting W3C criteria
• HTML tags reflecting content meaning (semantic)

• HTML kód v souladu se specifikací jazyka HTML dle norem W3C
• HTML značky odpovídající významu obsahu

Page Text contentTextový obsah stránky

• All information available in text form
• Images contain explanatory alternate text
• Animations and videos contain text alternative
• Accurate page title (HTML meta)

• Dostupnost informací v textové podobě
• Obrázky obsahující výstižný alternativní text
• Animace a videa obsahují textovou alternativu
• Výstižný titulek stránky (element title v hlavičce)

Visualization and Content StructureVizualizace a struktura obsahu

• Font-size must not be too small
• Sufficient font to background contrast
• Background should not contain disturbing pattern
• Lines should not be too long
• Text divided into shorter paragraphs interlaced by heading
• Rather short easily understandable sentences

• Písmo nesmí být příliš malé
• Barva písma a pozadí musí být dostatečně kontrastní
• Pozadí by nemělo obsahovat rušivý vzorek
• Řádky by neměly být příliš dlouhé
• Text má být členěný do kratších odstavců a prokládaný nadpisy
• Používejte spíše krátké, snadno srozumitelné věty

Inverted PyramidObrácená pyramida

A comprehensive take on the inverted pyramid in journalism, which explains the kind of prioritizing a journalist should engage in.

Obrácená pyramida jako trojúhelník na špičce rozdělený na třetiny. V horní části je to nejzávažnější, v prostřední to důležité a ve zbytku ostatní informace.

Wikipedia: Inverted pyramid

Link visualization and text contentVizualizace a textový obsah odkazů

• Clearly distinguishable from other elements
  • Usually blue color, underlined
  • Differentiate visited links from unvisited
• Sufficient and accurate content
  • User should know exactly where the link goes
  • Typical problem "here" or "more" links

• Jasně rozpoznatelné od ostatních prvků
  • Typickou barvou je modrá, typická dekorace je podtržení
  • Odlišení již navštívených odkazů
• Dostatečný a výstižný obsah
  • Uživatel by měl přesně vědět, kam ho odkaz zavede
  • Typický problém „zde“ nebo „více“ apod.

Web Content Accessibility Guidelines (WCAG)

Web Accessibility InitiativeIniciativa webové přístupnosti

• Web accessibility guidelines WCAG 2.0 - 2008
• Technical reports, and educational resources
• To help make the Web accessible to people with disabilities
• Web WAI

• Pravidla přístupnosti webového obsahu WCAG 2.0 - 2008
• Technické zprávy a vzdělávací zdroje
• Cílem je přiblížit web hendikepovaným lidem
• Web WAI

WCAG 2.0 Supporting Technical MaterialsPodpůrné materiály WCAG 2.0

• WCAG 2.0 As a stable, referenceable technical standard
• How to Meet WCAG 2.0 A customizable quick reference to WCAG 2.0 requirements (Success Criteria) and techniques
• Understanding WCAG 2.0 A guide to understanding and implementing Web Content Accessibility Guidelines 2.0
• Techniques for WCAG 2.0 Techniques and Failures for Web Content Accessibility Guidelines 2.0

• WCAG 2.0Stabilní technický standard (český překlad)
• How to Meet WCAG 2.0Upravitelný rychlý přehled požadavků a technik WCAG 2.0
• Understanding WCAG 2.0Průvodce pochopením a implementací WCAG 2.0
• Techniques for WCAG 2.0Techniky a časté prohřešky proti WCAG 2.0

WCAG 2.0 StructureStruktura WCAG 2.0

• WCAG 2.0 is a stable, referenceable technical standard
• It has 12 guidelines that are organized under 4 principles Perceivable, Operable, Understandable, Robust
• For each guideline, there are testable success criteria, which are at three levels A, AA, and AAA

• WCAG se dělí do 4 základních principů
• Pod každým z principů se skrývá několik pravidel (celkem jich je 12) Vnímatelnost, Ovladatelnost, Srozumitelnost, Robustnost
• Na pravidla jsou navázána tzv. kontrolní kritéria, vůči kterým je možno webový obsah testovat
• Míru shody popisují tři úrovně A (nejnižší), AA, AAA (nejvyšší)

PerceivableVnímatelnost

1. Provide text alternatives for non-text content.
2. Provide captions and other alternatives for multimedia.
3. Create content that can be presented in different ways, including by assistive technologies, without losing meaning.
4. Make it easier for users to see and hear content.

1. Poskytněte textovou alternativu pro netextový obsah.
2. Poskytněte popisky a ostatní alternativy pro multimédia.
3. Vytvářejte obsah, který jde reprezentovat různými způsoby, včetně asistivních technologií, aniž by ztratil význam.
4. Usnadněte uživatelům vidět a slyšet obsah.

OperableOvladatelnost

5. Make all functionality available from a keyboard.
6. Give users enough time to read and use content.
7. Do not use content that causes seizures.
8. Help users navigate and find content.

5. Zpřístupněte veškerou funkcionalitu z klávesnice.
6. Dejte uživatelům dostatek času pro čtení a použití obsahu.
7. Nepoužívejte „lekavý“ a jinak nepříjemný obsah.
8. Pomozte uživatelům s navigací a nalezením informace.

UnderstandableSrozumitelnost

9. Make text readable and understandable.
10. Make content appear and operate in predictable ways.
11. Help users avoid and correct mistakes.

9. Tvořte čitelné a pochopitelné texty.
10. Zajistěte, aby se obsah zobrazoval a fungoval předvídatelně.
11. Pomozte uživatelům vyhnout se chybám a opravit je.

RobustRobustnost

12. Maximize compatibility with current and future user tools.

12. Maximalizujte kompatibilitu se současnými a budoucími uživatelskými nástroji.

Accessibility Guidelines according to Czech LegislationPravidla přístupnosti podle zákona ČR

Decree No. 64/2008Vyhláška č. 64/2008

About a form of publishing information related to public administration through a website for people with disabilities (Decree on accessibility) was issued.

O formě uveřejňování informací souvisejících s výkonem veřejné správy prostřednictvím webových stránek pro osoby se zdravotním postižením (vyhláška o přístupnosti)

• Decree No. 64/2008 Col. Vyhláška č. 64/2008 Sb. - on-line version on-line verze
• Methodological Guidelines for Decree No. 64/2008 Col. Metodický pokyn k vyhlášce č. 64/2008 Sb. - on-line version on-line verze

Accessibility Guidelines ChaptersKapitoly pravidel přístupnosti

1. Website content is accessible and readable
2. The webpage is controlled by a user
3. Information is understandable and synoptic
4. Controlling the web is obvious and understandable
5. Code is technically eligible and structured
6. Webpage accessibility statement

1. Obsah webových stránek je dostupný a čitelný
2. Práci s webovou stránkou řídí uživatel
3. Informace jsou srozumitelné a přehledné
4. Ovládání webu je jasné a pochopitelné
5. Kód je technicky způsobilý a strukturovaný
6. Prohlášení o přístupnosti webových stránek

Accessibility VerificationOvěřování přístupnosti

• Subset of usability testing where the users under consideration have disabilities
• Goal is to discover how easily people can use a web site
• And feed that information back into improvements

• Podmnožina testování použitelnosti, kde zohledňovaní uživatelé mají hendikepy
• Cílem je odhalit, jak snadno lidé mohou používat web
• Použít zjištění k vylepšování budoucích návrhů
• Vyhodnocení je formalizované pomocí pravidel přístupnosti, legislativou

When to testKdy je dobré testovat

"Test early, test often", or else...

„Testujte včas a často“, jinak ...

• Projects tend to run over-time and over-budget
• Testing is often rushed, omitted, or ignored thanks to such pressures
• It is more work to fix problems discovered late in a process than to do things right from the start

• Projekt (v lepším případě) vyčerpá čas a rozpočet
• Testování se na základě toho urychlí, vynechá nebo ignoruje
• Oprava pozdě odhalených problémů je mnohem nákladnější, než „dělat věci správně“ od začátku

Who to testKdo má testovat

• Experts
  • Understand how the underlying web technologies interact
  • Knowledge about different user groups
  • Inclination to learn dedicated testing tools
• Users
  • Real experts in their own abilities and their own assistive technology
  • Gaps between more and less technical users
  • Gaps between people who are familiar with the web site and people who aren’t

• Experti
  • Rozumí, jak interagují technologie na pozadí,
  • Mají znalosti o skupinách uživatelů,
  • Učí se používat testovací nástroje.
• Uživatelé
  • Skuteční experti na své vlastní schopnosti a asistivní technologie,
  • Rozdíly na úrovni technické dovednosti,
  • Rozdíly mezi uživateli znalými a neznalými web.

Methods of TestingMetody testování

• Using automated tools (and tools available in browsers)
  • Quick and convenient
  • Can not identify/verify all the shortcomings
  • Usually evaluate only formal accessibility
• Document syntax validation (HTML, CSS, JS)
• Using text-based browsers or their emulators

• Použití automatizovaných nástrojů (a nástrojů dostupných v prohlížečích)
  • Jsou rychlé a pohodlné
  • Nedokáží identifikovat/posoudit všechny nedostatky
  • Vyhodnocují časo pouze formální přístupnost
• Validace syntaxe dokumentů (HTML, CSS, JS)
• Použití čistě textových prohlížečů nebo jejich emulátorů

Methods of Testing (cont.)Metody testování (pokr.)

• Using a wide variety of graphic browsers under different conditions
• Fully
• Without graphics
• Without sounds
• Without using the mouse
• Without frames, scripts, style sheets, applets, ...
• Using different versions of browsers
  (ancient and modern)
• Using reading browsers, screen readers, screen magnification software for small screens etc.

• Použití široké palety grafických prohlížečů za různých podmínek
  • Plnohodnotně
  • Bez načtené grafiky
  • Bez načtených zvuků
  • Bez použití myši
  • Bez interpretace rámů, skriptů, stylů, apletů, …
• Použití různých verzí prohlížečů
  (starých i moderních)
• Použití čtecích prohlížečů, hlasových čteček, software pro zvětšování obrazovky, malé obrazovky atd.

Methods of Testing (cont.)Metody testování (pokr.)

• Using the spell checker and grammar checker
  • To avoid problems with understanding texts with typos when reading or using a voice synthesizer
  • To avoid problems with understanding texts containing grammatical mistakes
• Assessing texts according to its simplicity and readability
• Inviting users with disabilities / limitations to the review of documents

• Použití kontroly překlepů a gramatiky
  • Pro předejití problémů s pochopením čteného textu s překlepy při použití hlasového syntetizátoru
  • Pro odstranění problémů s porozuměním textů obsahujících gramatické chyby
• Posuzování obsahu dokumentu z pohledu jednoduchosti a čitelnosti
• Pozvání uživatelů s postižením/omezením k recenzi dokumentů

Formal Vs. Real AccessibilityFormální vs. faktická přístupnost

• The disadvantage of accessibility rules is that in some ways they are the result of compromise, and by far do not cover all possible approaches for creating the website.
• Even if the web formally meets given criteria it may still be unusable.

• Nevýhodou pravidel je, že jsou v některých směrech výsledkem kompromisů, a zdaleka nepostihují všechny možné postupy při tvorbě
• I web, který pravidla formálně splňuje, může být pro uživatele zcela nepoužitelný.

Accessibility Evaluation ResourcesDokumenty vyhodnocování přístupnosti

• "Evaluating Websites for Accessibility" is a multi-page resource suite that outlines different approaches for evaluating websites for accessibility.
• It does not provide checkpoint-by-checkpoint testing techniques
• It does provide general procedures and tips for evaluation in different situations
• From evaluation during website development to ongoing monitoring of existing sites

• "Vyhodnocování přístupnosti webu" je balíček materiálů, který aplikuje různé přístupy evaluace přístupnosti webu.
• Neobsahuje zaškrtávací testovací techniky
• Poskytuje obecné procedury a tipy pro vyhodnocování v různých situacích
• Od vyhodnocování během vytváření webu po průběžné monitorování existujících webů

Accessibility Evaluation Resources (cont.)Dokumenty vyhodnocování přístupnosti (pokr.)

• Easy Checks - A First Review of Web Accessibility Provides simple steps to help assess if a web page addresses accessibility.
• WCAG-EM Overview: Website Accessibility Conformance Evaluation Methodology Introduces WCAG-EM technical report, an approach for determining how well a website conforms to Web Content Accessibility Guidelines (WCAG) 2.0.
• Involving Users in Web Accessibility Evaluation Provides guidance on including people with disabilities („users“) in accessibility evaluation throughout Web development.
• Evaluation Approaches for Specific Contexts Describes evaluation during the development process, ongoing monitoring, evaluation of legacy sites, and evaluation of dynamically generated Web pages.
• Selecting Web Accessibility Evaluation Tools Provides guidance on choosing which Web accessibility evaluation tools to use to help evaluate Web accessibility.
• Web Accessibility Evaluation Tools List Search Provides a comprehensive list of Web accessibility evaluation tools that is searchable and sortable.
• Using Combined Expertise to Evaluate Web Accessibility Describes the composition, training, and operation of teams of reviewers evaluating accessibility of websites.
• Template for Accessibility Evaluation Reports Presents a format for communicating results of a Web accessibility evaluation.

• Jednoduchá kontrola (Easy Checks) - První test webové přístupnosti Poskytuje jednoduché kroky pomáhající určit, zda je webová stránka použitelná.
• Přehled WCAG-EM (WCAG-EM Overview) - Evaluační Metodika úrovně webové přístupnosti Přístup určující, do jaké míry webová stránka odpovídá WCAG 2.0.
• Zahrnutí uživatelů do evaluace webové přístupnosti Návod pro zahrnutí postižených uživatelů do vyhodnocování přístupnosti během vývoje webu.
• Evaluační přístupy pro specifický kontext Popisuje vyhodnocování během vývojového procesu, průběžné monitorování a vyhodnocování dynamicky generovaných webů.
• Volba nástrojů vyhodnocujících webovou přístupnost Poskytuje návod výběru vhodného nástroje pro automatické vyhodnocení webové přístupnosti pomáhající vyhodnotit webovou přístupnost.
• Seznam nástrojů pro automatické vyhodnocování přístupnosti s vyhledáváním Poskytuje obsáhlý seznam nástrojů vyhodnocujících webovou přístupnost s možností vyhledávání a uspořádání.
• Kombinovaná expertíza evaluace webové přístupnosti Popisuje kompozici, trénink a práci týmů hodnotitelů posuzujících přístupnost webových stránek.
• Šablona pro report vyhodnocení přístupnosti Představuje formát komunikování výsledků evaluace webové přístupnosti.