Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve Accessibility on the Dashboard #131

Closed
RobLoach opened this issue May 24, 2016 · 3 comments
Closed

Improve Accessibility on the Dashboard #131

RobLoach opened this issue May 24, 2016 · 3 comments

Comments

@RobLoach
Copy link

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
@RobLoach RobLoach changed the title Improve Accessibility Improve Accessibility on the Dashboard May 24, 2016
@rowanmanning
Copy link
Member

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
Copy link
Author

YO DAWG

@JeremyEnglert
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants