Drop Down Menus and Accessibility for 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?
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.