SlideShare a Scribd company logo
1 of 24
Download to read offline
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
Outline

•   Introduction
•   CMS environments
•   Evaluating accessibility
•   Proposed Methodology
•   Case study
•   Discussion
•   Conclusions
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
CMS environments
                  Users                       Web Administrators
• Introduction
• CMS                       CMS environment

 environments
• Evaluating
                          Data
                                   +   Templates
 accessibility
• Proposed
                                 Web Page
 Methodology
• Case study
• Discussion
• Conclusions
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!
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
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
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
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
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
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
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
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
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
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
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)
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
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
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
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
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
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
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
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

More Related Content

Viewers also liked

Epatite cronica HCV corelata storia naturale 2007
Epatite cronica HCV  corelata storia naturale 2007Epatite cronica HCV  corelata storia naturale 2007
Epatite cronica HCV corelata storia naturale 2007scivetti
 
Offshore wind europe 2012
Offshore wind  europe 2012Offshore wind  europe 2012
Offshore wind europe 2012Ahmed Awaise
 
Alcol e Fegato
Alcol e FegatoAlcol e Fegato
Alcol e Fegatoscivetti
 
Technology trends that will shape our future
Technology trends that will shape our futureTechnology trends that will shape our future
Technology trends that will shape our futureTinniam V Ganesh (TV)
 
Seven habits of highly effective people
Seven habits of highly effective peopleSeven habits of highly effective people
Seven habits of highly effective peopleTinniam V Ganesh (TV)
 
Cyber Security Threats and Data Breaches
Cyber Security Threats and Data BreachesCyber Security Threats and Data Breaches
Cyber Security Threats and Data BreachesBijay Senihang
 
Intelligent networks, camel_services_and_applications_v1
Intelligent networks, camel_services_and_applications_v1Intelligent networks, camel_services_and_applications_v1
Intelligent networks, camel_services_and_applications_v1Tinniam V Ganesh (TV)
 
Design principles of scalable, distributed systems
Design principles of scalable, distributed systemsDesign principles of scalable, distributed systems
Design principles of scalable, distributed systemsTinniam V Ganesh (TV)
 

Viewers also liked (13)

Epatite cronica HCV corelata storia naturale 2007
Epatite cronica HCV  corelata storia naturale 2007Epatite cronica HCV  corelata storia naturale 2007
Epatite cronica HCV corelata storia naturale 2007
 
Offshore wind europe 2012
Offshore wind  europe 2012Offshore wind  europe 2012
Offshore wind europe 2012
 
1 3 amec
1 3 amec1 3 amec
1 3 amec
 
Alcol e Fegato
Alcol e FegatoAlcol e Fegato
Alcol e Fegato
 
Technology trends that will shape our future
Technology trends that will shape our futureTechnology trends that will shape our future
Technology trends that will shape our future
 
Seven habits of highly effective people
Seven habits of highly effective peopleSeven habits of highly effective people
Seven habits of highly effective people
 
Cloud Computing
Cloud ComputingCloud Computing
Cloud Computing
 
Cyber Security Threats and Data Breaches
Cyber Security Threats and Data BreachesCyber Security Threats and Data Breaches
Cyber Security Threats and Data Breaches
 
Internet of Things - TEDx talk
Internet of Things - TEDx talkInternet of Things - TEDx talk
Internet of Things - TEDx talk
 
Wireless technologies - Part 1
Wireless technologies - Part 1Wireless technologies - Part 1
Wireless technologies - Part 1
 
Intelligent networks, camel_services_and_applications_v1
Intelligent networks, camel_services_and_applications_v1Intelligent networks, camel_services_and_applications_v1
Intelligent networks, camel_services_and_applications_v1
 
Long Term Evolution (LTE) -
Long Term Evolution (LTE) -Long Term Evolution (LTE) -
Long Term Evolution (LTE) -
 
Design principles of scalable, distributed systems
Design principles of scalable, distributed systemsDesign principles of scalable, distributed systems
Design principles of scalable, distributed systems
 

Similar to ToniGranollers w4a_presentation

Cms & wordpress theme development 2011
Cms & wordpress theme development 2011Cms & wordpress theme development 2011
Cms & wordpress theme development 2011Dave Wallace
 
