Applying WAI-ARIA to open-source CMS widgets: Practical application and results

Theofanis Oikonomou, Konstantinos Votis, Kontotasiou Dionysia, Tzovaras Dimitrios

Centre for Research and Technology Hellas/

Informatics and Telematics Institute

Overview

• Introduction

• Accessibility on Content Management Systems (CMS)

• Applying WAI-ARIA to open-source CMS widgets - Methodology

• A case study: Applying WAI-ARIA widgets to WordPress widgets

• Conclusions

Paper Objectives

• To present and compare the accessibility status of the most well known Content Management Systems.

• To analyse the most important aspects to be considered during the WAI-ARIA enabled CMS widget development phase.

• To present a real showcase that illustrates how aforementioned aspects can be applied on a real-world CMS widget.

Methodology

• Steps

• A brief description of the most well known CMS (Drupal, WordPress, Joomla) is provided along with their accessibility status.

• The main aspects proposed to be followed in order to enhance widget’s original form are presented.

• The paper concludes with a real showcase of above methodology.

• Starting Point

• WordPress as CMS

• Dojo components (specifically dijit.Calendar)

Content Management Systems-Accessibility Status

• Drupal

• According to Drupal’s accessibility statement all features of Drupal core conform to the Worldwide Web Consortium (W3C) guidelines: WCAG 2.0 and ATAG 2.0.

• Some additional support for Rich Internet Applications by adding some WAI-ARIA support is provided.

• Features such as color contrast and intensity, image handling, form labeling and search engine form have been improved in terms of accessibility.

• Semantic markup is supported for users that rely on a screen reader or other assistive technology.

Content Management Systems-Accessibility Status

• Joomla

• A new template has been designed for use with Joomla, Beez template with which particular attention has been paid to Web standards and accessibility.

• A Joomla Search Engine Optimisation (SEO) and Accessibility Patch is provided for access keys and meta title tags.

• However, Joomla’s accessibility statement is somewhat dated. According to this statement, the front-end will be web accessibility compliant, following WCAG 1.0 Priority 2 and Section 508 requirements.

Content Management Systems-Accessibility Status

• WordPress-most widget oriented CMS

• WordPress states that it is, out of the box, web accessibility compliant.

• Guidelines for template creators, covering topics such as alt and title tags, color blindness, browser and mobile considerations and testing for accessibility are provided.

• A patch that adds WAI-ARIA landmark roles in default WordPress’s themes to increase accessibility exists.

• It provides support for widget addition to a sidebar by simply dragging them to where the user want by simply using drag-and-drop widgets admin interface.

• WordPress partially supports WAI-ARIA front-end widgets, such as the “Search widget”.

Main aspects

• Core plug-in development

• A well-structured plug-in should be created according to the guidelines provided by the CMS, which will be stored in a Subversion Repository.

• Once the plugin (and a readme file!) is in that repository, it will shortly be automatically entered into the plugins browser.

• UI plug-in development

• The User Interface (UI) of the plug-in is designed so that it fulfils our needs.

• The appropriate widgets are added to the CMS plug-in (e.g. Dojo, jQuery, MooTools, FluidInfusion widgets).

• Functionality plug-in development

• Specific capabilities are added to the plug-in through programming in order to enable its functionality.

Real showcase using dijit.calendar widget

• Core plug-in development

• The provided WAI-ARIA calendar (dijit.calendar) is implemented as a plug-in for the CMS WordPress.

• A configuration panel is added for customization the widget’s title, language and theme.

• UI plug-in development

• In our case this is not a hard task as a WAI-ARIA calendar widget already exists and is provided by Dojo.

• AEGIS widgets/toolkits will also be used (jQuery, MooTools, FluidInfusion)

Real showcase using dijit.calendar widget

• Functionality plug-in development

• The WAI-ARIA plug-in obtains the desired functionality support, in order to fulfill the overall and typical WordPress calendar functionalities.

• Navigating between days (that have posts) is possible with the tab key.

• Navigating between months (that have posts) is possible with the arrow keys.

• Right and up arrows moves you to the next month that has at least one

post.

• Left and down arrows moves you to the previous month that has at least

one post.

Real showcase using dijit.calendar widget

Conclusions

• A methodology for enhancing the accessibility support of well known CMS and especially the WordPress CMS.

• A relevant use case regarding the improvement of the original WordPress calendar widget was presented.

• Ongoing work is currently being done in several fronts in the WordPress realm.

• AEGIS widgets/toolkits should be used (MooTools, jQuery and Fluid Infusion widgets).

References

• WordPress Plugins Info:http://wordpress.org/extend/plugins/about/

• Fluid Infusion widgets: http://wiki.fluidproject.org/display/fluid/Components

• jQuery widgets: http://hanshillen.github.com/aegisdemo/

• Dojo widgets: http://www.dojotoolkit.org/reference-guide/dijit/index.html

• MooTools framework: http://mootools.net/