Archiv štítku: Webdesign

Snídaně u Mastera: Jak na přístupný web?

Osvěty v oblasti přístupnosti webu není nikdy dost. Rád jsem proto přijal pozvání na únorovou Snídani u Mastera, na které společně s Romanem Kabelkou, webadministrátorem a nevidomým programátorem ze společnosti Master Internet, zájemcům představíme tématiku přístupnosti.

Chcete vědět, proč je přístupnost při návrhu digitálního produktu důležitá a jaké výhody přináší jeho uživatelům? Během přednášky Přístupnost jako důležitá součást digitálního designu vám prakticky ukážeme, jak přístupně navržené weby a aplikace nejen uživatelům s handicapem pomáhají při každodenních činnostech, jakými jsou například získávání informací, cestování či komunikace s přáteli.

Přednáška bude pojata nízkoprahově, tzn. bude přínosná především pro ty, kdo se zatím s tématikou přístupnosti nesetkali. Současně ale jistě platí, že prostor pro networking bude možné využít i k zodpovězením pokročilejších dotazů ať už na mě, či na Romana 🙂

Kdy a kde?

Ve středu 7. února od 9:00 v MasterDC Praha, Kodaňská 46, Praha 10.

Harmonogram akce

  • 9:00 – 9:20 přivítání a snídaně
  • 9:20 – 9:50 seznámení s přístupností
  • 9:50 – 10:10 přestávka
  • 10:10 – 10:30 novinky ze zákulisí Masteru
  • 10:30 – 11:00 networking a vzájemné představení

Pojedete na akci autem?

Místa na parkování jsou pro vás připravena na krytém dvoře budovy 4D Center. Z ulice Kodaňská pokračujte po Kavkazské, a zhruba po 200 metrech odbočte doprava k závoře s interkomem.

Nahlaste ostraze objektu, že jedete do Master Internet, a pokračujte podél zdi až na krytý dvůr. Jsou zde pro vás vyhrazena místa 6 – 10. Budeme vás očekávat v zasedací místnosti v jedenáctém patře s ohromujícím výhledem na Prahu. Pokud nás na místě nebudete moct najít, volejte Pavola Makela na čísle 773 919 300.

Registrace

Kapacita akce je omezená, v případě zájmu potvrďte prosím svou účast vyplněním registračního formuláře do konce ledna 2018.

Dress code: Business casual.

Pozvánka na akci ve formátu PDF (913 kB)

Děkujeme za zájem a těšíme se na setkání.

Jak na přístupnost knihovních webů

V úterý 10. 10. 2017 od 10 hodin proběhl v Národní technické knihovně v Praze seminář Web knihovny jako nástroj k propagaci služeb a informací, na kterém jsem měl příležitost seznámit s tématikou přístupnosti a inkluzivního designu několik desítek účastníků z řad pracovníků knihoven.

Svou prezentaci jsem nazval Jak na přístupnost knihovních webů a mým cílem bylo ukázat pracovníkům knihoven výhody přístupnosti a její základní principy tak, aby na základě těchto znalostí pak mohli weby knihoven vylepšovat.

Kromě stručného shrnutí nabízím v tomto článku i komentované slajdy k mé prezentaci a odkazy na všechny materiály, které jsem ve svém příspěvku zmiňoval.

Děkuji za pozvání na seminář, organizátorům za perfektní organizaci a účastníkům za zájem, diskusi a ochotu podělit se o své zkušenosti.

