2

I am trying to create a multi level drodown menu with the following code:

<nav role="navigation" class="navigation">
    <ul>
        <li><a href="index.html">Home</a>

        </li>
        <li><a href="about.html">About</a>

            <ul>
                <li><a href="company.html">Company</a>
                    <ul>
                        <li><a href="#">Brands</a></li>
                        <li><a href="#">Stuff</a></li>
                        <li><a href="#">More Stuff</a></li>
                    </ul>
                </li>
                <li><a href="team.html">Team</a>

                </li>
                <li><a href="goals.html">Goals</a>

                </li>
                <li><a href="photos.html">Photos</a>

                </li>
            </ul>
        </li>
        <li><a href="portfolio.html">Portfolio</a>

            <ul>
                <li><a href="company.html">Chairs</a>

                </li>
                <li><a href="team.html">Beds</a>

                </li>
                <li><a href="goals.html">Fireplace</a>

                </li>
                <li><a href="photos.html">Onother</a>

                </li>
            </ul>
        </li>
        <li><a href="portfolio.html">Portfolio</a>

        </li>
    </ul>
</nav>

With some jQuery I have hidden all the second/third level items and added a class that will show a "+" in the right side via CSS.

Demo: http://jsfiddle.net/ZJug9/1/

This works fine for most users, but when I try to use this with VoiceOver on Mac I just can't simply find a way to navigate. Maybe because I don't know all the things about VoiceOver or I am doing something wrong with HTML and JS

Is there something missing from my code that could improve accessibility for blind people using screen readers. What should I do more and why for this particular example.

Any up to date tools or documentation that will put me up to speed about accessibility. I think that the W3C accessibility website is too cluttered and confusing. I read some things about Aria too, but the documentation is really complicated and some people say that using proper markup is good enough.

Please try to answer for this example

UPDATE I added visibility hidden to the hidden ul's as the screen reader does not speak invisible elements and I will still be able to use CSS3 for the height transition Demo 2: http://jsfiddle.net/ZJug9/3/

Adrian Florescu
  • 4,454
  • 8
  • 50
  • 74
  • 1
    make a focus event for all expanders that does whatever the click does except that it first hides all open expanders. also, use display:none to get the hidden elements out of the tab sequence. – dandavis Feb 07 '14 at 23:20
  • @dandavis - I noticed that using only the height to hide elements will not hide from the screen reader. Thanks! – Adrian Florescu Feb 07 '14 at 23:24
  • are you still having an issue with your updated demo? (works for me) – dandavis Feb 07 '14 at 23:28
  • @dandavis - no, works fine for me, but I want to get some answers from the guys who are using this type of navigation. I also think that you can do something with aria like 'Instead of link 'About +' to say 'Expand About us navigation items" – Adrian Florescu Feb 07 '14 at 23:32
  • 1
    use a title to describe functionality. aria-described-by and aria-labelled-by are overkill for such a simple widget. – dandavis Feb 07 '14 at 23:34
  • @dandavis - cool, thank you. After doing some reading I was scared that I have to do a lot more work. All the aria documentation scares me a lot. What I did is started learning about the Mac Voice Over and looks like that app is really smart and easy to use one you learn all the keyboard shortcuts. – Adrian Florescu Feb 07 '14 at 23:39
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/47064/discussion-between-adrian-florescu-and-dandavis) – Adrian Florescu Feb 07 '14 at 23:57
  • possible duplicate of [Advancing VoiceOver to a specified element in mobile Safari](http://stackoverflow.com/questions/9250847/advancing-voiceover-to-a-specified-element-in-mobile-safari) – Paul Sweatte Apr 25 '14 at 01:23

0 Answers0