18f/accessibility

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

accessibility's Issues

Interpreters

Requested four interpreters. Awaiting a response.

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"

Include instructions for running locally

cc @nickbristow

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.

New Policy

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

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

Provide Alan Eventbrite Access

Completed.

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

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?

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 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 can be recreated using HTML_CodeSniffer

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

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 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

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.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

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.

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

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

Accessibility Hackathon Sign Design

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

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.

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

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."

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.

Craft MOU for Co-Sponsorship

Draft MOU for OGC review. Draft provided to Jameson.

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

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?

Fix contrast on "Home" link

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.

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 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>

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"?

Draft Sample Tickler Invite

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

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/

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

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

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

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

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.

<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

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/

WCAG contrast errors

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