1. Web Accessibility
Technology should be usable to everyone regardless of their individual characteristics

2. Basic Accessibility Criteria:
Alternative Description
Multimedia
Structure
Comprehensive Visual Display
User Interface
Navigation – Link Requirement

3. Training Website: Errors Example Page
UDC Web Accessibility Problems Page

4. Alternative Description
Alternative Text for Images
Providing alternative text or description for an image is essential part of web accessibility.
Alternative text, <alt>, is used to explain what the image is and what the image is trying to convey to the user
If images are decorative or redundant, the null alternative text value (alt="") should be used.

5. Alternative Description
Alternative Text – Best Practices
Poor example of Alt text:
Good example of Alt text:
Photo of a Student
Student using a microscope

6. Alternative Description
Accessible Scripting
Content and functionality provided by script should be accessible to keyboard users and a wide variety of Assistive Technology agents.
Example of an accessible scripting technique:

7. Multimedia Interactive Multimedia Captions/Subtitles Audio Description
All video and audio presentations should provide an accessible alternative way of presenting the information or navigating the media.
Captions/Subtitles
Audio Description
Video Transcripts

8. Multimedia Screen Movement
When Screen movement is present within a webpage, it is important that screen movement is developed in a way that makes it accessible to all users.
Do not use elements in a web page that cause blink, flash or movement at a high frequency
Blinking should not be used
A mechanism to Pause/Stop screen movement should be provided
Marquee element should not be used in a page.

9. Structure Table Data Table
For simple data table, proper identification attributes and structure should be used.
For complex data table, scope of row and scope of column attribute should be used.

10. Structure Table (cont.) Layout Table
When layout table is used, content of the layout table should be linearized properly.
Convert layout table into data table if layout table is used to organize data.
Use <div> or CSS based layout instead of layout tables to organize the content.

11. Structure – Accessible Data Table
<caption>Shelly's Daughters</caption>
<tr>
<th scope="col">Name</th>
<th scope="col">Age</th>
<th scope="col">Birthday</th>
</tr>
<th scope="row">Jackie</th>
<td>5</td>
<td>April 5</td>
<th scope="row">Beth</th>
<td>8</td>
<td>January 14</td>
</table>
Example from:

12. Comprehensive Visual Display
Color Contrast
It is important to provide enough contrast between the foreground and the background so that all the users can read your content.
Color only
Webpage must be designed so that all information conveyed with color is also available without color.

13. Can you read these sentences?

14. Comprehensive Visual Display
Full Color View
Grayscale

15. User Interface Keyboard Accessibility
All functionality of content must be able to be operated via keyboard
The tab order should reflect correctly the structural design of the page
Keyboard focus should be visually apparent
All web pages must be navigable with keyboard without causing the navigation to be trapped on an element

16. User Interface Default Tab Order:
Upper left corner to lower right corner

17. User Interface Forms All form fields should be properly labeled.
Proper identification and instruction of form controls
Use "activate" rather than "focus" as a trigger for changes of context.
Required form fields should be marked
Proper error handling method.

18. Forms - Examples No indication for a required form field is present
Inconsistent error handlings

19. Navigation Link Requirement
All pages that have links to files that require a special reader or plug-in are required to contain the specified text indicating a link to the reader or plug-in.
Skip navigation links should typically be provided in all webpages.
Broken links Not Found
Link text should clearly identify the target of each link. Good link text should not be overly general.

20. Link Requirement
Do not provide links with different link text going to the same page.
Do not provide links with the same link text going to different pages.

21. Link Requirement Incorrect: Correct:
Faculty can preview and create course content for summer and fall courses. More Info.
Correct:
Faculty can preview and create course content for summer and fall courses. More information about Creating Content in Moodle 2.

22. Link Display
Color should never be the only means to differentiate a link from regular text. Links should be differentiated from other text using various combination of color, bold, underline or italics.
The Universal Design Center website provides the campus community information about Accessibility and Universal Design, Universal Design Principles, and the Accessible Technology Initiative (ATI).
The Universal Design Center website provides the campus community information about Accessibility and Universal Design, Universal Design Principles, and the Accessible Technology Initiative (ATI).

23. Questions?
Universal Design Center (818)