SEO Inc. Blog

Drop Down Menus & the Visually Impaired

Making sure a website has search engine friendly navigation is a top priority for savvy web developers and optimizers. Developers usually consider three things when creating a drop down navigation menu: Does it look good? Does it work correctly? And is it SEO friendly (can search engine spiders crawl the links)?  Well, here is a fourth thing to consider before deciding to implement a particular menu solution: Web Accessibility –  Is it accessible to the visually impaired?

There are a lot of SEO friendly menu solutions out there, from basic CSS based menus that simply show the sub-menu links when the user mouses over a top level link, to fancy JavaScript driven menu solutions that show the sub-menu links by doing all kinds of animation effects such as sliding, fading, and re-sizing. Most menus are fine for SEO as long as the CSS/JavaScript acts on regular HTML links that the search engines can crawl. However, very few menus are created with visually impaired users in mind, so it is important to research and choose a menu solution carefully.

To ensure that a menu is accessible to the visually impaired, you want to avoid using “display:none” or “visibility:hidden“ to initially hide sub-menu links. Whatever is contained in elements that have either of these two CSS properties applied to them will be ignored by screen reading software with the logic being that if visual users don’t get to see those links, why should they be read to non-visual users? The flaw there is that visual users have a way of accessing those links by hovering over the menu, and visually impaired users don’t. The solution is to use a menu (PS: Hint Hint – SEO Inc can implement this!) that initially positions the sub-menu items off the page, and then back on the page when the menu is activated. That way screen reading software won’t get tripped up, and will read all the links in the menu to visually impaired users.

0/5 (0 Reviews)