MARCOM HERO

Web Accessibility

Below are web accessibility guidelines for all websites, web pages and web-based software published or hosted by the University. As good stewards of the resources we provide the public, we strive to make all content fully accessible to those who require accommodations to consume University content. If additional accommodations are required for any University page please email webmaster@valpo.edu to request alternative access to information. Documents hosted on valpo.edu should also follow the Guidance on Applying WCAG 2.0 to Non-Web Information and Communications Technologies (WCAG2ICT).

Resources:

Web Content Accessibility Guidelines (WCAG) 2.0 AA
How to Caption YouTube Videos

All University content editors should follow this list of guidelines to increase the accessibility of University websites:

Use proper heading structure
Include text alternatives
‘Alt’ descriptions for images
Use links appropriately
Post accessible PDFs
Provide transcripts or captions for video or audio content
Use tables appropriately
Column and row headings
Table caption and summary
Mindful use of color and contrast

Read below for more specific instruction on ways to adhere to the guideline list.

Use proper headings

  • Include semantic markup
    Headings need to be identified by <h1> through <h6> tags. Styling for visual effects can be done through CSS, but style alone does not constitute true headings. Proper semantic markup is essential for assistive technology to recognize headings.
  • Follow a logical content outline
    When organizing content on page use logical heading levels to delineate main points and sub-points of your material.
  • Don’t skip heading levels on a page
    Try not to go from a level 2 heading to a level 5 heading. Remember – it’s all about organization and consistency.
  • Use a text header at the top of a page rather than an image

Non-text Content (i.e. images, text buttons, graphics, images within a pdf, maps w/directions) should all include descriptions:

  • All images should have ‘Alt’ descriptions
    When you include an image on a page or insert an email in an email, you must include descriptive language in the ‘Alt’ field. If the image is a photo of a named person include their name and title. If the image is an info graphic or includes text, the Alt text should state the same information that is shown on the graphic.
  • Write good captions for images
    When you insert an image into a post or page, consider providing a rich description for the caption that will improve the reading experience for everyone, but especially folks who can’t see the image. Be creative. Instead of “People are walking down the street,” try “A group of student-athletes are walking down Chapel Drive at sunset. The group is laughing as they head toward Harre Union. ” The goal here is to convey the feeling of the image.
  • Clearly describe links
  • Whether you are linking to your own blog or another site, it helps to be descriptive in the linked text. For example, “Click here” is not as explanatory as “Contact me.” Link text should be short; try not to use the entire URL for the link text, especially if it’s lengthy and unintelligible/not human friendly (screen readers read the entire URL out loud). Also, links should be the only text on a page that are underlined.
  • PDFs
    See Adobe’s instructions on creating and verifying PDF accessibility.
    See Microsoft’s instructions on creating accessible Word documents
    Common Look and Edquidoc help to review and convert pdfs for accessibility with this program. They offer subscription packages.
  • Provide Transcripts or Captions for Video or Audio Content
    When using video or audio content, it is important to provide a transcript, captions or subtitles for users who cannot hear or hear well.YouTube has several features that make it easier for users to create/edit captions including transcribe and auto sync, and automatic captioning. See YouTube’s instructions for adding your own subtitles and closed captions to your YouTube videos.

Use tables appropriately

If you need to present tabular data, then it’s important for tables to be appropriately formatted in the HTML so that users can successfully navigate and derive meaning from the tables on your website. Label column and row headers appropriatly.

Also, be sure to include a summary about the informaiton included in the table so screen readers can properly describe the informaiton included.

Avoid Keyboard Traps

WCAG 2.0 guideline 2.1.2 states that there should be no keyboard traps. A keyboard trap occurs when a user can get into a component or element on a web page by using the keyboard but cannot get out of that component or element through the use of the keyboard.

Mindful use of color and contrast

When creating your own web pages outside of the University’s WordPress template, be mindful of appropriate colors and contrast. You can test specific themes for compliance with these guidelines using a tool such as the WAVE Web Accessibility tool.