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

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

Training Website: Errors Example Page UDC Web Accessibility Problems Page

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.

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

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: http://demo.lateralcode.com/slideshow-with-buttons/

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

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.

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.

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.

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: https://webaim.org

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.

Can you read these sentences?

Comprehensive Visual Display Full Color View Grayscale

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

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

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.

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

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 - 404 Not Found Link text should clearly identify the target of each link. Good link text should not be overly general.

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.

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.

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).

Questions? Universal Design Center www.csun.edu/accessibility UDC@csun.edu (818) 677-5898