Skip to main content
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. Don't use presentational attributes on <iframe>'s
    • Content from YouTube, Twitter, Wufoo and many other places can be embedded on your site via the HTML <iframe> tag. Oftentimes, they include attributes like frameborder, cellspacing, border and others as presentational attributes. Remove these attributes and see if anything looks different. Those attributes are likely unnecessary. If the appearance worsened, use CSS to style the <iframe>.
    • Example: Default YouTube embed code: 
      <iframe width="560" height="315" src="https://www.youtube.com/embed/1RcSMARIZ3Q" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    • YouTube embed without presentational attributes: 
      <iframe title="WVU's Story" src="https://www.youtube.com/embed/1RcSMARIZ3Q" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      • Please note: <iframe>'s must have a title="Example" attribute that describes what's being loaded. Users must add this manually.
      • If you need to remove a border or specify an explicit width and height, consider adding style="border: 0; width: 560px; height: 315px;".

Resources: