Улучшения доступности многоуровневых раскрывающихся списков

Я пытаюсь создать многоуровневое раскрывающееся меню со следующим кодом:

<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>

С помощью некоторого jQuery я скрыл все элементы второго/третьего уровня и добавил класс, который будет отображать «+» справа с помощью CSS.

Демонстрация: http://jsfiddle.net/ZJug9/1/

Это прекрасно работает для большинства пользователей, но когда я пытаюсь использовать это с VoiceOver на Mac, я просто не могу найти способ навигации. Может быть, потому что я не все знаю о VoiceOver или я делаю что-то не так с HTML и JS.

В моем коде отсутствует что-то, что могло бы улучшить доступность для слепых людей, использующих программы чтения с экрана. Что я должен сделать больше и почему для этого конкретного примера.

Любые современные инструменты или документация, которые помогут мне ускорить доступность. Я думаю, что веб-сайт доступности W3C слишком загроможден и запутан. Я тоже кое-что читал об Aria, но документация действительно сложна, и некоторые люди говорят, что достаточно использовать правильную разметку.

Пожалуйста, попробуйте ответить для этого примера

ОБНОВЛЕНИЕ Я добавил скрытую видимость к скрытым ul, поскольку программа чтения с экрана не озвучивает невидимые элементы, и я по-прежнему смогу использовать CSS3 для перехода высоты. Демонстрация 2: http://jsfiddle.net/ZJug9/3/