Ensuring Web Accessibility for Everyone

Slide Note

Web accessibility technology plays a crucial role in ensuring that websites are usable by individuals of all characteristics. Basic accessibility criteria include alternative descriptions, multimedia structure, and comprehensive visual displays. Providing alternative text for images and accessible scripting techniques are essential practices. Interactive multimedia, screen movement considerations, and proper table data structuring are also key aspects of creating accessible web content.

leyv_ala Follow

Uploaded on Oct 04, 2024 | 0 Views

Download Presentation

Please find below an Image/Link to download the presentation.

The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.

E N D

Presentation Transcript

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 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 Text Best Practices Poor example of Alt text: Good example of Alt text: Student using a microscope Photo of a Student

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

Interactive Multimedia 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

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.

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.

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 <table> <caption>Shelly's Daughters</caption> <tr> <th scope="col">Name</th> <th scope="col">Age</th> <th scope="col">Birthday</th> </tr> <tr> <th scope="row">Jackie</th> <td>5</td> <td>April 5</td> </tr> <tr> <th scope="row">Beth</th> <td>8</td> <td>January 14</td> </tr> </table> Example from: https://webaim.org

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?

Full Color View Grayscale

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

Default Tab Order: Upper left corner to lower right corner

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

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 the same link text going to different pages. Do not provide links with different link text going to the same page.

Link Requirement Incorrect: 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).