AccessiBe

Pozor na tento nástroj jsou rozporuplné názory, patří do skupiny Accessibility Overlays (překryvné moduly), mnozí odborníci ho odsuzují, varují před ním. Mně na to upozornil Radek Pavlíček v diskusi na Facebooku v mé skupině Vzájemné rady, tipy a pomoc s OS Windows, Android a Android a jejich aplikacemi, za což mu děkuji. Jeho názory jsem však trochu zrelativizoval v diskusi, nicméně v jistém smyslu věřím, že má pravdu, i když si myslím, že pro uživatele bez asistivních softwarů může tento widget pomáhat, zvláště na mobilech.

Když jsem hledal firmy, které bych mohl přivést ke konzultaci nad on line marketingem, přišel jsem i na stránku obchodů, které mají prodejnu v Centru Černý most (nebo jinde). Jde o stránku Westfiel.com. Vpravo dole jsem si všiml zajímavého tlačítka – postavy s roztaženýma noha a rukama. Klikl jsem na něj a objevilo se něco, co jsem nečekal – možnosti zpřístupnění webu pomocí umělé inteligence (AI) pro různé druhy zdravotních handicapů – pro epileptiky, pro zrakově postižené, ADHD friendly profil, profil kognitivního postižení, možnosti nastavení navigace pomocí klávesových zkratek pro motoricky (tedy tělesně) postižené, nezapomnělo se samozřejmě ani na tradiční blind friendly, tedy úpravy pro nevidomé.

Celé je to v angličtině nadepsané Accessibility Adjusment (Úpravy přístupnosti), je tu možnost zvolit jiný jazyk než angličtina, leč čeština zatím chybí. To celé patří do projektu AccessiBe, o kterém si můžete přečíst zde. Jde o tlačítko se skriptem, který odešle informace a adresu prohlížené stránky kamsi na server, který pomocí umělé inteligence podle nastavení vrátí zobrazení stránky do Vašeho prohlížeče tak, aby se vám přístupněji zobrazovala, aby se Vám na ní lépe orientovalo. Něco takového, co pro nevidomé se snaží zprostředkovat screen readery.

(Abych předešel Vašemu zklamání, tento článek moc o přístupnosti pro nevidomé nebude, protože tato služba víceméně se naváže na příslušný spuštěný screen reader a využívá jejich navigace – pokud k tomu ještě přidává nějaký bonus, zatím nevím. Nicméně pro slabozraké těch voleb tu je naopak hodně, některé známe z podobných asistivních programů, třeba ze ZoomTextu, některé by potřebovaly tímto směrem trochu možná vylepšit, jiné jsou zkrátka trochu jiné a určitě je dobré se s nimi seznámit).

Pokud nevládnete tolik angličtinou, abyste volbám rozuměli, stačí být v prohlížeči, který umí překládat – v Chromu a dát pomocí kontextového menu na rozbaleném modálním okně tlačítka Přeložit do češtiny.

Jaké možnosti úpravy zobrazení webu tento skript AI nabízí?

Pro epileptiky (Seizure Safe Profile): snížení jasných záblesků, třeba od animací a snížení barev (riskantních barevných kombinací – které to jsou?). Myslím si, že to může být užitečná volba i pro světloplaché, leč zdá se mi, že nelze zvolit zároveň profil epileptika a slabozrakého – škoda, i když ve volbách u slabozrakého je možné vypnout animace.

Druhým profilem je profil pro zrakově postiženého (Vision Impaired Profil), jde spíš o slabozrakého a lidi se zbytky zraku, ale nejen ty – jde o zrakové vady jako je šedý zákal, glaukom (zelený zákal) nebo tunelové vidění (zúžené zorné pole) Pokud profil aktivujete, volby k tomuto profilu najdete ale až úplně dole za volbami všech profilů.

Věnujme jim však pozornost hned teď:

První je Měřítko obsahu neboli lupa (Content Scaling). Dá se nastavit směrem nahoru i dolů, nastavuje se pomocí tlačítek s šipkami a hodnota nastavení v procentech je udávána v procentech uprostřed. Menší hodnotu pod 100% možná ocení dalekozrací?

Tlačítko vpravo vedle – Čitelné písmo (Readable font). Jde o obdobu vyhlazení, zaoblení linií písma, známé ze zvětšovacích softwarů? Těžko říci, já používám zvětšovací software, který to pro mě dělá v každém případě a i kdybych zoom vypnul, možná bych to nepoznal.

Pokud volbu zapnete, nijak se tyto funkce zvětšovacího softwaru a tohoto scriptu mezi sebou nebijí.

