Using aria-expanded to indicate the state of a collapsible element

Introduction

This example was provided by Birkir R. Gunnarsson (@birkir_gun)
and is based on Example 1 in the WCAG Technique SCR28: Using an expandable and collapsible menu to bypass block of content. I have added a variant where the link is given a role="button" (since a button seems to map better than a link on the action of hiding and showing some content). Currently, there is the minor problem that toggling the visibility resets the scroll status of the page.

Example 2: aria-expanded used on link with role="button" toggling visibibity of section

Future work

It might be interesting, from a best practice point of view, to find out what combination of aria attributes would work best across browsers / screen readers - if we turn a link into a button, for example, would it be advantageous also to use the aria-pressed attribute on the trigger if the visual appearance of the button changes, or would this just add noise?

Tabbing: Basically the same behaviour as with IE9 above (but seems slightly buggy, possibly related to content not being visible by default when loading the page (as with navigation bar 2). After continued use, JAWS at times stopped reading links (requiring a page reload). In one case tabbing through links under navigation bar 2 would keep announcing the state of button instead of the links visibly receiving focus, and not reading the links at all in browse mode.

Tabbing, Example 1: Support better than in JAWS since the new state is announced after activating the link:toggle navigation bar 1 - expanded visited link ENTER collapsed

Tabbing, Example 2: Support better than in JAWS since the new state is announced after activating the link:toggle navigation bar 2 - button collapsed ENTER expanded SHIFT TAB list with seven items link four - link TAB out of list - toggle navigation bar 2 - button expanded ENTER collapsed

Browse mode: Arrowing beyond collapsee navigatino bar 2 does not read the line of sample content but goes straight to the next heading: button collapsed - toggle navigation bar 2 ARROW DOWN heading level 2 - future work. Howeerver, the skipped line is read when the sectino is expanded.