Web Accessibility To-Do List for MODx Manager

Evaluation by Paul Bohman using automated tools such as FireEyes/WorldSpace by Deque, Wave by WebAIM, but mostly this is a manual evaluation comparing the actions of the web site against the Web Content Accessibility Guidelines 2.0 and web accessibility best practices.

Table of Contents

Executive Summary

Accessibility to people with disabilities is critical not only for the individuals with disabilities themselves — who currently cannot use the MODx manager — but also for companies hoping to use MODx. Government entities, in particular, would be legally at risk if they decided to use MODx because of the non-compliance of the manager interface with web accessibility guidelines.

This evaluation is still incomplete, but some trends have emerged:

There are other issues too, but the above issues are pervasive and need to be addressed broadly across the MODx manager.

Background Information About Web Accessibility

Styles

Login Screen

Overall Manager Page Structure

There are no landmark regions or roles specified. Landmark regions help screen reader users navigate quickly to regions without having to read through the whole page. Here are the regions I would suggest for the main manager layout:

<header role="banner">    
    <div role="search"></div>
    <nav role="navigation" aria-label="manager menu"> <!--(for the menu on the left)--> </nav>
    <nav role="navigation" aria-label="user and system menu"> <!--(for the menu on the right)--> </nav>   
</header>
<ul role="tablist" aria-label="Tree view tablist"> <!--(or come up with a better label for this)-->
    <li role="tab">Resources<li><li role="tab">Elements</li><li role="Files">
</ul>      
<div role="tabpanel">    
    <nav role="navigation" aria-label="Resource Tree"> <ul>...</ul></nav>
    <nav role="navigation" aria-label="Element Tree"> <ul>...</ul></nav>
    <nav role="navigation" aria-label="File Tree"> <ul>...</ul></nav>
</div>
<main role="main">
    All of the main content goes here (page edits, snippet edits, dashboard content, etc.)
</main>
<footer role="contentinfo">
    (Right now MODx manager does not have a footer, but this is how you would mark it up)
</footer>

Note: You could also achieve the same functional result using only <div> tags with role attributes instead of the HTML 5 tags plus the role attributes, but the latter solution is more forward-thinking.

Main Top Menu (the ├╝berbar)

The Side Tree Panel

Modal Dialogs

Add/Edit Resource