WVU Home
  • Home
  • Accessibility

Accessibility

WVU is required to have accessible web pages and web applications for individuals with disabilities according to Section 504 of the Rehabilitation Act of 1973 and Title II of the Americans with Disabilities Act of 1990.

Use the resources on this site to help you create accessible websites. All WVU web properties must undergo accessibility testing before you make the site or application live.

University Relations has purchased Siteimprove for various academic and student-related sites. Siteimprove runs checks every five days on quality assurance (spelling and links) and accessibility on enrolled sites. If your unit is not using Siteimprove, test your site's accessibility using one of our recommended tools or submit our Siteimprove Scan Request Form to have your website or web application listed to be scanned.

Common Accessibility Pitfalls

There are a few accessibility pitfalls that we see repeated time and time again. We've created this list to address those pitfalls.

  1. Use meaningful alt text on images
    • Alt text is something that is context specific. Write alt text that helps a visually impaired person understand what is being represented in an image.
  2. Use descriptive link text
    • Avoid using: "Click here," "Read more," and "Click here to learn more". Example:
      • Correct: Visit the WVU Brand website to find more information on our brand.
      • Incorrect: You can find more information on the WVU brand by clicking here.
    • Do not link full URLs:
  3. Put content on a page of your site instead of in a PDF
    • PDFs are notoriously tricky in terms of accessibility. Whenever possible, publish content as a page on your site versus in a PDF.
      • This can be a heated issue. We cover PDF accessibility in more detail on our page for content creators.
  4. Use appropriate heading structure
    • A page should have only one Heading 1 (<h1>). Most templates in CleanSlate handle this automatically by outputting the page name as a Heading 1.
    • The proceeding headings should cascade.
      • For example, after a Heading 1, you should use Heading 2's. Heading 3's are sub-sections of Heading 2's and so forth.
    • Content authors will oftentimes choose a heading (<h2>, <h3>, <h4>, etc.) based on how it looks instead of following the cascade. Don't do this!
    • If you want your heading to look differently, consider adding a class in HTML:
      • <h2 class="wvu-h4">Heading 2 that looks like a Heading 4</h2>.
  5. Be sure you can navigate your site with only a keyboard
    • This means you can use the Tab, Space, Enter, and Escape keys on your keyboard to navigate through your site, its navigation (including dropdowns) and its content.
      • What does this mean? The Web Accessibility Initiative made a two minute video to help explain keyboard accessibility.
  6. Make sure <iframe> tags have a title attribute

    • Content from YouTube, Twitter, Wufoo and many other places can be embedded on your site via the HTML <iframe> tag. While YouTube includes a title attribute, many other services do not out of the box. Be sure to add or modify the title attribute as necessary.

    • Example: Default YouTube embed code:

      <iframe width="560" height="315" src="https://www.youtube.com/embed/1RcSMARIZ3Q" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

    • YouTube embed with customized title attribute:

      <iframe width="560" height="315" src="https://www.youtube.com/embed/1RcSMARIZ3Q" title="Watch 'WVU's Story' on YouTube" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      • Depending on your site, you could try removing the width and height attributes so that the video is responsive and mobile friendly.

Resources: