Page maintained by
Last revised: 04 July 2008
Some comments and instructions in this page are for audio browsers and users who browse this site with screen readers. If you can see this paragraph and you are not using a text-only or screen reader browser, either the style sheet for screen viewing didn't load (if so, click on "refresh" to reload the style sheet), or you need to use a World Wide Web Consortium (W3C) standards-supporting browser that has full XHTML 1.0 Transitional and Strict and cascading style sheet (CSS) level 2 support. (For information about these browsers, see Standards-supporting browsers.) The Society for Technical Communication is a W3C member: http://www.w3.org/.
For additional information, see the Accessibility Design and Features page.
Washington, DC Chapter
The following is the left side navigation menu for the page.
- WDC Exclusives
- Home
- Chapter Blog
- Chapter Forum
- Competitions
- Discussion Lists
- Employment
- Events Calendar
- Newsletter
- Chapter Information
- About Events
- WDC Members
- Committees
- Documents & Data
- FAQs
- History
- Officers
- Photo Archives
- Scholarship
- SIGs
- Speakers Bureau
- Sponsors
- Volunteers
- Wish List
- STC Connections
- About STC
- Join STC & WDC
- Membership
- Related Organizations
- RSS News Feed
- Local Information
- Travel
- Washington, DC
- Weather
- Research Tools
- Arts & Sciences
- Communication
- Web Resources
- Search Tools
- Site Information
- About This Site
- Accessibility
- Awards
- Feedback
- Legal Information
- Site Map
- What's New
WDC Chapter's aStore
The following is the main content for the page.
Section 508, Accessibility, and CSS:
Pull browser window out or in to widen or shorten line length.
Section 508, Accessibility, and CSS:
Useful URLs for Designing Web Pages
Last revised 04 July 2008
Compiled by Cynthia A. Lockley with additional submissions from Bill Killam and Kathy Bine. This handout was prepared for the 10 December 2003 presentation of "Section 508: Background, Practical Strategies and New Technologies" (speakers: Bill Killam, Cynthia Lockley, and Kathy Bine).
Additions and Updates will be added when needed to prevent link rot. When updates are made, they will be marked with a "New" flag.
• Accessibility
• Color
• CSS
• Miscellaneous
• Good Examples
• Deliberate Bad Examples
• Tools
Accessibility
- AccessAbility SIG
- Access.Adobe.com
- Access keys: Unlocking Hidden Navigation: A List Apart
- http://www.alistapart.com/articles/accesskeys/#denied—(which browsers don't support them yet)
- Access Keys / Site Map
- http://www.seoconsultants.com/text/directory/—(everything has an access key)
- Accessible Slideshows
- "HTML Slidy: Slide Shows in XHTML", by Dave Raggett, W3C.org
- "Suckerfish HoverLightbox", by John Christopher, MondayByNoon.com
- About HTML
- Boston-IA: Bringing Information Architecture
- CSS Aural properties
- Designing Accessible Web Sites Booklet
- http://www.uiowa.edu/infotech/WebAccess.htm#Images
(Image Links, and Image Maps)
- http://www.uiowa.edu/infotech/WebAccess.htm#Images
- Designing More Usable Web Sites
- Dive Into Accessibility
- Electronic and Information Technology Accessibility Standards
- Guidelines for Accessible and Usable Web Sites: Observing Users Who Work With Screen Readers. Interactions, [X. 6], November-December 2003, 38-51, Redish and Theofanos.
- HTML Techniques for Lists
- IBM Accessibility Center
- Liquid CSS Layouts - Design Alternative to Table Based Websites - Netscape
- Microsoft software products Volunteer Product Accessibility Templates (VPATs)
- Microsoft and Section 508 http://www.microsoft.com/enable/microsoft/section508.aspx
- Ohio State Policy and Resources for Web Developers
- Our SIG's "e-Lifelines": Tapping Online Resources to Help Meet Special Needs. Proceedings, STC 50th Annual Conference, 2003. Lockley and Murray.
- Section 508 and Why It Matters. Bine, 2001.
- Section 508: Section 508 Standards
- Tables: identifying table rows and columns
- Techniques and Concepts
- Test sites
- http://www.t-2.at/index4.html—then click on the link at the bottom to get a Google translation from German into English
- The Paciello Group – a leading international authority on Internet and software accessibility
- The Section 508 Universe, Buy Accessible database
- This HTML Kills: Thoughts on Web Accessibility: A List Apart
- Trace Research and Development Center
- Usability.gov
- Usability Interface and Special Needs SIG. April 2003 joint edition Redish and Theofanos.
- http://www.stcsig.org/usability/newsletter/home-0304.html—Includes the following articles: "Observing Users Who Listen to Web Sites", Redish and Theofanos. "Position Paper on the Suitability to Task of Automated Utilities for Testing Web Accessibility Compliance", Killam and Holland.
- W3C Web Accessibility Initiative (WAI)
- http://www.w3.org/WAI/
provides updates on accessibility legislation worldwide and for U.S.; describes solutions to inaccessible code; also comparison of validation/remediation software
- http://www.w3.org/WAI/
- Web Accessibility for Section 508
- Web Content Accessibility Guidelines 1.0
- Web Tables
Color
- Accessibility Color Wheel Version 1.0 by Giacomo Mazzocato. When you hover over the color wheel, you'll see text in colors for normal, Deuteranopia, Protanopia and Tritanopia color vision simultaneously. An "OK" message is displayed when you hover over an accessible color. By clicking on the color, you can copy the hex values. The tool may be used for foreground and background color contrasts. You may download the javascript if you want to use it offline.
- BT Age & Disability Action: "Safe web colours for colour-deficient vision" Information and design tools for designing sites so that color cues are not lost.
- Color Laboratory The color laboratory allows you to select colors and see how they appear next to one another and in various foreground / background combinations. It also allows you to see those colors as they might appear to color-blind users.
- Colour Vision Easy to use tool to quickly see color deficiencies with color palettes for Protanomaly (low red), Protanopia (no red), Deuteranomaly (low green), Deutanopia (no green), Tritanomaly (low blue), Tritanopia (no blue), Typical Monochromatic, ATypical Monochromatic.
- Color Contrast Analyzer: "Colour contrast analyser allows you to check the contrast of two colours using the W3C's colour contrast algorithm by specifying the colours directly."
- "Computer Color Matters -Is your computer color blind?" from Color Matters® Computers
- Design Evaluation provides three ways to see what your Web site's colors look like to the color-blind.
- Fonts excellent resource for information about fonts from Webaim
- Marianne's Color Codes
CSS
- All CSS Properties Listed Alphabetically
- Alternate style sheets
- Assigning browser-specific styles
- Aural style sheets
- Best Practices for Web Development
- Box Model Hack - css-discuss
- Browser Detect object checks
- Browser sniffer - a VERY bad thing to rely on!
- Cascading Style Sheets
- Cascading Style Sheets CSS Tutorials - Demos, Menus, Layouts, and more
- Cascading Style Sheets, Level 1
- Cascading Style Sheets, Level 1 tags
- Cascading Style Sheets, Level 2
- Cascading Style Sheets, Level 2 tags
- Cascading Style Sheets, Level 2.1
- Cascading Style Sheets, Level 3 (under development)
- Code Style: Projecting your style
- CSS aural style sheet samples
- CSS Background Properties table for Netscape, IE, and W3C Standards
- CSS bugs, solutions, and workarounds
- CSS Buttons
- CSSCheck, a Cascading Style Sheets Lint
- CSS Cookbook: Bullet Lists
- CSS Guide: IE bugs
- CSS link visited hover active required order
- CSS designing without tables
- CSS discuss and hints
- CSS drop shadows
- CSS Float Html Tutorial
- CSS Max Design - Presentations and articles
- CSS Print Profile
- CSS resources, CSS tutorials, cascading style sheets, tutorials, articles, tips, resources -
- CSS shorthand properties - an introduction
- CSS Tabbed Navigation
- CSS Table backgrounds
- CSS Tableless Layouts
- CSS - Print Tutorial
- css/edge
- CSS: List Properties
- CSS3 module: Multi-column layout
- CSS Properties
- CSS Zen Garden: The Beauty in CSS Design
- CSS Z-index property
- CSS Vertical Alignment
- CSS Tutorial
- CSS Tabs: with sub-menus
- Eric Meyer on CSS: Tricking Browsers and Hiding Styles
- Extend Your List Bullets Selection, Part 1
- Favelets for IE
- Forms Using CSS
- From Table Hacks to CSS Layout: A Web Designer's Journey: A List Apart
- Guide to Cascading Style Sheets
- HTML Validators
- IE 6 CSS improvements
- JavaScript Fix For Text That's Too Tiny
- Little Boxes
- Listamatic: Listamatic: one list, many options
- Maccessibility: "Pure CSS Pulldowns" and Accessibility
- Making the Absolute, Relative
- Menu Bar cross browser support for IE, NN, and Opera
- MSIE6 bug with floating divs and spacers: evolt.org, Code
- Opera supported Web Specifications
- Practical CSS Layout Tips, Tricks, & Techniques: A List Apart
- Pure CSS Pull-Down Menus
- Re: [css-d] does the voice-family hack break browsers?
- RE: [css-d] Every second row a different color in a table?
- RichInStyle.com
- Safari information for Web designers & browser checkers
- Screenreader Visibility - css-discuss
- Style Switching - css-discuss
- Style Sheets.com
- http://www.highdots.com/css-editor/—(CSS Editor / HTML Editor / CSS Validator / CSS Tutorial), crossbrowser stylesheets
- W3C Tableless Layout: HOWTO and FAQ
- W3C Tableless Layout HOWTO
- W3C Document Object Model
- W3C HTML Home Page
- Web Browser Battles
- Web Browser Competition - Game On - compares IE 7 to other browsers
- Web Design Services, Web Position - A Sure Fit
- Web Matters - CSS Buttons - Netscape
- Web Style Sheets
- What CSS-implementation errors are in MS IE browsers (Finnish English)
- Working with CSS - Introduction to CSS Layout - Netscape
- XHTML: Using CSS to Style Tables
- XHTML strict reference sheet
- XHTML: Differences between Strict & Transitional
Miscellaneous
- ASP and how to work with it
- Coding Guides
- Copyright: An Overview
- Font guide for webmasters
- GPO Style Manual
- GrammarLogs (Q&A about English grammar from 1997-current year)
- Guide to Grammar and Writing
- Human Performance & Achievement Resources
Link Directories Directory: The Best Human Performance Resources - Lorem Ipsum - All the facts - Lipsum generator
Good Examples
- LiteraryMoose.info
- Eric Meyer's CSS/Edge
- Mozilla Demos
- Ontario Ministry of Energy
- SHRM Online Sitemap
http://www.shrm.org/sitemap/
Deliberate Bad Examples
(a How To for making CSS do annoying things—use them to destroy your otherwise perfect and visually attractive CSS design)
- CSS Destroy
- Eye-to-Hand Coordination CSS Hover Meter
Tools
- AccVerify™ (for Unix and Windows)—allows developers to check Web pages for W3C and Section 508 accessibility violations (they offer desktop and enterprise versions)
- InFocus™ (for Unix and Windows)—InFocus™ allows developers to check Web pages for Section 508 accessibility violations and automates the remediation process (they offer desktop and enterprise versions)
- Style Master CSS Editor for Windows and Macintosh (their tutorial course is excellent)
And for a little humor on the side when you get really frustrated:
- 150 computer one-liners
• Accessibility
• Color
• CSS
• Miscellaneous
• Good Examples
• Deliberate Bad Examples
• Tools
![[W3C Member]](images/w3c_member-39x28.gif "STC is a W3C member."){kind=small}
![[Valid XHTML 1.0]](images/valid-xhtml10-blue.png "This page is valid XHTML 1.0."){kind=small}
![[Valid CSS!]](images/valid-css2-blue.png "This page is valid CSS 2."){kind=small}
![[Made with Cascading Style Sheets]](images/mwcos-79x28.gif "This page uses Cascading Style Sheets (CSS) for the page layout."){kind=small}
![[Cynthia Says Tested]](images/Ctested-79x28.gif "Passes Section 508 standards and WCAG guidelines for accessibility."){kind=small}
![[Web Access Symbol (for people with disabilities)]](images/access2-31x28.gif "This site uses accessibility features to accommodate disabled users."){kind=small}
![[Level Triple-A conformance: W3C-WAI Web Content Accessibility Guidelines 1.0]](images/wcag1AAA-79x28.gif "This page conforms to W3C-WAI 1-, 2-, and 3-level accessibility guidelines."){kind=small}
![[Passes the Lynx Validator]](images/lynx_inspected_paw-79x28.gif "This page inspected by the Lynx Viewer for Lynx users."){kind=small}