Druhý řádek – Zvýraznění titulů – Higlight Titles (myslí se nadpisů) a Zvýraznění odkazů – Higlight links. Dojde k orámování zmíněných prvků, ale čára není příliš silná a ani v softwarové lupě tuto možnost nevyužívám, protože mě další zvýraznění spíš ruší, je to pak přeplácané a nepřirozené, dokážu se bez toho obejít.

Poslední tlačítko v tomto řádku je Lupa textu (Text magnifier) – jde o zapnutí bublinek se zvětšeným textem např. u položek menu, titulků (např. v záhlaví), ovládacích prvků (tlačítek apod.), popisů obrázků, ale i běžných odstavců textu. Nehodí se příliš při používání zvětšování obrazovky jiným zvětšovacím softwarem – překáží a text je příliš velký. Velikost textu se nedá nastavit.

V dalším řádku můžete Velikost písma nastavit procentně – Adjust Font Scaling. Jde o rozsah mezi -100% a +100%, ale jde o drobné zvětšení – s násobným zvětšením fontu např. u ZoomTextu se to nedá srovnávat. S předchozí volbou Zvětšení textu (v bublince) to nemá žádnou souvislost, žádný vliv na velikost písma v bublince)

Vpravo je tlačítko pro Zarovnání textu na střed (Align Center) – možná využití pro lidi s výpadky zorného pole na perifériích (okrajích).

Další řádek tří tlačítek je věnován Nastavení síly zvýraznění linek (Adjust Line Height)

Nepozoruji však ani při zvýraznění titulků ani odkazů nějakou změnu. Pokud se volba opravdu týká síly linií, měla by být umístěna blíže k volbám zapnutí těchto highlight linií, třeba na místo Text Magnifier. A naopak vše, co se týče zarovnání textu v jednom řádku. Preferuje se tu však spíš vertikální řazení tlačítek – zarovnávací tlačítka jsou hezky pod sebou.

Vpravo od tlačítka Adjust Line Height je tlačítko pro Zarovnání textu vlevo – Align Left.

Další řádek je věnován rozpalu – rozestupu znaků – fontů (Adjust Letter Spacing)

Vhodné přidat v procentech např. i pro dyslektiky. Rozsah je obrovský, až přehnaný – zkusil jsem, kam až mi to dovolí znaky roztáhnout a nedošel jsem, přiznám se, až ke konci a to jsem byl na 310%. Dá se jít i směrem opačným a to vede k namačkání znaků a nečitelnosti textu – tip pro kanadský žertík. Rozestup můžete sledovat na pozadí, ale modální okno s nastavením zabírá poměrně hodně místa na obtrazovce. Ne u všech voleb lze vidět provedené změny už v okamžiku, kdy jsme v rozhraní nastavení.

Vpravo je pak tlačítko pro Zarovnání textu vpravo – Align Right.

Další řádek nadepsaný Color Adjusments je věnován Barevnému uzpůsobení stránky.

Tmavý kontrast (Dark Contrast), Světlý kontrast (Light contrast), Vysoký kontrast (High Contast). Asi je to zbytečné popisovat, je potřeba vyzkoušet dle svých potřeb.

Nevýhoda je v tom, že nastavení bude platit jen pro stránky, které fungují s touto funkcionalitou AccessiBe – určitě to funguje na stránkách pod stejnou druhou doménou (princip placené licence tohoto skriptu). Přejdete-li jinam, přepnete-li se do jiného okna, je výhodnější, využívat barevného nastavení zvětšovacího softwaru, ale například na mobilu v Androidu si myslím, že to jisté využití určitě má. Ano – skript funguje i při přístupu z mobilních zařízení a nastavení je samostatné, co se týče třeba barev nebo zarovnání textu na stránce.

Další řádek voleb začíná Vysokou saturací (High saturation) – sytost barev. Vpravo vedle jsou volby barev TEXTU. Tady je možné zvolit osm barev, každé tlačítko barvy má svůj alt popisek!!! Chybí mi tu však například žlutá barva a nebo volba barvy z palety barev v operačním systému – ať si každý vybere podle vlastní potřeby! Je prokázaný fakt, že žlutá barva v kombinaci s jakoukoli tmavou barvou a nemusí to být zrovna černá, ale třeba tmavě modrá apod. je hodnocena jako ideální.

Na dalším řádku si můžete zvolit Černobílé nerušivé zobrazení (Monochrome), ale málo kontrastní zobrazení a nebo Upravit barvy titulků (Adjust Title Colors). Opět stejný výběr barev, jen osm a nebo tlačítko Zrušit. Opět chybí žlutá. Pozor, nevolil bych modrou nebo červenou – stejnou barvu jako jsou defaultní barvy odkazů. Mohly by být dokonce vynechány. Také pozor na to, abyste si nezvolili stejné barvy pro písmo, nadpisy a pozadí stránky – v posledním případě by se texty staly neviditelnými.