Stručné shrnutí probíraných témat

  • Přístupnost pomáhá opravdu všem – některým cílovým skupinám více, jiným méně, ale bez nadsázky lze říci, že přístupnější web se lépe používá komukoliv.
  • Přístupnost je důležitá pro všechny uživatele. Na přístupném webu jsou při plnění úkolů rychlejší nejen nevidomí uživatelé, ale i ti, kteří žádné zdravotní postižení nemají.
  • Protože přístupnost si s sebou nese negativní konotace právě kvůli zužování tématiky přístupnosti pouze na některé nepříliš početné skupiny uživatelů, začínají se ve větší míře používat termíny jako design pro všechny nebo inkluzivní design.
  • Rychlý rozvoj informačních a komunikačních technologií, jejich zpřístupnění i možnosti, které uživatelům se specifickými potřebami nabízejí, umožnil těmto uživatelům samostatně vykonávat činnosti, u kterých byli ještě před několika lety plně závislí na pomoci okolí.
  • Přístupnost stojí na pěti základních pilířích, kterými jsou
    • Dostupnost
    • Ovladatelnost
    • Srozumitelnost
    • Orientace
    • Čas
  • Proč se věnovat přístupnosti?
    • Inspirace (vidíme přímý dopad naší práce na zlepšení života jiných)
    • Osvícení (děláme věci přístupné, protože nám to tak dává smysl)
    • Odměna (certifikace)
    • Požadavek (legislativa)
    • Trest (žaloba)
    • Pocit viny (nejhorší motivátor)
  • Přístupnost není černobílá. Jen málokdy lze o něčem jednoznačně říci, zda to je, nebo není přístupné.
  • Odstranění bariér přináší uživatelům
    • Přístup k informacím
    • Lepší uživatelský prožitek
    • Samostatnost
  • Provozovatelům webů pak přístupnost přináší uznání, ocenění a finanční zisk (či úsporu).
  • Přístupnost stojí přibližně 4 % nákladů na vytvoření webu.
  • Přístupnost jde ruku v ruce s kvalitně odvedenou prací.
  • S přístupností je při tvorbě webu ideální začít co nejdříve a brát ji jako nedílnou součást analýzy, vývoje designu i provozu.
  • Na co se zaměřit
    • Strukturování obsahu pomocí nadpisů a oblastí (landmarků)
    • Přístupnost a ovladatelnost z klávesnice
    • Textové alternativy grafických prvků
    • Přístupnost uživatelsky vkládaného obsahu
    • Barvy, kontrast a písmo
    • Responzivní design
  • Často stačí několik málo změn k tomu, aby byly nejvážnější bariéry odstraněny a uživatelé se tak dostali k informacím, které potřebují.

Komentované slajdy k mé prezentaci

Články

Nástroje pro testování přístupnosti

Toolbary, rozšíření pro prohlížeče

On-line validátory

Asistivní technologie

WAI ARIA – praktické příklady

Metodiky přístupnosti

Videa o přístupnosti

HTML5 a WAI-ARIA jako snadná cesta k lepší přístupnosti webu (Radek Pavlíček)

Jak testovat přístupnost (Rob Dodson)

Jak a proč řeší velké weby přístupnost (Radek Pavlíček)


Přístupnost v kódu: ukázky a návrhové vzory (Martin Michálek)


Přístupnost webů knihoven – příklady dobré a špatné praxe (Radek Pavlíček)

Knihy

Testování přístupnosti webu: doporučené kombinace screen readeru a prohlížeče

Testujete (či se chystáte testovat) přístupnost webových stránek s odečítači obrazovky a zajímá Vás, s jakými konkrétními kombinacemi odečítačů obrazovky a webových prohlížečů dává smysl takové testy dělat? Na základě svých zkušeností, potvrzených nedávnou diskusí na Twitteru, a také na základě výsledků 2016 GOV.UK assistive technology survey, doporučuji pro jednotlivé operační systémy používat následující kombinace.

MS Windows

Na Windows (stále nejpoužívanější platforma) jsou mezi nevidomými uživateli dlouhodobě nejpoužívanější následující dvě kombinace – JAWS s Internet Explorerem a NVDA s Mozilla Firefox. Pokud zatím nejste s prací se screen readerem zcela obeznámeni (či si ji chcete připomenout), doporučuji k prostudování dva návody

Je také dobré vědět, že:

  • i přes 100 % získaných na www.html5accessibility.com, MS Edge bohužel zatím neposkytuje dostatečnou podporu jak pro JAWS, tak NVDA, takže testovat s ním v současné době nedává smysl (byť toto by se mělo v nejbližší době zlepšit a některá z dalších aktualizací JAWSu 18 by měla s Edge spolupracovat).
  • Podobně je na tom Google Chrome, jehož spolupráce se screen readery je stále taková „vachrlatá“.
  • JAWS i NVDA nejsou standardní součástí systému, je potřeba je nejprve nainstalovat. U NVDA je případně možné použít i portable verzi.
  • JAWS nabízí 40 minutovou demoverzi, kterou ale dle licenčních podmínek nelze používat k testování. NVDA je open source odečítač, který žádné takové omezení nemá.
  • JAWS spustíte poklepáním na jeho zástupce na Ploše, ukončíte jej pomocí klávesové kombinace Insert + F4.
  • NVDA spustíte poklepáním na jeho zástupce na Ploše, ukončíte jej pomocí pomocí klávesové kombinace CapsLock + Q.

