Zpřístupnění korporátního webu

Transkript

1 [AVG#WEB] Zpřístupnění korporátního webu Vypracovali: Lukáš Kosina Jan Dvořák

2 Zadání Cílem projektu je zpřístupnění korporátních stránek společnosti AVG ( osobám postiženým úplnou ztrátou zraku. Projekt se rozdělí na dvě části. První část se bude skládat z analýzy současného stavu korporátních stránek AVG. Druhá část se bude skládat ze zpřístupnění těchto stránek pro nevidomé. Testování přístupnosti bude testování pomocí čtečky monitoru JAWS ( Screener: 1. Popište svoje zrakové postižení:[pokud odpovíte odpověď c), nepokračujte ve vyplňování dotazníku] 1) úplná slepota 2) částečná slepota 3) žádné zrakové postižení (cíl: účastník s úplnou slepotou, nebo částečnou slepotou) 2. Používáte domácí počítač?[pokud odpovíte odpověď c), nepokračujte ve vyplňování dotazníku] 1) ano, denně 2) ano, ale pouze výjimečně 3) ne (cíl: účastník musí používat domáčí počítač) 3. Jaký operační systém využíváte? 1) Windows 2) Linux/Unix 3) OS Mac 4) jiný (cíl: účastníci s OS Windows budou v tuto fázi upřednostňováni) 4. Používáte internet? [Pokud odpovíte odpověď b), nepokračujte ve vyplňování dotazníku] 1) ano 2) ne (cíl: uživatel internetu) 5. Používáte software ke zvýšení přístupnosti počítače/používání internetu? [Pokud odpovíte odpověď c), přeskočte následující otázku] 1) ano, používám čtečku monitoru 2) ano, používám lupu pro monitor 3) ne (cíl: uživatel s čtečkou monitoru bude upřednostňován) Napište název softwaru, který používáte ke zvýšení přístupnosti:

3 (cíl: cílem je určit široké spektrum různých softwarů).6 Znáte internetovou stránku )1 ano )2 ne (cíl: uživatelé, kteří znají stránky AVG) Z důvodu vybraného tématu jsme výběr uchazečů pomocí screeneru nedělali, protože jsme měli možnost interview s Jaroslavem Kučerou, nevidomým uživatelem antivirového programu AVG, a tedy patří do naší cílové skupiny. Interview Témata: popis zrakového handicapu popis uživatelova využívání počítače popis činností na internetu popis činnosti softwaru, který uživateli zvyšuje přístupnost PC a internetu zkušenosti se stránkami Otázky: Máte zrakové postižení již od narození? Jak často využíváte PC? Jste schopen si činnost PC (instalace software ) zajistit sám, nebo potřebujete pomoc okolí? Kolik hodin denně strávíte na internetu? Popište činnosti, ke kterým internet využíváte. Je software, který používáte ke zvýšení přístupnosti PC, zdarma? Máte s tímto softwarem někdy problém? Pokud ano, jaký? Existuje ve vašem operačním systému podpora jiných programů pro tento software? Jak hodnotíte stránky firmy AVG? Můžete popsat principy dobře sestavené stránky pro zrakově handicapované?