Na dalším řádku si můžete naopak zvolit nízkou saturaci (nenasycenost) barev (Low Saturation) a tím snížit i zářivost, jasnost – toho lze dosáhnout i nastavením jasu a kontrastu na monitoru, které platí pro vše, co se na monitoru ukazuje, ale může být situace, kdy to potřebujete jen pro konkrétní stránku, která je navíc vybavena touto placenou službou majitele webu.

A hned vpravo je osm barev volby pozadí (Adjust Background Colors) – nesouvisí s volbou vlevo! Opět mi chybí možnost zvolit si ještě jiné barvičky.

Další sekce je věnována Úpravám orientace (Orientation Adjusments):

První tlačítko je možnost Ztlumit zvuky (Mute Sounds) – přeškrtnutý reproduktor – pokud je volba zapnutá, tlačítko je vysvícené (modře).

Uprostřed řádku je tlačítko Skrýt obrázky (Hide images) – pomůže to asi zrychlit načtení stránky – lze vypnout i globálně v nastavení prohlížeče pro všechny stránky. Naopak bych tu přivítal obdobu pluginu Smart Color od ZoomTextu, který při nastavení negativních barev přefiltruje barvy negativního zobrazení barev obrázků do pozitivních barev – neumí to úplně vždy, asi záleží na formátu obrázku, neumí to u videí … Kdyby to uměla AI Accessible ještě lépe - pak bych to vítám velkým potleskem.

Poslední tlačítko je Režim čtení (Read mode) – web se zobrazuje jakoby v režimu webu pro mobily, nejdříve hlavička, pak všechny položky hlavního menu a dalších jako Poslední příspěvky, Komentáře … (struktura z šablony WordPress) a pak text stránky. Tyto položky menu, ale ani hypertextové nadpisy nebo další odkazy nebo tlačítka (Celý článek) nejsou dostupné. Obrázky se zobrazují.

Další řádek:

Zastavit animace (Stop animation) – obdoba volby pro epileptiky.

Maska pro čtení (Reading Mask) – známé jako obdobné funkce softwarových a asistivních softwarů linky, zastínění obrazovky, okénko – umí např. Claro Read (může být v omezených funkcích i jako plugin do Chrome, Edge …). Zde jde jen o to, že je vidět jasně pás – pár řádek, nad a pod je nejasný, zastíněný. Nelze upravovat šířku. Nelze zastínit vlevo – vpravo. Vhodné pro dyslektiky a nebo lidi s trubicovým viděním. Zde také v nastavení pro ADHD handicap – aby je nerušilo okolí (?).

Zvýraznění Hover (Highliht Hover) – zvýrazní, orámuje nadpisy, textová pole – slabá oranžová linie, síla se nedá nastavit.

Další řádek:

Zvýraznění focusu (Highliht Focus) – při zapnutém ZoomTextu se nijak neprojevuje.

Naopak volby Velký černý kurzor a Velký bílý kurzor – z myšího kurzoru se stane ruka s krátkým ukazováčkem, až moc velká. Orámování při zapnutém zvýraznění ZoomTextem zůstává žluté. Navídka možných nastavení v ZoomTextu je daleko širší – tvary, kdy se má ukázat, barvy … Zde bych viděl využitelnost hlavně pro ty, kteří ZoomText nemají.

A to jsou všechny volby pro zrakově postižené. Budeme pokračovat v představování dalších profilů.

ADHD Friendly Profil

Více soustředění a méně rozptylování.

Už jsem zmínil, že jde o zastínění nad a pod – zobrazení jen řádku, nelze upravit velikost. Funkce funguje ihned, odejdete z nabídky. Pokud chcete fungování zastínění zrušit, musíte kliknout opět na tlačítko vpravo dole na stránce a jít do nastavení tam, kde jste toto tlačítko stiskli – trochu orientačně náročnější, Bylo by dobré, kdyby to šlo shodit třeba Esc. Naštěstí přeložený text do češtiny v nastavení zůstává. Spíše bych ale doporučil doinstalovat si do prohlížeče pluginy ClaroReadu.

Cognitive Disability Profile – poruchy poznávacích funkcí

Pomoc se čtením a fokusováním (zaměřením)

Jde o postižení autismu, dysleksie, CVA a jiné. Zjednodušuje navedení na nejdůležitější místa webu. (úplně nechápu, jak to umí, jak to funguje a ani mě nijak zatím nemotivuje to zkoušet – není příliš stránek, kde by se to dalo vyzkoušet, ale rád přijmu zkušenosti jiných)