The Great Consolidation - Entertainment Weekly Migration Case Study - SANDcam...
The Great Consolidation - Entertainment Weekly Migration Case Study - SANDcam...The Great Consolidation - Entertainment Weekly Migration Case Study - SANDcam...
The Great Consolidation - Entertainment Weekly Migration Case Study - SANDcam...Jon Peck
 
WCMS Evaluation Tips
WCMS Evaluation TipsWCMS Evaluation Tips
WCMS Evaluation TipsDave Olsen
 
Content Management Systems (CMS) & Wordpress theme development
Content Management Systems (CMS) & Wordpress theme developmentContent Management Systems (CMS) & Wordpress theme development
Content Management Systems (CMS) & Wordpress theme developmentDave Wallace
 
IWMW 2003: b8 implementation of a commercial content management system
IWMW 2003: b8 implementation of a commercial content management systemIWMW 2003: b8 implementation of a commercial content management system
IWMW 2003: b8 implementation of a commercial content management systemIWMW
 
Enterprise WordPress - Performance, Scalability and Redundancy
Enterprise WordPress - Performance, Scalability and RedundancyEnterprise WordPress - Performance, Scalability and Redundancy
Enterprise WordPress - Performance, Scalability and RedundancyJohn Giaconia
 
2/15/2012 - Wrapping Your Head Around the SharePoint Beast
2/15/2012 - Wrapping Your Head Around the SharePoint Beast2/15/2012 - Wrapping Your Head Around the SharePoint Beast
2/15/2012 - Wrapping Your Head Around the SharePoint BeastMark Rackley
 
FISL: Content Management Primer
FISL: Content Management PrimerFISL: Content Management Primer
FISL: Content Management PrimerRichard Esplin
 
CUST-3 Document Management with Share
CUST-3 Document Management with ShareCUST-3 Document Management with Share
CUST-3 Document Management with ShareAlfresco Software
 
Iksula Drupal Solutions
Iksula Drupal SolutionsIksula Drupal Solutions
Iksula Drupal SolutionsIksula
 
IWMW 2002: Portals and CMS:" Why You Need Them Both
IWMW 2002: Portals and CMS:" Why You Need Them BothIWMW 2002: Portals and CMS:" Why You Need Them Both
IWMW 2002: Portals and CMS:" Why You Need Them BothIWMW
 
Preserving the iMIS Upgrade Path
Preserving the iMIS Upgrade PathPreserving the iMIS Upgrade Path
Preserving the iMIS Upgrade PathAndrea Robertson
 
Makersbay Overview
Makersbay OverviewMakersbay Overview
Makersbay Overviewslodha
 
Website Archivability - Library of Congress NDIIPP Presentation 2015/06/03
Website Archivability - Library of Congress NDIIPP Presentation 2015/06/03Website Archivability - Library of Congress NDIIPP Presentation 2015/06/03
Website Archivability - Library of Congress NDIIPP Presentation 2015/06/03Vangelis Banos
 
Dot Net Notts Js Unit Testing at Microlise
Dot Net Notts Js Unit Testing at  MicroliseDot Net Notts Js Unit Testing at  Microlise
Dot Net Notts Js Unit Testing at MicroliseJonathan Gregory
 
Js unit testingpresentation
Js unit testingpresentationJs unit testingpresentation
Js unit testingpresentationJonathan Gregory
 
Absolute Beginners Guide to Drupal
Absolute Beginners Guide to DrupalAbsolute Beginners Guide to Drupal
Absolute Beginners Guide to DrupalRod Martin
 
New life inside monolithic application
New life inside monolithic applicationNew life inside monolithic application
New life inside monolithic applicationTaras Matyashovsky
 
SharePoint Design & Development
SharePoint Design & DevelopmentSharePoint Design & Development
SharePoint Design & DevelopmentJonathan Schultz
 
Georgia Tech - College of Engineering Case Study
Georgia Tech - College of Engineering Case StudyGeorgia Tech - College of Engineering Case Study
Georgia Tech - College of Engineering Case StudyEric Sembrat
 

Similar to ToniGranollers w4a_presentation (20)

Cms & wordpress theme development 2011
Cms & wordpress theme development 2011Cms & wordpress theme development 2011
Cms & wordpress theme development 2011
 
The Great Consolidation - Entertainment Weekly Migration Case Study - SANDcam...
The Great Consolidation - Entertainment Weekly Migration Case Study - SANDcam...The Great Consolidation - Entertainment Weekly Migration Case Study - SANDcam...
The Great Consolidation - Entertainment Weekly Migration Case Study - SANDcam...
 
WCMS Evaluation Tips
WCMS Evaluation TipsWCMS Evaluation Tips
WCMS Evaluation Tips
 
Content Management Systems (CMS) & Wordpress theme development
Content Management Systems (CMS) & Wordpress theme developmentContent Management Systems (CMS) & Wordpress theme development
Content Management Systems (CMS) & Wordpress theme development
 
IWMW 2003: b8 implementation of a commercial content management system
IWMW 2003: b8 implementation of a commercial content management systemIWMW 2003: b8 implementation of a commercial content management system
IWMW 2003: b8 implementation of a commercial content management system
 
Enterprise WordPress - Performance, Scalability and Redundancy
Enterprise WordPress - Performance, Scalability and RedundancyEnterprise WordPress - Performance, Scalability and Redundancy
Enterprise WordPress - Performance, Scalability and Redundancy
 
2/15/2012 - Wrapping Your Head Around the SharePoint Beast
2/15/2012 - Wrapping Your Head Around the SharePoint Beast2/15/2012 - Wrapping Your Head Around the SharePoint Beast
2/15/2012 - Wrapping Your Head Around the SharePoint Beast
 
FISL: Content Management Primer
FISL: Content Management PrimerFISL: Content Management Primer
FISL: Content Management Primer
 
CUST-3 Document Management with Share
CUST-3 Document Management with ShareCUST-3 Document Management with Share
CUST-3 Document Management with Share
 
Iksula Drupal Solutions
Iksula Drupal SolutionsIksula Drupal Solutions
Iksula Drupal Solutions
 
IWMW 2002: Portals and CMS:" Why You Need Them Both
IWMW 2002: Portals and CMS:" Why You Need Them BothIWMW 2002: Portals and CMS:" Why You Need Them Both
IWMW 2002: Portals and CMS:" Why You Need Them Both
 
Preserving the iMIS Upgrade Path
Preserving the iMIS Upgrade PathPreserving the iMIS Upgrade Path
Preserving the iMIS Upgrade Path
 
Makersbay Overview
Makersbay OverviewMakersbay Overview
Makersbay Overview
 
Website Archivability - Library of Congress NDIIPP Presentation 2015/06/03
Website Archivability - Library of Congress NDIIPP Presentation 2015/06/03Website Archivability - Library of Congress NDIIPP Presentation 2015/06/03
Website Archivability - Library of Congress NDIIPP Presentation 2015/06/03
 
Dot Net Notts Js Unit Testing at Microlise
Dot Net Notts Js Unit Testing at  MicroliseDot Net Notts Js Unit Testing at  Microlise
Dot Net Notts Js Unit Testing at Microlise
 
Js unit testingpresentation
Js unit testingpresentationJs unit testingpresentation
Js unit testingpresentation
 
Absolute Beginners Guide to Drupal
Absolute Beginners Guide to DrupalAbsolute Beginners Guide to Drupal
Absolute Beginners Guide to Drupal
 
New life inside monolithic application
New life inside monolithic applicationNew life inside monolithic application
New life inside monolithic application
 
SharePoint Design & Development
SharePoint Design & DevelopmentSharePoint Design & Development
SharePoint Design & Development
 
Georgia Tech - College of Engineering Case Study
Georgia Tech - College of Engineering Case StudyGeorgia Tech - College of Engineering Case Study
Georgia Tech - College of Engineering Case Study
 

Recently uploaded

How Apple strives for the perfect sky and revives cities
How Apple strives for the perfect sky and revives citiesHow Apple strives for the perfect sky and revives cities
How Apple strives for the perfect sky and revives citiesThomas Schielke
 
Cities Light Up in Solidarity With Ukraine: From Internationally Synchronized...
Cities Light Up in Solidarity With Ukraine: From Internationally Synchronized...Cities Light Up in Solidarity With Ukraine: From Internationally Synchronized...
Cities Light Up in Solidarity With Ukraine: From Internationally Synchronized...Thomas Schielke
 
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...Associazione Digital Days
 
Map of St. Louis Parks
Map of St. Louis Parks                              Map of St. Louis Parks
Map of St. Louis Parks CharlottePulte
 
Piece by Piece Magazine
Piece by Piece Magazine                      Piece by Piece Magazine
Piece by Piece Magazine CharlottePulte
 
Karim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppKarim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppNadaMohammed714321
 
