Professional Content Management

Free and open source, TYPO3 CMS is the most widely used enterprise-level CMS.

Test TYPO3 now:

TYPO3 live demo

Inspire people to share

Offer your skills and contribute to the project. The community is growing and does more than just coding. 

A Community Effort

TYPO3 CMS is an Open Source project managed by the TYPO3 Association.

The Project

Do you have a question?

Ask the community or a professional partner.

Accessible menus

One of the keys to accessible websites are the navigation menus. The navigation can lock you out from a website like a dog at the butcher´s or it can guide you comfortably through the website´s structure, indicating your current location and pointing to the topics that await you on the various pages. Websites with accessible menus allow you to navigate through the pages with graphical browsers as well as with text browsers, web readers, PDAs or other output devices.
If we want to build accessible menus the first thing we must do is say good-bye to menus using javascript as the only key to open the door to next navigation levels. If you want to keep these menus with fancy layer effects or other stunning features and still want to have an accessible website you have to build it twice, a script version for the graphical browsers with javascript enabled and a noscript version for disabled javascript and non-graphical browsers and output devices. Next thing we should do is say good-bye to unstructured graphical menus. Although text browsers or web readers recognize an image link as link they can´t read the nice text on your button. You can just specify the target of your link by the title tag and the writing on the button by the alt tag. But even if you give all possible help and hints an unstructured graphical menu read by a text browser or web reader won´t reflect the hierarchical structure of your website. And this is an important matter if you have to find your way through navigation levels without any visual guidance. Especially if you have a complex structure with several branches and sub levels the best way to keep an overview is a hierarchical menu structure that clearly indicates in which branch and on which level you are or you are about to go.

List menus

If we want to build accessible menus the <ul> list is the right choice. A <ul> list offers the possibility to have nested levels which semantically reflect the structure of your website. And for all of us who didn´t graduate in linguistics this simply means the tags we are using should go together with the content wrapped by these tags. A menu is a list of the pages you have in your website and <ul> is the tag you use to indicate: "I am a list". <ul> <!-- 1st level --> <li><a href="me.html">about me</a> <!-- 1st level 1st branch --> <ul> <!-- 2nd level --> <li><a href="house.html">my house</a></li> <li><a href="car.html">my car</a></li> <li><a href="boat.html">my boat</a></li> </ul> </li> <li><a href="company.html">about my company</a> <!-- 1st level 2nd branch --> <ul> <li><a href="desk.html">my desk</a></li> <li><a href="computer.html">my computer</a></li> <li><a href="secretary.html">my secretary</a></li> </ul> </li> </ul> This structure reflects that my house, my car, my boat are a sub level of "about me" and my desk, my computer, my secretary are a sub level of "about my company". Although there are no colored areas, borders or any other visual guides the relation between the branches and levels are obvious just from the structure. But why not <ol>? Wouldn´t it be nice to have a numbered list so that you can see the order of the pages from the number? Yes, it would be nice but unfortunately <ol> doesn´t offer hierarchical numbering. And you can´t hide the numbers in a graphical browser where you don´t need them as navigation guide without hiding them also to the web reader. So <ul> is the better choice although it is unnumbered. The order numbers will be added in a different way. But before some more information on <ul> list menus in general.

Improving

Although we use text for the links we should also use the title tag to give additional information what the visitor can expect on the pages.

From the point of usability the list entry of the page where you currently are should not be linked. Otherwise a web reader would read this as normal link and the visitor might expect another page in the list.

Adding design

With CSS you can make designs for <ul> lists which don´t need to fear comparison with graphical menus. The fact that you can style the <li> tag and the <a> tag gives you a wealth of possibilities to build designs far beyond a change of the link color on mouse over. Together with the different link states you can define in Typoscript you have a variety of options to add visual guides for graphical browsers to your menus.

Menus and

That kind of navigation discussed above you usually integrate into your design template by substituting some ###MAINNAVI### subpart with the dynamic menu from some temporary cObject temp.mainnavi which defines a TMENU structure. As you can define in your Typoscript what to wrap around elements you have full control over the way your menu is styled and rendered.

But there is also a page content element "site map" that offers some menu types and if you are using the static template CSS Styled Content you will have noticed that the menus generated do not have any list structure but are paragraphs and you can´t distinguish the branches or levels if you don´t have the visual guide given by the CSS classes. On the other hand, as the TMENU structures are already provided by CSS Styled Content with some change of the Typoscript you can have these as correctly nested <ul> lists, too.

Improving accessibility

Now back to the order numbers that would not only be nice to have but make <ul> list menus really accessible.

Although a list menu already reflects the structure of a website if you imagine you have a really huge website with many branches and all have some sub levels it is still difficult to get an overview. In the linearized presentation of a text browser or a web reader you still can´t distinguish the branches and levels because the list is just displayed from top to bottom without any hint where a sub level ends or the next branch starts. This disadvantage of unnumbered lists can be compensated by the usage of order numbers and the <dfn> tag. <dfn> is logical markup and it has the meaning: "this is a definition". In a <ul> menu structure the <dfn> is used to define order numbers for the list items considering their position in the hierarchical structure.

<ul>

<li><a href="me.html"><dfn>1: </dfn>about me</a>

<ul>

<li><a href="house.html"><dfn>1.1: </dfn>my house</a></li>

<li><a href="car.html"><dfn>1.2: </dfn>my car</a></li>

<li><a href="boat.html"><dfn>1.3: </dfn>my boat</a></li>

</ul>

</li>

<li><a href="company.html"><dfn>2: </dfn>about my company</a>

<ul>

<li><a href="desk.html"><dfn>2.1: </dfn>my desk</a></li>

<li><a href="computer.html"><dfn>2.2: </dfn>my computer</a></li>

<li><a href="secretary.html"><dfn>2.3: </dfn>my secretary</a></li>

</ul>

</li>

</ul>

Please note that the order number must be finished by a colon otherwise web readers might read something like 2.1. as 2nd of January (or 1st of February).

For graphical browsers which can use visual guides to order list menus the <dfn> section might be set hidden by means of CSS whereas with custom CSS, text browsers, web readers etc. the order numbers are your guide through the website´s architecture even if this is very complex.

For the <dfn> support in TYPO3 Jan Wischnat has written a function that can be easily integrated in TMENU structures.

Just add something like

page.includeLibs.dfn = fileadmin/scripts/dfn_iproc_tmenu.inc

to your page configuration Typoscript and

....

temp.mainnavi.1 = TMENU

temp.mainnavi.1.IProcFunc = user_IProc_dfn

....

to your menu configuration.

Fine tuning

Although <ul> lists with order numbers in <dfn> tags already provide accessible menus there is still some fine tuning necessary to cope with the fact that assistive technologies have quirks and bugs as the graphical browsers. Some don´t separate links in list items so that the links are read without a break. So it is necessary to use separators between the links. Many people use | because this also is a nice visual separator. Unfortunately this proved to be the worst separator and it is recommended to use the dot instead. The auditive effect is a break after the link and this character also semantically makes sense. And for the graphical browser where you can use other techniques to separate links visually you can hide the dot by CSS. <ul> <span>. </span> <ul> <li><a href="house.html"><dfn>1.1: </dfn>my house</a><span>. </span> </li> <li><a href="car.html"><dfn>1.2: </dfn>my car</a><span>. </span> </li> <li><a href="boat.html"><dfn>1.3: </dfn>my boat</a><span>. </span> </li> </ul> </li> <li><a href="company.html"><dfn>2: </dfn>about my company</a><span>. </span> <ul> <li><a href="desk.html"><dfn>2.1: </dfn>my desk</a><span>. </span></li> <li><a href="computer.html"><dfn>2.2: </dfn>my computer</a><span>.</span></li> <li><a href="secretary.html"><dfn>2.3: </dfn>my secretary</a><span>. </span></li> </ul> </li> </ul>

Latest news

Show more