Resources
- CSU ATI Requirements (under Automated Scanning)
- Video Captions Benefit Everyone
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
- 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.
- 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:
- Intro to Accessibility
- HTML5 Accessibility
Watch the following UDC Training Videos:
- Select Intro to Accessibility Videos and watch the video Why Accessibility Matters
- Then, under Instructional Materials Videos watch:
-
- Accessible Multimedia
- Simply said: Understanding Accessibility in Digital Learning Materials
-
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
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
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
| 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
| 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
| 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
| 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
| 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
| 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
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.
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.
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.
concentration level. Science lab equipment with clear and intuitive control buttons is an example of an application of this principle.
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.
user's sensory abilities. An example of this principle is captioned television programming projected in a noisy sports bar.
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.
product applying this principle is software applications that provide guidance when the user makes an inappropriate selection.
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.
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
- 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.
- 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.
- 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
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.)
• "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.
How to Evaluate Accessibility Based on Four Principles
- Font: Is the font styling easy to read?
- Color: Is the font color easy to read?
- Tab: Can a user "tab" through the functions?
- Enlarge: Can a user make the font bigger? (ctrl +)
ATI Resources
Other Videos and Resources
- Document Accessibility
- UDC training Videos on Document Accessibility