Table of Contents
Tips & Knowledge
A helpful tool to test the compliance of your websites.
The ADA, or, Americans with Disabilities Act, protects those with disabilities against discrimination. Similar to the Civil Rights Act (which covered race, religion, sex, and national origin), the ADA also requires reasonable accommodations be made so that those with disabilities (mental and physical medical conditions) can enjoy the same things that others can.
The W3C (World Wide Web Consortium) and its Web Accessibility Initiative have developed guidelines and resources to help make the Web accessible to people with disabilities, and are the clearest way to ensure your VNN school site is enjoyable for everyone in your community and is compliant with the ADA.
In the guide below, we’ll go into detail on several of the different topics that will be most applicable to the VNN platform.
Text Alternatives
Who does this section help?
- Hearing Impaired
- Visually Impaired
Non-text Content
What is the official W3C description?
All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below.
- Controls, Input: If non-text content is a control or accepts user input, then it has a name that describes its purpose. (Refer to Guideline 4.1 for additional requirements for controls and content that accepts user input.)
- Time-Based Media: If non-text content is time-based media, then text alternatives at least provide descriptive identification of the non-text content. (Refer to Guideline 1.2 for additional requirements for media.)
- Test: If non-text content is a test or exercise that would be invalid if presented in text, then text alternatives at least provide descriptive identification of the non-text content.
- CAPTCHA: If the purpose of non-text content is to confirm that content is being accessed by a person rather than a computer, then text alternatives that identify and describe the purpose of the non-text content are provided, and alternative forms of CAPTCHA using output modes for different types of sensory perception are provided to accommodate different disabilities.
- Decoration, Formatting, Invisible: If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by assistive technology.
What does this actually mean for content creators?
Any content that is primarily non-text, like photos, video, audio, diagrams, etc. has a description, called a “text alternative,” that allows the user to understand what is there if they cannot hear, see, or have another disability. (Ex. A photo of your star football player catching a touchdown pass’s alternative text might say, “Bryon White scores a game-tying touchdown in the game against Northern.”)
Exceptions:
- Controls, Input: (Checkboxes, Radio Buttons). Please see Input Assistance section.
- Time-Based Media: Please see Time-Based Media section.
- Test: If there is content that would not be relevant in text format, there needs to be at least a title identifying that the content is “Non-Text Content”.
- CAPTCHA: Strongly recommend not using to accommodate those with disabilities or provide two options for verifying authenticity.
- Decoration, Formatting, Invisible: If non-text content is purely for visual decoration, it can be ignored.
What’s the best way to approach?
To complete:
- Select any piece of media by clicking the item, click the ‘Edit’ icon.
- Add a description into the ‘Alternative Text’ field.
Time-Based Media
Who does this section help?
- Hearing Impaired
- Visually Impaired
Audio-only and Video-only (Prerecorded)
What is the official W3C description?
For prerecorded audio-only and prerecorded video-only media, the following are true, except when the audio or video is a media alternative for text and is clearly labeled as such:
- Prerecorded Audio-only: An alternative for time-based media is provided that presents equivalent information for prerecorded audio-only content.
- Prerecorded Video-only: Either an alternative for time-based media or an audio track is provided that presents equivalent information for prerecorded video-only content
What does this actually mean for content creators?
For those specific content types that only have one kind of experience, like a radio call of the game, or a highlight video without sound or any description of the event, they should also have a transcript created that explains the content that can be linked to in an easy to find place.
What’s the best way to approach?
Check out these helpful resources:
- YouTube Captioning
- uiAccess
- Captioning Your Own Video for Free
- Create ADA-Compliant Captions
Captions (Prerecorded)
What is the official W3C description?
Captions are provided for all prerecorded audio content in synchronized media, except when the media is a media alternative for text and is clearly labeled as such.
What does this actually mean for content creators?
Ensure that your videos have captions included. When captioning your videos, be sure to clearly identify anything a site visitor might want to see/know, too. (Ex. [Wind blows] Mike Mossner, Captain: “With two outs in the bottom of the ninth, anything can happen.”)
What’s the best way to approach?
Check out these helpful resources:
-
- uiAccess
- Captioning Your Own Video for Free
- Create ADA-Compliant Captions
Audio Description or Media Alternative (Prerecorded)
What is the official W3C description?
An alternative for time-based media or audio description of the prerecorded video content is provided for synchronized media, except when the media is a media alternative for text and is clearly labeled as such.
What does this actually mean for content creators?
When no voice-over or sound is explaining what is happening in video footage, an audio description of the video content needs to be presented. Audio needs to identify who is speaking, provide context on what is happening within the presentation, and provide information on actions, characters, scene changes, and on-screen text.
A full description can be created, similar to a screenplay, for the user to follow along with while the content is playing.
What’s the best way to approach?
Check out these helpful resources:
- uiAccess
- Captioning Your Own Video for Free
- Create ADA-Compliant Captions
Captions (Live)
What is the official W3C description?
Captions are provided for all live audio content in synchronized media.
What does this actually mean for content creators?
Captions provide the media presentation in an audio format in real-time. The captions need to identify who is speaking and include non-speech information being shown within the presentation.
What’s the best way to approach?
Check out these helpful resources:
- uiAccess
- Captioning Your Own Video for Free
- Create ADA-Compliant Captions
Audio Description (Prerecorded)
What is the official W3C description?
Audio description is provided for all prerecorded video content in synchronized media.
What does this actually mean for content creators?
Audio description of the video content needs to be presented. Audio needs to identify who is speaking, provide context on what is happening within the presentation, and provide information on actions, characters, scene changes, and on-screen text.
What’s the best way to approach?
Check out these helpful resources:
- uiAccess
- Captioning Your Own Video for Free
- Create ADA-Compliant Captions
Adaptable
Who does this section help?
- Hearing Impaired
- Visually Impaired
Meaningful Sequence
What is the official W3C description?
When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.
What does this actually mean for content creators?
When creating content that should go in order, like a Top Ten Countdown, or something as simple as an article, the order of items needs to be presented in the correct order that visitors should read in to remove disorientation.
What’s the best way to approach?
When presenting content, make sure that items follow a logical order. When creating an article, for example, place the article title before the article body text.
Sensory Characteristics
What is the official W3C description?
Instructions provided for understanding and operating content do not rely solely on sensory characteristics of components such as shape, size, visual location, orientation, or sound.
What does this actually mean for content creators?
Text descriptions need to be applied so that those who can not perceive shape or size can still gain an understanding of what is there.
What’s the best way to approach?
Do not use an icon, shape, or color to exclusively convey information, ensure that text is also available. For example, when indicating that an event is a home game, make sure that the indicator isn’t simply a red circle, but instead include the word ‘Home’.
Distinguishable
Who does this section help?
- Visually Impaired
Use of Color
What is the official W3C description?
Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
What does this actually mean for content creators?
There needs to be an alternative way to view an item without the reliance on color as the only way to understand the content. For example: “Requirements are in red” would not be compliant; however, writing the word “Required” next to each red requirement would be compliant.
What’s the best way to approach?
Do not use color to exclusively convey information. Ensure that there are multiple ways to interrupt the information provided.
Check out these helpful resources relating to color blindness compliance:
- Vischeck
- AWARE Color Laboratory
- Wikipedia: Color Blindness
- Microsoft: Can Color-Blind Users See Your Site?
- Causes of Color: How do people inherit colorblindness? How often?: Genetics
- How to make figures and presentations that are friendly to Colorblind people
- The Color Tutor application
Contrast (Minimum)
What is the official W3C description?
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:
- Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
- Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
- Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.
What does this actually mean for content creators?
Visitors with low vision may have difficulty reading content which is provided on a low contrast background. All content should ensure that any visitor can distinguish between elements on the page.
What’s the best way to approach?
Check out these helpful resources:
- Contrast Analyser – Application
- Contrast Ratio Analyser – online service
- Colour Contrast Analyser – Firefox Extension
- Colour Contrast Check
- Contrast Ratio Calculator
Images of Text
What is the official W3C description?
If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text except for the following:
- Customizable: The image of text can be visually customized to the user’s requirements;
- Essential: A particular presentation of text is essential to the information being conveyed.
What does this actually mean for content creators?
Text should not be provided as an image, but instead, should be styled appropriately to reach the desired effect.
What’s the best way to approach?
When designing content, avoid utilizing images to display text information and instead seek alternative text styling.
Enough Time
Who does this section help?
- Hearing Impaired
- Visually Impaired
Timing Adjustable
What is the official W3C description?
For each time limit that is set by the content, at least one of the following is true:
- Turn off: The user is allowed to turn off the time limit before encountering it; or
- Adjust: The user is allowed to adjust the time limit before encountering it over a wide range that is at least ten times the length of the default setting; or
- Extend: The user is warned before time expires and given at least 20 seconds to extend the time limit with a simple action (for example, “press the spacebar”), and the user is allowed to extend the time limit at least ten times; or
- Real-time Exception: The time limit is a required part of a real-time event (for example, an auction), and no alternative to the time limit is possible; or
- Essential Exception: The time limit is essential and extending it would invalidate the activity; or
- 20 Hour Exception: The time limit is longer than 20 hours.
What does this actually mean for content creators?
Adequate time is given to a user to interact with a piece of content, like an automatically rotating slide show. If there is a time limit, one of the following must be true:
- User can stop the time limit by turning it off
- User can adjust the amount of time
- User can extend the amount of time and is warned when time is about to expire
- Real-time content is excluded
- If the time limit is essential to the content, it is excluded
- If the time limit is longer than 20 hours, it is excluded
What’s the best way to approach?
Allow visitors to stop or pause videos, audio files, or motion graphics. Give them options to side-step the limitations of the time limit (like navigation in a rotating slide show).
Pause, Stop, Hide
What is the official W3C description?
For moving, blinking, scrolling, or auto-updating information, all of the following are true:
- Moving, blinking, scrolling: For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential; and
- Auto-updating: For any auto-updating information that (1) starts automatically and (2) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it or to control the frequency of the update unless the auto-updating is part of an activity where it is essential.
What does this actually mean for content creators?
Users can stop blinking, scrolling, and auto-updating content unless it is vital to the content.
What’s the best way to approach?
Allow visitors to stop or pause videos, audio files, or motion graphics.
Seizures
Who does this section help?
- Visually Impaired
Three Flashes or Below Threshold
What is the official W3C description?
Web pages do not contain anything that flashes more than three times in any one second period, or the flash is below the general flash and red flash thresholds.
What does this actually mean for content creators?
Visitors can view the content without the risk of flashing images causing seizures or overloading visitor’s senses.
What’s the best way to approach?
Check out these helpful resources:
- Photosensitive Epilepsy Analysis Tool
Navigable
Who does this section help?
- Hearing Impaired
- Visually Impaired
Link Purpose
What is the official W3C description?
The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general.
What does this actually mean for content creators?
Links are clearly described so that users know where they are being directed.
What’s the best way to approach?
“Click Here” would not be compliant. “About Us” would be clear and compliant. Including context about a link is also a best practice—“Want to learn more? Click Here”.
Headings and Labels
What is the official W3C description?
Headings and labels describe topic or purpose.
What does this actually mean for content creators?
When a user navigates to a page or sees a label, the heading and labels should describe what they are about to read/view/experience/visit.
What’s the best way to approach?
All headings should be descriptive and clear as to what the content underneath the heading will contain.
Input Assistance
Who does this section help?
- Visually Impaired
Labels or Instructions
What is the official W3C description?
Labels or instructions are provided when content requires user input.
- Reversible: Submissions are reversible.
- Checked: Data entered by the user is checked for input errors and the user is provided an opportunity to correct them.
- Confirmed: A mechanism is available for reviewing, confirming, and correcting information before finalizing the submission.
What does this actually mean for content creators?
Any input field has a label or description.
Any forms or fields of information is scanned for errors before users can submit.
Users can confirm before submitting forms or fields of information.
What’s the best way to approach?
For example: If a user is asked to enter their email, there is a title which says “Email”, “Enter Email”, “Email Address”, etc.
Need further assistance?
We would be happy to answer any additional questions you may have on compliance. Click Here to ask get a hold of us.