4 Interview transcriptions Jaroslav Kučera (dále uživatel ) je zrakově postižený od svých 14 let, kdy oslepl od rozbušky. Používá notebook s operačním systémem Windows XP Service Pack 3. Je schopen zajistit si instalaci software, pokud k instalacím používá klasický instalátor. Ke zvýšení přístupnosti využívá uživatel čtečku monitoru JAWS ( a elektronický řádek s Braillovým písmem. Funkce řádku s Braillovým písmem uživatel nemohl předvést, protože v době interview mělo zařízení vybité baterie. Na internetu tráví uživatel několik hodin denně. Mezi nejčastější činnosti patří: čtení odborné literatury i beletrie, sebevzdělávání se, programování v Perlu. Pro stahování software uživatel používá pouze stránky výrobců softwaru, nepreferuje servery, které software zprostředkovávají (konkrétně uvedl server a nevyužívá je. Několikrát během interview uživatel prokázal velmi pokročilou znalost operačního systému aby mohl předvést činnost JAWS software s internetovým prohlížečem (využívá Internet Explorer, který podporuje JAWS), byl nucen nastavit si proxy server. Kromě zmíněného Ms IE by uživatel rád používal i jiné internetové prohlížeče, ty však mají s čtečkou monitoru problémy konkrétně Mozilla Firefox se čtečkou monitoru často havaruje. K vyhledávání na internetu uživatel používá vyhledávač Google ( jenž využívá také prvky ARIA ( které jsou součástí HTML. Tyto prvky, podle zkušeností uživatele, nejsou zpracovávány internetovým prohlížečem, ale jsou posílány přímo čtečce monitoru, která je následně vyhodnocuje. Uživatel nemá rád na internetu flashové programy a obrázkové buttony, protože je čtečka monitoru neumí zpracovat. HTML stránky a některé JS nedělají čtečce monitoru vůbec žádné problémy. Uživatel si však nemohl příklady přístupných JS vybavit. K antivirovému programu AVG se uživatel dostal náhodou během hledání vhodného antivirového programu pro svůj notebook. Po dobrých zkušenostech s trial verzí si zakoupil placenou verzi antiviru AVG. Při návštěvě stránek firmy AVG se ale uživatel orientoval na stránkách obtížně, některá menu nebyla schopna čtečka obrazu vůbec rozpoznat a některým prvkům chyběly popisy (atribut alternativní popis tagu ), takže se pro uživatele staly bezcenné. Stránky také obsahovaly reklamu ve flashi, kterou uživatel nemohl vůbec vnímat. Jediná úprava nastavení internetového prohlížeče, kterou uživatel provedl, je zakázání prvků ActiveX tato úprava však nemá nic společného s přístupností webu, nýbrž s jeho bezpečností.

5 Shrnutí a vyhodnocení interview Během interview jsme zjistili, že uživatel má velice pokročilé znalosti stavby HTML stránek. Pokud jsou stránky dobře sestavené, dokáže číst pomocí procházení stránek po jednotlivých úrovních nadpisu. Na internetových stránkách se pohybuje pomocí klávesových zkratek, které mu umožňují navigaci po konkrétních prvcích webové stránky (tlačítka, rozbalovací seznamy ). Na stránkách knihovny pro nevidomé, které jsou pro nevidomé optimalizovány, se uživatel orientoval zcela bez problémů. Oproti tomu korporátní stránky AVG obsahovaly mnoho prvků, které uživateli orientaci ztěžovaly až znemožňovaly například flashová reklama, kterou čtečka neumí přečíst, se k uživateli nedostala. Prvky bez alternativních popisů byly pro uživatele spíše matoucí. Vylepšení korporátních stránek bychom rozdělili do dvou kroků prvním krokem by měla být komplexní revize stránek, doplnění základních HTML tagů zvyšujících přístupnost webu, zejména s přihlédnutím k radám internetového portálu Na běžného uživatele by tyto úpravy neměly mít žádný vliv. V druhém kroku doplnění informací pro nevidomé uživatele (resp. pro čtečky monitoru), které jsou v současné době nevidomým uživatelům nedostupné (flashová reklama, prvky bez popisku). Běžnému uživateli budou tyto prvky skryty pomocí css stylů, aby jej nerušily na stránkách. Závěr: V současné podobě korporátní stránky AVG nejsou přizpůsobeny nevidomým uživatelům, protože obsahují mnoho prvků, se kterými si neporadí čtečka monitorů, a neobsahují tagy zvyšující přístupnost internetových stránek.

6 Use Cases and Plans: Use-Case 1 Stažení AVG-Antivirus Free: Nevidomý uživatel se rozhodne vybrat si AVG Antivirus jako antivirový program pro svůj operační systém. Vstoupí na internetové stránky AVG. Na internetových stránkách si vybere operační systém, který používá ve svém počítači a stáhne si pro něj nový antivirus. Use-Case 2 - Přečtení portfolia společnosti AVG: Nevidomý uživatel se rozhoduje, zda si má pořídit antivirus AVG na svém počítači. Proto se na korporátních stránkách AVG rozhodne, že si přečte portfolio společnosti AVG. Use-Case 3 - Přečtení bližších informací o produktech AVG pro domácí/podnikové použití Nevidomý uživatel se před stažením nového antiviru musí rozhodnout, jestli potřebuje pro své použití AVG antivirus pro domácí nebo podnikové použití. Use-Case 4 - Aktualizace licence k produktu AVG Po zakoupení a využívání AVG antiviru nevidomý uživatel zjistí, že je se službami AVG antiviru spokojen. Proto se rozhodne si pomocí korporátních stránek AVG prodloužit svoji antivirovou licenci. Plan 1 Stažení AVG-Antivirus Free pro domácí potřeby 1. Načtení stránky 2. Stisk Insert+F7 Systém zobrazí všechny odkazy na stránce 3. Pomocí kláves postupné procházení (přečtení čtečkou) odkazů, dokud se nezastaví u odkazu Pro domácnost. Aktivace odkazu pomocí klávesy ENTER 4. Stisk Insert+F7 Systém zobrazí všechny odkazy na stránce 5. Pomocí kláves postupné procházení (přečtení čtečkou) odkazů, dokud se nezastaví u odkazu AVG-Antivirus FREE Aktivace odkazu pomocí klávesy ENTER 6. Stisk Insert+F7 Systém zobrazí všechny odkazy na stránce 7. Pomocí kláves postupné procházení (přečtení čtečkou) odkazů, dokud se nezastaví u odkazu Stáhnout. Aktivace odkazu pomocí klávesy ENTER 8. Čtečka zinterpretuje dialog pro uložení souboru. Pomocí kláves uživatel vybere možnost Uložit. Čtečka zinterpretuje dialog pro výběr místa pro uložení souboru. Uživatel vyplní jméno souboru a vybere složku, do které se má soubor uložit. Poté aktivuje button Uložit. Tato část již není součástí navrhovaného systému. Plan 2 Přečtení portfolia společnosti AVG 1. Načtení stránky 2. Stisk Insert+F7 Systém zobrazí všechny odkazy na stránce 3. Pomocí kláves postupné procházení (přečtení čtečkou) odkazů, dokud se nezastaví u odkazu Společnost. Aktivace odkazu pomocí klávesy ENTER

7 4. Pomocí klávesy H (přechod mezi titulky) přechod k požadovanému článku. 5. Pomocí kláves Ctrl+Insert+ aktivace čtení článku. Plan 3 Přečtení bližších informací o produktech AVG pro domácí/podnikové použití 1. Načtení stránky 2. Stisk Insert+F7 Systém zobrazí všechny odkazy na stránce 3. Pomocí kláves postupné procházení (přečtení čtečkou) odkazů, dokud se nezastaví u odkazu Pro domácnost nebo Pro podniky. Aktivace odkazu pomocí klávesy ENTER 4. Pomocí klávesy H (přechod mezi titulky) přechod k požadovanému produktu. 5. Pomocí klávesy Tab přechod na odkaz s titulkem Více informací. Aktivace přechodu na cílovou stránku odkazu klávesou ENTER. 6. Pomocí klávesy H přechod mezi titulky (vlastnostmi produktu) a jejich detailní čtení klávesovou zkratkou Ctrl+Insert+ Plan 4 Aktualizace licence k produktu AVG 1. Načtení stránky 2. Stisk Insert+F7 Systém zobrazí všechny odkazy na stránce 3. Pomocí kláves postupné procházení (přečtení čtečkou) odkazů, dokud se nezastaví u odkazu Prodloužit licenci AVG. Aktivace odkazu pomocí klávesy ENTER. Zobrazení stránky s informacemi pro prodloužení licence. 4. Pomocí klávesy H (přechod mezi titulky) přechod k Rychlý upgrade 5. Pomocí klávesy H (přechod mezi titulky) přechod k požadovanému produktu 6. Pomocí klávesy Tab přechod na následující odkaz Zakoupit a jeho aktivace klávesou ENTER. Zobrazení nákupního košíku s možností přečtení detailů. 7. Stisk Insert+F7 Systém zobrazí všechny odkazy na stránce 8. Pomocí kláves postupné procházení (přečtení čtečkou) odkazů, dokud se nezastaví u odkazu Pokračovat. Aktivace odkazu pomocí klávesy ENTER. Zobrazení se formuláře pro vyplnění kontaktních a platebních informací. 9. Přechod mezi jednotlivými kolonkami formuláře pomocí klávesy Tab. 10. Po vyplnění formuláře stisk Insert+F7 Systém zobrazí všechny odkazy na stránce. 11. Pomocí kláves postupné procházení (přečtení čtečkou) odkazů, dokud se nezastaví u odkazu Pokračovat. Aktivace odkazu pomocí klávesy ENTER. Stránka pro stažení produktu. 12. UC1 8

8 HTA:

9 Sketches: 1) 2)

10 3) 4) 5)

