2.1 Federal
The following are high-priority accessibility requirements for federally funded organizations.
2.1.1 Skip to Content Links
Websites must include skip to content links on every page.
Skipping to Main Content
All sites must have at least one skip-to-content link which skips a user’s focus past redundant template elements and into the main content. However, it is good practice to have skip links to all relevant content, like the main navigation or footer.
Visibility & Location
The skip to content link must be visible on focus and must be the first link after the opening body element.
Code Example
CSS
#skip-links {
position: absolute;
left: 0;
top: 0;
width: 100%;
margin-left: 0;
list-style: outside none;
}
#skip-links a {
position: absolute;
left: 15px;
top: -100px;
z-index: 10000;
height: auto;
margin: 0 auto;
padding: 10px 15px;
background-color: transparent;
color: #ffba00;
outline: none;
transition: top 0.2s, background-color 0.2s;
}
#skip-links a:focus, #skip-links a:hover {
top: 0;
background-color: #333;
}
HTML
<div id="skip-links">
<a href="#main-navigation" tabindex="1">Skip to main navigation</a>
<a href="#main-content" tabindex="2">Skip to main content</a>
<a href="#footer" tabindex="3">Skip to footer</a>
</div>
2.1.2 Unique Title Tags
Websites must include unique title tags for every page.
The Importance of Unique Title Tags
Unique title tags help with both accessibility and search engine optimization.
Structure
A website’s title tags should follow the following structure:
- Home page: Department Name | Virginia Commonwealth University
- Interior page: Title of single page | Department Name | Virginia Commonwealth University.
Home pages should not use the word “Home” as a title. Interior pages should include the title of the page and the name of the department.
Example Title
Prospective Students | Biology | HAS | VCU
2.1.3 Input Labels
Websites must provide associative labels for form inputs.
The Importance of Input Labels
All form inputs must have associated labels so screen readers may interpret what content is required for each form input.
Visibility
Labels do not have to be visible, but they must be machine readable.
Code Example (HTML)
<label for="sender">Your email address</label>
<input type="text" name="sender" id="sender" placeholder="example@vcu.edu">
Documentation
Visit the wiki for more documentation on form accessibility.
2.1.4 Input Agnostic Functionality & Navigability
Websites must be equally functional and navigable when using the mouse, keyboard, or both.
The Importance of Input Agnostic Functionality & Navigability
All content and functionality, including navigation and dropdown menus, that is reachable by mouse, must be reachable by keyboard. This ensures users can get to where they’re going regardless if they’re using a mouse or using a screen reader.
Tabbing
Functionality and navigability can be tested by using the tab key to hop through focusable elements on the site. Skip links should be the first tab-able elements, then the branding bar, and finally the rest of the site, including dropdown navigation and links.
Visible & Identifiable Focus
Links, as well as other focusable elements such as form inputs and buttons, need focus state styles so the user can identify it as focused. In most cases, the hover state styles can also be used for the focus state styles.
Code Example (CSS)
a:focus, [tabindex]:focus { border: 2px solid purple }Documentation
Visit the wiki for more documentation on keyboard navigable websites.
2.1.5 Alternative Image Information
Websites must provide alt-text for non-trivial images.
Informative & Descriptive Alt-Text
Alt-text should be informative and describe the image to a screen reader. The following guidelines will help in creating informative and descriptive alt-text:
- Do not use the word “image”; Screen readers will already inform the user that this is an image.
- Do not just use the filename; The filename does not say anything informative or descriptive about the image.
- Do not use the word “page” or describe its location; Screen readers will already inform the user as to what page they’re on.
Images Containing Text
Images that have relevant text in the image must have the same information in the alt tag.
Social Media
Images posted via social media that have relevant text in the image must have the same information in the alt tag or have the information as text provided along with the image.
Documentation
Visit the wiki for more documentation on image accessibility.
2.1.6 Meaningful Link Text
Websites must provide links with meaningful text and information as to their end location.
Non-Distinguishable Links
This requirement refers to non-distinguishable links, or links that have the same text but point to a different location. Links can be made distinguishable by adding titles or aria-labels (instructing a screen reader how the links are different) or changing the text so that it is only used one time.
Code Example (HTML)
<!-- Using meaningful link text -->
<a href="/about">About Technology Services</a>
<!-- Using aria-labels -->
<a href="/about" aria-label="About Technology Services">About</a>
Documentation
Visit the wiki for more documentation on non-distinguishable links.
2.1.7 PDF Highlighting & Copying
Websites providing PDF files must ensure these files properly allow highlighting text in a logical order and copying its contents to another program.
Logical Header Nesting & Content
All PDF files must have logical header nesting and content.
How to Find PDFs on a Site
Use Siteimprove to inventory a site’s usage of PDFs.
Documentation
Visit the wiki for more documentation on how to create and verify a PDF's accessibility.
2.1.8 Video Captioning
Websites providing videos must ensure they are captioned.
Automatic Captioning
Services that provide automatic captioning, such as Kaltura or YouTube, fulfill this requirement. At the time of writing, Vimeo does not support automatic captioning.
Live Streamed Videos
Live streamed videos must be captioned within 24 hours.
2.1.9 Appropriate Page Language
Websites must have an appropriate language set on every page.
Common Languages & Use
Most websites will have the language set to English, but there are instances where Spanish is applicable. The language may be set on the page’s HTML element or a specific element inside the page’s content.
Code Example
The language of a page can be set to English by adding the following code:
<html lang="en">Documentation
Visit the wiki for more documentation on setting the language of a webpage.
2.1.10 Color Contrast
Websites must utilize suitable color contrast ratios between text and background.
Contrast Ratios
Following WCAG 2.0 AA compliance, color contrast ratios should be at least 4.5:1 for normal text and 3:1 for large text.
Tools
Here’s a list of useful tools for correcting color contrast issues:
- Siteimprove will identify pages that have color contrast issues.
- 0to255 is a great tool to lighten or darken colors while trying to fix color contrast issues.
- Siege Media's Contrast Ratio Tool helps web developers decide what color combinations provide enough contrast to meet WCAG 2.0 compliance.
- Colour Contrast Check is a useful tool for checking the degree of contrast between foreground and background colors.
Documentation & Resources
Visit the wiki for more documentation and resources for fixing color contrast issues.
2.2 VCU
The following requirements have been established by VCU, and either reflect, elaborate, or build on the Accessibility, Federal (2.1) requirements.
2.2.1 Review & Approval
All new website designs, redesigns, and/or applications must be submitted to the Web Services EIT Accessibility Coordinator for accessibility review and approval.
Submitting a site for review & approval
All website accessibility review/approval requests should be submitted to the VCU Service Desk.
2.2.2 WCAG 2.0 AA Compliance
Websites must pass WCAG 2.0 Level AA accessibility standards.
Status & Compliance
Visit the A-Z Website Manager to check the current compliance status of your website.
How to Ensure WCAG 2.0 AA Compliance
Use the Siteimprove Accessibility Checker Google Chrome extension, and set the filter to AA conformance to prioritize a11y errors or login to siteimprove.vcu.edu to view errors that need to be corrected.
Accessibility Resources
Visit the wiki for more accessibility resources for a11y error evaluation.
2.2.3 PDF Accessibility
Websites providing PDF files must ensure these files pass WCAG 2.0 Level AA accessibility standards.
2.2.4 HTML Validation
Websites must not contain HTML validation errors.
2.2.5 Skip Links
Websites must include a div with the id of “skip-links” enclosing a series of skip links after the opening body tag of every page.
Best Practices
It is encouraged to include skip links to major page sections of the website, like the main navigation and footer, but the skips links must include at least one link to the main content section. The inclusion of at least one skip link to the main content is under the Accessibility, Federal, Skip to Content Links (2.1.1) requirement.
Code Example
Visit the code example found under the Accessibility, Federal, Skip to Content Links (2.1.1) requirement.
2.2.6 Readability with Disabled Stylesheets
Websites must be readable with stylesheets disabled.
The Importance of Readability with Disabled Stylesheets
Web page readability with CSS stylesheets disabled is important for users accessing text only versions of your website. Additionally, it ensures equal functionality and navigability regardless of styles.