Dionisia Kontotasiou, ITI

1. 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

2. 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

3. 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.

4. 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)

5. 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.

6. 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.

7. 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”.

8. 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.

9. 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)

10. 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.

11. Real showcase using dijit.calendar
widget

12. 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).

13. 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/