Web Accessibility

Web accessibility refers to the practice of removing obstacles that might prevent interaction with, or access to websites. This is especially important for people with disabilities, permanent or temporary, but it also benefits all other users. When sites are correctly designed, developed and edited, all users have equal access to information and functionality (wikipedia). Essentially, it is the practice of making your products and services available to as many people as possible.

The Web Content Accessibility Guidelines Working Group (WCAG WG), which is part of the World Wide Web Consortium (W3C) Web Accessibility Initiative (WAI), develops technical documents for improving web accessibility, which have been widely accepted as the guidelines and best practices for accessible websites. WAI updates Techniques for WCAG 2.0 and Understanding WCAG 2.0 periodically.

Why does it matter?

  1. It's the right thing to do. The Web is an increasingly important resource in many aspects of life: education, employment, government, commerce, health care, recreation, and more. It is essential that the Web be accessible in order to provide equal access and equal opportunity to people with disabilities (w3.org). Best practices allow equal access to everyone, benefitting even those without disabilities. Curb cuts exist for people with physical disabilities, but they also benefit those with bicycles, strollers, etc. Subtitles may be added to a video for those with hearing disabilities, but they also benefit those who may be watching a video in a loud environment, or one where they can't play audio.
  2. Legal boundaries. The last several years have seen a huge increase of letters claiming ADA Title III violations being served to financial and educational institutions. Organizations failing to prepare for and prevent legal action against themselves are at a higher risk for being targeted. USU Policy 559: EIT Accessibility is in place to ensure our institution is making a commitment to provide equal access and prevent these issues.
  3. Effect on business. 1 in 5 Americans have a disability of some kind, whether permanent or temporary. WCAG compliance ensures that the information and services we offer are available to everyone, and that the user experience on our websites positively reflects the image and message of our institution.

How do I know if my site or page is compliant?

You can pre-check your pages for accessibility by using the WebAIM WAVE tool. You can do that with the WAVE browser extension for Chrome or Firefox, or enter the URL of your page into the WAVE tool website.

You can also check your pages for compliance by using the built-in Omni CMS tools available as a check before submitting or publishing your page.

Things to look for include the following:

  • Empty headers, or improperly nested headers - empty headers are an accessibility issue and should be removed. Improperly nested headers should be adjusted to reflect the hierarchy of the page content (i.e. A page with an H3 should have an H2 before that, and an H1 before that). There should only be one H1 header per page.
  • Video Captions - videos and podcasts should have captions to ensure they're accessible to all people.
  • Colors - use colors carefully. 7-12 percent of men have a color deficiency or blindness. Pay attention to contrast ratio of text and background colors.
  • Alt text - use proper alt text for images! Writing good alt text for an image starts with the following question: “How would you describe the image to someone over the phone?” Visitors should know what context your images add to the page content.
  • Use tables for data, not layout. Keep tables simple, and use appropriate attributes for columns and rows. If you have questions about tables, contact itweb@usu.edu.
  • Keyboard accessibility - ensure all content is keyboard accessible by tabbing through your pages and navigating without a mouse. Do you see a visual indicator of where your cursor is at? This is one of the most important aspects of web accessibility.
  • Links need unique and descriptive names. Avoid putting too many links on one page, and avoid using entire URLs as link text.
  • Use final check on every page (publish prompt) to check for spelling errors.

Quick Tips

Links

Avoid using entire URLs as a link, unless it's a branded URL (i.e. MyID.usu.edu). Instead, type out a meaningful direction and link the text with the appropriate URL. For instance, One-Column Page Layout makes more sense than https://it.usu.edu/web/page-layouts/onecolumn-standard, even though they're the same link.

Don't use text such as "click here" or "read more" for links. Not only are they an accessibility problem, but they give no direction to someone using a screen reader. Many people who use screen readers scan page content by keywords and links, as do most users without disabilities. If the screen reader reads only the links on a page with "click here" link text instead of keywords and titles, the user gathers no information or direction from those links. The website owner is essentially forcing those with visual disabilities to read the entire page word-for-word to gain context from the material.

Avoid linking entire sentences, rather than keywords or phrases. This may require rewriting a paragraph or two, but short, concise links hold more emphasis than entire linked sentences and will draw more attention. Link text should be brief, succinct, with clear actions or directions. (Refer to any Wikipedia article for a great example!)

Images

In image description fields, briefly detail the image as if describing it over the phone. If the image contains text information, such as a date and location for an event, that information MUST be included in the description text.

If using a stock image that provides no useful context to the page, it is appropriate to check the "decorative" box instead of filling out the description. If the image adds context to the rest of the page content, it must contain descriptive text.

insert edit image box with decorate option checked
insert edit image box with alt text highlighted