Accessibility - WCAG (Web Content Accessibility Guidelines) 2.0, Level AA
It is core to bswift’s values to ensure that all the people that we serve have equal access to our services and to our information. Although bswift is not a covered entity under ACA 1557, we have taken many steps to ensure the most universally accessible web and mobile experience. We are continually improving our websites and mobile applications to conform to accessibility standards. We have adopted Web Content Accessibility Guidelines (WCAG) version 2.0 AA as our company standard.
We do not ensure compliance on behalf of our clients who wish to perform extensive customizations to their site.
ADA (American Disabilities Act) has no actual rules for accessibility, but they use WCAG 2.0 as a guide on what is accessible. Section 508 was updated to reference WCAG 2.0 Level A and Level AA guidelines.
The following is a list of common and easily corrected accessibility issues that we should keep in mind when designing or coding.
If you have questions, please contact Joy Dodge (jdodge@bswift.com)
Ensure text and images of text provide sufficient contrast
Adequate contrast is necessary for all users, especially users with low vision. Refer to our default bswift Colors.
Provide alternative text for images
All images within a page must be given an alternate text equivalent. Text equivalents for non-text elements communicate the meaning of images to users who cannot perceive the image such as users of screen readers. Proper equivalents provide text which contributes the same level of understanding to the content of the page as the image itself. In instances where the image does not contribute to the understanding of the content and is purely decorative, it needs to be marked in a way to indicate its purely decorative purpose. - AMP
View Examples
<!-- LINKED LOGO IMAGE -->
<a href="http://www.bswift.com"><img src="images/custlogos/0-client_logo.gif" alt="bswift" /></a>
<!-- An image that is the only thing inside a link must never have a missing or null alt attribute.
In this case, programmatically adding the client name to the logo's alt attribute is the correct option. -->
<!-- LOGIN OR EE HOME PAGE BANNER IMAGE -->
<img src="images/custlogos/7_620x290.jpg" alt="" />
<!-- For the most part, these images do not convey relevant or important content. Since we cannot
control what clients use for their banner images, some might have relevant or important content,
but it would be difficult to make that determination. In this case, an empty alt="" tag will suffice. -->
Resource:
WebAIM Alternative Text Examples
Do not skip heading levels
Headings provide document structure and facilitate keyboard naviation by users of assistive technology. When levels are skipped, users of assistive technology may not understand the relationship of content.
Ensure that all headings contain informative content
Assistive technology users often navigate by heading elements. An empty heading presents no information and may introduce confusion.
Ensure that all links contain informative content
If a link contains no text, its function or purpose will not be presented to assitive technology users.
View Examples
<!-- COMPLIANT EXAMPLE -->
<!-- Link has content -->
<a href="javascript:void(0);" class="tooltip-link">
<span class="fi fi-info-circle fi-md" aria-hidden="true"></span>
<span class="sr-only">more information</span>
</a>
<!-- NON-COMPLIANT EXAMPLE -->
<!-- Empty link -->
<a href="javascript:void(0);" class="tooltip-link"><span class="fi fi-info-circle fi-md" aria-hidden="true"></span></a>
Ensure all active elements receive keyboard focus
An element that can be activated via mouse must also be actionable via keyboard. Do not emulate links by attaching JavaSript event handlers to non-semantic elements.
View Examples
HTML
<!-- COMPLIANT EXAMPLES -->
<!-- JavaScript example not shown here so make sure that it is also actionable via keyboard -->
<a href="javascript:void(0);" onclick="runMyFunction();">some function</a>
<!--Compliant tooltip link -->
<a class="tooltip-link hoverdotted" href="javascript:void(0)">standard tooltip</a>
<!-- NON-COMPLIANT EXAMPLES -->
<!-- Link does not have valid href and does not receive keyboard focus -->
<a onclick="runMyFunction();">some function</a>
<!-- Non-semantic markup does not receive keyboard focus -->
<span class="tooltip-link hoverdotted">standard tooltip</span>
JAVASCRIPT
// CORRECT
$( "a" ).on('click', function() {
$( this ).slideUp();
});
// INCORRECT, non-semantic paragraph element
$( "p" ).on('click', function() {
$( this ).slideUp();
});
Provide valid label for form controls
Form labels provide visible descriptions and larger clickable targets for form controls. Without a properly associated text label, the function or purpose may not be presented to assitive technology users.
View Examples
<!-- COMPLIANT EXAMPLE -->
<!-- Correct markup and properly associated for="" attribute -->
<div class="row-two">
<div class="col four mobile-full">
<label for="txtExample">Label</label>
</div>
<div class="col eight mobile-full">
<input type="text" id="txtExample" />
</div>
</div>
<!-- NON-COMPLIANT EXAMPLES -->
<!-- Non-semantic markup used rather than label -->
<div class="row-two">
<div class="col four mobile-full">
<span>Label</span>
</div>
<div class="col eight mobile-full">
<input type="text" id="txtExample" />
</div>
</div>
<!-- Semantic markup used, but it is not properly associated with the input because the for attribute is pointing to a missing ID -->
<div class="row-two">
<div class="col four mobile-full">
<label for="txtExample">Label</label>
</div>
<div class="col eight mobile-full">
<input type="text" />
</div>
</div>
<!-- Orphaned label that is not associated with a form control.
In this case, it should be a generic <span> tag since it is not actually a label. -->
<div class="row-two">
<div class="col four mobile-full">
<label>Label</label>
</div>
<div class="col eight mobile-full">
<p>Some Value</p>
</div>
</div>
Media (Audio and Video)
- Provide synchronized captions and transcripts of videos
- Ensure audio is not played automatically on load
- Ensure multimedia playback can be controlled
