18f/accessibility

A repo to organize the guidelines and best practices for accessibility at 18f.

⚠️ This guide has moved to the consolidated 18F guides repository.

Accessibility

This repo will contain the guidelines and best practices for 508 accessibility at 18F. The site is in draft.

This site is built using the 18F Guides Template

See the guides template repo for more information.

Generating the accessibility site/hosting locally

Cloning and running 18F/accessibility

You will need Ruby ( > version 2.1.5 ). You may consider using a Ruby version manager such as rbenv or rvm to help ensure that Ruby version upgrades don’t mean all your gems will need to be rebuilt.

On OS X, you can use Homebrew to install Ruby in /usr/local/bin, which may require you to update your $PATH environment variable:

$ brew update
$ brew install ruby

You will also need the the Bundler gem for this project:

$ gem install bundler 

To serve 18F Accessibility Guide locally, using accessibility as the name of your new repository:

$ git clone https://github.com/18F/accessibility.git accessibility
$ cd accessibility
$ bundle install
$ bundle exec jekyll serve

This will install all the gems needed by the template, and launch a running instance on http://localhost:4000. You can see how your local copy of accessibility renders at any time by going to that URL. To stop serving locally, simply type Ctrl+C into the terminal again.

Note: The main branch of this project is 18f-pages. Please submit all PRs against that branch.

Forking into your own repository

If you haven’t already followed the cloning instructions above, the easiest way to do this is simply to go to https://github.com/18F/accessibility and click Fork, then set up the repository under your own username. Then follow the instructions above to clone locally, subbing in MY-USER-NAME for 18F’s in the URL that follows git clone.

If you have already cloned locally from 18F and want to maintain your own accessibility repository, do the following.

You’ll need to create a new repository on Github. To do this, go to github.com/MY-USER-NAME and click the "New Repository" button. Enter the title and description for your new guide and then click Create Repository. It’s easiest if you use accessibility as the name, as it will match back to the 18F accessibility you’re building from.

After the repository is created, you’ll see the repository URL at the top. Copy this url by hitting the handy Copy to Clipboard button next to the text box.

Go back to the directory where you cloned the repository. We’re going to change this repo to point to the one you just created (which is empty), instead of back to 18F’s, and push to it.

git remote set-url origin https://github.com/MY-USER-NAME/accessibility.git
git push origin 18f-pages-staging

Now you can edit your own fork of accessibility freely, and push up changes as you need.

Public domain

This project is in the worldwide public domain. As stated in CONTRIBUTING:

This project is in the public domain within the United States, and copyright and related rights in the work worldwide are waived through the CC0 1.0 Universal public domain dedication.

All contributions to this project will be released under the CC0 dedication. By submitting a pull request, you are agreeing to comply with this waiver of copyright interest.

accessibility's Issues

Possible Update of Frames Page Text

Shouldn't it be "page" instead of "pages" for the following text in step one of testing on the Frames page 9 https://pages.18f.gov/accessibility/frames/ ) "Identify all frames / iframes on a pages", since you are only testing one page at a time?

And shouldn't it be "Using the keyboard, navigate To each frame to ensure content is accessible" instead of "Using the keyboard, navigate each frame to ensure content is accessible" in step two?

What about "Check the title or name attribute of each frame or iframe for a description of the content"?

Automated accessibility tests

Recently, I found out about pa11y, a CLI that generates 508/accessibility reports for web pages. The information it provides is great, and should reduce the burden on our 508 expert, @nickbristow, by automatically triaging and identifying hotspots in projects that might need more manual review than others. pa11y uses the HTML CodeSniffer which validates HTML against the WCAG 2.0 (Level A, AA, AAA) and Section 508 standards. pa11y outputs errors, warnings, and notices about the HTML.

@benbalter recently built the ra11y Ruby gem, which wraps pa11y and provides a nice hook into Jekyll sites. And it's easy to integrate with Travis-Ci. In just a couple minutes, I got Travis to generate an accessibility report for https://18f.gsa.gov right in the build page.

Currently, ra11y will break a build if warnings or errors exceed 0. This raises some questions:

• is this too strict?
• if so, is there a good threshold?
• rather than a static threshold, should regressions be tracked? If so, how?

Another nice feature of pa11y is that it can generate its reports in json and csv formats. What are some good uses of these files? A few come to mind:

• Include on each page a link to its "accessibility report"
• Version control these files to track regressions/changes

Some other features that I am interested in:

