While I don't claim any legal expertise in the ever-evolving WCAG requirements, some of our clients have received a "business alert" from an agency notifying them that "lawsuits are being filed regarding the Americans with Disabilities Act non-compliance of their websites". We've been using WCAG 2.0 level AA, but some of the recent notices are claiming violations of 2.1 guidelines which aren't currently required by US government agencies or Section 508. Apparently WCAG 2.1 may be currently required required by the European Union. The EU's compliance deadline for public sector websites is by Sep 23, 2020 (3 days from now), but my US clients aren't required to follow any EU mandates.
My business partner asked me if we could automatically generate aria-label attributes for <a> tags using the following rules:
Aria-Label Generation Rules
- Default =
aria-label="Link - opens in new window" - If attr('title') exists, use it.
- If text() is a plain text string, use the text.
- If tag contains an
imgtag with analtattribute, use the image'saltattribute.
We already perform many post-HTML generation optimizations using ColdFusion and Jsoup. Some of the optimizations include:
- Jsoup auto-corrects invalid HTML. (Valid HTML is critical for passing WCAG.)
- Add CSP rules to the HTTP header
- Inject
nonceattribute to safe/allowed script hosts - Enforce
formaction=selfrule on dedicated login pages - Report violations to internally hosted Taffy REST API
- Inject
- Add
dns-prefetchHTTP headers for all 3rd-party hosts - Remove
console.logfor public visitors (blog entry) - Rewrite shared resources paths to enable/disable CDN usage
- Auto-relocate inline CSS & JS scripts to
headtag - Relocate flagged JS scripts to bottom of
body(like GoogleAnalytics and FontAwesome) - Generate unique
altattributes for missingiframe&imgtags (another a11y requirement).
Usage
Pass a string containing a whole or partial HTML fragment. Pass a suffix string (optional):
// addAriaLabeltoHTML(HTML, suffix=" - opens in new window");
UpdatedHTML = addAriaLabeltoHTML(myHTML);
Input/Output Unit Test Results
<!-- <p>This is an <a href="/">HREF (default)</a> test.</p> -->
<p>This is an <a href="/">HREF (default)</a> test.</p>
<!-- <p><a href="/" target="_self">HREF with '_self' target</a></p> -->
<p><a href="/" target="_self">HREF with '_self' target</a></p>
<!-- <p><a href="/" target="_blank">anchor text test</a></p> -->
<p><a href="/" target="_blank" aria-label="anchor text test - opens in new window">anchor text test</a></p>
<!-- <p><a href="/" TARGET="_BLANK" title="My website">title test</a></p> -->
<p><a href="/" target="_BLANK" title="My website" aria-label="My website - opens in new window">title test</a></p>
<!-- <p><a href="/" target="_blank" alt="HTML & Entity">invalid alt + entity test</a></p> -->
<p><a href="/" target="_blank" alt="HTML & Entity" aria-label="invalid alt + entity test - opens in new window">invalid alt + entity test</a></p>
<!-- <p><a href="/" target="_blank">html <b>test</b></a></p>-->
<p><a href="/" target="_blank" aria-label="html test - opens in new window">html <b>test</b></a></p>
<!-- <p><a href="/" target="_blank"><img src="test.gif" width="50" alt="Img alt test"></a></p> -->
<p><a href="/" target="_blank" aria-label="Img alt test - opens in new window"><img src="test.gif" width="50" alt="Img alt test"></a></p>
<!-- <p><a href="/" target="_blank"><img src="test.gif" width="50" alt=""> IMG and text test</a></p> -->
<p><a href="/" target="_blank" aria-label="IMG and text test - opens in new window"><img src="test.gif" width="50" alt=""> IMG and text test</a></p>
<!-- <p><a href="/" rel="nofollow noopener noreferrer external">rel: anchor text test</a></p> -->
<p><a href="/" rel="nofollow noopener noreferrer external" aria-label="rel: anchor text test - opens in new window">rel: anchor text test</a></p>
<!-- <p><a href="/" rel="EXTERNAL" title="My website">rel: title test</a></p> -->
<p><a href="/" rel="EXTERNAL" title="My website" aria-label="My website - opens in new window">rel: title test</a></p>
Top comments (0)