18f.gsa.gov
18f.gsa.gov copied to clipboard
18F
Third-party script embeds cause automated accessibility scan failures.
Now that we’re nearing completion for automated accessibility scans (#3605), a few errors have popped up due to pages which are loading scripts from third-party domains and modifying the site.
Twitter embeds use <iframe> elements which do not have a title attribute.
There appears to be a race condition, sometimes the title attribute is added and sometimes it is not.
Errors in http://localhost:4000/site/2016/05/10/gsa-invests-in-18fs-work-with-new-service/:
• Iframe element requires a non-empty title attribute that identifies the
frame.
(#rufous-sandbox)
<iframe id="rufous-sandbox" scrolling="no" frameborder="0"
allowtransparency="true" allowfullscreen="true" style="position: absolute;
visibility: hidden; display: none; width: 0px; height: 0px; padding: 0px;
border: none;"></iframe>
Pages which use embedded tweets:
- Blog: Great community turnout for Midas open source hack night from December 10, 2014.
- Blog: Open source for good government from January 16, 2015.
- Blog: Does 18F pass the Bechdel test for tech? from March 17, 2015.
- Blog: Making Twitter images accessible from March 24, 2015.
- Blog: How to welcome new coders to a civic hackathon from April 3, 2015.
- Blog: The digital services flash mob from May 5, 2015.
- Blog: 67 million more Federal Election Commission records at your fingertips from July 15, 2015.
- Blog: Show me the money: 18F works with Treasury on #TheNew10 from July 17, 2015.
- Blog: You shared, we listened — updates to the 18F Content Guide from October 8, 2015.
- Blog: How the City of Boston is using GSA’s CALC tool from November 10, 2015.
- Blog: GSA invests in 18F's work with new service from May 10, 2016.
- Blog: Why we’re moving 18f.gsa.gov to Federalist from May 18, 2016.
- Blog: Building better by building together with the Federal Election Commission from June 7, 2016.
- Our example blog post page.
Instagram embeds use <iframe> elements which do not have a title attribute.
Instagram embeds do not have title attributes.
Errors in http://localhost:4000/site/2016/01/21/what-we-can-learn-from-the-interiors-social-feeds/:
• Iframe element requires a non-empty title attribute that identifies the
frame.
(#instagram-embed-0)
<iframe class="instagram-media instagram-media-rendered"
id="instagram-embed-0"
src="[https://www.instagram.com/p/_-fx45Au4w/embed/?cr=1&v=6&wp=617&rd=http%3A%2F%2Flocalhost%3A4000&rp=%2Fsite%2F2016%2F01%2F21%2Fwhat-we-can-learn-from-t](https://www.instagram.com/p/_-fx45Au4w/embed/?cr=1&v=6&wp=617&rd=http%3A%2F%2Flocalhost%3A4000&rp=%2Fsite%2F2016%2F01%2F21%2Fwhat-we-can-learn-from-t)...
Pages which use embedded Instagram posts:
- Blog: What we can learn from the Interior's social feeds from January 21, 2016.
Speakerdeck embeds use <iframe> elements which do not have a title attribute.
Speakerdeck embeds do not have title attributes.
Errors in http://localhost:4000/site/2014/05/14/hacking-bureaucracy-improving-hiring-and-software/:
• Iframe element requires a non-empty title attribute that identifies the
frame.
(#talk_frame_99582)
<iframe id="talk_frame_99582" class="speakerdeck-iframe"
src="//speakerdeck.com/player/5604c360b9ea01313bb0227341532047" width="710"
height="532" style="aspect-ratio:710/532; border:0; padding:0; margin:0;
background:transparent;" frameborder="0" all...
Pages which use embedded Speakerdeck decks:
Netlify CMS fails color contrast checks.
There are additional accessibility issues documented in https://github.com/netlify/netlify-cms/issues/1333.
Errors in http://localhost:4000/site/admin/#/:
• A title should be provided for the document, using a non-empty title element
in the head section.
(html > head)
<head><style type="text/css"> .upload...</head>
• This element has insufficient contrast at this conformance level. Expected a
contrast ratio of at least 4.5:1, but text in this element has a contrast
ratio of 3.41:1. Recommendation: change text colour to #00050e.
(html > body)
<body>--- <meta charset="utf-8...</body>
Pages which use Netlify CMS:
References:
- The 18F Accessibility Guide which states that title attributes are required for iframes.
Expected Behavior
All pages on our site should pass automated accessibility scans as well as manual testing.
Actual Behavior
Pages are not passing automated accessibility scans.
There is a few angles worth considering when using third party script embeds:
- The data we are giving over to third party services, which may be employing user tracking for advertisement purposes.
- The endorsement we may be making of a third party service or a person.
- The maintenance cost of updating references to third party content when they change, including if a user marks their tweets as protected.
- The access we are giving third party services to run scripts and modify content within our website.
Additional considerations:
- Some people browse with third party domains blocked. The content will be missing for them.
- The content may be deleted or may be changed in a variety of ways: the content author wishing to remove it; a malicious user defacing the content; a technological error on the part of the third party hosting the content, etc.
I'd propose updating the example blog post with a policy like:
If the content you want to embed is static (like a tweet or picture) and is either in the public domain or your use falls under fair use, take a screenshot. Use that. Ensure the alt text fully describes the content. Credit the content creator and include a descriptive link back to the original source. [example here]
If the content is interactive, include a descriptive link to the content and (optional) a preview screenshot. If you include a screenshot, ensure the alt text appropriately describes the image. [example here]
As for the existing violations, it would be good to fix them, but if nobody has bandwidth right now, I think it is more important to stop future accessibility issues from happening. The existing ones could be marked as false positives to silence the scanner.
I took the false-positive approach in https://github.com/18F/18f.gsa.gov/commit/f08ad520ef0d80a78e856ca60a04ace9a6d9d472 and excluded the pages with third-party related pa11y errors from pa11y scanning. I agree that "it is more important to stop future accessibility issues from happening".
The PR for this fix needs an Engineer to review.
To the future Engineer reviewing this: With @mgwalker rolling off DA Team, there is no active engineer owning this now. So if additional fixes are needed please make them yourself OR note those fixes here for a future engineer staffed to DA.
