ToniGranollers w4a_presentation

Methodology for identifying and solving accessibility related issues in Web

Content Management System environments

Toni GranollersUniversity of Lleida

[email protected]

Lyon, 17 April 2012

University of Lleida University of the Basque country

Outline

• Introduction• CMS environments• Evaluating accessibility• Proposed Methodology• Case study• Discussion• Conclusions

Introduction

• Introduction

• CMS

environments

• Evaluating

accessibility

• Proposed

Methodology

• Case study

• Discussion

• Conclusions

• “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

Source: http://icons.anatom5.de/

CMS environments

• Introduction

• CMS

environments

• Evaluating

accessibility

• Proposed

Methodology

• Case study

• Discussion

• Conclusions

CMS environment

Templates+

Users Web Administrators

Web Page

Data

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!

• Introduction

• CMS

environments

• Evaluating

accessibility

• Proposed

Methodology

• Case study

• Discussion

• Conclusions

Methodology (I)

• 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

Properties

• Introduction

• CMS

environments

• Evaluating

accessibility

• Proposed

Methodology

• Case study

• Discussion

• Conclusions

9. CMS capable of managing accessible

web pages

NO

YES

Changes in the requirements

NO

YESNO

YES

Methodology (II)Steps

• Introduction

• CMS

environments

• Evaluating

accessibility

• Proposed

Methodology

• Case study

• Discussion

• Conclusions

1.Select CMS and configuration

2. Sample of representative web pages

CMS capable of producing the

sample of web pages?

3. ATAG evaluation of the CMS with

current configuration

4. Develop the sample of web pages with current

CMS configuration

5. WCAG analysis of the sample of web

pages

Any accessibility problem detected?

All possible CMS configuration options have been explored?

6. Analysis of the causes of accessibility errors

7. Identify solutions for detected accessibility errors

8. Apply identified solutions to the CMS

Case study

• 2 CMS environments analyzed• With standard configuration

• Set of 10 web pages in an academic environment

Step 1. Select CMS and configuration

Version 7.5.1 4.5.2

Editor web FCK editor Rich Text Editor (RTE)

Template Template one Default template

• Introduction

• CMS

environments

• Evaluating

accessibility

• Proposed

Methodology

• Case study

• Discussion

• Conclusions

Case studyStep 2. Sample of representatives Web pages (I)

10 Web Pages Content elements HTML description

HTML Element

All pages • Headers and paragraphs <H1> and <p>

1 - Presentation • No extra elements --

2 - Center • Bold text format <strong>

3 - Academic authorities

• No extra elements --

4 - Mural of the study room

• Internal links• Images • Ordered lists

<a> <a name><img><ol> <li>

5 – Syllabus • Tables • Different text formats

<table> <caption> <thead> <tbody> <th> <td> <tr><center>,<strong>,<span style=”color: rgb(255,255,255)”>,<span style="background-color: rgb(255, 255, 0);>

• Introduction

• CMS

environments

• Evaluating

accessibility

• Proposed

Methodology

• Case study

• Discussion

• Conclusions

Case studyStep 2. Sample of representatives Web pages (II)

10 Web Pages Content elements HTML description

HTML Element

All pages • Headers and paragraphs

<H1> and <p>

6 - Departments • Externals links• Unordered list

<a> <a target=”_blank”><ul> <li>

7 - Official registration

• Externals links • Image link

<a> <a target=”_blank”><a><img>

8 – News• Externals links• Emphasized text

format

<a> <a target=”_blank”><em>

9 - Contact information

• Bold text format• Address • Email links

<strong> <address><a href=”mailto:...”>

10 - Questions & suggestions

• Form elements <label> <input> <select> <option> <textarea>

• Introduction

• CMS

environments

• Evaluating

accessibility

• Proposed

Methodology

• Case study

• Discussion

• Conclusions

Step

Case study

• Quantitative results

• Concrete checkpoints errors

Step 3. ATAG evaluation of the CMSs

A AA A AA

Percentage of correct checkpoints

25,00 % 42,86 % 37,50 % 42,86 %

Checkpoints

Errors A AA

No errors in both CMSs 1.1, 7.2 4.3, 7.5, 7.6

Errors found in both CMS 1.2, 2.2, 3.4, 6.1, 7.3 2.1, 5.1, 5.2, 6.2

Errors only on OpenCMS No errors 7.4

Errors only on Typo3 No errors

• Introduction

• CMS

environments

• Evaluating

accessibility

• Proposed

Methodology

• Case study

• Discussion

• Conclusions

Less errorsMore errors

Case study

• Create 10 representative web pages in both CMS environments

Step 4. Develop the sample of web pages

• Introduction

• CMS

environments

• Evaluating

accessibility

• Proposed

Methodology

• Case study

• Discussion

• Conclusions

Case study

• Checkpoints with errors in the