11 Popisy ke sketches: 1) Specifika prostředí, ve kterém se nevidomý pohybuje. 2) Pohled na pracovní prostředí PC a na prostředky, se kterými nevidomý může komunikovat s PC. 3) Specifikace možných smyslů nevidomých pro příjem informací z vnějšího světa - sluch, hmat. 4) Myšlenka převodu textu do hmatatelné či zvukové podoby. 5) Aby bylo možné převést stránky na text (který bude následně převoditelný na hmatatelnou či zvukovou podobu), je třeba je nějakým způsobem převést do hierarchické struktury, která posléze bude převoditelná dle požadavků na text.

12 StoryBoard: Příklad práce se systémem, kdy čtečka reaguje na jednotlivé klávesové zkratky a určuje výstup podle požadavků uživatele. Low-fidelity prototipování a testování 1 Prototyp Pro vytvoření návrhu vlastního prototypu bylo třeba nejprve s nevidomým (dále P9) otestovat původní web avg.cz, abychom měli představy, jak je potřeba je upravit či zda jsou již dobře přístupné pro nevidomé. Jako prototyp pro první testování s P9 byly tedy využity stávající webové stránky ). Při testu jsme využily Use-Case 2 Přečtení portfolia společnosti AVG. Vyhodnocení Cílem testu bylo zjištění základních nedostatků webových stránek v globálním pohledu bez zaměření na specifický scénář použití. Šlo nám o zjištění komplikací v archytektuře struktury, která je na všech podstránkách stejná(tzv. masterpage). Jelikož jsme měli k dispozici jen trial verzi čtečky Jaws (která neobsahuje český jazyková modul), požádali jsme P9 o využití vlastního notebooku s nainstalovanou plnou verzí Jaws. Dalším důvodem pro tuto volbu byla lepší orientace P9 na vlastní klávesnici. Jako prohlížeč byl využit Internet Explorer, který P9 všeobecně používá. Test proběhl u P9 doma a tedy předpokládáme že by neměl být ovlivněn externími vlivy.