Další profil: Navigace pomocí kláves (motoricky neboli tělesně postižení) – Keybord navigation (Motor)

Jde o některé volby klávesových zkratek, které jsou známé ze screen readerů pro nevidomé: TAB a Shift+TAB po odkazech, Enter pro aktivaci, M – menu, H – nadpisy, F – formuláře, B – tlačítko, G – grafika.

Nakonec Profil pro nevidomé - Blind Users (Screen Readers), který umožňuje tak, aby byl web kompatibilní s čtečkami obrazovky jako je JAWS, NVDA, VoiceOver a Talkback (nezmiňují Dolphin Supernova). Tento profil automaticky zobrazí výzvu ke čtení.

Shrnutí, co by mohlo být lepší:

• možnost nastavení více profilů (kombinovaná postižení)
• širší možnost výběru barev pro nastavení textu, pozadí, nadpisů,
• větší možnosti barev a síly orámování nadpisů, odkazů apod.
• problém, že si script musí koupit majitel webu a nikoli uživatel, který si koupil, případně dokupoval počet stránek, které chce zpřístupnit
• zatím malé rozšíření v ČR, kde najít tyto stránky (doufám, že se zlepší)
• není zcela jasné, co se stane s pluginem ve WordPressu po sedmi dnech (Trial verze přes registraci – u pluginu jsem se nemusel registrovat).
• Ikony na tlačítku – nezahrnuje panáčka s bílou holí. Měly by to být jasné symboly zdravotního handicapu WHO, nejlépe všechny v tlačítku.
• Také by se mohlo stát tradicí či doporučením, kam se toto tlačítko bude umisťovat – dolní roh stránky mi přijde nešikovný v tom smyslu, že tam tradičně bývají feedbackovací tlačítka nebo tlačítko pro support chat.
• Pomáhá script i v zpřístupnění webových aplikací, např. bankovních aplikací typu Internet Banka (kdyby šlo vyzkoušet např. na Moneta Money Bank)

Výhody:

• Funguje v prohlížečích desktopu i v Androidu – nevím, zda funguje v iOS (iphone, MacOs prohlížečích)
• Komplexní řešení pro mnoho handicapů
• Umožňuje využívání různých funkcí i lidem, kteří nemají zakoupený zvětšovací software – potřebovali by ho, ale nedostanou příspěvek na pomůcku (nesplňují podle posudku kritéria) a nebo se o něj bojí zažádat.

Pár poznámek závěrem

Plugin do WordPressu

Pokud vytváříte web v tomto redakčním systému, nemusíte se registrovat na stránkách AccessiBe, abyste získali script na 7 dní.

Zkusil jsem si dát na web obě tlačítka – to, které se mi nainstalovalo pomocí pluginu – zvolil jsem umístění vlevo nahoře a jinou ikonu – zvětšení písma. Script, který jsem získal registrací, jsem umístil do šablony do patičky, tedy vpravo dole s ikonkou modrého panáka s roztaženýma nohama a rukama.

Dvě tlačítka si vzájemně nekonkrurují, nevadí, ale také nejsou propojena, takže to, co nastavíte v jednom, nevidíte v druhém a nastavení se vzájemně přebíjí. Očekávám, že tlačítko v pravém dolním rohu po sedmi dnech přestane fungovat, možná tlačítko vlevo nahoře ne – uvidíme.

Licence: 7 denní fungování a pak 950 $ pro 10000 tisíc webů druhé domény, platí majitel webu.

Nelze dát např. do eStránek, webhostingu zdarma.

Script pro případné rozšíření:

<script> (function(){ var s = document.createElement('script'); var h = document.querySelector('head') || document.body; s.src = 'https://acsbapp.com/apps/app/dist/js/app.js'; s.async = true; s.onload = function(){ acsbJS.init({ statementLink : '', footerHtml : '', hideMobile : false, hideTrigger : false, disableBgProcess : false, language : 'en', position : 'right', leadColor : '#146FF8', triggerColor : '#146FF8', triggerRadius : '50%', triggerPositionX : 'right', triggerPositionY : 'bottom', triggerIcon : 'people', triggerSize : 'bottom', triggerOffsetX : 20, triggerOffsetY : 20, mobile : { triggerSize : 'small', triggerPositionX : 'right', triggerPositionY : 'bottom', triggerOffsetX : 10, triggerOffsetY : 10, triggerRadius : '20' } }); }; h.appendChild(s); })(); </script>

Vložte do hlavičky (patičky) webu.

Doporučuji si přečíst tento článek - zkušenosti se zavedením AccessiBe (v angličtině)

Facebooková stránka AccessiBe

Překryvné zpřístupňující windgedy - proč jsou špatné ...