Screen Reader Accessibility

[hdhanani7]

• [x] Interactivity with the page main content must be disabled. This can be achieved by adding aria-hidden="true" to whatever is wrapping the main content (the example pages don't have any identifiers on the main content div!!)

<!-- Before pinny is opened... -->
<div class="t-main" aria-hidden="false"></div>
<section class="pinny" aria-hidden="true"></section>

<!-- After pinny is opened... -->
<div class="t-main" aria-hidden="true"></div>
<section class="pinny pinny--is-open" aria-hidden="false"></section>

• [x] There should be an inner wrapper with the role="document" property. See the reasons in this blog post and in point 8 of the blog post's working example.

<section class="pinny" labelledby="pinnyLabel" role="dialogue">
    <div role="document">
        <!-- description block -->
        <!-- .pinny__header -->
        <!-- .pinny__content -->
    </div>
</section>

[kpeatt]

Addressed in a11y branch.