W4 A Hera Ffx

Universidad Universidad Politécnica de MadridPolitécnica de Madrid

School of ComputingSchool of Computing

José Luis FuertesJosé Luis FuertesRicardo GonzálezRicardo González

Emmanuelle GutiérrezEmmanuelle GutiérrezLoïc MartínezLoïc Martínez

SIDAR FoundationSIDAR Foundation

International Cross-Disciplinary Conference International Cross-Disciplinary Conference on Web Accessibilityon Web Accessibility

Madrid, SpainMadrid, SpainApril 20-21, 2009April 20-21, 2009

Hera-FFX: a Firefox add-on for semi-automatic web accessibility evaluation

22W4A- W4A- ““Hera-FFX: a Firefox add-on for semi-automatic web accessibility evaluationHera-FFX: a Firefox add-on for semi-automatic web accessibility evaluation””

ContentsContentsIntroductionIntroductionFeatures of Web Accessibility ToolsFeatures of Web Accessibility ToolsHERAHERAHERA-FFXHERA-FFX

DesignDesignOverviewOverviewInternal structureInternal structureResults of analysisResults of analysisEvaluation processEvaluation process

ConclusionsConclusionsFuture WorkFuture Work


IntroductionIntroductionWeb accessibility evaluationWeb accessibility evaluation

Complex task, requiringComplex task, requiringHuman expertiseHuman expertiseSoftware supportSoftware support

Human evaluators needHuman evaluators needSound knowledgeSound knowledgeExperience in web developmentExperience in web developmentWCAG proficiencyWCAG proficiency

Software tools shouldSoftware tools shouldProvide support for manual evaluationProvide support for manual evaluationAutomate as much of the work as possibleAutomate as much of the work as possible


Features of web accessibility toolsFeatures of web accessibility toolsKey features of a web accessibility evaluation toolKey features of a web accessibility evaluation tool

Automated preliminary evaluation (Automated preliminary evaluation (AEAE))Support for manual entry of checkpoint results (Support for manual entry of checkpoint results (MEME))

Modification of page rendering to assist checkpoint Modification of page rendering to assist checkpoint evaluation (evaluation (PMPM))

Annotated code view to assist checkpoint evaluation Annotated code view to assist checkpoint evaluation ((CVCV))Evaluation of local pages (Evaluation of local pages (LPLP))Evaluation of restricted-access pages (Evaluation of restricted-access pages (RARA))Evaluation of rendered pages (Evaluation of rendered pages (RPRP))Report generation (Report generation (RGRG))Support for training (Support for training (STST))Multi-session capacity (Multi-session capacity (MSMS))Flexibility to integrate other accessibility guidelines (Flexibility to integrate other accessibility guidelines (FLFL))


Features of web accessibility toolsFeatures of web accessibility toolsComparison of free web accessibility evaluation toolsComparison of free web accessibility evaluation tools

ToolTool TypeType AEAE MMFF LPLP CC

VV LPLP RARA RPRP RGRG STST MMSS

FFLL

A-CheckerA-Checker onlineonline

Access. CheckAccess. Check onlineonline

EvalAccessEvalAccess onlineonline FoxabilityFoxability extensionextension

Functional Access. Functional Access. EvaluatorEvaluator onlineonline

HeraHera onlineonline

Cynthia SaysCynthia Says onlineonline Firefox Access. ExtensionFirefox Access. Extension extensionextension

TAW onlineTAW online onlineonline

TAW standaloneTAW standalone applicatioapplicationn

TorquemadaTorquemada onlineonline

Total ValidatorTotal Validator onlineonline WAVEWAVE onlineonline

WAVE Firefox toolbarWAVE Firefox toolbar extensionextension

Web Access. InspectorWeb Access. Inspector applicatioapplicationn

Web Access. Self-evaluationWeb Access. Self-evaluation reportreport


Features of web accessibility toolsFeatures of web accessibility toolsResultsResults

All the desirable features are All the desirable features are coveredcovered by at least one tool by at least one tool No one toolNo one tool has all the desirable features has all the desirable features

There is a need for a web accessibility evaluation tool There is a need for a web accessibility evaluation tool that hasthat has

Strong support for Strong support for manualmanual evaluation evaluationAbility to evaluateAbility to evaluate all typesall types of web pages of web pagesFlexibility to incorporate Flexibility to incorporate newnew accessibility guidelines accessibility guidelines


HERAHERAFree Free on-lineon-line tool from 2003-2005 tool from 2003-2005Developed by the Sidar FoundationDeveloped by the Sidar FoundationSupport for the Support for the semi-manual evaluation semi-manual evaluation of Web page of Web page accessibilityaccessibilityHERAHERA

