Downloaded 14 times
ToniGranollers w4a_presentation
- 1. Methodology for identifying and solving accessibility related issues in Web Content Management System environments Toni Granollers University of Lleida tonig@diei.udl.cat University of Lleida University of the Basque country Lyon, 17 April 2012
- 2. Outline • Introduction • CMS environments • Evaluating accessibility • Proposed Methodology • Case study • Discussion • Conclusions
- 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: http://icons.anatom5.de/ • Discussion integrated into Web • Conclusions development methodologies
- 4. CMS environments Users Web Administrators • Introduction • CMS CMS environment environments • Evaluating Data + Templates accessibility • Proposed Web Page Methodology • Case study • Discussion • Conclusions
- 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Discussion (II) Improve the accessibility of both CMSs (I) • Errors in HTML template • Introduction • Correct unclosed tags and substitute «&» • CMS for «&» 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. 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. 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. 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. 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. Any questions? • Toni Granollers tonig@diei.udl.cat • Juan Miguel López juanmiguel.lopez@ehu.es • Afra Pascual apascual@diei.udl.cat • Cristina Menduiña cmenduinya@alumnes.udl.cat University of Lleida University of the Basque country
Editor's Notes
- #2 Methodology for identifying and solving accessibility related issues in Web Content Management System environments GRIHO is an Computer-Human Interaction and Data Integration Research Group University of Lleida University of the Basque country Speaker: Toni Granollers University of Lleida [email_address] Conference: 9th International Cross-Disciplinary Conference on Web Accessibility Lyon, 17 April 2012 http://www.w4a.info/2012/
- #3 Outline : Introduction CMS environments Evaluating accessibility Proposed Methodology Case study Discussion Conclusions
- #4 Introduction “ The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect”. Tim Berners-Lee Accessibility is a legal requirement that should be integrated into Web development methodologies Legislation about the fulfilment of accessibility requirements is currently in force in many countries around the world. For instance, Section 508 requires federal agencies in the United States to make their electronic and information technology accessible for people with disabilities. These kinds of legislative changes have also been made in more countries around the world, such as European Union countries. These legal frameworks not only affect public administrations, they also affect corporations that develop software or provide services for their use in civil service.
- #5 CMS environments In this context, it must be taken into account that there are a growing number of institutions that use Web Content Management Systems (CMS henceforth) to manage the Web content on their websites. These kinds of systems are especially useful as they can be used by users with no Web programming skills to introduce or modify Web content in the website. This approach has some risks regarding accessibility. On the one hand, CMS themselves may not provide appropriate support for developing accessible websites. On the other hand, including or modifying Web content by unskilled users may lead to a situation in which accessible websites can turn into non accessible.
- #6 Evaluating accessibility Evaluate Web content with WCAG Determine the scope of the evaluation Automatic evaluation Use at least two Web accessibility evaluation tools Validate markup (syntax and style) Manual revision by accessibility evaluator Evaluate CMS environment with ATAG But despite guidelines exist and the process to evaluate web accessibility is clear there are still accessibility errors!
- #7 Methodology – Properties Allows identifying and solving accessibility related issues in web pages using CMS environments Iterative Includes ATAG and WCAG Includes web content accessibility evaluation methodology proposed by the W3C Takes into account features specific to CMS environments
- #8 Methodology – Steps Step 1) CMS environments with standard configuration Step 2) Sample of representatives Web pages Step 3) ATAG 1.0 evaluation (Levels A and AA) Step 4) Create Web pages on both CMS environments Step 5) WCAG 2.0 evaluation (levels A and AA) of content web pages analysis of causes accessibility errors Step 6) analysis of causes accessibility errors. Source of errors: User management, template, HMTL editor, CMS) Step 7) Solutions to provide better accessibility Step 8) Application solutions on CMS environment Step 9) Result Oks of accessibility pages
- #9 Case study - Step 1. Select CMS and configuration Two different CMSs, OpenCMS (version 7.5.1) and Typo3 (version 4.5.2), have been employed in the case study, both a with default configuration. An HTML editor was used on the front end of each CMS to create the content page and the templates are resources on the back end of the CMS (like HTML pages) that are used to separate content from design. With OpenCMS, its default HTML editor (FCKEditor) was used. A template named “Template one” was selected among the different templates available on the default configuration of OpenCMS. Regarding Typo3, its default HTML editor (RTE) and the default template were used. Set of 10 web pages in an academic environment
- #10 Case study - Step 2. Sample of representatives Web pages (I) All pages - Headers and paragraphs 1 – Presentation - No extra elements 2 - Center - Bold text format 3 - Academic authorities - No extra elements 4 - Mural of the study room - Internal links, Images and Ordered lists 5 – Syllabus – Tables, Different text formats: text centred, bold, color font, color background.
- #11 Case study - Step 2. Sample of representatives Web pages (II) 6 – Departments - Externals links and Unordered list 7 - Official registration - Externals links and Image link 8 – News - Externals links and Emphasized text format 9 - Contact information - Bold text format, Address and Email links 10 - Questions & suggestions - Form elements
- #12 Case study - Step 3. ATAG evaluation of the CMSs Quantitative results - Percentage of correct checkpoints: OpenCMS: 25% (Level A) - 42,86% (Level AA) Typo3: 37,50 (Level A) - 42,86% (Level AA) Concrete checkpoints errors No errors in both CMSs Level A ( 1.1, 7.2 ) Level AA ( 4.3, 7.5, 7.6) Errors found in both CMS Level A ( 1.2, 2.2, 3.4, 6.1, 7.3) Level AA ( 2.1, 5.1, 5.2, 6.2) Errors only on OpenCMS Level A ( No errors) Level AA ( 7.4) Errors only on Typo3 Level A and Level AA ( No errors)
- #13 Case study - Step 4. Develop the sample of web pages Create 10 representative web pages in both CMS environments (OpenCMS and Typo3)
- #14 Case study - Step 5. WCAG 2.0 evaluation of the CMSs Checkpoints with errors in the WCAG evaluation for every web page Errors found in both CMS Level A ( 1.3.1, 2.1.1, 2.4.4, 3.3.2, 4.1.1. User errors: 1.1.1, 1.4.1, 2.4.2, 3.2.3) Level AA ( 2.4.5, 3.3.4 (only page 10)) Common errors on OpenCMS web pages Level A ( 3.1.1, 2.4.1) Level AA ( No errors) Errors on some web pages on OpenCMS Level A ( 1.3.3, 3.3.1 (only page 10)) Level AA ( 1.4.4 (only pages: 2, 5, 8 and 9), 3.3.3 (only page 10) Common errors on Typo3 web pages Level A ( No errors ) Level AA ( 1.4.4, 2.4.6) Errors on some web pages on Typo3 Level A ( No errors ) Level AA ( No errors)
- #15 Case study- Step 6. Analysis of causes accessibility errors Errors made by users are not included Level A 1.3.1. Info and Relationships - OpenCMS: Template, CMS - Typo3: Template, CMS 1.3.3. Sensory Characteristics – OpenCMS: CMS - Typo3: - 2.1.1. Keyboard - OpenCMS: Template - Typo3: CMS 2.4.1. Bypass Blocks - OpenCMS:Template - Typo3: - 2.4.4. Link Purpose (In Context) - OpenCMS:Template - Typo3: Template 3.1.1. Language of Page - OpenCMS: Template - Typo3: - 3.3.1. Error Identification - OpenCMS: Template, CMS - Typo3: - 3.3.2. Labels or Instructions - OpenCMS: Template, CMS - Typo3: Template, CMS 4.1.1. Parsing - OpenCMS: Template, HTML editor - Typo3: Template, HTML editor Level AA 1.4.4. Resize text - OpenCMS: HTML editor - Typo3: HTML editor 2.4.5. Multiple Ways - OpenCMS: Template - Typo3: Template 2.4.6. Headings and Labels - OpenCMS: - - Typo3: Template 3.3.3. Error Suggestion - OpenCMS: CMS- Typo3: - 3.3.4. Error Prevention - OpenCMS: CMS- Typo3: Template, CMS
- #16 Case study - Step 7. Identify solutions of accessibility errors One representative errors of each detected cause Source of Error: Template Checkpoint : 2.4.4: Link Purpose (In Context) Solution: Modify template to include the title arribute for HTML tags Source of Error: HTML Editor Checkpoint : 1.4.4: Resize Text Solution: Modify HTML editor to generate correct Source of Error: CMS Checkpoint : 1.3.1: Info and Relationships Solution: Modify configuration from CMS Source of Error: User Checkpoint : 2.4.2 Page Titled Solution: Depends on user formation
- #17 Case study - Step 8. Apply solutions and ATAG re-evaluation Quantitative results of ATAG evaluation of the final configuration Percentage of correct checkpoints ( Before ): OpenCMS: 25% (Level A) - 42,86% (Level AA) Typo3: 37,50 (Level A) - 42,86% (Level AA) Percentage of correct checkpoints ( After ): OpenCMS: 37,5% (Level A) - 57,14% (Level AA) Typo3: 62,50 (Level A) – 57,14% (Level AA) Changes on CMSs have improve ATAG checkpoints: 2.2. The tool automatically generates valid markup (Level A) 7.3. Allow the author to edit all properties of each element and object in an accessible fashion (Level A) 2.1. Use the latest versions of W3C Recommendations (Level AA)
- #18 Case study - Step 9. CMS capable of managing accessible web pages The CMS provides a proper environment for users to manage accessible web pages (for the kind of web pages in the sample) Developing accessible web pages will depend on the users that use the CMS
- #19 Discussion - Commons errors in both CMSs Accessibility errors in both CMSs have similar causes: Structure of the CMS In general, CMSs systems work in a similar way Causes and solutions provided in the study are supposed to be helpful for other CMSs as well OpenCMS and Typo3 and others CMSs. For instance: Drupal, Jahia, Xoops, Wordpress, Zope, Joomla!, Plone.
- #20 Discussion - Improve the accessibility of both CMSs (I) Errors in HTML template Correct unclosed tags and substitute «&» for «&amp» Add «lang» attribute to the <html> tag Modify sequence of headers: <h1><h2><h3> Associate label for each data input elements HTML editor has not considered some accessibility aspects Install module to improve or substitute some tags generate for the HTML editor
- #21 Discussion - Improve the accessibility of both CMSs (II) CMS does not provide proper mechanisms to generate accessible code: Install modules to improve accessibility Users can manage Web content in an incorrect way or without taking accessibility aspects into account: Introduce correct titles for the pages regarding the content they have An appropriate alternative text must be provided for images Tables with headers that identify cells
- #22 Discussion - Helpful recommendations for users Provide access to an accessibility evaluation service Accessibility evaluation services that work inside the HTML editors to check accessibility errors within the HTML editor Education about how to develop accessible web pages in a CMS environment
- #23 Discussion - Helpful recommendations for administrators Users or administrators must be aware of accessibility Not always the accessibility evaluation report is understood !!!
- #24 Conclusions and future work Conclusions: The methodology presented is applicable to every CMS. It p rovides the necessary mechanisms: to ensure accessibility for a given set of representative web pages to analyze various types of elements It is necessary configure properly a CMS to make accessible Future work : Analyze others technologies: HTML5 and RIA
- #25 Any questions? Authors: Toni Granollers tonig@diei.udl.cat (speaker) Juan Miguel López [email_address] Afra Pascual [email_address] Cristina Menduiña [email_address] GRIHO is an Computer-Human Interaction and Data Integration Research Group University of Lleida University of the Basque country