SF State Web Accessibility Standards - Tutorials and Resources
The primary tutorials referenced on this pager are from Lynda.com and WebAim. As an option you might prefer to check out Dev.Opera or Web Accessibility Center, (WAC)Tutorials. Perhaps you might like something on the lighter side, check out Webcredibles comic strips for a fun international take on web accessibility.
(a) A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content).
Lynda.com working with alternate text video tutorials
Linda.com tutorials can be accessed for free when at SF State or on the CSU network or a VPN connection.
- Proper ALT text for navigation images (video, 4:57min, 8.7 MB)
- Proper ALT text for decorative images (video, 5:19 min, 10.3 MB)
- Adding ALT text to an existing site (video, 6:09 min, 11.3 MB)
Text tutorials for long description
- WebAim: Creating Accessible Images, Creating Effective Alternative (alt) Text
- WebAim: Creating Accessible Images Using Long Descriptions
Text tutorial for working with images
(b) Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation.
Text tutorials for multimedia
- WebAim: Web captioning overview
- WebAim: Real-time Captioning
- WebAim: Transcripts
- Access: Multimedia Tutorials
- Embedding video
(c) Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.
Text tutorials for color
(d) Documents shall be organized so they are readable without requiring an associated style sheet.
Text tutorials for cascading style sheets
(e) Redundant text links shall be provided for each active region of a server-side image map.
SF State does not support the use of server-side image maps.
Text tutorial for server-side image maps
(f) Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape.
Text tutorial for image maps
(g) Row and column headers shall be identified for data tables.
Lyndia.com working with tables video tutorials
Linda.com tutorials can be accessed for free when at SF State or on the CSU network or a VPN connection.
- Using tables for data ( video 3:00 5.9 MB)
- Creating header cells ( video 4:05 7.6 MB)
- Adding table captions and summaries ( video 9:09 16.1 MB)
- Styling tables ( video 5:19 10.6 MB)
- Applying header cells to complex tables ( video 6:52 12.9 MB)
- Adding id and headers attributes ( video 5:36 10.4 MB)
Text tutorials for working with tables
(h) Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.
Text tutorials for working with tables
- Adobe Dreamweaver CS4 accessibility
- WebAim: Creating Accessible Tables,Data Tables
- HTML Tables by Opera
(i) Frames shall be titled with text that facilitates frame identification and navigation.
Text tutorials for frames
(j) Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz.
Text tutorials for screen flicker
(k) A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes.
San Francisco State does not endorse the use of text only equivalent.
Text tutorial for text only pages
(l) When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology.
Text tutorial for JavaScript
(m) When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with §1194.21(a) through (l).
Text tutorial for applets and plug-ins
(n) When electronic forms are designed to be completed online, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.
Text tutorial for forms
(o) A method shall be provided that permits users to skip repetitive navigation links.
Text tutorials for skip link navigation
(p) When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required.
Text tutorial for timed response
WAC Tutorial: Using Time Out Scripts
Additional SF State Accessibility Guidelines
(1) Validate your HTML
Pages should pass HTML validation (from W3C). If they do not pass, you need to give a reason why the code cannot validate. You can use this link to run validation tests on your website.
(2) Create meaningful page titles
Page titles should contain unique, short and meaningful descriptions of the content or purpose of the page.
Text tutorialsw for meaningful page titles
(3) Use meaningful and unique text for links
Every link on your page should contain unique and meaningful text for that link. Rather than using text like, "Click Here" provide the full title of the website or document that you are linking to on the page.
Jim Thatcher: Click Here and Other Link Text
SSB BART Group: On the Accessibility of Links
(4) Ensure there is adequate color contrast on the page
Lyndia.com color contrast video tutorials
Linda.com tutorials can be accessed for free when at SF State or on the CSU network or a VPN connection.
- Ensuring proper color contrast ( video 6:36 13.6 MB)
Text tutorial for working with color contrast
(5) Inform the user about pop-ups or new windows
The user should be informed when a link will open in a new window.
Text tutorials for pop-up windows
- WebAim: Links to New Windows, Pop-ups, Other Frames, or External Web Sites
- Juicy Studios: Taking Over my Browser
- Webcredible: Beware of opening links in a new window
(6)Create accessible PDF, Word and PowerPoint Files
Text tutorials for accessible documents
(7) Create structured content
Text tutorials for structured content