““HHojas de ojas de EEstilo para la stilo para la RRevisión de la evisión de la AAccesibilidad”ccesibilidad”““Accessibility Evaluation Style Sheets”Accessibility Evaluation Style Sheets”

Generates new Generates new versions of the analysed page, versions of the analysed page, highlighting interesting elementshighlighting interesting elementsStrengths:Strengths:

Minimisation Minimisation of the needof the needto inspect source codeto inspect source codeto directly evaluate checkpoints in the original renderingto directly evaluate checkpoints in the original rendering

Positive Positive feedbackfeedback received from usersreceived from usersValuable tool for Valuable tool for educationaleducational purposes purposes


HERA-FFXHERA-FFXHera-FFX DesignHera-FFX Design

Main Main goalsgoals::Be as usable as HeraBe as usable as HeraBe flexible enough to incorporate additional requirements and Be flexible enough to incorporate additional requirements and newnew standardsstandards

Prototype Prototype decisionsdecisions::Firefox add-onFirefox add-onWCAG 1.0WCAG 1.0SpanishSpanish


HERA-FFXHERA-FFXHera-FFX overviewHera-FFX overview

Mozilla Firefox Hera FFX

Load Configuration XML

Automatic preliminary analysis

Manual evaluation

Load evaluation Report generationSave evaluation

[Current Evaluation]

[DOM web page representation]

[Configuration XML]

[Saved evaluation (XML)]

Browse web documents

[Report]

[Evaluation definition]

[Web page]

Stores guideline definition, Stores guideline definition, checkpoints and tests in an checkpoints and tests in an XML-based configuration fileXML-based configuration file

Firefox loads and interprets Firefox loads and interprets Web pagesWeb pages

Builds a DOM representation Builds a DOM representation of the web page. It is used of the web page. It is used by Hera-FFX to perform the by Hera-FFX to perform the accessibility evaluationaccessibility evaluation

Performs a preliminary Performs a preliminary automatic accessibility automatic accessibility evaluationevaluation

User performs a manual User performs a manual accessibility evaluationaccessibility evaluationAccessibility report: XHTML Accessibility report: XHTML + CSS document containing + CSS document containing detailed information about detailed information about the status of the evaluationthe status of the evaluation

Saved evaluation: this XML Saved evaluation: this XML file can divide evaluations file can divide evaluations into several sessionsinto several sessions


HERA-FFXHERA-FFXInternal structure for storing the required informationInternal structure for storing the required information

EvaluationEvaluation

GuidelineGuideline

CheckpointCheckpoint

TestTest

ElementElement

DOM-ElementDOM-Element


HERA-FFXHERA-FFXTest analysis results Test analysis results

Hera-FFX inspects the Web page and Hera-FFX inspects the Web page and automaticallyautomatically assigns a value for each testassigns a value for each test

PassPass: the web page passes the test : the web page passes the test FailFail: the web page fails the test: the web page fails the testNot applicableNot applicable: the test is not applicable: the test is not applicableVerifyVerify: the tool cannot decide what the result is and the user is : the tool cannot decide what the result is and the user is asked to run the test manually asked to run the test manually

The userThe user can can manuallymanually assignassign two more values for each two more values for each testtest

PartialPartial: the web page fails the test on a minor point : the web page fails the test on a minor point UnknownUnknown: the evaluator cannot decide what the result of the : the evaluator cannot decide what the result of the test should betest should be


HERA-FFXHERA-FFXResults of checkpoint analysisResults of checkpoint analysis

Condition Result i / evali = fail fail i / evali = partial i≠j (evalj ≠ fail) partial i / evali = pass i≠j (evalj = pass evalj = N/A) pass

i / evali = N/A not applicable

i / evali = unknown i≠j (evalj = unknown evalj = N/A) unknown i / evali = verify i≠j (evalj ≠ fail evalj ≠ partial) verify


HERA-FFXHERA-FFXDetailed Evaluation ProcessDetailed Evaluation Process

Current web page

Manual Manual Evaluation Evaluation

SupportSupport

Help on Checkpoints

Instructions for Evaluation

Modified Page View

Code View

EvaluationResults

Result Summary

<hmtl lang="es"><head><title>HERA </title></head><body>

Automated Automated Preliminary Preliminary

AnalysisAnalysis

Report Report GenerationGeneration


HERA-FFXHERA-FFXAutomated Preliminary AnalysisAutomated Preliminary Analysis

The browser loads a pageThe browser loads a pageHera-FFX applies the relevant tests to evaluate each DOM-Hera-FFX applies the relevant tests to evaluate each DOM-elementelementAn icon on the Firefox status bar shows the progress and An icon on the Firefox status bar shows the progress and the final the final aggregated resultaggregated resultUsers can get more details as a tool tipUsers can get more details as a tool tip


Summary of ResultsSummary of Results

HERA-FFXHERA-FFX

User can choose the User can choose the navigation style:navigation style:

Table-basedTable-basedGuideline-basedGuideline-based

General informationGeneral informationURL, configuration, URL, configuration, date, time, number of date, time, number of errors, number of errors, number of manual checks manual checks needed, browser…needed, browser…


HERA-FFXHERA-FFXManual Evaluation SupportManual Evaluation Support

User interface designed to evaluate point by point User interface designed to evaluate point by point according to the selected navigation styleaccording to the selected navigation style

Interface control: Interface control: keyboard and keyboard and mousemouse

Colour contrastColour contrast

Colours and iconsColours and icons

Interface elements: Interface elements: relative unitsrelative units



Simulated view of the modified pageSimulated view of the modified pageIndicates which elements have to be inspectedIndicates which elements have to be inspected

Element failsElement fails

Element should be Element should be evaluatedevaluated



Generated HTML code viewGenerated HTML code viewIndicates which elements have to be inspectedIndicates which elements have to be inspected

Element failsElement fails

Element should be Element should be evaluatedevaluated



Visualization of the result of a call to an external serviceVisualization of the result of a call to an external service

W3C HTML W3C HTML validation servicevalidation service


ConclusionsConclusionsBoth the Both the Sidar FoundationSidar Foundation and the and the Technical Technical University of MadridUniversity of Madrid are using Hera in their are using Hera in their Web Web accessibility coursesaccessibility courses with very encouraging results with very encouraging resultsHera-FFX is a Hera-FFX is a Firefox add-onFirefox add-on designed to perform a designed to perform a semi-automaticsemi-automatic evaluation of web accessibility evaluation of web accessibility

AutomaticAutomatic preliminary evaluation preliminary evaluationProvides guidance for Provides guidance for manualmanual evaluation evaluationIncludes the desirable Includes the desirable featuresfeatures of a web accessibility of a web accessibility evaluation toolevaluation tool


ConclusionsConclusions

FeatureFeature HeraHera Hera-Hera-FFXFFX

Automated preliminary evaluationAutomated preliminary evaluation Support for manual entrySupport for manual entry Modification of page presentationModification of page presentation Annotated code viewAnnotated code view Evaluation of local pagesEvaluation of local pages Evaluation or restricted-access Evaluation or restricted-access pagespages

Evaluation of rendered pagesEvaluation of rendered pages Report generationReport generation Support for trainingSupport for training Multi-session capacityMulti-session capacity FlexibilityFlexibility

Hera-FFX – Hera comparisonHera-FFX – Hera comparison


ConclusionsConclusionsHera-FFX – Hera comparisonHera-FFX – Hera comparison

Increased Increased efficiencyefficiencyEach manual evaluation is automatically updatedEach manual evaluation is automatically updated

Same Same effectivenesseffectivenessNo relevant differencesNo relevant differences

Increased Increased user satisfactionuser satisfactionUsers can evaluate pages that they were unable to with HeraUsers can evaluate pages that they were unable to with Hera

Same Same completenesscompleteness65 WCAG 1.0 checkpoints 65 WCAG 1.0 checkpoints

Slightly increased Slightly increased correctnesscorrectnessHera-FFX inspects the rendered-page, which is closer to user Hera-FFX inspects the rendered-page, which is closer to user experienceexperience


Future WorkFuture WorkReportReport generation in different formats generation in different formats

PDF, EARL…PDF, EARL…InternationalizationInternationalization of the add-on of the add-onUpdate to cover the Update to cover the SpanishSpanish web content accessibility web content accessibility standard (UNE 139803:2004)standard (UNE 139803:2004)Update to cover Update to cover WCAG 2.0WCAG 2.0

Already startedAlready startedMajorMajor structural changes are neededstructural changes are needed

To cover principles, guidelines, success criteria, techniques and To cover principles, guidelines, success criteria, techniques and failuresfailuresTo handle WCAG 2.0 flexibility and choose between multiple To handle WCAG 2.0 flexibility and choose between multiple techniques to satisfy a criteriatechniques to satisfy a criteria

• Consideration of “situations” (the evaluator will have to decide which situation applies to each element)

• Boolean technique expressions


Universidad Universidad Politécnica de MadridPolitécnica de Madrid

School of ComputingSchool of Computing

José Luis FuertesJosé Luis FuertesRicardo GonzálezRicardo González

Emmanuelle GutiérrezEmmanuelle GutiérrezLoïc MartínezLoïc Martínez

SIDAR FoundationSIDAR Foundation

International Cross-Disciplinary Conference International Cross-Disciplinary Conference on Web Accessibilityon Web Accessibility

Madrid, SpainMadrid, SpainApril 20-21, 2009April 20-21, 2009

Hera-FFX: a Firefox add-on for semi-automatic web accessibility evaluation

Technology

W4 A Hera Ffx