Universidad Politécnica de Madrid School of Computing José Luis Fuertes Ricardo González Emmanuelle Gutiérrez Loïc Martíne...
Contents <ul><li>Introduction </li></ul><ul><li>Features of Web Accessibility Tools </li></ul><ul><li>HERA </li></ul><ul><...
Introduction <ul><li>Web accessibility evaluation </li></ul><ul><ul><li>Complex task, requiring </li></ul></ul><ul><ul><ul...
Features of web accessibility tools <ul><li>Key features of a web accessibility evaluation tool </li></ul><ul><ul><li>Auto...
Features of web accessibility tools <ul><li>Comparison of free web accessibility evaluation tools </li></ul>Tool Type AE M...
Features of web accessibility tools <ul><li>Results </li></ul><ul><ul><li>All the desirable features are  covered  by at l...
HERA <ul><li>Free  on-line  tool from 2003-2005 </li></ul><ul><li>Developed by the Sidar Foundation </li></ul><ul><li>Supp...
HERA-FFX <ul><li>Hera-FFX Design </li></ul><ul><ul><li>Main  goals : </li></ul></ul><ul><ul><ul><li>Be as usable as Hera <...
HERA-FFX <ul><li>Hera-FFX overview </li></ul>Stores guideline definition, checkpoints and tests in an XML-based configurat...
HERA-FFX <ul><li>Internal structure for storing the required information </li></ul>Evaluation Guideline Checkpoint Test El...
HERA-FFX <ul><li>Test analysis results  </li></ul><ul><ul><li>Hera-FFX inspects the Web page and  automatically  assigns a...
HERA-FFX <ul><li>Results of checkpoint analysis </li></ul>verify    i  /  eval i  = verify        i ≠ j  (eval j   ≠ fa...
HERA-FFX <ul><li>Detailed Evaluation Process </li></ul>Current web page Manual Evaluation Support Help on Checkpoints Inst...
HERA-FFX <ul><li>Automated Preliminary Analysis </li></ul><ul><ul><li>The browser loads a page </li></ul></ul><ul><ul><li>...
<ul><li>Summary of Results </li></ul>HERA-FFX User can choose the navigation style: <ul><ul><li>Table-based </li></ul></ul...
HERA-FFX <ul><li>Manual Evaluation Support </li></ul><ul><ul><li>User interface designed to evaluate point by point accord...
HERA-FFX <ul><li>Manual Evaluation Support </li></ul><ul><ul><li>Simulated view of the modified page </li></ul></ul><ul><u...
HERA-FFX <ul><li>Manual Evaluation Support </li></ul><ul><ul><li>Generated HTML code view </li></ul></ul><ul><ul><ul><li>I...
HERA-FFX <ul><li>Manual Evaluation Support </li></ul><ul><ul><li>Visualization of the result of a call to an external serv...
Conclusions <ul><li>Both the  Sidar Foundation  and the  Technical University of Madrid  are using Hera in their  Web acce...
Conclusions <ul><li>Hera-FFX – Hera comparison </li></ul>           Hera-FFX Feature Hera Automated preliminary...
Conclusions <ul><li>Hera-FFX – Hera comparison </li></ul><ul><ul><li>Increased  efficiency </li></ul></ul><ul><ul><ul><li>...
Future Work <ul><li>Report  generation in different formats </li></ul><ul><ul><li>PDF, EARL… </li></ul></ul><ul><li>Intern...
Future Work <ul><li>Develop a comprehensive  stand-alone evaluation tool  including workgroup tools </li></ul><ul><ul><li>...
Universidad Politécnica de Madrid School of Computing José Luis Fuertes Ricardo González Emmanuelle Gutiérrez Loïc Martíne...
Upcoming SlideShare
Loading in...5
×

HERA-FFX - a Firefox Add-on for semi-automatic web accessibility evaluation

1,877

Published on

Presentation of paper by Jose Fuertes, Ricardo Gonzalez, Emmanuelle Gutierrez and Loic Martinez on the HERA-FFX accessibility evaluation tool. Full paper available from the ACM Digital Library.

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,877
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HERA-FFX - a Firefox Add-on for semi-automatic web accessibility evaluation

  1. 1. Universidad Politécnica de Madrid School of Computing José Luis Fuertes Ricardo González Emmanuelle Gutiérrez Loïc Martínez SIDAR Foundation International Cross-Disciplinary Conference on Web Accessibility Madrid, Spain April 20-21, 2009 Hera-FFX: a Firefox add-on for semi-automatic web accessibility evaluation
  2. 2. Contents <ul><li>Introduction </li></ul><ul><li>Features of Web Accessibility Tools </li></ul><ul><li>HERA </li></ul><ul><li>HERA-FFX </li></ul><ul><ul><li>Design </li></ul></ul><ul><ul><li>Overview </li></ul></ul><ul><ul><li>Internal structure </li></ul></ul><ul><ul><li>Results of analysis </li></ul></ul><ul><ul><li>Evaluation process </li></ul></ul><ul><li>Conclusions </li></ul><ul><li>Future Work </li></ul>
  3. 3. Introduction <ul><li>Web accessibility evaluation </li></ul><ul><ul><li>Complex task, requiring </li></ul></ul><ul><ul><ul><li>Human expertise </li></ul></ul></ul><ul><ul><ul><li>Software support </li></ul></ul></ul><ul><ul><li>Human evaluators need </li></ul></ul><ul><ul><ul><li>Sound knowledge </li></ul></ul></ul><ul><ul><ul><li>Experience in web development </li></ul></ul></ul><ul><ul><ul><li>WCAG proficiency </li></ul></ul></ul><ul><ul><li>Software tools should </li></ul></ul><ul><ul><ul><li>Provide support for manual evaluation </li></ul></ul></ul><ul><ul><ul><li>Automate as much of the work as possible </li></ul></ul></ul>
  4. 4. Features of web accessibility tools <ul><li>Key features of a web accessibility evaluation tool </li></ul><ul><ul><li>Automated preliminary evaluation ( AE ) </li></ul></ul><ul><ul><li>Support for manual entry of checkpoint results ( ME ) </li></ul></ul><ul><ul><li>Modification of page rendering to assist checkpoint evaluation ( PM ) </li></ul></ul><ul><ul><li>Annotated code view to assist checkpoint evaluation ( CV ) </li></ul></ul><ul><ul><li>Evaluation of local pages ( LP ) </li></ul></ul><ul><ul><li>Evaluation of restricted-access pages ( RA ) </li></ul></ul><ul><ul><li>Evaluation of rendered pages ( RP ) </li></ul></ul><ul><ul><li>Report generation ( RG ) </li></ul></ul><ul><ul><li>Support for training ( ST ) </li></ul></ul><ul><ul><li>Multi-session capacity ( MS ) </li></ul></ul><ul><ul><li>Flexibility to integrate other accessibility guidelines ( FL ) </li></ul></ul>
  5. 5. Features of web accessibility tools <ul><li>Comparison of free web accessibility evaluation tools </li></ul>Tool Type AE MF LP CV LP RA RP RG ST MS FL A-Checker online     Access. Check online   EvalAccess online    Foxability extension       Functional Access. Evaluator online    Hera online        Cynthia Says online   Firefox Access. Extension extension      TAW online online   TAW standalone application         Torquemada online   Total Validator online   WAVE online    WAVE Firefox toolbar extension      Web Access. Inspector application    Web Access. Self-evaluation report     
  6. 6. Features of web accessibility tools <ul><li>Results </li></ul><ul><ul><li>All the desirable features are covered by at least one tool </li></ul></ul><ul><ul><li>No one tool has all the desirable features </li></ul></ul><ul><li>There is a need for a web accessibility evaluation tool that has </li></ul><ul><ul><li>Strong support for manual evaluation </li></ul></ul><ul><ul><li>Ability to evaluate all types of web pages </li></ul></ul><ul><ul><li>Flexibility to incorporate new accessibility guidelines </li></ul></ul>
  7. 7. HERA <ul><li>Free on-line tool from 2003-2005 </li></ul><ul><li>Developed by the Sidar Foundation </li></ul><ul><li>Support for the semi-manual evaluation of Web page accessibility </li></ul><ul><li>HERA </li></ul><ul><ul><li>“ H ojas de E stilo para la R evisión de la A ccesibilidad” </li></ul></ul><ul><ul><li>“ Accessibility Evaluation Style Sheets” </li></ul></ul><ul><li>Generates new versions of the analysed page, highlighting interesting elements </li></ul><ul><li>Strengths: </li></ul><ul><ul><li>Minimisation of the need </li></ul></ul><ul><ul><ul><li>to inspect source code </li></ul></ul></ul><ul><ul><ul><li>to directly evaluate checkpoints in the original rendering </li></ul></ul></ul><ul><ul><li>Positive feedback received from users </li></ul></ul><ul><ul><li>Valuable tool for educational purposes </li></ul></ul>
  8. 8. HERA-FFX <ul><li>Hera-FFX Design </li></ul><ul><ul><li>Main goals : </li></ul></ul><ul><ul><ul><li>Be as usable as Hera </li></ul></ul></ul><ul><ul><ul><li>Be flexible enough to incorporate additional requirements and new standards </li></ul></ul></ul><ul><ul><li>Prototype decisions : </li></ul></ul><ul><ul><ul><li>Firefox add-on </li></ul></ul></ul><ul><ul><ul><li>WCAG 1.0 </li></ul></ul></ul><ul><ul><ul><li>Spanish </li></ul></ul></ul>
  9. 9. HERA-FFX <ul><li>Hera-FFX overview </li></ul>Stores guideline definition, checkpoints and tests in an XML-based configuration file Firefox loads and interprets Web pages Builds a DOM representation of the web page. It is used by Hera-FFX to perform the accessibility evaluation Performs a preliminary automatic accessibility evaluation User performs a manual accessibility evaluation Accessibility report: XHTML + CSS document containing detailed information about the status of the evaluation Saved evaluation: this XML file can divide evaluations into several sessions
  10. 10. HERA-FFX <ul><li>Internal structure for storing the required information </li></ul>Evaluation Guideline Checkpoint Test Element DOM-Element
  11. 11. HERA-FFX <ul><li>Test analysis results </li></ul><ul><ul><li>Hera-FFX inspects the Web page and automatically assigns a value for each test </li></ul></ul><ul><ul><ul><li>Pass : the web page passes the test </li></ul></ul></ul><ul><ul><ul><li>Fail : the web page fails the test </li></ul></ul></ul><ul><ul><ul><li>Not applicable : the test is not applicable </li></ul></ul></ul><ul><ul><ul><li>Verify : the tool cannot decide what the result is and the user is asked to run the test manually </li></ul></ul></ul><ul><ul><li>The user can manually assign two more values for each test </li></ul></ul><ul><ul><ul><li>Partial : the web page fails the test on a minor point </li></ul></ul></ul><ul><ul><ul><li>Unknown : the evaluator cannot decide what the result of the test should be </li></ul></ul></ul>
  12. 12. HERA-FFX <ul><li>Results of checkpoint analysis </li></ul>verify  i / eval i = verify   i ≠ j (eval j ≠ fail  eval j ≠ partial) Condition Result  i / eval i = fail fail  i / eval i = partial   i ≠ j ( eval j ≠ fail ) partial  i / eval i = pass   i ≠ j (eval j = pass  eval j = N/A ) pass  i / eval i = N/A not applicable  i / eval i = unknown   i ≠ j ( eval j = unknown  eval j = N/A) unknown
  13. 13. HERA-FFX <ul><li>Detailed Evaluation Process </li></ul>Current web page Manual Evaluation Support Help on Checkpoints Instructions for Evaluation Modified Page View Code View Evaluation Results Result Summary Automated Preliminary Analysis Report Generation <hmtl lang=&quot;es&quot;> <head> <title>HERA </title> </head> <body>
  14. 14. HERA-FFX <ul><li>Automated Preliminary Analysis </li></ul><ul><ul><li>The browser loads a page </li></ul></ul><ul><ul><li>Hera-FFX applies the relevant tests to evaluate each DOM-element </li></ul></ul><ul><ul><li>An icon on the Firefox status bar shows the progress and the final aggregated result </li></ul></ul><ul><ul><li>Users can get more details as a tool tip </li></ul></ul>
  15. 15. <ul><li>Summary of Results </li></ul>HERA-FFX User can choose the navigation style: <ul><ul><li>Table-based </li></ul></ul><ul><ul><li>Guideline-based </li></ul></ul><ul><li>General information </li></ul><ul><li>URL, configuration, date, time, number of errors, number of manual checks needed, browser… </li></ul>
  16. 16. HERA-FFX <ul><li>Manual Evaluation Support </li></ul><ul><ul><li>User interface designed to evaluate point by point according to the selected navigation style </li></ul></ul><ul><li>Interface control: keyboard and mouse </li></ul><ul><li>Colour contrast </li></ul><ul><li>Colours and icons </li></ul><ul><li>Interface elements: relative units </li></ul>
  17. 17. HERA-FFX <ul><li>Manual Evaluation Support </li></ul><ul><ul><li>Simulated view of the modified page </li></ul></ul><ul><ul><ul><li>Indicates which elements have to be inspected </li></ul></ul></ul><ul><li>Element fails </li></ul><ul><li>Element should be evaluated </li></ul>
  18. 18. HERA-FFX <ul><li>Manual Evaluation Support </li></ul><ul><ul><li>Generated HTML code view </li></ul></ul><ul><ul><ul><li>Indicates which elements have to be inspected </li></ul></ul></ul><ul><li>Element fails </li></ul><ul><li>Element should be evaluated </li></ul>
  19. 19. HERA-FFX <ul><li>Manual Evaluation Support </li></ul><ul><ul><li>Visualization of the result of a call to an external service </li></ul></ul><ul><li>W3C HTML validation service </li></ul>
  20. 20. Conclusions <ul><li>Both the Sidar Foundation and the Technical University of Madrid are using Hera in their Web accessibility courses with very encouraging results </li></ul><ul><li>Hera-FFX is a Firefox add-on designed to perform a semi-automatic evaluation of web accessibility </li></ul><ul><ul><li>Automatic preliminary evaluation </li></ul></ul><ul><ul><li>Provides guidance for manual evaluation </li></ul></ul><ul><ul><li>Includes the desirable features of a web accessibility evaluation tool </li></ul></ul>
  21. 21. Conclusions <ul><li>Hera-FFX – Hera comparison </li></ul>           Hera-FFX Feature Hera Automated preliminary evaluation  Support for manual entry  Modification of page presentation  Annotated code view  Evaluation of local pages Evaluation or restricted-access pages Evaluation of rendered pages Report generation  Support for training  Multi-session capacity  Flexibility
  22. 22. Conclusions <ul><li>Hera-FFX – Hera comparison </li></ul><ul><ul><li>Increased efficiency </li></ul></ul><ul><ul><ul><li>Each manual evaluation is automatically updated </li></ul></ul></ul><ul><ul><li>Same effectiveness </li></ul></ul><ul><ul><ul><li>No relevant differences </li></ul></ul></ul><ul><ul><li>Increased user satisfaction </li></ul></ul><ul><ul><ul><li>Users can evaluate pages that they were unable to with Hera </li></ul></ul></ul><ul><ul><li>Same completeness </li></ul></ul><ul><ul><ul><li>65 WCAG 1.0 checkpoints </li></ul></ul></ul><ul><ul><li>Slightly increased correctness </li></ul></ul><ul><ul><ul><li>Hera-FFX inspects the rendered-page, which is closer to user experience </li></ul></ul></ul>
  23. 23. Future Work <ul><li>Report generation in different formats </li></ul><ul><ul><li>PDF, EARL… </li></ul></ul><ul><li>Internationalization of the add-on </li></ul><ul><li>Update to cover the Spanish web content accessibility standard (UNE 139803:2004) </li></ul><ul><li>Update to cover WCAG 2.0 </li></ul><ul><ul><li>Already started </li></ul></ul><ul><ul><li>Major structural changes are needed </li></ul></ul><ul><ul><ul><li>To cover principles, guidelines, success criteria, techniques and failures </li></ul></ul></ul><ul><ul><ul><li>To handle WCAG 2.0 flexibility and choose between multiple techniques to satisfy a criteria </li></ul></ul></ul><ul><ul><ul><ul><li>Consideration of “situations” (the evaluator will have to decide which situation applies to each element) </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Boolean technique expressions </li></ul></ul></ul></ul>
  24. 24. Future Work <ul><li>Develop a comprehensive stand-alone evaluation tool including workgroup tools </li></ul><ul><ul><li>Project creation and management </li></ul></ul><ul><ul><li>Evaluation work distribution </li></ul></ul><ul><ul><li>Aggregation of results from different evaluators </li></ul></ul><ul><ul><li>Assessment of evaluator reliability </li></ul></ul><ul><ul><li>… </li></ul></ul>
  25. 25. Universidad Politécnica de Madrid School of Computing José Luis Fuertes Ricardo González Emmanuelle Gutiérrez Loïc Martínez SIDAR Foundation International Cross-Disciplinary Conference on Web Accessibility Madrid, Spain April 20-21, 2009 Hera-FFX: a Firefox add-on for semi-automatic web accessibility evaluation

×