OS X a iOS

Na zařízeních od Applu, které běží na operačních systémech OS X či iOS, je nejlepší testovat s kombinací VoiceOver a Safari. VoiceOver je nedílnou součástí systému a stačí jej spustit

  • na OS X pomocí Command+F5 (stejnou klávesovou kombinací jej pak lze i ukončit).
  • Na iOS buď přes Nastavení – Obecné – Zpřístupnění, vhodnější je ale nadefinovat si spuštění/ukončení VoiceOveru na trojí stisknutí tlačítka Plochy (více informací viz VoiceOver na iOS (příručka).

Stručný návod v angličtině, jak testovat přístupnost webu s VoiceOverem, je pak k dispozici v článku Using VoiceOver to Evaluate Web Accessibility.

Android

Na zařízeních s Androidem je k testování možné použít screen reader TalkBack s prohlížečem Google Chrome (nebo nejnovějším Firefoxem). TalkBack je – stejně jako VoiceOver – nabízen jako součást operačního systému, takže jej opět stačí jen spustit přes Nastavení – Přístupnost. Bližší informace k různým možnostem spouštění viz Zapnutí aplikace TalkBack, vypnutí TalkBacku se dělá přes Nastavení > Usnadnění > TalkBack.

Při testování na iOS nebo Androidu se vám může hodit Přehled gest pro ovládání mobilních zařízení s odečítači VoiceOver a TalkBack.

Roman Kabelka, lektor workshopu Úvod do tvorby webu v redakčním systému WordPress

Co je třeba umět

Pokud jste dočetli až sem, nejspíš to s testováním přístupnosti pomocí screen readeru myslíte opravdu vážně. Což je z obecného úhlu pohledu dobře, protože seznámení se s potřebami a způsobem práce jedné z cílových skupin určitě není na škodu. Ale pozor, není to tak snadné, jak se může na první pohled zdát. Rozhodně neplatí to, že si vezmete do ruky mobil, spustíte odečítač a začnete testovat – tak jednoduché to bohužel není, viz můj starší článek Má smysl testovat svépomocí přístupnost webu pomocí screen readeru?).

Jestliže chcete, aby takové testování za něco stálo a obdrželi jste na základě něj relevantní výsledky, je třeba se dobře seznámit s tím, jak screen readery fungují, porozumět principům, na kterých pracují, a naučit se je obsluhovat. Pomoci vám v tom mohou například tutoriály, odkazované na konci tohoto článku. Bez těchto znalostí nedává moc smysl testovat přístupnost webu tímto způsobem, protože můžete

  • za problém v přístupnosti mylně považovat chyby, které ale budou způsobeny vaší neznalosti obsluhy screen readeru,
  • to, že „screen reader něco čte“, vyhodnotit jako potvrzení toho, že kontrolovaný prvek je přístupný (přestože tomu tak v reálu vůbec být nemusí).

Než se tedy do testování přístupnosti pustíte, zkuste si nejprve projít výše odkazované tutoriály a pokud na to máte prostor, tak není ani věci získat širší znalosti o přístupnosti například prostřednictvím některého z MOOCů o přístupnosti, které jsou aktuálně či v dohledné době nabízeny.

Pokud byste měli k testování přístupnosti se screen readery nějaký dotaz, zkuste na něj buď najít odpověď na Testing with Screen Readers – Questions and Answers, nebo jej napište sem do komentářů.

Přehled doporučených kombinací čtečky obrazovky a prohlížeče

  • MS Windows: JAWS + Internet Explorer; NVDA + Mozilla Firefox
  • OS X a iOS: VoiceOver + Safari
  • Android: TalkBack + Google Chrome (eventuálně Mozilla Firefox)

Přehled doporučených studijních materiálů