For compliance with Web Content Accessibility Guidelines (WCAG)
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
tags with role attributes instead of the HTML 5 tags plus the role attributes, but the latter solution is more forward-thinking.
I added all of these except for the tabpanel > tree wrapper because we already installed a plugin that is part of the ExtJS system for Aria Trees. Please review that, if its not up to standards we can take it out and do what you have suggested above.
This seems like one of the ones that definitely makes sense to port to the standard/default theme. If this is the case and you agree, let's go ahead and add it to the tabpanel > tree wrapper, too.
For compliance with Web Content Accessibility Guidelines (WCAG) 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:
Note: You could also achieve the same functional result using only
See accessibility to-do list at https://dequeuniversity.com/modx-accessibility.html#overall-structure
I added all of these except for the
tabpanel> tree wrapper because we already installed a plugin that is part of the ExtJS system for Aria Trees. Please review that, if its not up to standards we can take it out and do what you have suggested above.This seems like one of the ones that definitely makes sense to port to the standard/default theme. If this is the case and you agree, let's go ahead and add it to the tabpanel > tree wrapper, too.
double check tree and main