Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

ToniGranollers w4a_presentation


Published on

Published in: Design, Technology
  • Be the first to comment

ToniGranollers w4a_presentation

  1. 1. Methodology for identifying and solving accessibility related issues in Web Content Management System environments Toni Granollers University of Lleida tonig@diei.udl.catUniversity of Lleida University of the Basque country Lyon, 17 April 2012
  2. 2. Outline• Introduction• CMS environments• Evaluating accessibility• Proposed Methodology• Case study• Discussion• Conclusions
  3. 3. Introduction• Introduction • “The power of the Web is in its universality. Access by• CMS everyone regardless of environments disability is an essential• Evaluating aspect” accessibility Tim Berners-Lee• Proposed Methodology • Accessibility is a legal• Case study requirement that should be Source:• Discussion integrated into Web• Conclusions development methodologies
  4. 4. CMS environments Users Web Administrators• Introduction• CMS CMS environment environments• Evaluating Data + Templates accessibility• Proposed Web Page Methodology• Case study• Discussion• Conclusions
  5. 5. Evaluating accessibility• Introduction • Evaluate Web content with WCAG • Determine the scope of the evaluation• CMS • Automatic evaluation environments • Use at least two Web accessibility• Evaluating evaluation tools accessibility • Validate markup (syntax and style)• Proposed • Manual revision by accessibility evaluator Methodology • Evaluate CMS environment with ATAG• Case study• Discussion But despite guidelines exist and• Conclusions the process to evaluate web accessibility is clear there are still accessibility errors!
  6. 6. Methodology (I) Properties • Allows identifying and solving• Introduction accessibility related issues in web• CMS pages using CMS environments environments • Iterative• Evaluating accessibility • Includes ATAG and WCAG• Proposed • Includes web content accessibility Methodology evaluation methodology proposed by• Case study the W3C• Discussion • Takes into account features• Conclusions specific to CMS environments
  7. 7. Methodology (II) Steps Changes in the 1.Select CMS requirements 9. CMS capable of• Introduction managing accessible and configuration web pages• CMS 2. Sample of NO representative web pages environments Any accessibility problem detected?• Evaluating NO CMS capable of producing the YES sample of web pages? accessibility All possible CMS YES YES configuration options• Proposed have been explored? 3. ATAG evaluation of the CMS with NO Methodology current configuration 6. Analysis of the causes• Case study 4. Develop the sample of accessibility errors of web pages with current• Discussion CMS configuration 7. Identify solutions for detected accessibility errors• Conclusions 5. WCAG analysis of the sample of web pages 8. Apply identified solutions to the CMS
  8. 8. Case study Step 1. Select CMS and configuration • 2 CMS environments analyzed• Introduction• CMS • With standard configuration environments• Evaluating accessibility Version 7.5.1 4.5.2 Editor web FCK editor Rich Text Editor (RTE)• Proposed Template Template one Default template Methodology• Case study • Set of 10 web pages in an academic• Discussion environment• Conclusions
  9. 9. Case study Step 2. Sample of representatives Web pages (I) 10 Web Pages Content elements HTML HTML Element• Introduction description All pages • Headers and paragraphs <H1> and <p>• CMS 1 - Presentation • No extra elements -- 2 - Center • Bold text format <strong> environments • No extra elements 3 - Academic --• Evaluating authorities • Internal links <a> <a name> accessibility 4 - Mural of the • Images <img> study room • Ordered lists <ol> <li>• Proposed 5 – Syllabus • Tables <table> <caption> <thead> Methodology • Different text formats <tbody> <th> <td> <tr> <center>,<strong>,<span• Case study style=”color: rgb(255,255,255)”>,<span• Discussion style="background-color: rgb(255, 255, 0);>• Conclusions
  10. 10. Case study Step 2. Sample of representatives Web pages (II) 10 Web Pages Content elements HTML Element• Introduction HTML description All pages • Headers and <H1> and <p>• CMS paragraphs 6 - Departments • Externals links <a> <a target=”_blank”> environments • Unordered list <ul> <li> 7 - Official • Externals links <a> <a target=”_blank”>• Evaluating registration • Image link <a><img> • Externals links <a> <a target=”_blank”> accessibility 8 – News • Emphasized text <em> format• Proposed 9 - Contact • Bold text format <strong> information • Address <address> Methodology • Email links <a href=”mailto:...”>• Case study 10 - Questions & • Form elements <label> <input> <select> suggestions <option> <textarea>Step• Discussion• Conclusions
  11. 11. Case study Step 3. ATAG evaluation of the CMSs • Quantitative results• Introduction• CMS A AA A AA environments Percentage of correct 25,00 % 42,86 % 37,50 % 42,86 % checkpoints• Evaluating More errors Less errors accessibility • Concrete checkpoints errors• Proposed Checkpoints Errors A AA Methodology No errors in both CMSs 1.1, 7.2 4.3, 7.5, 7.6• Case study• Discussion Errors found in both CMS 1.2, 2.2, 3.4, 6.1, 7.3 2.1, 5.1, 5.2, 6.2• Conclusions Errors only on OpenCMS No errors 7.4 Errors only on Typo3 No errors
  12. 12. Case study Step 4. Develop the sample of web pages • Create 10 representative web pages in• Introduction both CMS environments• CMS environments• Evaluating accessibility• Proposed Methodology• Case study• Discussion• Conclusions
  13. 13. Case study Step 5. WCAG 2.0 evaluation of the CMSs • Checkpoints with errors in the• Introduction• CMS WCAG evaluation for every web page Checkpoints environments Errors A AA 1.3.1, 2.1.1, 2.4.4,• Evaluating 3.3.2, 4.1.1 2.4.5, Errors found in both CMS accessibility User errors: 1.1.1, 3.3.4 (only page 10) 1.4.1, 2.4.2, 3.2.3• Proposed Common errors on 3.1.1, 2.4.1 No errors OpenCMS web pages Methodology Errors on some web pages 1.3.3, 1.4.4 (only pages: 2, 5, 8 and 9), on OpenCMS 3.3.1 (only page 10)• Case study 3.3.3 (only page 10) Common errors on Typo3• Discussion No errors 1.4.4, 2.4.6 web pages Errors on some web pages• Conclusions No errors No errors on Typo3
  14. 14. Case study Step 6. Analysis of causes accessibility errors Checkpoint• Introduction Level A 1.3.1. Info and Relationships Template, CMS Template, CMS• CMS 1.3.3. Sensory Characteristics CMS - 2.1.1. Keyboard Template CMS environments Template - 2.4.1. Bypass Blocks• Evaluating 2.4.4. Link Purpose (In Context) Template Template 3.1.1. Language of Page Template - accessibility 3.3.1. Error Identification Template, CMS - 3.3.2. Labels or Instructions Template, CMS Template, CMS• Proposed Template, HTML Template, HTML editor 4.1.1. Parsing editor Methodology Level AA• Case study 1.4.4. Resize text HTML editor HTML editor 2.4.5. Multiple Ways Template Template• Discussion 2.4.6. Headings and Labels - Template 3.3.3. Error Suggestion CMS -• Conclusions 3.3.4. Error Prevention CMS Template, CMS Errors made by users are not included
  15. 15. Case study Step 7. Identify solutions of accessibility errors • One representative errors of each• Introduction detected cause• CMS Source of Error Checkpoint Solution environments Template 2.4.4: Link Purpose Modify template to include the• Evaluating (In Context) title arribute for HTML tags accessibility HTML Editor 1.4.4: Resize Text Modify HTML editor to generate correct• Proposed CMS 1.3.1: Info and Modify configuration from Methodology Relationships CMS User 2.4.2 Page Titled Depends on user formation• Case study• Discussion• Conclusions
  16. 16. Case study Step 8. Apply solutions and ATAG re-evaluation • Quantitative results of ATAG• Introduction evaluation of the final configuration• CMS environments A AA A AA Percentage of correct• Evaluating checkpoints (Before) 25,00 % 42,86 % 37,50 % 42,86 % accessibility Percentage of correct checkpoints (After) 37.50 % 57.14 % 62.50 % 57.14 %• Proposed • Changes on CMSs have improve Methodology ATAG checkpoints:• Case study • 2.2. The tool automatically generates valid markup (Level A)• Discussion • 7.3. Allow the author to edit all properties of each• Conclusions element and object in an accessible fashion (Level A) • 2.1. Use the latest versions of W3C Recommendations (Level AA)
  17. 17. Case study Step 9. CMS capable of managing accessible web pages • The CMS provides a proper• Introduction environment for users to manage• CMS accessible web pages (for the kind of environments web pages in the sample)• Evaluating • Developing accessible web pages will accessibility depend on the users that use the CMS• Proposed Methodology• Case study• Discussion• Conclusions
  18. 18. Discussion (I) Commons errors in both CMSs • Accessibility errors in both CMSs have• Introduction similar causes:• CMS • Structure of the CMS environments • In general, CMSs systems work in a• Evaluating similar way accessibility • Causes and solutions provided in the• Proposed study are supposed to be helpful for Methodology other CMSs as well• Case study• Discussion And others…• Conclusions
  19. 19. Discussion (II) Improve the accessibility of both CMSs (I) • Errors in HTML template• Introduction • Correct unclosed tags and substitute «&»• CMS for «&amp» environments • Add «lang» attribute to the <html> tag• Evaluating • Modify sequence of headers: accessibility <h1><h2><h3>• Proposed • Associate label for each data input Methodology elements• Case study • HTML editor has not considered• Discussion some accessibility aspects• Conclusions • Install module to improve or substitute some tags generate for the HTML editor
  20. 20. Discussion (III) Improve the accessibility of both CMSs (II) • CMS does not provide proper• Introduction mechanisms to generate accessible• CMS code environments • Install modules to improve accessibility• Evaluating • Users can manage Web content in an accessibility incorrect way or without taking• Proposed accessibility aspects into account Methodology • Introduce correct titles for the pages• Case study regarding the content they have• Discussion • An appropriate alternative text must be• Conclusions provided for images • Tables with headers that identify cells
  21. 21. Discussion (IV) Helpful recommendations for users • Provide access to an accessibility• Introduction evaluation service• CMS • Accessibility evaluation services that environments work inside the HTML editors to check• Evaluating accessibility errors within the HTML accessibility editor• Proposed • Education about how to develop Methodology accessible web pages in a CMS Users• Case study environment• Discussion• Conclusions
  22. 22. Discussion (V) Helpful recommendations for administrators • Users or administrators must be aware of• Introduction accessibility• CMS • Not always the accessibility evaluation environments report is understood !!!• Evaluating accessibility Accessibility• Proposed Report Methodology Users Administrators• Case study• Discussion• Conclusions
  23. 23. Conclusions and future work Conclusions:• Introduction •The methodology presented is applicable to• CMS every CMS. environments •It provides the necessary mechanisms:• Evaluating • to ensure accessibility for a given set of representative web pages accessibility • to analyze various types of elements• Proposed •It is necessary configure properly a CMS to Methodology make accessible• Case study Future work:• Discussion •Analyze others technologies• Conclusions • HTML5 and RIA
  24. 24. Any questions? • Toni Granollers • Juan Miguel López • Afra Pascual • Cristina Menduiña University of Lleida University of the Basque country