chore(accessibility): Add aria attributes to aid screen reader flow #117

riavalon · 2017-03-02T16:27:50Z

This is to address #111 issues

jelbourn · 2017-03-08T21:26:57Z

src/app/pages/component-category-list/component-category-list.html

@@ -1,5 +1,6 @@
 <div class="docs-component-category-list">
  <md-card
+      role="link"


I think a better approach for this one would be to wrap the entire card inside of an anchor element.

We would have to add an <a role="link"> around the contents of each card, though. Isn't it a bit more concise to just add the role-link to the md-card itself?

In general it's always better to use the appropriate native element instead of a role. An <a> also has the proper associated href and tab index.

jelbourn · 2017-03-08T21:30:53Z

src/app/pages/component-sidenav/component-sidenav.html

@@ -1,9 +1,9 @@
 <md-sidenav-container class="docs-component-viewer-sidenav-container">
-  <md-sidenav #sidenav class="docs-component-viewer-sidenav"
+  <md-sidenav aria-label="Side navigation" role="navigation" #sidenav class="docs-component-viewer-sidenav"


I'm wondering if we should avoid having <nav> inside of a role="navigation" and instead wrap the entire sidenav content in one <nav>

I don't think that this is necessarily a problem. To my knowledge, a <nav> element or an element with role="navigation" just cannot have a <main> or role="main" as a descendant. Adding the role navigation here to allow screen readers to see the whole side nav, and then dig down into the individual sections of the side nav was suggested based off this issue: #111

jelbourn · 2017-03-08T21:31:10Z

src/app/pages/component-sidenav/component-sidenav.html

@@ -1,9 +1,9 @@
 <md-sidenav-container class="docs-component-viewer-sidenav-container">
-  <md-sidenav #sidenav class="docs-component-viewer-sidenav"
+  <md-sidenav aria-label="Side navigation" role="navigation" #sidenav class="docs-component-viewer-sidenav"


A more informative aria-label might be "Component navigation"

jelbourn · 2017-03-08T21:54:37Z

src/app/pages/component-viewer/component-viewer.html

@@ -1,22 +1,24 @@
 <!-- TODO(jelbourn): turn this into nav tabs -->
-<md-tab-group class="docs-component-viewer-tabbed-content"
+<md-tab-group role="tablist" class="docs-component-viewer-tabbed-content"


The roles and other aria attributes are something that really belong as part of the md-tab-group implementation

jelbourn · 2017-03-08T21:55:16Z

src/app/pages/guide-list/guide-list.scss

@@ -1,4 +1,4 @@
-:host {
+:host, .guides-container {


Should be prefixed as .docs-guide-container

jelbourn · 2017-03-08T21:56:35Z

src/app/shared/documentation-items/documentation-items.ts

@@ -29,7 +29,7 @@ const DOCS = [
  },
  {
    id: 'nav',
-    name: 'Navigation',
+    name: 'Navigation Components',


It's somewhat redundant for this to say "Navigation components" since they're all components. Could it perhaps just be done as an aria label?

Ah, I just added "Components" to it since the screen reader otherwise reads it as "Navigation navigation". I'll see if we can change it to an aria label instead. 👍

jelbourn · 2017-03-08T21:57:03Z

src/app/shared/example-viewer/example-viewer.html

@@ -3,6 +3,8 @@
    <div class="docs-example-viewer-title-spacer">{{exampleData?.title}}</div>

    <button md-icon-button type="button" (click)="toggleSourceView()"
+            role="button"


role="button" should never be necessary on a <button> element

(here and elsewhere)

jelbourn · 2017-03-08T21:59:21Z

src/app/shared/focus-element/focus-element.ts

+    // Focus host element after view loads
+    // so screen readers will be alerted
+    // the page has changed.
+    this._element.nativeElement.focus();


This seems like a very risky change to make; generally having an element grab focus to itself without user input can cause problems. I'll try to look into alternate approaches

We mostly just need to find a way to signify that the page has changed after a user navigates with a screen reader. At the moment, there is no indication that anything has happened. It was recommended that we focus a heading in the main content area of the page, though I definitely agree that it does feel like there should be a better way to signify this.

@riavalon have you tried setting a document title? I would expect a screen reader to notice and announce a change in the title. Have a look here: https://angular.io/docs/ts/latest/cookbook/set-document-title.html
Can you see if this is a better solution?

I actually tried this already, @naomiblack. Even with a title change the screen reader does not announce anything else. Though, updating the document title during navigation seems like a good thing to have anyway. I can add that back in.

that is definitely weird. I'll see if I can get some help on this one -- yes -- please do add a document title change back in.

jelbourn · 2017-03-08T21:59:49Z

src/app/shared/navbar/navbar.html

@@ -1,12 +1,12 @@
 <!-- TODO: figure out if the <nav> should go inside of a <header> element. -->
-<nav class="docs-navbar">
+<nav aria-label="Main" role="navigation" class="docs-navbar">


I'm not sure role="navigation" should be necessary for a <nav> element

jelbourn · 2017-03-08T22:00:16Z

src/app/shared/navbar/navbar.html

-  <a md-button routerLink="components">Components</a>
-  <a md-button routerLink="guides">Guides</a>
+  <a aria-label="Components" role="link" md-button routerLink="components">Components</a>
+  <a aria-label="Guides" role="link" md-button routerLink="guides">Guides</a>


role="link" shouldn't be necessary for an <a> element

DaveBest99 · 2017-04-04T15:32:39Z

Issue:
Page content should not update without being initiated by a user action, or some notification is given to the user (2.4 Alert and Message Dialogs) to inform of the page behaviour.
On the Angular Material demo page (https://material.angular.io/components) the page content is updated when the user presses the Enter key on one of the Navigation Link elements. However, the screen reader does not notify the user that page content has been updated.

User action:

Press the Tab key to move focus to a Navigation Link element "Autocomplete".
Press Enter key to activate the Link element.
Page content updates, but screen reader focus does not move and no screen reader output announces the page change.

Solutions:

Do not move the cursor focus, but announce the page update by adding an aria-alert to the h1 tag "Component - Autocomplete" (2.3 ARIA Alert role).
After the page content updates, upon the Enter key press, move the cursor focus to the h1 tag "Component - Autocomplete" (2.14 ARIA Link - Enter: Executes the link and moves focus to the link target).
Update the page Title by appending the h1 tag "Component - Autocomplete" to the Title (I.E. "Component - Autocomplete - Angular Material").

Notes:

WCAG2.4.2 Page Titled: Web pages have titles that describe topic or purpose. (Level A).
The intent of this Success Criterion is to help users find content and orient themselves within it by ensuring that each Web page has a descriptive title. Titles identify the current location without requiring users to read or interpret page content.
http://www.w3.org/TR/UNDERSTANDING-WCAG20/complete.html
ARIA2.5 Breadcrumb: A breadcrumb trail consists of a list of links to the parent pages of the current page in hierarchical order. It helps users find their place within a website or web application. Breadcrumbs are often placed horizontally before a page's main content.
http://w3c.github.io/aria-practices/

googlebot added the cla: yes label Mar 2, 2017

riavalon force-pushed the feat-a11y-additions branch from 613ccb9 to 597ac5f Compare March 7, 2017 15:42

jelbourn reviewed Mar 8, 2017

View reviewed changes

riavalon force-pushed the feat-a11y-additions branch 2 times, most recently from 06046b4 to 786c7c1 Compare March 9, 2017 18:28

riavalon force-pushed the feat-a11y-additions branch from 786c7c1 to 7b82ca6 Compare March 21, 2017 18:44

riavalon mentioned this pull request Apr 7, 2017

A11y Screen Reader - Page structure challenges #111

Open

riavalon force-pushed the feat-a11y-additions branch 2 times, most recently from 6a72f43 to 7967c1b Compare April 13, 2017 17:25

riavalon force-pushed the feat-a11y-additions branch from 7967c1b to 27837ab Compare May 31, 2017 19:20

chore(accessibility): Add aria attributes to aid screen reader flow

a3b3acf

riavalon force-pushed the feat-a11y-additions branch from 27837ab to a3b3acf Compare June 26, 2017 19:44

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore(accessibility): Add aria attributes to aid screen reader flow #117

chore(accessibility): Add aria attributes to aid screen reader flow #117

riavalon commented Mar 2, 2017

jelbourn Mar 8, 2017

riavalon Mar 9, 2017

jelbourn Mar 9, 2017

jelbourn Mar 8, 2017

riavalon Mar 9, 2017

jelbourn Mar 8, 2017

jelbourn Mar 8, 2017

jelbourn Mar 8, 2017

jelbourn Mar 8, 2017

riavalon Mar 9, 2017

jelbourn Mar 8, 2017

jelbourn Mar 8, 2017

riavalon Mar 9, 2017 •

edited

Loading

naomiblack Mar 21, 2017

riavalon Mar 21, 2017 •

edited

Loading

naomiblack Mar 21, 2017

jelbourn Mar 8, 2017

jelbourn Mar 8, 2017

DaveBest99 commented Apr 4, 2017

chore(accessibility): Add aria attributes to aid screen reader flow #117

Are you sure you want to change the base?

chore(accessibility): Add aria attributes to aid screen reader flow #117

Conversation

riavalon commented Mar 2, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

riavalon Mar 9, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

riavalon Mar 21, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

DaveBest99 commented Apr 4, 2017

riavalon Mar 9, 2017 •

edited

Loading

riavalon Mar 21, 2017 •

edited

Loading