• A standalone Travis-CI/Code Climate-like server that runs ra11y and provides fine-grained accessibility information about each commit and/or pull request.
• Include accessibility-statistics on dashboards, such as 18Fs, but could also apply to all government sites (a https://govcode.org integration might be nice).

508 Issues from pa11y-rails

Results for https://pages.18f.gov/accessibility/:

• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.3:1. Recommendation: change text colour to #0476d2.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > a
  • <a class="skip-link visuallyhidden focusable" href="#main">Skip to Main Content</a>
• Error: Anchor element found with a valid href attribute, but no link content has been supplied.
  • WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
  • #resources > a
  • <a class="anchorjs-link " href="#resources" aria-label="Anchor link for: resources" data-anchorjs-icon="" style="opacity: 1; font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; padding-left: 0....
• Error: Anchor element found with a valid href attribute, but no link content has been supplied.
  • WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
  • #sites-tutorials > a
  • <a class="anchorjs-link " href="#sites-tutorials" aria-label="Anchor link for: sites tutorials" data-anchorjs-icon="" style="opacity: 1; font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; padd...
• Error: Anchor element found with a valid href attribute, but no link content has been supplied.
  • WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
  • #tools > a
  • <a class="anchorjs-link " href="#tools" aria-label="Anchor link for: tools" data-anchorjs-icon="" style="opacity: 1; font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; padding-left: 0.375em;">...
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(1) > a:nth-child(1)
  • <a href="https://18f.gsa.gov">18F</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(1) > a:nth-child(2)
  • <a href="https://github.com/18F/accessib...">https://github.com/18F/accessibility</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(1)
  • <a href="https://github.com/18F/pages/">18F Pages</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(2)
  • <a href="https://github.com/18F/guides-template/">18F Guides theme</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(3)
  • <a href="https://github.com/cfpb/docter/">DOCter</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(4)
  • <a href="http://cfpb.github.io/">CFPB</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(3) > a:nth-child(1)
  • <a href="https://github.com/18F/accessibility/edit/18f-pages/index.md">Edit this page</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(3) > a:nth-child(2)
  • <a href="https://github.com/18F/accessibility/issues">file an issue</a>

Summary:

• 12 Errors

Results for google.com:

• Error: Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.
  • WCAG2AA.Principle1.Guideline1_1.1_1_1.H37
  • #pmocntr2 > table > tbody > tr:nth-child(2) > td:nth-child(1) > img
  • <img src="/images/icons/product/chrome-48.png">

Summary:

• 1 Errors

508 Issues from pa11y-rails

Results for https://pages.18f.gov/accessibility/:

• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.3:1. Recommendation: change text colour to #0476d2.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > a
  • <a class="skip-link visuallyhidden focusable" href="#main">Skip to Main Content</a>
• Error: Anchor element found with a valid href attribute, but no link content has been supplied.
  • WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
  • #resources > a
  • <a class="anchorjs-link " href="#resources" aria-label="Anchor link for: resources" data-anchorjs-icon="" style="opacity: 1; font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; padding-left: 0....
• Error: Anchor element found with a valid href attribute, but no link content has been supplied.
  • WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
  • #sites-tutorials > a
  • <a class="anchorjs-link " href="#sites-tutorials" aria-label="Anchor link for: sites tutorials" data-anchorjs-icon="" style="opacity: 1; font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; padd...
• Error: Anchor element found with a valid href attribute, but no link content has been supplied.
  • WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
  • #tools > a
  • <a class="anchorjs-link " href="#tools" aria-label="Anchor link for: tools" data-anchorjs-icon="" style="opacity: 1; font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; padding-left: 0.375em;">...
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(1) > a:nth-child(1)
  • <a href="https://18f.gsa.gov">18F</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(1) > a:nth-child(2)
  • <a href="https://github.com/18F/accessib...">https://github.com/18F/accessibility</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(1)
  • <a href="https://github.com/18F/pages/">18F Pages</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(2)
  • <a href="https://github.com/18F/guides-template/">18F Guides theme</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(3)
  • <a href="https://github.com/cfpb/docter/">DOCter</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(4)
  • <a href="http://cfpb.github.io/">CFPB</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(3) > a:nth-child(1)
  • <a href="https://github.com/18F/accessibility/edit/18f-pages/index.md">Edit this page</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(3) > a:nth-child(2)
  • <a href="https://github.com/18F/accessibility/issues">file an issue</a>

Summary:

• 12 Errors

Results for google.com:

• Error: Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.
  • WCAG2AA.Principle1.Guideline1_1.1_1_1.H37
  • #pmocntr2 > table > tbody > tr:nth-child(2) > td:nth-child(1) > img
  • <img src="/images/icons/product/chrome-48.png">

Summary:

• 1 Errors

508 Issues from pa11y-rails

Results can be recreated using HTML_CodeSniffer

508 Issues from pa11y-rails

Results for https://pages.18f.gov/accessibility/:

• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.3:1. Recommendation: change text colour to #0476d2.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > a
  • <a class="skip-link visuallyhidden focusable" href="#main">Skip to Main Content</a>
• Error: Anchor element found with a valid href attribute, but no link content has been supplied.
  • WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
  • #resources > a
  • <a class="anchorjs-link " href="#resources" aria-label="Anchor link for: resources" data-anchorjs-icon="" style="opacity: 1; font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; padding-left: 0....
• Error: Anchor element found with a valid href attribute, but no link content has been supplied.
  • WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
  • #sites-tutorials > a
  • <a class="anchorjs-link " href="#sites-tutorials" aria-label="Anchor link for: sites tutorials" data-anchorjs-icon="" style="opacity: 1; font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; padd...
• Error: Anchor element found with a valid href attribute, but no link content has been supplied.
  • WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
  • #tools > a
  • <a class="anchorjs-link " href="#tools" aria-label="Anchor link for: tools" data-anchorjs-icon="" style="opacity: 1; font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; padding-left: 0.375em;">...
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(1) > a:nth-child(1)
  • <a href="https://18f.gsa.gov">18F</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(1) > a:nth-child(2)
  • <a href="https://github.com/18F/accessib...">https://github.com/18F/accessibility</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(1)
  • <a href="https://github.com/18F/pages/">18F Pages</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(2)
  • <a href="https://github.com/18F/guides-template/">18F Guides theme</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(3)
  • <a href="https://github.com/cfpb/docter/">DOCter</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(4)
  • <a href="http://cfpb.github.io/">CFPB</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(3) > a:nth-child(1)
  • <a href="https://github.com/18F/accessibility/edit/18f-pages/index.md">Edit this page</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(3) > a:nth-child(2)
  • <a href="https://github.com/18F/accessibility/issues">file an issue</a>

Summary:

• 12 Errors

Results for google.com:

• Error: Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.
  • WCAG2AA.Principle1.Guideline1_1.1_1_1.H37
  • #pmocntr2 > table > tbody > tr:nth-child(2) > td:nth-child(1) > img
  • <img src="/images/icons/product/chrome-48.png">

Summary:

• 1 Errors

Move/redirect to pages.18f.gov

Saw this tweet and was reminded that it's time to get this over to 18F Pages.

Accessibility Hackathon Sign Design

Please develop sign design. Must submit to printer two weeks prior to the event.

508 Issues from pa11y-rails

Results can be recreated using HTML_Codesniffer \n

Results for https://pages.18f.gov/accessibility/:

• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.3:1. Recommendation: change text colour to #0476d2.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > a
  • <a class="skip-link visuallyhidden focusable" href="#main">Skip to Main Content</a>
• Error: Anchor element found with a valid href attribute, but no link content has been supplied.
  • WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
  • #resources > a
  • <a class="anchorjs-link " href="#resources" aria-label="Anchor link for: resources" data-anchorjs-icon="" style="opacity: 1; font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; padding-left: 0....
• Error: Anchor element found with a valid href attribute, but no link content has been supplied.
  • WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
  • #sites-tutorials > a
  • <a class="anchorjs-link " href="#sites-tutorials" aria-label="Anchor link for: sites tutorials" data-anchorjs-icon="" style="opacity: 1; font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; padd...
• Error: Anchor element found with a valid href attribute, but no link content has been supplied.
  • WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
  • #tools > a
  • <a class="anchorjs-link " href="#tools" aria-label="Anchor link for: tools" data-anchorjs-icon="" style="opacity: 1; font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; padding-left: 0.375em;">...
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(1) > a:nth-child(1)
  • <a href="https://18f.gsa.gov">18F</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(1) > a:nth-child(2)
  • <a href="https://github.com/18F/accessib...">https://github.com/18F/accessibility</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(1)
  • <a href="https://github.com/18F/pages/">18F Pages</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(2)
  • <a href="https://github.com/18F/guides-template/">18F Guides theme</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(3)
  • <a href="https://github.com/cfpb/docter/">DOCter</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(4)
  • <a href="http://cfpb.github.io/">CFPB</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(3) > a:nth-child(1)
  • <a href="https://github.com/18F/accessibility/edit/18f-pages/index.md">Edit this page</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(3) > a:nth-child(2)
  • <a href="https://github.com/18F/accessibility/issues">file an issue</a>

Summary:

• 12 Errors

508 Issues from pa11y-rails

Results for https://pages.18f.gov/accessibility/:

• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.3:1. Recommendation: change text colour to #0476d2.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > a
  • <a class="skip-link visuallyhidden focusable" href="#main">Skip to Main Content</a>
• Error: Anchor element found with a valid href attribute, but no link content has been supplied.
  • WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
  • #resources > a
  • <a class="anchorjs-link " href="#resources" aria-label="Anchor link for: resources" data-anchorjs-icon="" style="opacity: 1; font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; padding-left: 0....
• Error: Anchor element found with a valid href attribute, but no link content has been supplied.
  • WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
  • #sites-tutorials > a
  • <a class="anchorjs-link " href="#sites-tutorials" aria-label="Anchor link for: sites tutorials" data-anchorjs-icon="" style="opacity: 1; font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; padd...
• Error: Anchor element found with a valid href attribute, but no link content has been supplied.
  • WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
  • #tools > a
  • <a class="anchorjs-link " href="#tools" aria-label="Anchor link for: tools" data-anchorjs-icon="" style="opacity: 1; font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; padding-left: 0.375em;">...
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(1) > a:nth-child(1)
  • <a href="https://18f.gsa.gov">18F</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(1) > a:nth-child(2)
  • <a href="https://github.com/18F/accessib...">https://github.com/18F/accessibility</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(1)
  • <a href="https://github.com/18F/pages/">18F Pages</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(2)
  • <a href="https://github.com/18F/guides-template/">18F Guides theme</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(3)
  • <a href="https://github.com/cfpb/docter/">DOCter</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(4)
  • <a href="http://cfpb.github.io/">CFPB</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(3) > a:nth-child(1)
  • <a href="https://github.com/18F/accessibility/edit/18f-pages/index.md">Edit this page</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(3) > a:nth-child(2)
  • <a href="https://github.com/18F/accessibility/issues">file an issue</a>

Summary:

• 12 Errors

Results for google.com:

• Error: Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.
  • WCAG2AA.Principle1.Guideline1_1.1_1_1.H37
  • #pmocntr2 > table > tbody > tr:nth-child(2) > td:nth-child(1) > img
  • <img src="/images/icons/product/chrome-48.png">

Summary:

• 1 Errors

508 Issues from pa11y-rails

Results for https://pages.18f.gov/accessibility/:

• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.3:1. Recommendation: change text colour to #0476d2.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > a
  • <a class="skip-link visuallyhidden focusable" href="#main">Skip to Main Content</a>
• Error: Anchor element found with a valid href attribute, but no link content has been supplied.
  • WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
  • #resources > a
  • <a class="anchorjs-link " href="#resources" aria-label="Anchor link for: resources" data-anchorjs-icon="" style="opacity: 1; font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; padding-left: 0....
• Error: Anchor element found with a valid href attribute, but no link content has been supplied.
  • WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
  • #sites-tutorials > a
  • <a class="anchorjs-link " href="#sites-tutorials" aria-label="Anchor link for: sites tutorials" data-anchorjs-icon="" style="opacity: 1; font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; padd...
• Error: Anchor element found with a valid href attribute, but no link content has been supplied.
  • WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
  • #tools > a
  • <a class="anchorjs-link " href="#tools" aria-label="Anchor link for: tools" data-anchorjs-icon="" style="opacity: 1; font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; padding-left: 0.375em;">...
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(1) > a:nth-child(1)
  • <a href="https://18f.gsa.gov">18F</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(1) > a:nth-child(2)
  • <a href="https://github.com/18F/accessib...">https://github.com/18F/accessibility</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(1)
  • <a href="https://github.com/18F/pages/">18F Pages</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(2)
  • <a href="https://github.com/18F/guides-template/">18F Guides theme</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(3)
  • <a href="https://github.com/cfpb/docter/">DOCter</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(4)
  • <a href="http://cfpb.github.io/">CFPB</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(3) > a:nth-child(1)
  • <a href="https://github.com/18F/accessibility/edit/18f-pages/index.md">Edit this page</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(3) > a:nth-child(2)
  • <a href="https://github.com/18F/accessibility/issues">file an issue</a>

Summary:

• 12 Errors

Results for google.com:

• Error: Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.
  • WCAG2AA.Principle1.Guideline1_1.1_1_1.H37
  • #pmocntr2 > table > tbody > tr:nth-child(2) > td:nth-child(1) > img
  • <img src="/images/icons/product/chrome-48.png">

Summary:

• 1 Errors

<select> clarifications for forms page

Continuing the convo from #46 on the <select> element here:

It looks like the CFPB HMDA tool does <select> accessibility like so (code inspect of the dropdown on the left):

It looks like they've made two versions of the dropdown, one using <select> that they've hidden with display: none (see the styles in the screenshot), and another built out of standard HTML elements right below it.

But -- this doesn't seem right because display:none also hides its contents from screen readers. I would like to use their solution for my work if it is indeed 508/AA, but this does not inspire confidence.

Thoughts? @nickbristow

/cc @shawnbot @andrewmaier

Skipping Heading Levels

While looking at your accessibility guide, I noticed that you have two heading level one (h1) on a page, and then the next is a heading level three (h3). Why not make the second heading level one(h1) which is the first heading of the main content section a heading level two (h2), so you don't skip a level,

On your headers page ( https://pages.18f.gov/accessibility/headers/ ) you talk about keeping headings in the proper order.

This issue seems to be on all the pages I looked in your accessibility guide.

508 Issues from pa11y-rails

Results can be recreated using HTML_CodeSniffer

Results for https://pages.18f.gov/accessibility/

• error This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
• WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(3) > a:nth-child(1)
  • Edit this page
    • error This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
    • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
    • html > body > div > footer > div > p:nth-child(2) > a:nth-child(4)
    • CFPB
    • error This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
    • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
    • html > body > div > footer > div > p:nth-child(2) > a:nth-child(3)
    • DOCter
    • error This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
    • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
    • html > body > div > footer > div > p:nth-child(2) > a:nth-child(2)
    • 18F Guides theme
    • error This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
    • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
    • html > body > div > footer > div > p:nth-child(2) > a:nth-child(1)
    • 18F Pages
    • error This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
    • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
    • html > body > div > footer > div > p:nth-child(1) > a:nth-child(2)
    • https://github.com/18F/accessibility
    • error This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
    • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
    • html > body > div > footer > div > p:nth-child(1) > a:nth-child(1)
    • 18F
    • error Anchor element found with a valid href attribute, but no link content has been supplied.
    • WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
    • #tools > a
    • ...
    • error Anchor element found with a valid href attribute, but no link content has been supplied.
    • WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
    • #sites-tutorials > a
    • <a class="anchorjs-link " href="#sites-tutorials" aria-label="Anchor link for: sites tutorials" data-anchorjs-icon="" style="opacity: 1; font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; padd...
    • error Anchor element found with a valid href attribute, but no link content has been supplied.
    • WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
    • #resources > a
    • <a class="anchorjs-link " href="#resources" aria-label="Anchor link for: resources" data-anchorjs-icon="" style="opacity: 1; font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; padding-left: 0....
    • error This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.3:1. Recommendation: change text colour to #0476d2.
    • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
    • html > body > div > a
    • Skip to Main Content
    • error This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
    • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
    • html > body > div > footer > div > p:nth-child(3) > a:nth-child(2)
    • file an issue

Use HTML syntax highlighting

The HTML examples would be easier to use if you qualified the fenced code blocks with the html language, e.g.:

    ```html
    <img alt="this is an image">
    ```

which produces syntax-highlighted code, rather than that all-red stuff:

<img alt="this is an image">

You'll need to include a syntax highlighting stylesheet too. I can help you with that.

508 Issues from pa11y-rails

Welcome to Pa11y

Results for https://pages.18f.gov/accessibility/:

• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.3:1. Recommendation: change text colour to #0476d2.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > a
  • <a class="skip-link visuallyhidden focusable" href="#main">Skip to Main Content</a>
• Error: Anchor element found with a valid href attribute, but no link content has been supplied.
  • WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
  • #resources > a
  • <a class="anchorjs-link " href="#resources" aria-label="Anchor link for: resources" data-anchorjs-icon="" style="opacity: 1; font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; padding-left: 0....
• Error: Anchor element found with a valid href attribute, but no link content has been supplied.
  • WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
  • #sites-tutorials > a
  • <a class="anchorjs-link " href="#sites-tutorials" aria-label="Anchor link for: sites tutorials" data-anchorjs-icon="" style="opacity: 1; font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; padd...
• Error: Anchor element found with a valid href attribute, but no link content has been supplied.
  • WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
  • #tools > a
  • <a class="anchorjs-link " href="#tools" aria-label="Anchor link for: tools" data-anchorjs-icon="" style="opacity: 1; font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; padding-left: 0.375em;">...
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(1) > a:nth-child(1)
  • <a href="https://18f.gsa.gov">18F</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(1) > a:nth-child(2)
  • <a href="https://github.com/18F/accessib...">https://github.com/18F/accessibility</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(1)
  • <a href="https://github.com/18F/pages/">18F Pages</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(2)
  • <a href="https://github.com/18F/guides-template/">18F Guides theme</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(3)
  • <a href="https://github.com/cfpb/docter/">DOCter</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(4)
  • <a href="http://cfpb.github.io/">CFPB</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(3) > a:nth-child(1)
  • <a href="https://github.com/18F/accessibility/edit/18f-pages/index.md">Edit this page</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(3) > a:nth-child(2)
  • <a href="https://github.com/18F/accessibility/issues">file an issue</a>

Summary:

• 12 Errors
• 0 Warnings
• 0 Notices

Welcome to Pa11y

Results for google.com:

• Error: Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.
  • WCAG2AA.Principle1.Guideline1_1.1_1_1.H37
  • #pmocntr2 > table > tbody > tr:nth-child(2) > td:nth-child(1) > img
  • <img src="/images/icons/product/chrome-48.png">

Summary:

• 1 Errors
• 0 Warnings
• 0 Notices

Update "CSS Dependence" Text

While reading over this page ( https://pages.18f.gov/accessibility/css/ ) I thought you could give a beet er example for step 3 than "Confusing elements shouldn't be present" and possibly have it say "Confusing elements shouldn't be present such as CSS, JavaScript, or other code, etc."

Plug-ins Text Udpate

On the plug-ins page you suggest in step 2 of testing the "Identify a link to download each plugin". You can have a link on each page that points to anther page that lists all the plug-ins your website uses, since you might not know what plug-in is need for each page.

URL - https://pages.18f.gov/accessibility/plugins/

508 Issues from pa11y-rails

Results can be recreated using HTML_CodeSniffer

Results for https://pages.18f.gov/accessibility/* error This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.

* WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
* html > body > div > footer > div > p:nth-child(3) > a:nth-child(1)
* <a href="https://github.com/18F/accessibility/edit/18f-pages/index.md">Edit this page</a>

* __error__ This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6. 
* WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
* html > body > div > footer > div > p:nth-child(2) > a:nth-child(4)
* <a href="http://cfpb.github.io/">CFPB</a>

* __error__ This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6. 
* WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
* html > body > div > footer > div > p:nth-child(2) > a:nth-child(3)
* <a href="https://github.com/cfpb/docter/">DOCter</a>

* __error__ This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6. 
* WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
* html > body > div > footer > div > p:nth-child(2) > a:nth-child(2)
* <a href="https://github.com/18F/guides-template/">18F Guides theme</a>

* __error__ This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6. 
* WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
* html > body > div > footer > div > p:nth-child(2) > a:nth-child(1)
* <a href="https://github.com/18F/pages/">18F Pages</a>

* __error__ This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6. 
* WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
* html > body > div > footer > div > p:nth-child(1) > a:nth-child(2)
* <a href="https://github.com/18F/accessib...">https://github.com/18F/accessibility</a>

* __error__ This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6. 
* WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
* html > body > div > footer > div > p:nth-child(1) > a:nth-child(1)
* <a href="https://18f.gsa.gov">18F</a>

* __error__ Anchor element found with a valid href attribute, but no link content has been supplied. 
* WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
* #tools > a
* <a class="anchorjs-link " href="#tools" aria-label="Anchor link for: tools" data-anchorjs-icon="" style="opacity: 1; font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; padding-left: 0.375em;">...

* __error__ Anchor element found with a valid href attribute, but no link content has been supplied. 
* WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
* #sites-tutorials > a
* <a class="anchorjs-link " href="#sites-tutorials" aria-label="Anchor link for: sites tutorials" data-anchorjs-icon="" style="opacity: 1; font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; padd...

* __error__ Anchor element found with a valid href attribute, but no link content has been supplied. 
* WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
* #resources > a
* <a class="anchorjs-link " href="#resources" aria-label="Anchor link for: resources" data-anchorjs-icon="" style="opacity: 1; font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; padding-left: 0....

* __error__ This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.3:1. Recommendation: change text colour to #0476d2. 
* WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
* html > body > div > a
* <a class="skip-link visuallyhidden focusable" href="#main">Skip to Main Content</a>

* __error__ This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6. 
* WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
* html > body > div > footer > div > p:nth-child(3) > a:nth-child(2)
* <a href="https://github.com/18F/accessibility/issues">file an issue</a>

Use HTML5 void (self-closing) tags

Since we are (or should be, at least) using HTML5 everywhere, we should ditch the XML-style self-closing tags, e.g.:

<img alt="this is an image"/>

by removing the trailing /. See the spec for more info.

New Policy

https://insite.gsa.gov/portal/content/669274

Set up google analytics.

508 Issues from pa11y-rails

Results can be recreated using HTML_CodeSniffer

Results for https://pages.18f.gov/accessibility/

• error This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
• WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
• html > body > div > footer > div > p:nth-child(3) > a:nth-child(1)
• Edit this page
• error This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
• WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
• html > body > div > footer > div > p:nth-child(2) > a:nth-child(4)
• CFPB
• error This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
• WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
• html > body > div > footer > div > p:nth-child(2) > a:nth-child(3)
• DOCter
• error This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
• WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
• html > body > div > footer > div > p:nth-child(2) > a:nth-child(2)
• 18F Guides theme
• error This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
• WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
• html > body > div > footer > div > p:nth-child(2) > a:nth-child(1)
• 18F Pages
• error This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
• WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
• html > body > div > footer > div > p:nth-child(1) > a:nth-child(2)
• https://github.com/18F/accessibility
• error This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
• WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
• html > body > div > footer > div > p:nth-child(1) > a:nth-child(1)
• 18F
• error Anchor element found with a valid href attribute, but no link content has been supplied.
• WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
• #tools > a
• ...
• error Anchor element found with a valid href attribute, but no link content has been supplied.
• WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
• #sites-tutorials > a
• <a class="anchorjs-link " href="#sites-tutorials" aria-label="Anchor link for: sites tutorials" data-anchorjs-icon="" style="opacity: 1; font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; padd...
• error Anchor element found with a valid href attribute, but no link content has been supplied.
• WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
• #resources > a
• <a class="anchorjs-link " href="#resources" aria-label="Anchor link for: resources" data-anchorjs-icon="" style="opacity: 1; font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; padding-left: 0....
• error This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.3:1. Recommendation: change text colour to #0476d2.
• WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
• html > body > div > a
• Skip to Main Content
• error This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
• WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
• html > body > div > footer > div > p:nth-child(3) > a:nth-child(2)
• file an issue

508 Issues from pa11y-rails

Results for https://pages.18f.gov/accessibility/:

• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.3:1. Recommendation: change text colour to #0476d2.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > a
  • <a class="skip-link visuallyhidden focusable" href="#main">Skip to Main Content</a>
• Error: Anchor element found with a valid href attribute, but no link content has been supplied.
  • WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
  • #resources > a
  • <a class="anchorjs-link " href="#resources" aria-label="Anchor link for: resources" data-anchorjs-icon="" style="opacity: 1; font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; padding-left: 0....
• Error: Anchor element found with a valid href attribute, but no link content has been supplied.
  • WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
  • #sites-tutorials > a
  • <a class="anchorjs-link " href="#sites-tutorials" aria-label="Anchor link for: sites tutorials" data-anchorjs-icon="" style="opacity: 1; font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; padd...
• Error: Anchor element found with a valid href attribute, but no link content has been supplied.
  • WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
  • #tools > a
  • <a class="anchorjs-link " href="#tools" aria-label="Anchor link for: tools" data-anchorjs-icon="" style="opacity: 1; font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; padding-left: 0.375em;">...
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(1) > a:nth-child(1)
  • <a href="https://18f.gsa.gov">18F</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(1) > a:nth-child(2)
  • <a href="https://github.com/18F/accessib...">https://github.com/18F/accessibility</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(1)
  • <a href="https://github.com/18F/pages/">18F Pages</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(2)
  • <a href="https://github.com/18F/guides-template/">18F Guides theme</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(3)
  • <a href="https://github.com/cfpb/docter/">DOCter</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(4)
  • <a href="http://cfpb.github.io/">CFPB</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(3) > a:nth-child(1)
  • <a href="https://github.com/18F/accessibility/edit/18f-pages/index.md">Edit this page</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(3) > a:nth-child(2)
  • <a href="https://github.com/18F/accessibility/issues">file an issue</a>

Summary:

• 12 Errors

Results for google.com:

• Error: Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.
  • WCAG2AA.Principle1.Guideline1_1.1_1_1.H37
  • #pmocntr2 > table > tbody > tr:nth-child(2) > td:nth-child(1) > img
  • <img src="/images/icons/product/chrome-48.png">

Summary:

• 1 Errors

508 Issues from pa11y-rails

Results can be recreated using HTML_CodeSniffer

Results for pages.18f.gov/accessibility:

• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.3:1. Recommendation: change text colour to #0476d2.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > a
  • <a class="skip-link visuallyhidden focusable" href="#main">Skip to Main Content</a>
• Error: Anchor element found with a valid href attribute, but no link content has been supplied.
  • WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
  • #resources > a
  • <a class="anchorjs-link " href="#resources" aria-label="Anchor link for: resources" data-anchorjs-icon="" style="opacity: 1; font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; padding-left: 0....
• Error: Anchor element found with a valid href attribute, but no link content has been supplied.
  • WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
  • #sites-tutorials > a
  • <a class="anchorjs-link " href="#sites-tutorials" aria-label="Anchor link for: sites tutorials" data-anchorjs-icon="" style="opacity: 1; font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; padd...
• Error: Anchor element found with a valid href attribute, but no link content has been supplied.
  • WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
  • #tools > a
  • <a class="anchorjs-link " href="#tools" aria-label="Anchor link for: tools" data-anchorjs-icon="" style="opacity: 1; font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; padding-left: 0.375em;">...
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(1) > a:nth-child(1)
  • <a href="https://18f.gsa.gov">18F</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(1) > a:nth-child(2)
  • <a href="https://github.com/18F/accessib...">https://github.com/18F/accessibility</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(1)
  • <a href="https://github.com/18F/pages/">18F Pages</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(2)
  • <a href="https://github.com/18F/guides-template/">18F Guides theme</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(3)
  • <a href="https://github.com/cfpb/docter/">DOCter</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(4)
  • <a href="http://cfpb.github.io/">CFPB</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(3) > a:nth-child(1)
  • <a href="https://github.com/18F/accessibility/edit/18f-pages/index.md">Edit this page</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(3) > a:nth-child(2)
  • <a href="https://github.com/18F/accessibility/issues">file an issue</a>

Summary:

• 12 Errors

Fix contrast on "Home" link

Include instructions for running locally

cc @nickbristow

Imported scss file "guides_style_18f" is not in the css folder

I was hoping to contribute to the repo—particularly to fix issue #22 but the relevant imported SCSS file "guides_style_18f" (in "styles.scss") is not included in the CSS folder. Apologies if this is intentional or I'm asking a daft question.

508 Issues from pa11y-rails

Results can be recreated using HTML_CodeSniffer

Results for https://pages.18f.gov/accessibility/

• Error This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
• WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
• html > body > div > footer > div > p:nth-child(3) > a:nth-child(1)
• Edit this page
• Error This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
• WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
• html > body > div > footer > div > p:nth-child(2) > a:nth-child(4)
• CFPB
• Error This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
• WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
• html > body > div > footer > div > p:nth-child(2) > a:nth-child(3)
• DOCter
• Error This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
• WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
• html > body > div > footer > div > p:nth-child(2) > a:nth-child(2)
• 18F Guides theme
• Error This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
• WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
• html > body > div > footer > div > p:nth-child(2) > a:nth-child(1)
• 18F Pages
• Error This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
• WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
• html > body > div > footer > div > p:nth-child(1) > a:nth-child(2)
• https://github.com/18F/accessibility
• Error This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
• WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
• html > body > div > footer > div > p:nth-child(1) > a:nth-child(1)
• 18F
• Error Anchor element found with a valid href attribute, but no link content has been supplied.
• WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
• #tools > a
• ...
• Error Anchor element found with a valid href attribute, but no link content has been supplied.
• WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
• #sites-tutorials > a
• <a class="anchorjs-link " href="#sites-tutorials" aria-label="Anchor link for: sites tutorials" data-anchorjs-icon="" style="opacity: 1; font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; padd...
• Error Anchor element found with a valid href attribute, but no link content has been supplied.
• WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
• #resources > a
• <a class="anchorjs-link " href="#resources" aria-label="Anchor link for: resources" data-anchorjs-icon="" style="opacity: 1; font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; padding-left: 0....
• Error This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.3:1. Recommendation: change text colour to #0476d2.
• WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
• html > body > div > a
• Skip to Main Content
• Error This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
• WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
• html > body > div > footer > div > p:nth-child(3) > a:nth-child(2)
• file an issue

Registration Updates

As of 03/19/15, there are 66 registrants. Updated invitee list with RSVP. Sent names and e-mails of registrants to team.

508 Issues from pa11y-rails

Welcome to Pa11y

Results for https://pages.18f.gov/accessibility/:

• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.3:1. Recommendation: change text colour to #0476d2.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > a
  • <a class="skip-link visuallyhidden focusable" href="#main">Skip to Main Content</a>
• Error: Anchor element found with a valid href attribute, but no link content has been supplied.
  • WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
  • #resources > a
  • <a class="anchorjs-link " href="#resources" aria-label="Anchor link for: resources" data-anchorjs-icon="" style="opacity: 1; font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; padding-left: 0....
• Error: Anchor element found with a valid href attribute, but no link content has been supplied.
  • WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
  • #sites-tutorials > a
  • <a class="anchorjs-link " href="#sites-tutorials" aria-label="Anchor link for: sites tutorials" data-anchorjs-icon="" style="opacity: 1; font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; padd...
• Error: Anchor element found with a valid href attribute, but no link content has been supplied.
  • WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
  • #tools > a
  • <a class="anchorjs-link " href="#tools" aria-label="Anchor link for: tools" data-anchorjs-icon="" style="opacity: 1; font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; padding-left: 0.375em;">...
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(1) > a:nth-child(1)
  • <a href="https://18f.gsa.gov">18F</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(1) > a:nth-child(2)
  • <a href="https://github.com/18F/accessib...">https://github.com/18F/accessibility</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(1)
  • <a href="https://github.com/18F/pages/">18F Pages</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(2)
  • <a href="https://github.com/18F/guides-template/">18F Guides theme</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(3)
  • <a href="https://github.com/cfpb/docter/">DOCter</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(4)
  • <a href="http://cfpb.github.io/">CFPB</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(3) > a:nth-child(1)
  • <a href="https://github.com/18F/accessibility/edit/18f-pages/index.md">Edit this page</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(3) > a:nth-child(2)
  • <a href="https://github.com/18F/accessibility/issues">file an issue</a>

Summary:

• 12 Errors
• 0 Warnings
• 0 Notices

Incorrect Accessibility Guide Information about Headings/Headers

While reading the 18F Accessibility Guide, I noticed that you have a section on HEADERs, which I think you might have meant to be HEADINGs.

See the following URLs - https://pages.18f.gov/accessibility/headers/ along with the Checklist page - https://pages.18f.gov/accessibility/checklist/.

What HEADERs mean to me would be represented by the HTML5 HEADER element on this page from the HTML5 Doctor - http://html5doctor.com/the-header-element/ that are a section of an HTML page that is at the beginning of the page and would typically, contain website logo/URL, other information about the website, possibly navigation, etc.

You are referring to HEADERs as HEADINGs in your Accessibility Guide, but the content in the pages are about HEADINGs such as h1, h2, h3, etc.

WCAG contrast errors

508 Issues from pa11y-rails

Results for https://pages.18f.gov/accessibility/:

• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.3:1. Recommendation: change text colour to #0476d2.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > a
  • <a class="skip-link visuallyhidden focusable" href="#main">Skip to Main Content</a>
• Error: Anchor element found with a valid href attribute, but no link content has been supplied.
  • WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
  • #resources > a
  • <a class="anchorjs-link " href="#resources" aria-label="Anchor link for: resources" data-anchorjs-icon="" style="opacity: 1; font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; padding-left: 0....
• Error: Anchor element found with a valid href attribute, but no link content has been supplied.
  • WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
  • #sites-tutorials > a
  • <a class="anchorjs-link " href="#sites-tutorials" aria-label="Anchor link for: sites tutorials" data-anchorjs-icon="" style="opacity: 1; font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; padd...
• Error: Anchor element found with a valid href attribute, but no link content has been supplied.
  • WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
  • #tools > a
  • <a class="anchorjs-link " href="#tools" aria-label="Anchor link for: tools" data-anchorjs-icon="" style="opacity: 1; font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; padding-left: 0.375em;">...
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(1) > a:nth-child(1)
  • <a href="https://18f.gsa.gov">18F</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(1) > a:nth-child(2)
  • <a href="https://github.com/18F/accessib...">https://github.com/18F/accessibility</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(1)
  • <a href="https://github.com/18F/pages/">18F Pages</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(2)
  • <a href="https://github.com/18F/guides-template/">18F Guides theme</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(3)
  • <a href="https://github.com/cfpb/docter/">DOCter</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(4)
  • <a href="http://cfpb.github.io/">CFPB</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(3) > a:nth-child(1)
  • <a href="https://github.com/18F/accessibility/edit/18f-pages/index.md">Edit this page</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(3) > a:nth-child(2)
  • <a href="https://github.com/18F/accessibility/issues">file an issue</a>

Summary:

• 12 Errors

Results for google.com:

• Error: Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.
  • WCAG2AA.Principle1.Guideline1_1.1_1_1.H37
  • #pmocntr2 > table > tbody > tr:nth-child(2) > td:nth-child(1) > img
  • <img src="/images/hpp/ic_wahlberg_product_core_48.png8.png">

Summary:

• 1 Errors

Provide Alan Eventbrite Access

Completed.

Improper TABLE Heading Code

While reading the 18F Accessibility Guide, I noticed that you are making TABLE HEADINGs for the peoples names but have them as TD (table data) instead of TH (table heading) on the TABLEs page - https://pages.18f.gov/accessibility/tables/

I have always seen these done as TH, which might cause trouble is using CSS to display how the TABLE cell should look.

A great article on building accessible TABLEs is from Roger Johansson - http://www.456bereastreet.com/archive/200410/bring_on_the_tables/

Look for this information starting after this text - "Linking headers to data: the scope, id and headers attributes" to see what I'm talking about.

Also shouldn't TABLEs have both a CAPTION and a SUMMARY statement?

Forms page clarifications and improvements

@meiqimichelle and I have some specific questions regarding forms in one of the projects we're working on, but I think they're ones that could be answered in this guide:

• does every <fieldset> really need a <legend>, and if so, what is the best way to hide it? Legends are notoriously difficult to style, and it would be nice to offer people an alternative (e.g., an <h*> either in addition to or instead of <legend>).
• is it generally good or bad practice to wrap inputs in <label> with their text or not?
• can we have a specific example with checkboxes?
• re: <select> elements, what is the best practice for an empty first option (value="")? Does it need text, or does the input need a title attribute? Or would a <label> also suffice?

Re: checkboxes and radio buttons, I have a thing for using <label> because it increases the hit area of the controls (clicking on the label clicks the corresponding input). Can we standardize on a method for this that meets 508 requirements?

As a semantic markup stickler I also find the &nbsp;<br> distracting. Can we simplify the markup and just wrap those "lines" in <div> elements instead so that consumers of this information understand we're not suggesting they use   and <br> for accessibility reasons?

508 Issues from pa11y-rails

Results can be recreated using HTML_CodeSniffer

Results for https://pages.18f.gov/accessibility/:

• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.3:1. Recommendation: change text colour to #0476d2.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > a
  • <a class="skip-link visuallyhidden focusable" href="#main">Skip to Main Content</a>
• Error: Anchor element found with a valid href attribute, but no link content has been supplied.
  • WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
  • #resources > a
  • <a class="anchorjs-link " href="#resources" aria-label="Anchor link for: resources" data-anchorjs-icon="" style="opacity: 1; font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; padding-left: 0....
• Error: Anchor element found with a valid href attribute, but no link content has been supplied.
  • WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
  • #sites-tutorials > a
  • <a class="anchorjs-link " href="#sites-tutorials" aria-label="Anchor link for: sites tutorials" data-anchorjs-icon="" style="opacity: 1; font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; padd...
• Error: Anchor element found with a valid href attribute, but no link content has been supplied.
  • WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
  • #tools > a
  • <a class="anchorjs-link " href="#tools" aria-label="Anchor link for: tools" data-anchorjs-icon="" style="opacity: 1; font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; padding-left: 0.375em;">...
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(1) > a:nth-child(1)
  • <a href="https://18f.gsa.gov">18F</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(1) > a:nth-child(2)
  • <a href="https://github.com/18F/accessib...">https://github.com/18F/accessibility</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(1)
  • <a href="https://github.com/18F/pages/">18F Pages</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(2)
  • <a href="https://github.com/18F/guides-template/">18F Guides theme</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(3)
  • <a href="https://github.com/cfpb/docter/">DOCter</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(4)
  • <a href="http://cfpb.github.io/">CFPB</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(3) > a:nth-child(1)
  • <a href="https://github.com/18F/accessibility/edit/18f-pages/index.md">Edit this page</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(3) > a:nth-child(2)
  • <a href="https://github.com/18F/accessibility/issues">file an issue</a>

Summary:

• 12 Errors

Checking Links Text Change

You might want to add text to the issues under step 3 "Unique Links" to mention about the possible off-screen text. An example can be found on the Army's homepage ( http://army.mil/ ) where they visually have "Read more", but have a span that is put visually off-screen that say "about ARTICLE TITLE HERE".

URL - https://pages.18f.gov/accessibility/links/

So the text could read "Check for the title or ARIA attributes to provide context or additional off-screen text" instead of "Check for the title or ARIA attributes to provide context".

Also the word "attribues " is missing a "T"

Page Navigation Bewteen Sections

It would easier to have a previous and next navigation on your accessibility guide pages or maybe a link to the section before or after the one you are on. Otherwise a person using a keyboard has to tab back to your navigation or scroll up the longer pages to

We should delete the gh-pages branch and redirect to 18f-page branch

https://18f.github.io/accessibility/ still works and receives incoming links despite not being current

Visible Skip Navigation Link

Does a skip link need to be visible on the page or can it be made visible when a person tabs to it using a keyboard? See step 2 under skip navigation section.

URL - https://pages.18f.gov/accessibility/links/

508 Issues from pa11y-rails

Results can be recreated using HTML_CodeSniffer

Results for pages.18f.gov/accessibility:

• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.3:1. Recommendation: change text colour to #0476d2.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > a
  • <a class="skip-link visuallyhidden focusable" href="#main">Skip to Main Content</a>
• Error: Anchor element found with a valid href attribute, but no link content has been supplied.
  • WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
  • #resources > a
  • <a class="anchorjs-link " href="#resources" aria-label="Anchor link for: resources" data-anchorjs-icon="" style="opacity: 1; font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; padding-left: 0....
• Error: Anchor element found with a valid href attribute, but no link content has been supplied.
  • WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
  • #sites-tutorials > a
  • <a class="anchorjs-link " href="#sites-tutorials" aria-label="Anchor link for: sites tutorials" data-anchorjs-icon="" style="opacity: 1; font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; padd...
• Error: Anchor element found with a valid href attribute, but no link content has been supplied.
  • WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
  • #tools > a
  • <a class="anchorjs-link " href="#tools" aria-label="Anchor link for: tools" data-anchorjs-icon="" style="opacity: 1; font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; padding-left: 0.375em;">...
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(1) > a:nth-child(1)
  • <a href="https://18f.gsa.gov">18F</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(1) > a:nth-child(2)
  • <a href="https://github.com/18F/accessib...">https://github.com/18F/accessibility</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(1)
  • <a href="https://github.com/18F/pages/">18F Pages</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(2)
  • <a href="https://github.com/18F/guides-template/">18F Guides theme</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(3)
  • <a href="https://github.com/cfpb/docter/">DOCter</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(4)
  • <a href="http://cfpb.github.io/">CFPB</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(3) > a:nth-child(1)
  • <a href="https://github.com/18F/accessibility/edit/18f-pages/index.md">Edit this page</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(3) > a:nth-child(2)
  • <a href="https://github.com/18F/accessibility/issues">file an issue</a>

Summary:

• 12 Errors

Draft Sample Tickler Invite

Sent sample language to the team. Purpose to increase registration.

508 Issues from pa11y-rails

Results can be recreated using HTML_CodeSniffer

Results for https://pages.18f.gov/accessibility/:

• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.3:1. Recommendation: change text colour to #0476d2.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > a
  • <a class="skip-link visuallyhidden focusable" href="#main">Skip to Main Content</a>
• Error: Anchor element found with a valid href attribute, but no link content has been supplied.
  • WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
  • #resources > a
  • <a class="anchorjs-link " href="#resources" aria-label="Anchor link for: resources" data-anchorjs-icon="" style="opacity: 1; font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; padding-left: 0....
• Error: Anchor element found with a valid href attribute, but no link content has been supplied.
  • WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
  • #sites-tutorials > a
  • <a class="anchorjs-link " href="#sites-tutorials" aria-label="Anchor link for: sites tutorials" data-anchorjs-icon="" style="opacity: 1; font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; padd...
• Error: Anchor element found with a valid href attribute, but no link content has been supplied.
  • WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
  • #tools > a
  • <a class="anchorjs-link " href="#tools" aria-label="Anchor link for: tools" data-anchorjs-icon="" style="opacity: 1; font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; padding-left: 0.375em;">...
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(1) > a:nth-child(1)
  • <a href="https://18f.gsa.gov">18F</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(1) > a:nth-child(2)
  • <a href="https://github.com/18F/accessib...">https://github.com/18F/accessibility</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(1)
  • <a href="https://github.com/18F/pages/">18F Pages</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(2)
  • <a href="https://github.com/18F/guides-template/">18F Guides theme</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(3)
  • <a href="https://github.com/cfpb/docter/">DOCter</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(4)
  • <a href="http://cfpb.github.io/">CFPB</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(3) > a:nth-child(1)
  • <a href="https://github.com/18F/accessibility/edit/18f-pages/index.md">Edit this page</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(3) > a:nth-child(2)
  • <a href="https://github.com/18F/accessibility/issues">file an issue</a>

Summary:

• 12 Errors

Interpreters

Requested four interpreters. Awaiting a response.

Craft MOU for Co-Sponsorship

Draft MOU for OGC review. Draft provided to Jameson.

Eventbrite

Eventbrite for Accessibility Hackathon complete. Pending review by Jackie and Ori. Upon approval will release. Please provide list of targeted invitees' e-mail addresses.

508 Issues from pa11y-rails

Results can be recreated using HTML_CodeSniffer

Results for https://pages.18f.gov/accessibility/

• Error This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(3) > a:nth-child(1)
  • <a href="https://github.com/18F/accessibility/edit/18f-pages/index.md">Edit this page</a>
• Error This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(4)
  • <a href="http://cfpb.github.io/">CFPB</a>
• Error This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(3)
  • <a href="https://github.com/cfpb/docter/">DOCter</a>
• Error This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(2)
  • <a href="https://github.com/18F/guides-template/">18F Guides theme</a>
• Error This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(1)
  • <a href="https://github.com/18F/pages/">18F Pages</a>
• Error This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(1) > a:nth-child(2)
  • <a href="https://github.com/18F/accessib...">https://github.com/18F/accessibility</a>
• Error This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(1) > a:nth-child(1)
  • <a href="https://18f.gsa.gov">18F</a>
• Error Anchor element found with a valid href attribute, but no link content has been supplied.
  • WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
  • #tools > a
  • <a class="anchorjs-link " href="#tools" aria-label="Anchor link for: tools" data-anchorjs-icon="" style="opacity: 1; font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; padding-left: 0.375em;">...
• Error Anchor element found with a valid href attribute, but no link content has been supplied.
  • WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
  • #sites-tutorials > a
  • <a class="anchorjs-link " href="#sites-tutorials" aria-label="Anchor link for: sites tutorials" data-anchorjs-icon="" style="opacity: 1; font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; padd...
• Error Anchor element found with a valid href attribute, but no link content has been supplied.
  • WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
  • #resources > a
  • <a class="anchorjs-link " href="#resources" aria-label="Anchor link for: resources" data-anchorjs-icon="" style="opacity: 1; font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; padding-left: 0....
• Error This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.3:1. Recommendation: change text colour to #0476d2.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > a
  • <a class="skip-link visuallyhidden focusable" href="#main">Skip to Main Content</a>
• Error This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(3) > a:nth-child(2)
  • <a href="https://github.com/18F/accessibility/issues">file an issue</a>

508 Issues from pa11y-rails

Results for https://pages.18f.gov/accessibility/:

• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.3:1. Recommendation: change text colour to #0476d2.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > a
  • <a class="skip-link visuallyhidden focusable" href="#main">Skip to Main Content</a>
• Error: Anchor element found with a valid href attribute, but no link content has been supplied.
  • WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
  • #resources > a
  • <a class="anchorjs-link " href="#resources" aria-label="Anchor link for: resources" data-anchorjs-icon="" style="opacity: 1; font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; padding-left: 0....
• Error: Anchor element found with a valid href attribute, but no link content has been supplied.
  • WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
  • #sites-tutorials > a
  • <a class="anchorjs-link " href="#sites-tutorials" aria-label="Anchor link for: sites tutorials" data-anchorjs-icon="" style="opacity: 1; font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; padd...
• Error: Anchor element found with a valid href attribute, but no link content has been supplied.
  • WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
  • #tools > a
  • <a class="anchorjs-link " href="#tools" aria-label="Anchor link for: tools" data-anchorjs-icon="" style="opacity: 1; font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; padding-left: 0.375em;">...
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(1) > a:nth-child(1)
  • <a href="https://18f.gsa.gov">18F</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(1) > a:nth-child(2)
  • <a href="https://github.com/18F/accessib...">https://github.com/18F/accessibility</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(1)
  • <a href="https://github.com/18F/pages/">18F Pages</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(2)
  • <a href="https://github.com/18F/guides-template/">18F Guides theme</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(3)
  • <a href="https://github.com/cfpb/docter/">DOCter</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(2) > a:nth-child(4)
  • <a href="http://cfpb.github.io/">CFPB</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(3) > a:nth-child(1)
  • <a href="https://github.com/18F/accessibility/edit/18f-pages/index.md">Edit this page</a>
• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.36:1. Recommendation: change background to #f5f6f6.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div > footer > div > p:nth-child(3) > a:nth-child(2)
  • <a href="https://github.com/18F/accessibility/issues">file an issue</a>

Summary:

• 12 Errors

Results for google.com:

• Error: Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.
  • WCAG2AA.Principle1.Guideline1_1.1_1_1.H37
  • #pmocntr2 > table > tbody > tr:nth-child(2) > td:nth-child(1) > img
  • <img src="/images/icons/product/chrome-48.png">

Summary:

• 1 Errors