13 P9 po načtení webové stránky nejdříve prošel všechny headingy pomocí klávesy H. (Nebyl vyžadován přímý průchod stránkami podle use-case, jelikož ten sloužil jen k určení cíle ke kterému se má P9 co nejdříve dostat.) Po průchodu celé stránky a navrácení zpět na začátek se P9 rychle přesunul na titulek Společnost a aktivoval jeho link k přechodu na požadovanou stránku. Po načtení stránky opět pomocí klávesy H přešel P9 na začátek(titulek) článku. Ten si poté pomocí Ctrl+Insert+ přečetl. Po samotném testu jsme s P9 diskutovali nad problémy, které během průchodu zaznamenal. Hlavním problémem který se mu jevil bylo nepřeskočitelné hlavní menu stránky, které je na začátku. Jelikož menu slouží jako mapa celého webu je příšliš rozsáhlé a jeho projití pomocí čtečky trvá neúměrně dlouhu. Jako nápravu tohoto jevu doporučil P9 ze svých zkušeností buď vytvořit odkaz, který menu přeskočí(odkaz na záložku) a vložit jej před menu nebo menu umístit tak aby bylo čtečkou čteno až po samotném informačním obsahu stránky. Další problém byl zaznamenán se špatnou strukturou headingů, kdy dochází k přeskakování jednotlivých úrovní. Tento problém však je zapříčiněn svázáním stránky s příslušným css a rozhodli jsme se jej v daším vývoji ignorovat, jelikož nezpůsobuje větší problémy s orientací v dokumentu. Prototyp Byl vytvořen prototyp předěláním požadovaných webobých stránek, které jsou využity k průchodu scénářem 1 (Stažení AVG-Antivirus Free pro domácí potřeby), který jsme se rozhodly využít k druhému testování s nevidomým(dále jen P5). Při vytváření prototypu bylo ignorováno vše co ignorují i Jaws (css...). Vznikly tři webové stránky index.html, home-small-office-security.html, free-antivirus-download.html ve kterých byla upravena struktura dle přípomínek P9. Náhled na vytvořenou stránku index.html je na následujícím obrázku: Všechny takto upravené stránky byli poté prošlé čtečkou Jaws a byl vytvořen prototyp, který sloužil k otestování průchodu use-case uživatelem P9 za využití techniky Wizard of Oz. Jako podpora tohoto prototypu sloužily i vytvořené stránky html, které byli využity při průchodu stránky pomocí Ctrl+Insert+.

14 Vytvořený prototyp: Index Links(Tab/předchozí = alt Tab) Avg logo, local link, graphic Pro domácnost, heading level 2 link OK Základní ochrana, H3 link AVG Internet security link AVG Antivirus link AVG PC TuneUp link AVG ThreatLabs link Mobilní Ochrana, H3 link AVG Mobilation For Android Smartphones link AVG Mobilation For Android Tablet link Stažení bezplatné zkušební verze link Pro podniky, H2 link Naše produkty, H3 link AVG Internet Security Business Edition AVG Anti-Virus Business Edition AVG Server Edition AVG File Server Edition AVG Linux Server Edition AVG Rescue CD AVG Remote Administration Společnost O produktu AVG, H3 link Profil společnosti Přehled technologií Zásady Kontaktní informace Vyhledávač prodejců Partnerství s AVG, H3 link Alliances Partneři Zaměstnání Pobočky Pro média, H3 link Tiskové zprávy Ocenění Názory zákazníků Zdroje Kontakt na PR oddělení Podpora Centrum podpory, H3 link Časté dotazy Obnovení licence Instruktážní videa Prodloužení ochrany Kontaktujte nás (domácnosti) Kontaktujte nás (pro podniky) Stažení, H3 link Aktualizace Dokumentace AVG Rescue CD Další podpora Další soubory ke stažení O společnosti Pro média Partnerský program Zásady ochrany osobních údajů Licenční ujednání Alliances Kontaktní informace

15 Zakoupit antivir Internet Security Zabezpečení pro firmy PC Tuneup Antivirová ochrana pro systém Android Hodnocení stránek AVG Upgradovat na nejnovější verzi Prodloužit licenci AVG Facebook, link, graphic Twitter, link, graphic Rss, link, graphic YouTube, link, graphic Odkazy na produkty AVG, link, graphic LinkedIn, link, graphic Partnerský program Partnerský portál Změnit jazyk Mapa stránek Přihlásit k AVG Headings(H/shift H) Pro domácnost, heading level 2 link Základní ochrana, H3 link Mobilní Ochrana, H3 link Pro podniky, H2 link Naše produkty, H3 link O produktu AVG, H3 link Partnerství s AVG, H3 link Pro média, H3 link Centrum podpory, H3 link Stažení, H3 link O produktu AVG, H4 Jak vám můžeme pomoci, H4 Zákaznická oblast, H4 Kontaktujte nás, H4 Prodejci, H4 Grafika(G/shift G) Avg logo, local link, graphic Facebook, link, graphic Twitter, link, graphic Rss, link, graphic YouTube, link, graphic Odkazy na produkty AVG, link, graphic LinkedIn, link, graphic Pro domáctnost Links(Tab/předchozí = alt Tab) AVG logo, link, graphic Domů, H1 link AVG Internet Security 2012, H3 Více informací Zkušební verze AVG Anti-Virus 2012, H3 Více informací Zkušební verze AVG PC Tuneup, H3 Více Jednorázová oprava Mobilation, link, graphic

16 AVG Mobilization TM, H3 Více informací AVG Anti-Virus FREE 2012, H3 OK Více informací Pro domácnost, H 2 link Základní ochrana, H3 link AVG Internet security link AVG Antivirus link AVG PC TuneUp link AVG ThreatLabs link Mobilní Ochrana, H3 link AVG Mobilation For Android Smartphones link AVG Mobilation For Android Tablet link Stažení bezplatné zkušební verze link Pro podniky, H2 link Naše produkty, H3 link AVG Internet Security Business Edition AVG Anti-Virus Business Edition AVG Server Edition AVG File Server Edition AVG Linux Server Edition AVG Rescue CD AVG Remote Administration Společnost O produktu AVG, H3 link Profil společnosti Přehled technologií Zásady Kontaktní informace Vyhledávač prodejců Partnerství s AVG, H3 link Alliances Partneři Zaměstnání Pobočky Pro média, H3 link Tiskové zprávy Ocenění Názory zákazníků Zdroje Kontakt na PR oddělení Podpora Centrum podpory, H3 link Časté dotazy Obnovení licence Instruktážní videa Prodloužení ochrany Kontaktujte nás (domácnosti) Kontaktujte nás (pro podniky) Stažení, H3 link Aktualizace Dokumentace AVG Rescue CD Další podpora Další soubory ke stažení O společnosti Pro média Partnerský program Zásady ochrany osobních údajů Licenční ujednání Alliances Kontaktní informace Zakoupit antivir Internet Security Zabezpečení pro firmy PC Tuneup

17 Antivirová ochrana pro systém Android Hodnocení stránek AVG Upgradovat na nejnovější verzi Prodloužit licenci AVG Facebook, link, graphic Twitter, link, graphic Rss, link, graphic YouTube, link, graphic Odkazy na produkty AVG, link, graphic LinkedIn, link, graphic Partnerský program Partnerský portál Změnit jazyk Mapa stránek Přihlásit k AVG Headings(H/shift H) Domů, H1 link AVG Internet Security 2012, H3 AVG Anti-Virus 2012, H3 AVG PC Tuneup, H3 AVG Mobilization TM, H3 AVG Anti-Virus FREE 2012, H3 Pro domácnost, heading level 2 link Základní ochrana, H3 link Mobilní Ochrana, H3 link Pro podniky, H2 link Naše produkty, H3 link O produktu AVG, H3 link Partnerství s AVG, H3 link Pro média, H3 link Centrum podpory, H3 link Stažení, H3 link O produktu AVG, H4 Jak vám můžeme pomoci, H4 Zákaznická oblast, H4 Kontaktujte nás, H4 Prodejci, H4 Grafika(G/shift G) Avg logo, local link, graphic Mobilation, link, graphic (Zbytek obrázků čtečka nepřečte) Facebook, link, graphic Twitter, link, graphic Rss, link, graphic YouTube, link, graphic Odkazy na produkty AVG, link, graphic LinkedIn, link, graphic FREE Antivirus - download Links(Tab/předchozí = alt Tab) AVG logo, link, graphic Domů, H1 link Stáhnout, link Stáhnout, link Stáhnout, link Pro domácnost, H2 link Základní ochrana, H3 link AVG Internet security link

18 AVG Antivirus link AVG PC TuneUp link AVG ThreatLabs link Mobilní Ochrana, H3 link AVG Mobilation For Android Smartphones link AVG Mobilation For Android Tablet link Stažení bezplatné zkušební verze link Pro podniky, H2 link Naše produkty, H3 link AVG Internet Security Business Edition AVG Anti-Virus Business Edition AVG Server Edition AVG File Server Edition AVG Linux Server Edition AVG Rescue CD AVG Remote Administration Společnost O produktu AVG, H3 link Profil společnosti Přehled technologií Zásady Kontaktní informace Vyhledávač prodejců Partnerství s AVG, H3 link Alliances Partneři Zaměstnání Pobočky Pro média, H3 link Tiskové zprávy Ocenění Názory zákazníků Zdroje Kontakt na PR oddělení Podpora Centrum podpory, H3 link Časté dotazy Obnovení licence Instruktážní videa Prodloužení ochrany Kontaktujte nás (domácnosti) Kontaktujte nás (pro podniky) Stažení, H3 link Aktualizace Dokumentace AVG Rescue CD Další podpora Další soubory ke stažení O společnosti Pro média Partnerský program Zásady ochrany osobních údajů Licenční ujednání Alliances Kontaktní informace Zakoupit antivir Internet Security Zabezpečení pro firmy PC Tuneup Antivirová ochrana pro systém Android Hodnocení stránek AVG Upgradovat na nejnovější verzi Prodloužit licenci AVG Facebook, link, graphic Twitter, link, graphic Rss, link, graphic

19 YouTube, link, graphic Odkazy na produkty AVG, link, graphic LinkedIn, link, graphic Partnerský program Partnerský portál Změnit jazyk Mapa stránek Přihlásit k AVG Headings(H/shift H) Domů, H1 link Je BEZPLATNÁ aplikace Anti-Virus pro vás ta pravá? H1 Aplikace AVG Anti-Virus je ideální v případě, že počítač používáte pouze k surfování, vyhledávání a používání sociálních sítí, H2 Pro domácnost, heading level 2 link Základní ochrana, H3 link Mobilní Ochrana, H3 link Pro podniky, H2 link Naše produkty, H3 link O produktu AVG, H3 link Partnerství s AVG, H3 link Pro média, H3 link Centrum podpory, H3 link Stažení, H3 link O produktu AVG, H4 Jak vám můžeme pomoci, H4 Zákaznická oblast, H4 Kontaktujte nás, H4 Prodejci, H4 Grafika(G/shift G) Avg logo, local link, graphic Mobilation, link, graphic (Zbytek obrázků čtečka nepřečte) Facebook, link, graphic Twitter, link, graphic Rss, link, graphic YouTube, link, graphic Odkazy na produkty AVG, link, graphic LinkedIn, link, graphic Tabulka(T/shift T) Table with 5columns and 11 rows column 1 row 1: K čemu počítač používáte?

20 K čemu počítač používáte? Procházení Internetu, vyhledávání a používání sociálních sítí AVG Anti-Virus Free AVG Anti-Virus vám zajistí bezpečí Sdílení a stahování souborů do počítače AVG Anti-Virus AVG Internet Security AVG Anti-Virus vám zajistí bezpečí AVG Anti-Virus vám zajistí bezpečí Bezpečné stahování souborů Bezpečné stahování souborů Sledování videa na stránkách YouTube a jinde Zrychlete stahování videa Uchovejte schránku v bezpečí před nevyžádanou poštou Nakupování a internetové bankovnictví Zastavte hackery pomocí brány AVG Firewall Bezplatná podpora a prioritní aktualizace Stáhnout Bezplatná technická podpora 24 hodin denně 7 dní v týdnu Bezplatná technická podpora 24 hodin denně 7 dní v týdnu Stáhnout 30denní zkušební verze Stáhnout 30denní zkušební verze přečíst aktuální buňku ALT+CTRL+NUM 5 přejít do buňky vpravo ALT+CTRL+ŠIPKA VPRAVO přejít do buňky vlevo ALT+CTRL+ŠIPKA VLEVO přejít do dolní sousedící buňky ALT+CTRL+ŠIPKA DOLŮ přejít do horní sousedící buňky ALT+CTRL+ŠIPKA NAHORU přejít do první buňky tabulky ALT+CTRL+HOME přejít do poslední buňky tabulky ALT+CTRL+END přejít do první buňky sloupce ALT+CTRL+SHIFT+ŠIPKA NAHORU přejít do poslední buňky sloupce ALT+CTRL+SHIFT+ŠIPKA DOLŮ přejít do první buňky řádku ALT+CTRL+SHIFT+ŠIPKA VLEVO přejít do poslední buňky řádku ALT+CTRL+SHIFT+ŠIPKA VPRAVO přečíst aktuální řádek WIN+ČÁRKA přečíst aktuální sloupec WIN+TEČKA přečíst aktuální řádek JAWSKey+SHIFT+ŠIPKA NAHORU přečíst od začátku řádku JAWSKey+SHIFT+HOME přečíst do konce řádku JAWSKey+SHIFT+PAGEUP přečíst aktuální sloupec JAWSKey+SHIFT+NUM 5 přečíst od začátku sloupce JAWSKey+SHIFT+END přečíst do konce sloupce JAWSKey+SHIFT+PAGEDOWN

21 Vyhodnocení Cílem tohoto testování bylo vyhodnocení, zda-li provedené úpravy jsou prospěšné i pro jiné uživatele než-li P9. Dále bylo naší snahou otestovat dle našeho názoru nejdůležitější průchod stránkami pro běžného uživatele (stažení freewarové verze produktu) a zda-li tyto jednotlivé stránky nemají problémy s přístupností. Jelikož byl test proveden pomocí papírové verze prototypu, nebylo třeba aby P5 měl vlastní notebook či další provedení. Test byl proveden v prostorách školy na Karlově náměstí. Při testu byl P5 požádán, aby nám říkal klávesy či klávesové zkratky které by stiskl na klávesnici a mi simulovali čtečku Jaws pomocí struktury stránek zaznamenané v prototypu. Dále jsme požádali P5 o vyjadřování všech připomínek ke stránkám či jejich struktuře, případně i dalších myšlenek. Při testu jsme vytvářeli poznámky, jejichž oskenovaná podoba je na následujícím obrázku:

22 P5 prošel nejdříve celou stukturu stránek po titulkách pomocí klávesy H. Poté bez větších problémů přešel až na stránku pro stažení AVG Anti-virus FREE. Zde pomocí Ctrl+Insert+ si nechal přečíst celou stránku a zastavil se u tabulky (zaznamenána v prototypu). P5 nebyl schopen se v tabulce zorientovat, jelikož ho pletly totožné popisky vlastností v jednotlivých buňkách. Dále mu velice dlouho trvalo, nežli se zorientoval mezi prázdnými sloupci a řádky. Po nějaké době uživatel procházení v tabulce vzdal a začal stránku procházet po odkazech, kdy při prvním nalezení odkazu s textem stahuj nechal produkt stáhnout. Stáhl sice pomyslně správný produkt, a však kdyby procházel stránku dále, narazil by na totožně popsané odkazy na jiné produkty. Proto si nemohl být jist jaký produkt opravdu stáhl. Pro zvýšení přístupnosti stránek je tedy třeba zrušit/upravit tabulku, ve které se vyskytuje odkaz na stažení. Dále je třeba upravit popisky odkazů, aby nebylo možné zaměnit stažení jednoho produkt za druhý. V ideálním případě by bylo vhodné, kdyby nebylo možné ze stránky pro stažení AVG Anti-virus FREE možno stáhnout i další produkty. Dále je třeba změnit formulaci textů, které P5 nepochopil a jsou v daném kontextu nejasné. Mid/High-fidelity prototipování a testování Vytvoření prototypu Pokrytí scénářů Vytvořený prototyp pokrývá scénáře Use-Case 1 Stažení AVG-Antivirus Free a Use-Case 4 Aktualizace licence k produktu AVG. Byly naimplementovány 4 HTML stránky, které mají ekvivalentní strukturu jakou by měla mít dle našeho návrhu upravená původní webová stránka AVG. Jedná se o návrh pro přístupnost pomocí čteček, tudíž byla použita pouze technologie HTML. Nezabývali jsme se již dalšími technologiemi (CSS...) pro ostatní typy uživatelů, jelikož již nepatří do naší cílové skupiny. Požadovaný dialog mezi stránkou a uživatelem popisuje následující STN diagram. Při vypracování Mid/High-fidelity jsme narazili při na dva zajímavé scénáře, které jsme museli řešit. Prvním problémem byla stránka stažení AVG free antiviru, kdy byly stránky vytvořeny pro uživatele bez handicapu. Tyto stránky obsahovaly tabulku s výčtem všech produktů firmy AVG. Čtečka pro nevidomé umí s tabulkami zacházet, ale předpokládá, že jsou v tabulkách uloženy data a ne, že jsou tabulky využívány k zarovnávání textů na stránce, takže přehlednost tohoto oddílu, který považujeme za stěžejní, protože většina uživatelů, kteří si zakoupí placené verze antivirových programů mají s tímto programem nejdříve zkušenosti ve formě free.

