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 contact us to have it added to Siteimprove.
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.
-
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.
-
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:
- Correct: Brand personality
- Incorrect:
https://brand.wvu.edu/brand-guide/voice/personality
- Screen readers read link text. When you link a URL, it's as if someone is reading each letter of the URL to you. Add the fact that it's read by a robotic voice and you can see how annoying that can be.
- Avoid using: "Click here," "Read more," and "Click here to learn more". Example:
-
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.
- PDFs are notoriously tricky in terms of accessibility. Whenever possible, publish
content as a page on your site versus in a PDF.
-
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>
.
-
- A page should have only one Heading 1 (
-
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.
- 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.
-
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 likeframeborder
,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 atitle="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;"
.
- Please note:
- Content from YouTube, Twitter, Wufoo and many other places can be embedded
on your site via the HTML
Resources:
- Easy Checks - A First Review of Web Accessibility
- Web Accessibility Initiative Perspective Videos — Learn how accessibility benefits everyone in a variety of situations.