Ensuring Web Accessibility for Everyone
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:
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/
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.
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
different link text going to
the same page.
Do not provide links with
the same link text going to
different pages.
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)
.
Universal Design Center
www.csun.edu/accessibility
UDC@csun.edu
(818) 677-5898
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.
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.
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).
Questions? Universal Design Center www.csun.edu/accessibility UDC@csun.edu (818) 677-5898