23 Druhý zásadní problém nastal při testování obnovení licence, kdy je pro obnovení použitý prvek captcha. Tento prvek nelze internetovou čtečkou přečíst, protože se jedná o text vepsaný do grafiky, takže nevidomí nemá možnost si online obnovit licenci antiviru, protože toto pole neumí opravit. V našem prototypu jsme zkusili dvě verze testování, kde více se nám zamlouvala verze vyzkoušená u subjektu P10. Subjektu P9 jsme vepsali do captcha alt tagu i její hodnotu a tak byl subjekt schopen vepsat text. Subjekt P10 vůbec netušil, co objekty captcha jsou, proto jsme na druhou část testování vymysleli jednoduchý prvek, který vyřešil problém s ochraně proti automatickým robotům. Tento prvek obsahuje text a triviální matematický výraz, který se má vepsat do pole. Kód prototypu Zdrojový kód prototypu je uložen mimo tento soubor v souboru AVG_web.zip. Testování prototypu Testování 1 participant P9 Základním požadavkem testu bylo vyzkoušet, zda-li je navržená struktura stránek jednoduše a intuitivně přístupná pomocí čtečky Jaws (která byla určená jako základní pro testování z požadavku zadavatele AVG). Testování proběhlo u P9 doma. K testu byl využit vlastní notebook participanta. Ze stejných důvodů jako v případě testování low-fidelity prototypu usuzujeme že tímto způsobem ovlivníme testování vnějšími vlivy co nejméně. P9 čtečku Jaws nativně používá ve spojení s prohlížečem Internet Explorer. Prototyp byl přístupný z domény P9 byla vysvětlena nejprve první úloha (stažení bezplatné verze antiviru AVG) a teprve po jejím úspěšném zvládnutí mu byla vysvětlena úloha druhá (aktualizace licence). Celá praktická část testu, kdy jsme P9 zadali úkoly a dále jen sledovali jeho konání a více do jeho práce nezasahovali trvala necelých 10 minut. Jelikož byl P9 využit již při vytváření low-fidelity prototypu předpokládáme, že si již pamatoval základní strukturu stránek která je námi upravené podobná. Dále lze předpokládat, jelikož byly i scénáře totožné, že P9 si pamatoval i postup k dosažení cíle. V následujícím čase jsme s P9 probíraly jednotlivé připomínky či návrhy pro zlepšení prototypu. K prvnímu scénáři neměl P9 žádných výhrad a celkový prostup k cíli mu přišel intuitivní. U druhého scénáře jsme již narazily na problémy v podobě captchy, u které sice P9 zjistil z ALT tagu, že se jedná a captchu, ale marně hledal v jejím okolí tlačítko, které by bylo schopné tuto captchu přečíst, aby ji byl schopen opsat. Dle P9 existuje několik SW, které umí captchu přečíst z obrázku, ale nepracují stoprocentně. Aplikaci jsme nezkoušeli a místo toho jsme P9 captchu přečetli sami. Poté již neměl žádné problémy s dokončením daného scénáře. P9 doporučil v případě nutnosti použíti captchy využití RIA komponenty pro captchu. Testování 2 participant P10 Participant P10 byl vybrán pro testování z důvodu, že participant P9 již byl účasten při testování Low fidelity prototypu. Participant P10 je žena mezi lety, která se s oční vadou již narodila. Postupem doby a v následku mnohých poranění oka a následných operací oslepla na jedno oko, přičemž na druhé nevidí již od narození. V současné době se živí jako masérka, která internet využívá většinou pouze pro čtení denního tisku. Jelikož větev pro stažení free antivirové verze byla otestována a zhodnocena participantem P9, a z důvodu internetové negramotnosti P10, byl P10 předložen pouze jeden test na otestování nové captcha komponenty. Captcha grafiku jsme nahradili jednoduchým matematickým řetězcem, jehož výsledek se měl vepsat do do pole pro captcha, které by se v případě napojení na aplikační server validovalo. Dále jsme pole vyndali z tabulky, která byla opět používána jako formátovací prvek. Pro test jsme použili jednoduchý řetězec 2+2=, kdy do pole jsme očekávali odpověď 4. Participant P10 pochopil bez vysvětlování, že do pole má napsat výsledek výrazu a zbytek polí vyplnil dle očekávání. Proto jsme test prohlásili za úspěšný, protože jsme zpřístupnili tuto část i pro méně zdatné uživatele internetu a zachovali bezpečnost proti internetovým robotům.

24 Dokumentace pro vývojáře Pro implementování navržené struktury webových stránek tak, aby byly vhodné i pro uživatele, které nemají zrakový handicap, je vhodné využití CSS prvků, které dále přizpůsobí i vzhled a strukturu pro ostatní skupiny uživatelů. Příkladem toho může být přesunutí menu do horní části stránky, kde je jeho použití pro zrakově nepostiženého uživatele intuitivnější. Déle je třeba při dalším rozšíření struktury mimo hranice našeho prototypu nutné vycházet ze zásad vytváření webových stránek pro vysokou přístupnost a využívání již předpřipravených RIA komponent pro všeobecně používané složitější objekty (např. captcha). Dodržováním těchto zásad bude web přístupný široké veřejnosti i bez nutnosti získání rozšířených znalostí či zkušeností. Pro používání captcha prvků je nutné dle možností zvážit zařazení složitějších captcha se zvukovým výstupem, nebo nahrazením grafických captcha logickými, které stroj nedokáže tak jednoduše vyřešit, protože neví, co se od něj očekává.