Skip to content

Instantly share code, notes, and snippets.

@davatron5000
Last active December 11, 2015 16:28
Show Gist options
  • Save davatron5000/f2b8ad70543a95018d9f to your computer and use it in GitHub Desktop.
Save davatron5000/f2b8ad70543a95018d9f to your computer and use it in GitHub Desktop.

Section 508 for Web Designers

Section 508 is a portion of the Rehabilitation Act of 1973 which sets the accessible information standards for government agencies in the United States. A subset of Section 508 relates to specifically web-based intranet and internet information. Here is a summary of the requirements:

  • (a) Must have text alternatives for non-text elements
  • (b) Multimedia must have synchronized alternates (i.e, captions)
  • (c) Information conveyed with color must also be available without color
  • (d) Content must be readable without stylesheet
  • (e,f) Clauses (2) related to outdated image <map> elements
  • (g) Data tables must have row and column headers
  • (h) Irregular or complex data tables must have markup to associate table headers and rows
  • (i) <frame> elements (outdated) must have titles, extends to <iframe> elements as well
  • (j) Avoid rapid and/or slow animations above 2Hz and below 55Hz to accomodate users with photosensitive or motion triggered disorders.
  • (k) Must have up-to-date text-only equivalent of all web pages
  • (l) Script created content/UI must have functional screen readable text
  • (m) Links to required plug-ins and applets are required
  • (n) Must have accessible form elements
  • (o) Skip navigation links for repetitive navigations
  • (p) For timed responses, users shall be alerted AND given sufficient time to indicate more time is requires (e.g., bank session timeouts)

It's important to note that Section 508, as it relates to web development, is a bit of an outdated document. It is recommended that authors aim for WCAG 2.0 compliance as the U.S. government is expected to adopt the standard in the near future.

@nattarnoff
Copy link

(e,f) Regarding image maps, I'd just have a line mentioning these aren't commonly used as there are better methods these days, but if you decide to include them, follow the 508 rules.

(h) You misspelled "headers". you have "hearders".

(i) Does "Frame titles" apply to iframes? I think it does and therefore should be titled (this helps with JS too I think? I've never tried).

(j) I'd recommend leaving the flicker, but actually focus it more like: Heres the standard, but "many people using the web have issues where visual cues will trigger pain, disorientation or worse. Avoid flashing, flickering and rapid animation whenever possible. If required to have animation, provide the user a method to turn it off."

@davatron5000
Copy link
Author

http://codepen.io/davatron5000/pen/JqAjt A code pen for that Hz stuff I don't really understand. I mean, I understand it, I just couldn't ever visualize it until now.

@davatron5000
Copy link
Author

@gtarnoff - I think I've got this pretty well wrapped up. If you have a minute, I'd love some feedback.

@jalbertbowden
Copy link

is this still up for review? or you got it all wrapped up? i think it looks good, i would just add examples for a bunch of them, giving the reader a vanilla solution, as well as showing them exactly what is meant.

@davatron5000
Copy link
Author

@jalbertbowden Feel free to give me some bullet points for improvements and I'll see what I can do.

I want to avoid bloating the article, keep it readable and on task, so maybe some of the examples can be other posts. For example, I think all the <table> headers & rows stuff could be broken out into a separate "How-to: Make accessible tables" article.

So yeah, let me know what you had in mind and I can maybe work it in. Or maybe we can ship this and make improvements along the way.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment