Web Accessibility

Overview

Web Accessibility ensures that the implementation of universal design principles complies with Section 508 and Web Content Accessibility Guidelines (WCAG) so that everyone, including disabled users, can interact with webpages. This is a requirement that prevents users from disregarding information because of their ability to see or interact with pages.

Why does Accessibility Matter?

Accessibility guarantees that resources are available for everyone. It enables the ability to provide the same information to a user that has a disability as to an individual that prefers to use the features for convenience. Accessible web content helps assistive technology users easily navigate and understand information to the same extent as an individual who does not use assistive technology. For example - screen readers, the most commonly used assistive technology, read out loud the content of the web page for those who are visually impaired or cannot focus (dyslexia).

Instructions

1. Sign up for CSU Cryptzone Video Training

Sign up for the CSU Cryptzone Video Training Access Request Form. You will receive login access within 5-7 business days. Once the form is submitted you will see a "Thank you" screen.

*In the event that you do not receive the email notification for access within the time limit, email the contact person provided on the request form.

2. Watch Cryptzone Video Training Courses

Once you receive access to the Cryptzone Video Training Courses, login to the Video Training Portal
You will be required to update the password when logging in for the first time.
Once you are logged in select the Accessibility Training Courses
Watch the following two videos on:
1. Intro to Accessibility
2. HTML5 Accessibility

3. Watch UDC Training Videos

Watch the following UDC Training Videos:

Select Intro to Accessibility Videos and watch the video Why Accessibility Matters
Then, under Instructional Materials Videos watch:
1. 1. Accessible Multimedia
  2. Simply said: Understanding Accessibility in Digital Learning Materials

4. Read Accessibility & Universal Design

The Accessibility & Universal Design slides will help you better understand:

The principles of Universal Design
Accessibility and how to evaluate accessibility based on the 4 principles
Why Accessibility is needed
Best practices for Accessibility
Products/applications used for assistive technology

5. Read Designing for Accessibility

Designing for Accessibility will give you a more clear understanding of:

The different disabilities
The various ways to make information accessible for each disability
What mistakes to avoid

6. Read Web Accessibility Criterias

The Web Accessibility Criteria covers digital accessibility in order to prevent barriers for individuals to access information. The following will go over each category and how to avoid and solve the issue where the content is not accessible. Visit the links under each Category to get a clear understanding of the criterias.

Alternate Description

Alternate Description Criteria
Category	Description
Images	Images must have a text replacement that explains what the image is conveying.
Image Maps	Image Maps are x and y coordinates (hotspots) where a user can click within that area which directs user to other resources or performs an action.
Scripting	Scripting is a programming method to trigger an event or populate contents to clients browser (e.g., sideshows or skip navigation).

Multimedia

Multimedia Criteria
Category	Description
Interactive Media	Interactive media provides users with different accessibility needs that include transcriptions, captions or audio descriptions.
Screen Movement	Screen movement gets users to interact with the web content.

Structure

Structure Criteria
Category	Description
Semantic Requirements	Semantic Requirements give organization and structure to content.
Frames	Frames is an HTML tag that separates a webpage into different sections.
Tables	Tables are used for organization and presentation purposes. Tables must be marked up properly using HTML table elements.

Comprehensive Visual Display

Comprehensive Visual Display Criteria
Category	Description
Style Sheets	Style sheets are used to provide a certain look and format to a website by using fonts, colors, and layouts.
Color	Color is used to improve the design, appearance and readability of the information provided on a page.

User Interface

User Interface Criteria
Category	Description
Usability	Usability improves ease of access, understanding, and use of information.
Readability	Readability is when a reader can easily understand information without difficulty. It focuses on how text is written, organized, and visually displayed.
Keyboard Accessibility	Keyboard Accessibility focuses on making the functionality of web content navigable using a keyboard, avoiding keyboard traps.
Timed Response	Timed Response lets users have a specified amount of time to interact with content on the web page. The user should be given a proper time response notification and option to extend time.
Forms	Forms must provide instructions, error identification, and form submissions.

