Navigator: accessible menu

Discuss, ask and suggest about Usability and Accessability with CMS Made Simple
Locked
DavidJessurun

Navigator: accessible menu

Post by DavidJessurun »

Hi all,

The example code given with Navigator is reasonable, but the output is not good enough to pass inspection.

Since Menu Manager was deprecated (why??? And if it HAD to be, why change the vars, at least let me copy/paste my old Smarty code...) I sat down and created something with some more (easy to find for non-coders) flexible options and that will work together with the Adobe Accessible Mega Menu, which we have tested extensively with users of assistive technology, and which beats the other pretenders to the throne hands-down. To comply with strict standards, the whole thing remains sufficiently accessible without Javascript and CSS.

I did away with the weird |cat stuff for CSS classes. Not really the way I see a templating engine put to good use (that's PHP's job) and IMHO not 'MS' for non-coders. So the whole is a bit wordier than strictly necessary, but ease of use comes before poeticness of code, IMO.

Here it is. I would strongly suggest shipping CMSMS with only FULLY accessible examples. As CMS providers, you have a certain responsibility for what gets loosed on the web by your users, experts and beginners alike, and what you teach the latter. Maybe this inspires someone in the team.

{strip}{*

Simple Navigator module Smarty code for CMSMS. Based on the standard CMSMS example code, adapted to work with the Adobe Accessible Mega Menu.

IMPORTANT: This code will provide you with fairly accessible HTML output. It is, however, NOT fully accessible without the jQuery plugin and
code provided by Adobe Accessibility. It should, however, work with all assistive technology with or without. Please contact the author (e-mail below)
if you find that it doesn't. Please note the browser used, and the name, type and version of your assistive technology.

Does not work in the (deprecated) Menu Manager, but should be easy to adapt.

(https://adobe-accessibility.github.io/A ... Mega-Menu/)

Original code: CMSMS.
Adaptation: David Jessurun / mo-en-mo.nl
License: As original, GNU.
For help: info@moneta.nl

Disclaimer: provided as-is. No guarantees.

PLEASE read up on accessibility.
(http://www.w3.org/TR/WCAG20/)

*}

{* Wrap menu with div tag? - Prevents issues with older browsers. *}
{assign var="navDivBool" value=true}

{* Use unordered list (<ul>)? -Note that ordered lists (<ol>) are better accessibility- *}
{assign var="listWrapUL" value=false}

{* Wrap/code for separators: note that using glyphs is not recommended for accessibility, stick to HTML/CSS. *}
{assign var="sepWrap" value="span"} {* HTML *}
{assign var="sepWrapClass" value="separator"} {* Class *}
{assign var="sepCont" value="separator"} {* Content *}

{* Wrap for sectionheaders: note that semantically these most likely need to be H tags. *}
{assign var="secHeadWrap" value="h3"} {* HTML *}
{assign var="secHeadWrapClass" value="nav-sectionheader"} {* Class *}
{assign var="secHeadLiClass" value="nav-sectionheader"} {* List item class *}

{* optional class for links *}
{assign var='aClassAll' value="navlink"} {* Every menu link gets this class, regardless of other classes they may also get *}
{assign var='aClassCurrent' value="current"} {* Is current page *}
{assign var='aClassParent' value="parent"} {* Is part of a top-level item with sub-items *}
{assign var='aClassNorm' value="normal"} {* Everything else *}

{* Wrap menu links with span tag? (Not necessary unless you need it to solve a CSS puzzle) *}
{assign var="aSpanBool" value=false}

{* Optional classes for list items *}
{assign var='liClassAll' value="all-nav-item"} {* Every menu li item gets this class, regardless of other classes they may also get *}
{assign var='liClassCurrent' value="current-nav-item"} {* Is current page *}
{assign var='liClassParent' value="parent-nav-item"} {* Is part of a top-level item with sub-items *}
{assign var='liClassNorm' value="normal-nav-item"} {* Everything else *}

{*
////////////////////////////////////////////////////////////////////////////////////
// CAUTION. From here you should only change code if you know what you are doing. //
///////////////////////////////////////////////////////////////////////////////////
*}

{* The classes below most likely do not have to change. Only change them if you changed them in the javascript too. *}
{assign var="menuClass" value="nav-menu contentwidth"}
{assign var="topNavItemClass" value="nav-item"}
{assign var="panelClass" value="sub-nav"}
{assign var="panelGroupClass" value="sub-nav-group"}

{* Wrap menu with HTML5 'nav' tag? - If there is no 'nav' tag, the jQuery will not work. Change only if your template has one already. *}
{assign var="navBool" value=true}{/strip}

{function name=Nav_menu depth=1}{strip}
{foreach $data as $node}

{* build the menu item node *}
{if $node->type == 'sectionheader'}

<li class="
{$liClassAll} {$secHeadLiClass}
{if $node->depth==1} {$topNavItemClass}{/if}
{if $node->current} {$liClassCurrent}{/if}
{if $node->children} {$liClassParent}{/if}
{if !$node->children && !$node->current} {$liClassNorm}{/if}
">
<{$secHeadWrap} class="{$secHeadWrapClass}">{$node->menutext}</{$secHeadWrap}>
{if isset($node->children)}
<div class="{$panelClass}">
{if $listWrapUL}<ul class="{$panelGroupClass}">{else}<ol class="{$panelGroupClass}">{/if}
{Nav_menu data=$node->children depth=$depth+1}
{if $listWrapUL}</ul>{else}</ol>{/if}
</div>
{/if}
</li>

{else if $node->type == 'separator'}
<li class="{$sepWrapClass} {$liClassAll} {if $node->depth==1} {$topNavItemClass}{/if}"><{$sepWrap} class="{$sepWrapClass}">{$sepCont}</{$sepWrap}></li>
{else}

{* regular item *}
<li class="
{$liClassAll}
{if $node->depth==1} {$topNavItemClass}{/if}
{if $node->current} {$liClassCurrent}{/if}
{if $node->children} {$liClassParent}{/if}
{if !$node->children && !$node->current} {$liClassNorm}{/if}
">
<a class="
{$aClassAll}
{if $node->current} {$aClassCurrent}{/if}
{if $node->children} {$aClassParent}{/if}
{if !$node->children && !$node->current} {$aClassNorm}{/if}
" href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}>{if $aSpanBool}<span>{/if}{$node->menutext}{if $aSpanBool}</span>{/if}</a>
{if isset($node->children)}
<div class="{$panelClass}">
{if $listWrapUL}<ul class="{$panelGroupClass}">{else}<ol class="{$panelGroupClass}">{/if}
{Nav_menu data=$node->children depth=$depth+1}
{if $listWrapUL}</ul>{else}</ol>{/if}
</div>
{/if}
</li>

{/if}
{/foreach}


{/strip}{/function}

{if isset($nodes)}
{if $navDivBool}<div class="nav" id="nav">{/if}
{if $navBool}<nav>{/if}
{if $listWrapUL}<ul class="{$menuClass} ">{else}<ol class="{$menuClass} ">{/if}
{Nav_menu data=$nodes depth=0}
{if $listWrapUL}</ul>{else}</ol>{/if}
{if $navBool}</nav>{/if}
{if $navDivBool}</div>{/if}
{/if}
Locked

Return to “[locked] Accessability and Usability”