Web Accessibility Guidelines
The latest Stanford Medicine format makes use of several accessibility best practices built into the structure of every document. Web Authors also have an important role and responsibility regarding the accessibility of their sites.
The easy stuff - Just do it
-
Images
- Make sure EVERY foreground graphic has an ALT tag, even shim or blank pixels, which should have alt=" " (space) for optimum text-only reading
- Describe function over appearance; example: "Go to Home Page" for a linked image rather than "Image of House"
- Provide longer descriptions (and transcripts, if applicable) of any animation, video or detailed graphic, such as a chart
- If you use image maps, make sure the hotspots have ALT info, as well as the base graphic
-
Color: Don't ever depend on color alone to convey information; colorblindness is a common disability
-
Links: Preserve link context: Avoid "Click Here." It's much easier for people who use non-graphical browsers to use links where the link text makes clear what is linked to. Example:
Bad: "We published a report on our research. Click here to see it."
Good: "You can read the published research report."
Also good: "Research Report - A publication about our research -
Text:<H1> Headline
<H2> Headline
<H3> Headline
<H4> Headline
<P> Paragraph
- Use Heading 1 through Heading 6 to create headlines that structure your document; styled text alone lacks context for text readers and robots
- Only one Heading 1 per page
- Most of your text should be normal, unstyled text; use the built-in stylesheet to style text
-
Scripts (JavaScript), applets and plug-ins: Not everyone has or can use them. If the scripts or embedded objects conatain important information or navigation, try to provide NOSCRIPT, NOEMBED alternate content.
Wherever a <script></script> tag set is used (usually JavaScript) you can include HTML content between <noscript></noscript> tags. Wherever an <embed></embed> tag set is used (Flash or video objects for example), you can include HTML content between <noembed></nobembed> tags. If the browser has JavaScript and plug-ins for the embedded objects turned on, the browser ignores what's between the NOSCRIPT or NOEMBED tags. If they are disabled, the HTML is displayed. It's a good idea to test the function of your pages by using the "Preferences" or "Internet Options" commands for your browser to temporarily turn off scripts and plug-ins before loading the page. -
Flashing content: Avoid BLINK text and graphic animation resulting in flashing or blinking effects
-
Redirects and pop-ups: Use them with caution; be careful about assuming how long it will take someone to read a page; pop-ups and links in new windows can cause confusion, so default to linking within the same window, or warn users that links are pop-ups
- Validate your pages using any number of online tools (a few are included below)
More challenging
- Tables:
- Elaborate table layouts can cause confusion for some readers; use with caution
- Structure tabular data presented in tables with HEADER tags to distinguish the data categories for columns and rows
-
Multimedia: Provide synchronized captioning of audio if possible, transcripts if not, descriptions of video.
Further Reading
» CNet/Builder.com - An excellent introduction to the topic
» Web Accessibility Initiative - World Wide Web Consortium (W3C); the main source, in excruciating detail
» Section 508 - Gov. site regarding standards
» makoa.org - More Links & Resources
» Web-Creators - Notes & slides from Web-Creators lecture
Validation
Text-only browsers: You can see a simulated Lynx version of any public URL using Lynx-meTry Bobby, a general validator
IRT Confluence Wikis