WCAG evaluation for every web page

Step 5. WCAG 2.0 evaluation of the CMSs

CheckpointsErrors A AA

Errors found in both CMS

1.3.1, 2.1.1, 2.4.4, 3.3.2, 4.1.1User errors: 1.1.1, 1.4.1, 2.4.2, 3.2.3

2.4.5, 3.3.4 (only page 10)

Common errors on OpenCMS web pages

3.1.1, 2.4.1 No errors

Errors on some web pages on OpenCMS

1.3.3, 3.3.1 (only page 10)

1.4.4 (only pages: 2, 5, 8 and 9), 3.3.3 (only page 10)

Common errors on Typo3 web pages

No errors 1.4.4, 2.4.6

Errors on some web pages on Typo3

No errors No errors

• Introduction

• CMS

environments

• Evaluating

accessibility

• Proposed

Methodology

• Case study

• Discussion

• Conclusions

Case studyStep 6. Analysis of causes accessibility errors

• Introduction

• CMS

environments

• Evaluating

accessibility

• Proposed

Methodology

• Case study

• Discussion

• Conclusions

Checkpoint

Level A1.3.1. Info and Relationships Template, CMS Template, CMS

1.3.3. Sensory Characteristics CMS -

2.1.1. Keyboard Template CMS

2.4.1. Bypass Blocks Template -

2.4.4. Link Purpose (In Context) Template Template

3.1.1. Language of Page Template -

3.3.1. Error Identification Template, CMS -

3.3.2. Labels or Instructions Template, CMS Template, CMS

4.1.1. Parsing Template, HTML editor

Template, HTML editor

Level AA1.4.4. Resize text HTML editor HTML editor

2.4.5. Multiple Ways Template Template

2.4.6. Headings and Labels - Template

3.3.3. Error Suggestion CMS -

3.3.4. Error Prevention CMS Template, CMS

Errors made by users are not includedErrors made by users are not included

Case study

• One representative errors of each detected cause

Step 7. Identify solutions of accessibility errors

Source of Error Checkpoint Solution

Template 2.4.4: Link Purpose (In Context)

Modify template to include the title arribute for HTML tags

HTML Editor 1.4.4: Resize Text Modify HTML editor to generate correct

CMS 1.3.1: Info and Relationships

Modify configuration from CMS

User 2.4.2 Page Titled Depends on user formation

• Introduction

• CMS

environments

• Evaluating

accessibility

• Proposed

Methodology

• Case study

• Discussion

• Conclusions

Case study

• Quantitative results of ATAG evaluation of the final configuration

• 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)

Step 8. Apply solutions and ATAG re-evaluation

A AA A AAPercentage of correct checkpoints (Before)

25,00 % 42,86 % 37,50 % 42,86 %

Percentage of correct checkpoints (After) 37.50 % 57.14 % 62.50 % 57.14 %

• Introduction

• CMS

environments

• Evaluating

accessibility

• Proposed

Methodology

• Case study

• Discussion

• Conclusions

Case study

• 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

Step 9. CMS capable of managing accessible web pages

• Introduction

• CMS

environments

• Evaluating

accessibility

• Proposed

Methodology

• Case study

• Discussion

• Conclusions

Discussion (I)

• 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

Commons errors in both CMSs

• Introduction

• CMS

environments

• Evaluating

accessibility

• Proposed

Methodology

• Case study

• Discussion

• Conclusions

And others…

Discussion (II)

• 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

Improve the accessibility of both CMSs (I)

• Introduction

• CMS

environments

• Evaluating

accessibility

• Proposed

Methodology

• Case study

• Discussion

• Conclusions

Discussion (III)

• 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

Improve the accessibility of both CMSs (II)

• Introduction

• CMS

environments

• Evaluating

accessibility

• Proposed

Methodology

• Case study

• Discussion

• Conclusions

Discussion (IV)

• 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

Helpful recommendations for users

• Introduction

• CMS

environments

• Evaluating

accessibility

• Proposed

Methodology

• Case study

• Discussion

• Conclusions

Users

• Users or administrators must be aware of accessibility

• Not always the accessibility evaluation report is understood !!!

Discussion (V)Helpful recommendations for administrators

• Introduction

• CMS

environments

• Evaluating

accessibility

• Proposed

Methodology

• Case study

• Discussion

• Conclusions

AdministratorsUsers

AccessibilityReport

Conclusions

Conclusions:•The methodology presented is applicable to every CMS. •It provides 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

and future work

• Introduction

• CMS

environments

• Evaluating

accessibility

• Proposed

Methodology

• Case study

• Discussion

• Conclusions

Any questions?

• Toni Granollers [email protected]

• Juan Miguel López [email protected]

• Afra Pascual [email protected]

• Cristina Menduiña [email protected]

University of Lleida University of the Basque country

Design

ToniGranollers w4a_presentation