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
33W4A- W4A- ““Hera-FFX: a Firefox add-on for semi-automatic web accessibility evaluationHera-FFX: a Firefox add-on for semi-automatic web accessibility evaluation””
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
44W4A- W4A- ““Hera-FFX: a Firefox add-on for semi-automatic web accessibility evaluationHera-FFX: a Firefox add-on for semi-automatic web accessibility evaluation””
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))
55W4A- W4A- ““Hera-FFX: a Firefox add-on for semi-automatic web accessibility evaluationHera-FFX: a Firefox add-on for semi-automatic web accessibility evaluation””
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
66W4A- W4A- ““Hera-FFX: a Firefox add-on for semi-automatic web accessibility evaluationHera-FFX: a Firefox add-on for semi-automatic web accessibility evaluation””
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
77W4A- W4A- ““Hera-FFX: a Firefox add-on for semi-automatic web accessibility evaluationHera-FFX: a Firefox add-on for semi-automatic web accessibility evaluation””
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
88W4A- W4A- ““Hera-FFX: a Firefox add-on for semi-automatic web accessibility evaluationHera-FFX: a Firefox add-on for semi-automatic web accessibility evaluation””
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
99W4A- W4A- ““Hera-FFX: a Firefox add-on for semi-automatic web accessibility evaluationHera-FFX: a Firefox add-on for semi-automatic web accessibility evaluation””
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
1010W4A- W4A- ““Hera-FFX: a Firefox add-on for semi-automatic web accessibility evaluationHera-FFX: a Firefox add-on for semi-automatic web accessibility evaluation””
HERA-FFXHERA-FFXInternal structure for storing the required informationInternal structure for storing the required information
EvaluationEvaluation
GuidelineGuideline
CheckpointCheckpoint
TestTest
ElementElement
DOM-ElementDOM-Element
1111W4A- W4A- ““Hera-FFX: a Firefox add-on for semi-automatic web accessibility evaluationHera-FFX: a Firefox add-on for semi-automatic web accessibility evaluation””
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
1212W4A- W4A- ““Hera-FFX: a Firefox add-on for semi-automatic web accessibility evaluationHera-FFX: a Firefox add-on for semi-automatic web accessibility evaluation””
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
1313W4A- W4A- ““Hera-FFX: a Firefox add-on for semi-automatic web accessibility evaluationHera-FFX: a Firefox add-on for semi-automatic web accessibility evaluation””
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
1414W4A- W4A- ““Hera-FFX: a Firefox add-on for semi-automatic web accessibility evaluationHera-FFX: a Firefox add-on for semi-automatic web accessibility evaluation””
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
1515W4A- W4A- ““Hera-FFX: a Firefox add-on for semi-automatic web accessibility evaluationHera-FFX: a Firefox add-on for semi-automatic web accessibility evaluation””
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…
1616W4A- W4A- ““Hera-FFX: a Firefox add-on for semi-automatic web accessibility evaluationHera-FFX: a Firefox add-on for semi-automatic web accessibility evaluation””
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
1717W4A- W4A- ““Hera-FFX: a Firefox add-on for semi-automatic web accessibility evaluationHera-FFX: a Firefox add-on for semi-automatic web accessibility evaluation””
HERA-FFXHERA-FFXManual Evaluation SupportManual Evaluation Support
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
1818W4A- W4A- ““Hera-FFX: a Firefox add-on for semi-automatic web accessibility evaluationHera-FFX: a Firefox add-on for semi-automatic web accessibility evaluation””
HERA-FFXHERA-FFXManual Evaluation SupportManual Evaluation Support
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
1919W4A- W4A- ““Hera-FFX: a Firefox add-on for semi-automatic web accessibility evaluationHera-FFX: a Firefox add-on for semi-automatic web accessibility evaluation””
HERA-FFXHERA-FFXManual Evaluation SupportManual Evaluation Support
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
2020W4A- W4A- ““Hera-FFX: a Firefox add-on for semi-automatic web accessibility evaluationHera-FFX: a Firefox add-on for semi-automatic web accessibility evaluation””
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
2121W4A- W4A- ““Hera-FFX: a Firefox add-on for semi-automatic web accessibility evaluationHera-FFX: a Firefox add-on for semi-automatic web accessibility evaluation””
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
2222W4A- W4A- ““Hera-FFX: a Firefox add-on for semi-automatic web accessibility evaluationHera-FFX: a Firefox add-on for semi-automatic web accessibility evaluation””
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
2323W4A- W4A- ““Hera-FFX: a Firefox add-on for semi-automatic web accessibility evaluationHera-FFX: a Firefox add-on for semi-automatic web accessibility evaluation””
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
2525W4A- W4A- ““Hera-FFX: a Firefox add-on for semi-automatic web accessibility evaluationHera-FFX: a Firefox add-on for semi-automatic web accessibility evaluation””
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