PORTFOLIO 2024 ANASTASIYA KUDINOVA
PORTFOLIO 2024       ANASTASIYA KUDINOVAPORTFOLIO 2024       ANASTASIYA KUDINOVA
PORTFOLIO 2024 ANASTASIYA KUDINOVAAnastasiya Kudinova
 
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfsimpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfLucyBonelli
 
Karim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppKarim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppNadaMohammed714321
 
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...Yantram Animation Studio Corporation
 
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...Pranav Subramanian
 
Niintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxNiintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxKevinYaelJimnezSanti
 
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...Pranav Subramanian
 
Understanding Image Masking: What It Is and Why It's Matters
Understanding Image Masking: What It Is and Why It's MattersUnderstanding Image Masking: What It Is and Why It's Matters
Understanding Image Masking: What It Is and Why It's MattersCre8iveskill
 
10 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 202410 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 2024digital learning point
 
guest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssguest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssNadaMohammed714321
 
The spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyThe spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyChristopher Totten
 
guest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssguest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssNadaMohammed714321
 
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...Pranav Subramanian
 
ArtWaves 2024 - embracing Curves in Modern Homes
ArtWaves 2024 - embracing Curves in Modern HomesArtWaves 2024 - embracing Curves in Modern Homes
ArtWaves 2024 - embracing Curves in Modern HomesVellyslav Petrov
 

Recently uploaded (20)

How Apple strives for the perfect sky and revives cities
How Apple strives for the perfect sky and revives citiesHow Apple strives for the perfect sky and revives cities
How Apple strives for the perfect sky and revives cities
 
Cities Light Up in Solidarity With Ukraine: From Internationally Synchronized...
Cities Light Up in Solidarity With Ukraine: From Internationally Synchronized...Cities Light Up in Solidarity With Ukraine: From Internationally Synchronized...
Cities Light Up in Solidarity With Ukraine: From Internationally Synchronized...
 
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
 
Map of St. Louis Parks
Map of St. Louis Parks                              Map of St. Louis Parks
Map of St. Louis Parks
 
Piece by Piece Magazine
Piece by Piece Magazine                      Piece by Piece Magazine
Piece by Piece Magazine
 
Karim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppKarim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 ppppppppppppppp
 
PORTFOLIO 2024 ANASTASIYA KUDINOVA
PORTFOLIO 2024       ANASTASIYA KUDINOVAPORTFOLIO 2024       ANASTASIYA KUDINOVA
PORTFOLIO 2024 ANASTASIYA KUDINOVA
 
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfsimpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
 
Karim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppKarim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 ppppppppppppppp
 
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...
 
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
 
Niintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxNiintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptx
 
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
 
Understanding Image Masking: What It Is and Why It's Matters
Understanding Image Masking: What It Is and Why It's MattersUnderstanding Image Masking: What It Is and Why It's Matters
Understanding Image Masking: What It Is and Why It's Matters
 
10 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 202410 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 2024
 
guest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssguest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssss
 
The spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyThe spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenology
 
guest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssguest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssss
 
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...
 
ArtWaves 2024 - embracing Curves in Modern Homes
ArtWaves 2024 - embracing Curves in Modern HomesArtWaves 2024 - embracing Curves in Modern Homes
ArtWaves 2024 - embracing Curves in Modern Homes
 

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 «&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. 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

  1. 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/
  2. Outline : Introduction CMS environments Evaluating accessibility Proposed Methodology Case study Discussion Conclusions
  3. 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.
  4. 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.
  5. 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!
  6. 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
  7. 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
  8. 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
  9. 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.
  10. 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 &amp; suggestions - Form elements
  11. 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)
  12. Case study - Step 4. Develop the sample of web pages Create 10 representative web pages in both CMS environments (OpenCMS and Typo3)
  13. 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)
  14. 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
  15. 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
  16. 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)
  17. 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
  18. 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.
  19. Discussion - Improve the accessibility of both CMSs (I) Errors in HTML template Correct unclosed tags and substitute «&amp;» for «&amp;amp» Add «lang» attribute to the &lt;html&gt; tag Modify sequence of headers: &lt;h1&gt;&lt;h2&gt;&lt;h3&gt; 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
  20. 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
  21. 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
  22. Discussion - Helpful recommendations for administrators Users or administrators must be aware of accessibility Not always the accessibility evaluation report is understood !!!
  23. 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
  24. 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