Improve Accessibility on the Dashboard

[RobLoach]

Welcome to Pa11y

 > PhantomJS browser created
 > Testing the page "http://demo.pa11y.org/"

Results for http://demo.pa11y.org/:

 • Notice: Check that the title element describes the document.
   ├── WCAG2AA.Principle2.Guideline2_4.2_4_2.H25.2
   ├── html > head > title
   └── <title>pa11y-dashboard</title>

 • Notice: Check that the link text combined with programmatically determined link context identifies the purpose of the link.
   ├── WCAG2AA.Principle2.Guideline2_4.2_4_4.H77,H78,H79,H80,H81
   ├── html > body > header > div > div > h1 > a
   └── <a href="/">pa11y dashboard</a>

 • Warning: This label's "for" attribute contains an ID for an element that is not a form control. Ensure that you have entered the correct ID for the intended element.
   ├── WCAG2AA.Principle1.Guideline1_3.1_3_1.H44.NotFormControl
   ├── html > body > div > div > section > div > div > div:nth-child(1) > div > label
   └── <label for="filter-input" class="filter-trigger" data-toggle="collapse" data-target="#filter-input" role="button" tabindex="0">Filter<span class="glyphicon gl...</label>

 • Error: This text input element does not have a name available to an accessibility API. Valid names are: label element, title attribute.
   ├── WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.InputText.Name
   ├── #task-filter
   └── <input class="form-control" id="task-filter" type="text" data-role="input" placeholder="Type filter term (name or standard)">

 • Error: This form field should be labelled in some way. Use the label element (either with a "for" attribute or wrapped around the form field), or "title", "aria-label" or "aria-labelledby" attributes as appropriate.
   ├── WCAG2AA.Principle1.Guideline1_3.1_3_1.F68
   ├── #task-filter
   └── <input class="form-control" id="task-filter" type="text" data-role="input" placeholder="Type filter term (name or standard)">

 • Notice: Check that a change of context does not occur when this input field receives focus.
   ├── WCAG2AA.Principle3.Guideline3_2.3_2_1.G107
   ├── #task-filter
   └── <input class="form-control" id="task-filter" type="text" data-role="input" placeholder="Type filter term (name or standard)">

 • Warning: The heading structure is not logically nested. This h3 element should be an h2 to be properly nested.
   ├── WCAG2AA.Principle1.Guideline1_3.1_3_1_A.G141
   ├── html > body > div > div > section > div > div > div:nth-child(2) > div > h3
   └── <h3 class="crunch-top"><span class="pull-left glyphico...</h3>

 • Notice: Check that the link text combined with programmatically determined link context, or its title attribute, identifies the purpose of the link.
   ├── WCAG2AA.Principle2.Guideline2_4.2_4_4.H77,H78,H79,H80,H81,H33
   ├── html > body > div > div > section > div > div > ul > li:nth-child(2) > a
   └── <a class="well task-card-link crunch-bottom" title="Details for URL www.bbc.co.uk/news/world" href="/52382f4ac0d6c9ac49000006"> <p class="h3">BBC World Ne...</a>

 • Notice: Check that the link text combined with programmatically determined link context, or its title attribute, identifies the purpose of the link.
   ├── WCAG2AA.Principle2.Guideline2_4.2_4_4.H77,H78,H79,H80,H81,H33
   ├── html > body > div > div > section > div > div > ul > li:nth-child(3) > a
   └── <a class="well task-card-link crunch-bottom" title="Details for URL www.gov.uk" href="/52382f08c0d6c9ac49000003"> <p class="h3">GOV.UK Home<...</a>

 • Notice: Check that the link text combined with programmatically determined link context, or its title attribute, identifies the purpose of the link.
   ├── WCAG2AA.Principle2.Guideline2_4.2_4_4.H77,H78,H79,H80,H81,H33
   ├── html > body > div > div > section > div > div > ul > li:nth-child(4) > a
   └── <a class="well task-card-link crunch-bottom" title="Details for URL github.com" href="/52382f31c0d6c9ac49000005"> <p class="h3">GitHub Home<...</a>

 • Notice: Check that the link text combined with programmatically determined link context, or its title attribute, identifies the purpose of the link.
   ├── WCAG2AA.Principle2.Guideline2_4.2_4_4.H77,H78,H79,H80,H81,H33
   ├── html > body > div > div > section > div > div > ul > li:nth-child(5) > a
   └── <a class="well task-card-link crunch-bottom" title="Details for URL www.nature.com" href="/52382ec8c0d6c9ac49000001"> <p class="h3">NPG Home</p>...</a>

 • Notice: Check that the link text combined with programmatically determined link context, or its title attribute, identifies the purpose of the link.
   ├── WCAG2AA.Principle2.Guideline2_4.2_4_4.H77,H78,H79,H80,H81,H33
   ├── html > body > div > div > section > div > div > ul > li:nth-child(6) > a
   └── <a class="well task-card-link crunch-bottom" title="Details for URL www.nature.com" href="/52382ef5c0d6c9ac49000002"> <p class="h3">NPG Home</p>...</a>

 • Notice: Check that the link text combined with programmatically determined link context, or its title attribute, identifies the purpose of the link.
   ├── WCAG2AA.Principle2.Guideline2_4.2_4_4.H77,H78,H79,H80,H81,H33
   ├── html > body > div > div > section > div > div > ul > li:nth-child(7) > a
   └── <a class="well task-card-link crunch-bottom" title="Details for URL github.com/nature" href="/52382f23c0d6c9ac49000004"> <p class="h3">Nature On Gi...</a>

 • Notice: Check that the link text combined with programmatically determined link context, or its title attribute, identifies the purpose of the link.
   ├── WCAG2AA.Principle2.Guideline2_4.2_4_4.H77,H78,H79,H80,H81,H33
   ├── html > body > div > div > section > div > div > ul > li:nth-child(8) > a
   └── <a class="well task-card-link crunch-bottom" title="Details for URL twitter.com" href="/52457e2b135a4b51b4000001"> <p class="h3">Twitter Home...</a>

 • Notice: Check that the link text combined with programmatically determined link context, or its title attribute, identifies the purpose of the link.
   ├── WCAG2AA.Principle2.Guideline2_4.2_4_4.H77,H78,H79,H80,H81,H33
   ├── html > body > div > div > section > div > div > ul > li:nth-child(9) > a
   └── <a class="well task-card-link crunch-bottom" title="Details for URL pa11y.org" href="/52458167acc00c15b8000001"> <p class="h3">pa11y</p> ...</a>

 • Warning: Semantic markup should be used to mark emphasised or special text so that it can be programmatically determined.
   ├── WCAG2AA.Principle1.Guideline1_3.1_3_1.H49.Small
   ├── html > body > footer > div > div > div:nth-child(1) > small
   └── <small>© 2016 Springer Nature.<br>pa11...</small>

 • Notice: Check that the link text combined with programmatically determined link context identifies the purpose of the link.
   ├── WCAG2AA.Principle2.Guideline2_4.2_4_4.H77,H78,H79,H80,H81
   ├── html > body > footer > div > div > div:nth-child(2) > ul > li:nth-child(1) > a
   └── <a href="https://github.com/springernature/pa11y-dashboard">GitHub Repo</a>

 • Notice: Check that the link text combined with programmatically determined link context identifies the purpose of the link.
   ├── WCAG2AA.Principle2.Guideline2_4.2_4_4.H77,H78,H79,H80,H81
   ├── html > body > footer > div > div > div:nth-child(2) > ul > li:nth-child(2) > a
   └── <a href="https://github.com/springernature/pa11y-dashboard/issues">Bug Tracker</a>

 • Notice: Check that the link text combined with programmatically determined link context identifies the purpose of the link.
   ├── WCAG2AA.Principle2.Guideline2_4.2_4_4.H77,H78,H79,H80,H81
   ├── html > body > footer > div > div > div:nth-child(2) > ul > li:nth-child(3) > a
   └── <a href="http://www.w3.org/TR/WCAG20/">WCAG 2.0 spec</a>

 • Notice: Check that the link text combined with programmatically determined link context identifies the purpose of the link.
   ├── WCAG2AA.Principle2.Guideline2_4.2_4_4.H77,H78,H79,H80,H81
   ├── html > body > footer > div > div > div:nth-child(2) > ul > li:nth-child(4) > a
   └── <a href="http://squizlabs.github.io/HTML_CodeSniffer/">HTML_CodeSniffer</a>

2 Errors
3 Warnings
15 Notices

[rowanmanning]

Thanks @RobLoach, we've let this climb back up! I've been meaning to run Pa11y against the dashboard in CI for a little while, now might be a good time so these issues don't crop up again.

[RobLoach]

[JeremyEnglert]

I'm not seeing these issues anymore when running pa11y on the pa11y-dashboard.