WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Vertical fly out menus with image replacement.

for

From: Warden, Michael
Date: Apr 5, 2013 2:15PM

Is there a need to do it fully with graphics? The easiest way to do it would be to create a graphical backgrounds for the different levels of the menu (or a single background for all menu levels) and then increase the font-size, font-weight, etc. of the text in the links.

In looking at the source for the menu you should have sufficient classes in-place already to use as targets,

.navlinks li
{
background-image: url(***background graphic***);
}

.navlinks li a
{
font-size:1.5em;
}

.navlinks li .toggle li
{
background-image: url(***submenu background graphic***);
}

Just a thought.


>I am updating the navigation for the ADA services site at
>isu.edu/ada4isuand it has been requested that I replace the existing
>text-based links with
>graphical buttons with large print.
>
>The menu would stay as it is for screen readers, but the idea is to have
>easier navigation to read for the sight impaired without having to zoom in
>on the page.
>
>The powers that be want the vertical navigation on the side, so a drop
>down menu isn't an option.
>
>Does anybody know of a CSS or JavaScript solution for this? Most image
>replacement scripts I find will only work for top level links, but not
>nested menus.


Email Disclaimer: http://marincounty.org/nav/misc/EmailDisclaimer.cfm