Compliance starts with your website theme. It's what governs the look, feel, usability and function of your website. Over the last 5 years, the changing Internet landscape has demanded themes jump through all sorts of hoops. We've asked themes to be load faster, look better, be responsive (i.e. work on a variety of platforms like tablets and mobile phones) and now we're asking them to better deliver content to specialized readers for the sight and hearing-impaired. After all, the web is for everyone and just because someone has a disability doesn't mean they should have less access to your website content.


Still, this requires even more structural changes to your web theme behind the scenes. Campus Suite themes have always sought to look better and load faster by proper organization of content (both visually and in the source code) and by following standardized website specifications. Improving ADA compliance is a two-fold effort. Some things can be handled automatically by the Campus Suite platform, but other things must be done to a pages content itself, which means we have to train the publishers who are adding and editing content on your web pages.


ADA items that the Campus Suite platform will help you govern automatically:

  • Semantic markup for HTML standards
  • A link to provided to a “skip navigation” for main navigation
  • Feedback link to enable ADA users to notify your organization of an issue
  • Site map and site search
ADA items that must be handled by the individual publisher adding/editing content on each page:
  • ALT tags for all images
  • Tables using header data to define the rows
  • Page content structured in WAI-ARIA (Accessible Rich Internet Applications or ARIA)
  • Descriptive and informative page titles
  • Text links and text buttons

Note: we add and change things ongoing as the specification requires.


Let's discuss this more below.

ADA Compliant Standards Summary



 

Text Alternatives: 
Provide text alternatives for any non-text content

Relates to any images or other documents added to the website.

  • ALT tags for images

  • No graphical buttons

  • Form buttons have descriptive value

  • Form inputs have labels

Time-based Media:
Provide alternatives for time-based media


Any videos or audio files added to website will require transcripts and captions.


  • Transcript for video

  • Captioning

  • Transcripts for audio

Adaptable:

Create content that can be presented in different ways (for example simpler layout) without losing information or structure


  • Semantic markup (HTML)

  • Tables have TH tags

  • Reading order of the page

Distinguishable: 
Make it easier for users to see and hear content including separating foreground from background


  • Contrast in links, have to be obvious

  • No automatic audio play

  • If text is increase (double) the page adjust and is readable

  • Good contrast

  • Alternative text only view

Keyboard Accessible: 
Make all functionality available from a keyboard


  • Must be able to function with a keyboard only

  • Navigate with keys

  • All page functionality is available using the keyboard.

Enough Time: 
Provide users enough time to read and use content


  • No auto weird stuff like a page redirecting on a timer

  • We need the ability to pause any type of rotating panels

  • No automatic pop-ups

Seizures:
Do not design content in a way that is known to cause seizures


  • No flashing stuff

Navigable: 
Provide ways to help users navigate, find content, and determine where they are


  • A link is provided to skip navigation and other page elements that are repeated across web pages.

  • Descriptive page title (sitebuilder)

  • Descriptive links and buttons

  • Multiple ways are available to find other web pages on the site: Site map and search

  • Descriptive links (The purpose of each link)

Readable:

Make text content readable and understandable


  • Indicate language of page <html lang="en">

  • Expansions for abbreviations are provided by expanding or explaining the definition the first time it is used

Predictable: 
Make Web pages appear and operate in predictable ways


  • No pop-up windows

  • Standard, common navigation

Input Assistance:
Help users avoid and correct mistakes


  • Form labels

  • Validation

  • Verify a form submission