Obsah
- Úvod do problematiky přístupnosti
- Souhrnný přehled
- Příručky, postupy a návody
- Dokument obecně - struktura a sémantika
- Navigace
- Nadpisy
- Seznamy
- Tabulky
- Odkazy
- Barevný kontrast
- Grafika, obrázky, popis, textová alternativa
- Formuláře
- Externí soubory
- Čitelnost, srozumitelnost
- Ovladatelnost z klávesnice
- HTML5 a WAI ARIA
- CSS a přístupnost
- JavaScript a přístupnost
- Multimedia, titulky, přepisy
- Testování přístupnosti webu
- Průzkumy
- Tutoriály k asistivním technologiím
- Mobilní zařízení
- Linux
- Praktické ukázky práce s webem pomocí odečítače obrazovky (Video, Roman Kabelka
- Videozáznamy přednášek o přístupnosti
Úvod do problematiky přístupnosti
Tato část vám chce umožnit nahlédnout do světa těch, kterých se problematika přístupnosti webu týká.
- Přístupnost není charita - nepřístupný web je ztracená obchodní příležitost
- Introduction to Web Accessibility - WebAIM.org
- Introduction to Web Accessibility - WAI
- Web Accessibility Perspectives: Explore the Impact and Benefits for Everyone
- Kolik je v České republice zrakově postižených lidí?
- Kolik vlastně je handicapovaných uživatelů webu?
- 10 mýtů o přístupnosti webových stránek
- Nejčastější mýty v oblasti přístupnosti
- Jak vidí barvoslepý člověk?
- Používame asistenčné technológie v počítači a mobilnom telefóne
- Jak používají zrakově postižení uživatelé počítač nebo mobil?
Simulátory zrakových vad
- Emulate vision deficiencies - Chrome DevTools
- Color vision simulation - MDN Web Docs - moz://a
- NoCoffee – Vision Simulator (doplněk jak pro GChrome tak MFirefox)
- VisionSim - simulátor zrakových vad pro iOS i Android
Souhrnný přehled
Základní přehledy a zdroje informací o přístupnosti.
- Informační technologie v knihovnách 2020: webinář o přístupnosti webu
- Prístupnosť a jej 4 princípy (POUR)
- Jak na přístupnost (nejen) knihovních webů
- 7 aspektů, které mají vliv na přístupnost
- 12 požadavků na přístupnost, které hodně pomohou a moc nestojí
- 15 cest k lepší přístupnosti vašeho webu - I
- 15 cest k lepší přístupnosti vašeho webu - II
- Web Content Accessibility Guidelines (WCAG): seznamte se, prosím
- WCAG 2.0 (11 dílů) (Seriál Radka Pavlíčka o metodice WCAG 2.0 na Zdroják.cz)
- Praktické aspekty přístupnosti
- WebAIM - Articles
- Pope Tech - Blog
Příručky, postupy a návody
- Inclusive Design Principles
- Přístupné webové stránky (online příručka Národní knihovny ČR – Knihovnický institut)
- Web Accessibility First Aid: Approaches for Interim Repairs
- Accessibility - MDN Web Docs - Mozilla
- Tips on Designing for Web Accessibility
- Tips on Writing for Web Accessibility
- Tips on Developing for Web Accessibility
- HTMHell - A collection of bad / good practices in HTML, copied from real websites.
- Web Accessibility Tutorials
Dokument obecně (html, doc(x), pdf)
- HTML Living Standard
- Screen readery a sémantika
- Zákon o přístupnosti: Zlepšují sémantické elementy přístupnost? (3/24)
- Přístupnost HTML5: strukturování obsahu
- Page Structure Concepts - Web Accessibility Tutorials
- Understanding semantics
- Semantic Structure: Regions, Headings, and Lists
- Implement Structure for an Accessible Experience on the Web
Navigace
- Vytvořte konzistentní navigaci a strukturu
- Zákon o přístupnosti: Je nějaké rozvržení webu, které je “univerzální” v tom smyslu, že jsou na ně návštěvníci s handicapem zvyklí a očekávají je? (5/24)
- Page Structure Concepts - Web Accessibility Tutorials
- Ovladatelnost a navigace
- Cesty k přístupné navigaci
- Menu Concepts - Web Accessibility Tutorials
- Homepage Links Remain a Necessity
- 2.4.5 Multiple Ways - to locate a Web page within a set of Web pages
- Zákon o přístupnosti: K čemu jsou dobré tzv. přeskakovací odkazy? (4/24)
- Skip links are important
- Breadcrumb Example
Nadpisy
- Strukturujte obsah stránky pomocí nadpisů
- Jak přístupně strukturovat webovou stránku pomocí nadpisů - praktický návod
- Zákon o přístupnosti: Je stále vhodné používat skryté nadpisy pro uvození navigačních bloků? (15/24)
- Using Headings for Content Structure
- Headings - Pope Tech
- Headings - Web Accessibility Tutorials
- Semantics and Accessibility: Heading Structure
Seznamy
- Tam, kde je to potřeba, používejte seznamy
- Definiční seznamy a přístupnost
- Using ol, ul and dl for lists or groups of links
Tabulky
- Tabulky vytvořte tak, že dávají smysl při čtení po řádcích a mají řádně vyznačena záhlaví řádků a sloupců
- HTML 5: Přístupné tabulky
- Všechny tabulky dávají smysl čtené po řádcích
- Creating Accessible Tables - Data Tables
- Tables Concepts - Web Accessibility Tutorials
- Data Tables - Inclusive Components
- Hey, It’s Still OK to Use Tables
- The Trouble with Tables: A Brief Introduction
- Accessible Data Tables (Web Usability)
- Tabular data - HTML Living Standard
Odkazy
- Proč je nejen pro nevidomé uživatele dobré mít výstižné texty odkazů
- Zákon o přístupnosti: Je vhodné používat odkazy “více” a “zde”? (21/24)
- Externí odkazy a přístupnost
- Zvýrazňujete odkazy při ovládání webu z klávesnice?
- Proč nemá atribut title z hlediska přístupnosti prakticky žádný přínos
- Links and Hypertext - WebAIM
- Links and Text - Pope Tech
- Hyperlinks & Accessibility
- A Complete Guide to Links and Buttons
- Writing Appropriate Link Text
- Links: Don’t “Click Here”
- How To Use Underlined Text To Improve User Experience
- Title Texts Suck
- The Trials and Tribulations of the Title Attribute
- Using the HTML title attribute
Blokové odkazy
Barevný kontrast
- Zajistěte dostatečný barevný kontrast
- Vnímatelnost a rozlišitelnost
- Contrast and Color Accessibility - WebAIM
- Color Contrast - Pope Tech
- Accessibility for Visual Design
- Design Accessibly, See Differently: Color Contrast Tips And Tools
- Windows High Contrast Mode And Accessibility Testing
Nástroje
- DevTools Tips: Discover and fix low contrast text - Chrome for Developers
- Color contrast - Accessibility Inspector - MDN Web Docs
- Test text-color contrast using the Color Picker - Microsoft Edge
- Testování kontrastu barev
- Colour Contrast Analyser (TPGi)
- Contrast ratio – jednoduchý online nástroj na ověření kontrastu barev
- Jak vybrat barvy pro grafický návrh s ohledem na přístupnost
- Color Contrast Analyzer: doplněk pro Google Chrome
Grafika, obrázky - popis, textová alternativa
- Obrázkům, které nesou významové sdělení, definujte relevantní textovou alternativu
- Vnímatelnost a textové alternativy
- Přístupnost HTML5: textové alternativy obrázků
- Alt="", nebo Alt="{mezera}"?
- Alternative Text - WebAIM
- Alternative Text (alt text) - Pope Tech
- Infografika a přístupnost - jde to vůbec dohromady?
- Images Concepts - Web Accessibility Tutorials
- Alt-texts: The Ultimate Guide
- HTML 5.2 - 4.7.5 The img element
SVG formát
- Creating Accessible SVGs
- Contextually Marking up accessible images and SVGs
- SVG Icons and Screen Reader Accessibility
- Inline SVG used for buttons and links
- Accessible SVGs
- Tips for Creating Accessible SVG
- SVG - Web Accessibility Guidelines v 1.0
- Accessible SVG line graphs
Icon Fonts
Obrázková, klikací mapa
Formuláře
- Formulářovým prvkům přiřaďte relevantní popisky
- Každý formulářový prvek má přiřazen výstižný nadpis
- Použitelné a přístupné webové formuláře
- Nestandardně vytvořené formulářové prvky jsou z hlediska přístupnosti velký problém
- Forms Concepts - Web Accessibility Tutorials
- Forms - Pope Tech
- Creating Accessible Forms
- How-to: Use Placeholder Attributes
- Don’t Use The Placeholder Attribute
- Anatomy of Accessible Forms! Placeholder is a Mirage
- More Tips for Creating Accessible Forms
- Accessible auto-suggest
- Accessible Autosuggest Dropdown
Stylované formulářové prvky
- The Accessibility of Styled Form Controls
- Styled Single Selects - Accessible Styled Form Controls
- Custom Styling Form Inputs With Modern CSS Features
Validace
- Usable and Accessible Form Validation and Error Recovery - WebAIM
- Validating Input - Web Accessibility Tutorials
- Form Validation - Accessibility Patterns for the Web - ebay
- Input Validation - Accessibility Patterns for the Web - ebay
- Handling Validation Errors in Forms - up your a11y
- Forms & error handling - Access & Use
Externí soubory
- Vytváření obsahu přístupného všem uživatelům
- Přístupnost dokumentů je stejně důležitá jako přístupnost webových stránek
- 15 cest k lepší přístupnosti vašeho webu – II. 13. Texty odkazů jsou dostatečně výstižné
- PDFs and non-HTML documents - Pope Tech
- Showing File Types in Links
- Cheatsheets (Návody, jak vytvářet přístupné dokumenty různých formátů.)
Word
- Jak vytvářet přístupné dokumenty ve Wordu 2007 (Blog POSLEPU)
- Jak tvořit přístupné dokumenty (Seminář Deset let projektu Blind Friendly Web)
- Automatická kontrola přístupnosti dokumentu v MS Wordu 2010
- Zpřístupnění wordového dokumentu uživatelům s postižením
- Microsoft Word (WebAIM.org)
- Cheatsheets (Taháky pro více typů dokumentů)
- Přístupnost PDF dokumentů (Blog POSLEPU)
- Přístupnost PDF dokumentů (Seminář Deset let projektu Blind Friendly Web)
- PDF soubory přístupné pro odečítače obrazovky (soubor PDF, 272 kB; jednoduchý tahák, schematizovaný průvodce tvorbou přístupného PDF dokumentu v textových editorech Word, LibreOffice a Dokument Google; aktualizováno 2022)
- Vytváření souborů PDF podporujících funkce usnadnění
- Otestujte si přístupnost svých PDF pomocí nástroje PDF Accessibility Checker
- Defining PDF tags in Word
- Creating Accessible PDF Documents In Adobe Acrobat XI
- PDF Techniques - Techniques for WCAG 2.2
- PDF Techniques for WCAG 2.0
- PDF Accessibility Training (Video)
Čitelnost, srozumitelnost
- Vnímatelnost a rozlišitelnost
- Srozumitelnost, čitelnost a intuitivnost
- Typefaces and Fonts
- Text/Typographical Layout
- Writing Clearly and Simply
- The Importance of Designing for Readability
- Fonts don’t matter
- Plain language (accessibility for content) (Slide prezentace)
Velikost písma
- Je definování velikosti písma v pixelech stále ještě vážný problém?
- Jak změřit velikost písma na webové stránce
- Do’s and Don’Ts of Typography
- Your Body Text Is Too Small
- 16 Pixels Font Size: For Body Copy. Anything Less Is A Costly Mistake
- What’s ‘large text’ in WCAG 2.0 parlance?
- Improve Web Typography with CSS Font Size Adjust
- Convert pixel-point-em-rem-percent (Nástroj pro převod mezi jednotkami velikosti fontu.)
Ovladatelnost z klávesnice
Informační zdroje této kapitoly jsou vzory a šablony hotového kódu pro realizaci interaktivních prvků a funkcí na webové stránce vyžadujících – z hlediska přístupnosti – ovládání z klávesnice, u kterých je přístupnost často nedostatečná nebo zcela chybí. Typicky jde o různá rozbalovací menu, karty nebo slajdery a obecně "custom" widgety.
- Zajistěte, aby webová stránka byla ovladatelná z klávesnice
- Ovladatelnost a přístupnost z klávesnice
- Přístupnost ovládacích prvků webových aplikací
- Tajemství fokusu
- Jak co nejlépe zpřístupnit web z klávesnice
- Cesty k přístupné navigaci
- Keyboard Accessibility
- Nutrition Cards for Accessible Components
- Basic Custom Control Requirements
- Keyboard and Interaction Accessibility Techniques
- Using the tabindex attribute
Vzorová řešení
- Patterns - ARIA Authoring Practices Guide (APG)
- Code Library - Deque University
- Deque Cauldron
- Inclusive Components
- eBay MIND Patterns - Accessibility Patterns for the Web
- Web Accessibility Tutorials
- Web Accessible Code Libraries and Design Patterns
- The components - Access & Use
Tlačítko
- Vše o prvku BUTTON a tlačítkách v HTML
- The Button Cheat Sheet
- A Complete Guide to Links and Buttons
- Building Accessible Buttons with ARIA: A11y Support Series
Menu
- Fly-out Menus - Web Accessibility Tutorials
- Application Menus - Web Accessibility Tutorials
- Application Menu Example & Code - Web Accessibility Tutorials
- Accessible Mega Menu
- Menus & Menu Buttons - Inclusive Components
- Creating Accessible Menus and Mega Menus
- Navigation Menubar Example
- Accessible Mega Menu (A demonstration of how to implement a keyboard and screen reader accessible mega menu as a jQuery plugin.)
- Accessible Custom Select Dropdowns
Accordion / Harmonika
- Collapsible Sections - Inclusive Components
- Accordion Pattern (Sections With Show/Hide Functionality) - APG
Karty
Carousel / Slider
Datepicker
- Accessible Date Pickers (WebAxe)
- Accessible datepickers (Axess Lab)
Notifikace
Informace o změnách stavu a oznámeních na stránce.
Horké klávesy
- Zákon o přístupnosti: Dává smysl definovat na stránkách horké klávesy (accesskeys)? (11/24)
- Accesskey - Keyboard Accessibility - WebAIM.org
HTML5 a WAI ARIA
- WAI-ARIA: Jak a kdy ji použít? (webinář IAAP Nordic)
- WAI ARIA 1.0 byla vydána jako doporučení W3C
- Tři články o WAI-ARIA včetně praktických příkladů
- Seriál: Přístupnost dynamických webových aplikací (4 díly)
- Přístupnost HTML5 v kombinaci s WAI-ARIA (Slajd prezentace)
- Proč bych nerad, aby strukturální HTML5 elementy skončily v propadlišti dějin
- Accessibility of Rich Internet Applications (WebAIM.org)
- ARIA - Pope Tech
- Accessible Rich Internet Applications (WAI-ARIA) 1.2
- ARIA Authoring Practices Guide (APG)
- Using ARIA (Practical guide for developers on how to add accessibility information to HTML)
- ARIA in HTML
- Periodic Table of Semantics - (prvky HTML s odpovídajícími rolemi ARIA)
- To ARIA! The Cause of, and Solution to, All Our Accessibility Problems
- Describing aria-describedby
- Short note on aria-label, aria-labelledby, and aria-describedby
- The difference between aria-label and aria-labelledby
- My Priority of Methods for Labeling a Control
CSS a přístupnost
- Interpretace CSS odečítači obrazovky
- Jak používat CSS stav :focus
- Accessible CSS
- CSS generated content is not content
- Alternative Text for CSS Generated Content
- CSS Grid Layout and Accessibility
- Writing CSS with Accessibility in Mind
Vizuální skrytí obsahu pomocí CSS
- Chybka ve skrývání obsahu stránky a jak ji opravit
- Note on hiding elements - Web Accessibility Tutorials
- Hiding content for screen readers
- CSS in Action - Invisible Content Just for Screen Reader Users
- Hiding Content Responsibly
- Comparing Various Ways to Hide Things in CSS
JavaScript a přístupnost
- Zákon o přístupnosti: Jak je to s přístupností JavaScriptu? (10/24)
- People who use screen readers don't use JavaScript - Myths - a11y
- Writing JavaScript with accessibility in mind
- Accessible JavaScript - WebAIM.org
- JavaScript - CSS and JavaScript accessibility best practices - MDN Web Docs
JS Frameworks / SPA
- Accessible Routing in JavaScript Frameworks
- Angular and Accessibility: Issues and Strategies
- Debunking the Myth: Accessibility and React
- A ‘Vue’ of Accessibility: Tips and Tricks to make your application accessible
- Intro to Accessibility - Ember
- Three Insights I Gained While Researching Vue.js Accessibility
- What we learned from user testing of accessible client-side routing techniques with Fable Tech Labs
Multimedia, titulky, přepisy
- Vnímatelnost a multimedia
- Technické a funkční parametry titulků pro osoby se sluchovým postižením - ASNEP
- Jak na titulkování videa v programu Subtitle Workshop
- Přidání vlastních titulků - Nápověda YouTube
- Captions, Transcripts, and Audio Descriptions
- Videos and audio - Pope Tech
- Making Audio and Video Media Accessible - W3C WAI
- Captions and Transcripts and Audio Descriptions, Oh My!
- Accessible HTML5 Media Players and More
- A More Accessible HTML5
<video>Player
Testování přístupnosti webu
- Kontrolní seznam pro WCAG 2.0
- WebAIM's WCAG 2 Checklist
- Zákon o přístupnosti: Stačí pro testování přístupnosti použít pouze Google Lighthouse? (2/24)
- Má smysl testovat svépomocí přístupnost webu pomocí screen readeru?
- Jak na jednoduchý audit přístupnosti – otestujte si bezbariérovost svého webu
- Testování přístupnosti webu: doporučené kombinace screen readeru a prohlížeče
- Testování přístupnosti webových stránek se screenreaderem JAWS
- Testování přístupnosti webových stránek se screenreaderem NVDA
- Kompletní průvodce Předčítáním (Narrator, Windows)
- Screen reader, keyboard, and zoom testing - Pope Tech
- The Importance Of Manual Accessibility Testing
Testovací nástroje
Průzkumy
Průzkumy mezi uživateli odečítačů obrazovky, slabozrakými a profesionály v oboru přístupnosti, prováděné organizací WebAIM.org.
Tutoriály k asistivním technologiím
- Jak na Windows 10 s odečítacím programem JAWS
- NVDA - open source screen reader pro Windows
- Příručky pro zrakově postižené uživatele moderních internetových prohlížečů
- Jak na iPhone přes VoiceOver (video a audio kurz)
- Surfing the Internet with JAWS and MAGic! Tutoriál od Freedom Scientific o maximálním využití možností odečítače Jaws a zvětšovací lupy Magic při prohlížení a práci s webovým obsahem s demonstračními příklady. (anglicky)
Mobilní zařízení a aplikace
- Přístupnost aplikací pro iOS a Android (webinář IAAP Nordic) - Poslepu.cz
- Rob Whitaker: Developing Inclusive Mobile Apps: Building Accessible Apps for iOS and Android, Apress 2020 (e-Book)
- Testování přístupnosti v soutěži Mobilní aplikace roku 2017
- Přístupnost mobilních aplikací pro nevidomé uživatele
- Přístupnost pro mobilní zařízení - prezentace na #mdevcamp2013
- Mobilní vývojáři, myslete i na přístupnost: přednáška na mobileDevCamp 2012
- Zákon o přístupnosti: Proč je důležitá přístupnost mobilního menu z klávesnice? (20/24)
- Mobile Accessibility Guidelines - BBC Accessibility
- Mobile A11y
- Mobile Testing - AccessibilityOz
- Mobile Accessibility Testing Guide for Android and iOS
- Mobile Accessibility: How WCAG 2.0 and Other W3C/WAI Guidelines Apply to Mobile
- Mobile Web Best Practices 1.0
Android
- Je Android skutečně přístupný pro nevidomé?
- Nápověda usnadnění přístupnosti (pro uživatele)
- Starting Android Accessibility
- Build more accessible apps - Android developers (pro designéry a vývojáře)
- Google‘s Material Design 3
- Test your app's accessibility
- Accessibility Scanner (nástroj pro testování aplikací)
Zařízení od Apple
- Apple jako kompenzační pomůcka pro zrakově postižené (6 dílů)
- Jak na iPhone přes VoiceOver (video a audio kurz)
- Přístupnost Mac OS X pro nevidomé: 1. díl, 2. díl, 3. díl, 4. díl
- iOS 7: První doteky poslepu: 1. díl, 2. díl, 3. díl
- iPad: standard přístupnosti dotykových zařízení (3 díly)
- Uživatelská příručka pro VoiceOver
- Funkce zpřístupnění - Uživatelská příručka pro iPhone
- iPhone and iPad Accessibility Support (pro uživatele)
- Human Interface Guidelines
- Accessibility for Developers - Apple (pro vývojáře)
- Accessibiity Resources Tools, documentation, videos, and more.
Frameworky pro mobilní nativní aplikace
Linux
Praktické ukázky práce s webem pomocí odečítače obrazovky (Video, Roman Kabelka)
- Práce s nadpisy pomocí screenreaderu
- Práce se seznamy pomocí screenreaderu
- Práce s tabulkami pomoci screenreaderu
- Ukázka ovládání webu pomocí klávesnice - přístupné položky menu
- Ukázka ovládání webu pomocí klávesnice - nepřístupné položky menu
- Práce s formuláři pomocí screenreaderu
- Cesta k přístupné tvorbě obsahu webových stránek
Videozáznamy přednášek o přístupnosti
- Jak a proč řeší velké weby přístupnost (Radek Pavlíček, WebExpo 2017, video)
- Přístupnost v kódu: ukázky a návrhové vzory (Martin Michálek, WebExpo 2017, video)
Aktuální trendy v přístupnosti, FI MUNI v Brně, 30. 4. 2010
Přednáška Radka Pavlíčka studentům Semináře webdesignu na Fakultě informatiky Masarykovy univerzity v Brně. Záznam přednášky a další materiály, které se přednášky týkají.
