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:

  1. Do not use the word “image”; Screen readers will already inform the user that this is an image.
  2. Do not just use the filename; The filename does not say anything informative or descriptive about the image.
  3. 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.

  1. Review & Approval
  2. WCAG 2.0 AA Compliance
  3. PDF Accessibility
  4. HTML Validation
  5. Skip Links
  6. Readability with Disabled Stylesheets

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.