Navigation

Navigation Criteria
Category	Description
Link Functionality	Link functionality ensures that a link works the way it is expected to.
Link Display	Link display ensures links are distinct from regular text based on style, format, and appearance.
Comprehensive Link Text	Comprehensive Link text refers to link texts being short and concise to what they direct to and should be unique.

Understanding Accessibility

Accessibility is not about disability; it’s actually about ability. It’s about making it easy for everyone.

Acquire the same information

Engage in the same interactions

Enjoy the same services

In an equally effective and equally integrated manner, with substantially equivalent ease of use.

Principles for Information and Communication Technology (ICT)

Perceivable: so that individuals with visual impairments can understand the information being conveyed
Operable: navigate to information in multiple methods (not only the mouse)
Understandable: understandable enough so that all different learning styles can engage
Robust: IT products should be compatible with a user’s desired technologies or system preferences

Accessibility ensures everyone can perceive, understand, engage, navigate, and interact with technology regardless of device, software, or product without barriers.

Universal Design Principles

Equitable Use

The design is useful and marketable to people with diverse abilities. For example, a website that is designed to be accessible to everyone, including people who are blind and use screen reader technology, employs this principle.

Flexibility in Use

The design accommodates a wide range of individual preferences and abilities. An example is a museum that allows visitors to choose to read or listen to the description of the contents of a display case.

Simple and Intuitive

Use of the design is easy to understand, regardless of the user's experience, knowledge, language skills, or current
concentration level. Science lab equipment with clear and intuitive control buttons is an example of an application of this principle.

Perceptible Information

The design communicates necessary information effectively to the user, regardless of ambient conditions or the
user's sensory abilities. An example of this principle is captioned television programming projected in a noisy sports bar.

Tolerance for Error

The design minimizes hazards and the adverse consequences of accidental or unintended actions. An example of a
product applying this principle is software applications that provide guidance when the user makes an inappropriate selection.

Low Physical Effort

The design can be used efficiently, comfortably, and with a minimum of fatigue. Doors that open automatically for people with a wide variety of physical characteristics demonstrate the application of this principle.

Size, Use, and Space for Approach

Appropriate size and space is provided for approach, reach, manipulation, and use regardless of the user's body size, posture, or mobility. A flexible work area designed for use by employees who are left- or right-handed and have a variety of other physical characteristics and abilities is an example of applying this principle.

Best Practices for Accessibility

Organized Content

Organize content with headings, subheadings, images, videos, and footer are important for usability and accessibility.
Use Heading Styles in a logical sequence to give a structure by category or topic.

Alternative or Alt Text

A written description of images and/or objects that can be read by a blind or low vision using screen reader technology.
Screen readers and other assuasive technologies can’t convert images into words/texts. Thus providing captions are universal and accessible for everyone.
Recommend brief descriptive text within 8 to 80 characters long.

Color

Provide descriptions if using color to convey meaning
Download Colour Contrast Analyzer onto your computer (PC/Mac) to ensure accessible contrast or use an online contrast checker from WebAIM.
WCAG Level AA requires a contrast ratio of at least 4.5:1 for normal sized text (12 pt. font) and 3:1 for large text (14 pt. font).
Coblis Color Blindness Simulator

Keyboard Navigation or Touch

Users should be able to get to content without using a mouse
• Keyboard
• Hearing
• Touch

Users should be able to access content on different screens (phone, tablet, etc.)

Descriptive Hyperlinks

• "Read more", "click here", "email me", or "continue" are vague and redundant.

Link text should clearly identify the target of each link. Good link text should not be overly general.
• Make sense when read out of context.
• Describe the destination (document name, website).
• Be unique for unique destinations.

Do not use color links as the only method to convey important information.

Tab order should read from the upper left to the lower right, and make sense to both sighted and visually impaired users.