This document provides guidelines and best practices for making web content accessible and compliant with Section 508 of the Rehabilitation Act. It addresses considerations for images, color, CSS, forms, tables, multimedia and more. Key points are that all content must be accessible to people with disabilities, such as blindness, low vision or mobility impairments. Guidelines include providing text alternatives, managing color contrast, logical structure, and use of semantic HTML. Compliance is mandatory for government websites.

1. Section 508 Web Development Best Practices
Keep accessibility considerations in mind when planning and designing a website. Build
accessibility into the web site process and development workflow. Ask yourself how
would someone who cannot move their arms, have impaired sight or other accessibility
requirements use this website?
IT IS THE LAW
All government divisions are required by law to meet accessibility according to WCAG
2.0 AA standards. WCAG 2.0, published in 2008, covers a wide range of
recommendations for making web content more accessible. Accessibility impairments
include blindness and low vision, deafness and hearing loss, learning disabilities,
cognitive limitations, limited movement, speech disabilities, or photosensitivity.
Section508 Standards for Electronic and InformationTechnology
§ 1194.22 Web-based intranet and internet information and applications.
 A text equivalent for every non-text element shall be provided (e.g., via “alt”,
“longdesc”, or in element content).
 Equivalent alternatives for any multimedia presentation shall be synchronized
with the presentation.
 Web pages shall be designed so that all information conveyed with color is also
available without color, for example from context or markup.
 Documents shall be organized so they are readable without requiring an
associated style sheet.
 Redundant text links shall be provided for each active region of a server-side
image map.
 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.
 Row and column headers shall be identified for data tables.
 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.
 Frames shall be titled with text that facilitates frame identification and navigation.

2.  Pages shall be designed to avoid causing the screen to flicker with a frequency
greater than 2 Hz and lower than 55 Hz.
 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.
 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.
 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).
 When electronic forms are designed to be completed on-line, 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.
 A method shall be provided that permits users to skip repetitive navigation links.
 When a timed response is required, the user shall be alerted and given sufficient
time to indicate more time is required.
 Note to §1194.22: 1. The Board interprets paragraphs (a) through (k) of this
section as consistent with the following priority 1 Checkpoints of the Web Content
Accessibility Guidelines 1.0 (WCAG 1.0) (May 5, 1999) published by the Web
Accessibility Initiative of the World Wide Web Consortium
Practical Interpretation of this Law for Web Content
 Must read accurately and smoothly with Jaws screen-reader, be keyboard-
friendly and access all information without dependence on the mouse.
 If your site contains repetitive elements, a “skip navigation” link allows users to
skip over them to access main content area of the page. WAI-ARIA provides the
ability for developers to specify roles for document areas, and provide landmarks
for navigation.
 Include headings, lists, and other structural elements, that facilitate navigation
with a keyboard, and are essential for people who cannot use a mouse. ARIA
roles are becoming an accessibility requirement. ARIA roles define what an
element is or does, ARIA properties define the meaning of elements and ARIA
states are properties that define the current condition of an element.

3.  Users with screen readers or other assistive technology should be able to fill out
and submit all forms. Providing keyboard access requires that each widget is one
tab stop by default. Once a user has tabbed into a widget, the arrow keys can
move focus to each of the widget’s descendants.
 Don’t use color as a navigational tool, because colorblind people and screen
readers cannot differentiate based on color alone.
 The most readable web font is Arial. Google fonts can be used and is compatible
with the following browsers:
o Google Chrome: version 4.249.4+
o Mozilla Firefox: version: 3.5+
o Apple Safari: version 3.1+
o Opera: version 10.5+
o Microsoft Internet Explorer: version 6+
o Font Awesome can be used with modern browsers but is problematic for
IE 7 and requires ie7-min-css.
 Fixed pixel measurements can cause parts of the page not to respond to
resizing, therefore the best practice is to use EM measurements.
 Make the page flow and information clear and intuitive by following usability best
practices.
 All images used to convey information must have alt text and descriptive
captions.
 Multimedia sources require additional treatments for accessibility. If your website
includes video, provide synchronized captioning. Audio podcasts should include
transcripts.
 Any documents included on the website, such as text files and PDFs, should be
accessible. Popups are not allow unless the focus clearly moves to the
appropriate text block and then back to the main page clearly.
 Accessibility checkers online can be used to help locate violations

4. 508 Compliance Checklist
Images
 Do images that convey contextual content have equivalent alternative text
specified in the alt attribute of the img element? Alt tags should be limited in
length.
 Do images that are purely decorative, and not contextual, have empty, or null,
alternative text specified, e.g. alt=""?
 Does the alternate text convey contextual relevance to the page it is on?
 Do images that convey complex content have longdesc attributes or equivalent
text content available elsewhere on the page?
 Does text content contained in images disappear when images are not available,
i.e. is there text contained in the images?
 Do image map area elements have the link destination correctly titled? If the title
attribute is used, it ought not to duplicate the alt text.
 All charts and graphs have either an alternative text description or provide a
description in the text immediately below the chart/graph. Descriptions in the text
must be referenced in the alt tag.
 Image maps use appropriate alternative text and are rendered on the user-side.
 All information, other than logos and banners, rendered in text rather than
images?
Color
 Is information conveyed by color also conveyed by context, markup, graphic
coding, or other means?
 Does a contrast ratio of at least 4.5:1 exist between text, and images of text, and
background behind the text?
 Are links distinguished from surrounding text with sufficient color contrast and is
additional differentiation provided when the link receives focus, e.g. it becomes
underlined?
 Color is not used to convey important information.
 Color contrast is sufficient and color combinations used are distinguishable to
those with color-blindness.

5. CSS and Images disabled
 Documents are readable without an associated style sheet.
 Are links in server-side image maps repeated elsewhere in the page that are
non-graphical, e.g. a normal list of links?
 Are client-side image maps used instead of server-side image maps?
 Do client-side image maps have appropriate alternative text for the image, as
well as each hot spot region?
 Is a correct contrast ratio maintained when images are not available?
When CSS is disabled
 Is a correct contrast ratio maintained when CSS is disabled?
 With CSS disabled, is color and font information rendered in the browser's default
CSS?
 With CSS disabled, are headings, paragraphs, and lists obvious and sensible?
 With CSS disabled, does the order of the page content make sense as read?
 With CSS disabled, does any content that was invisible before stay invisible?
 With CSS disabled, is any content or functionality provided by the CSS through
mouse action also provided through keyboard-triggered event handlers?
 Does each frame and iframe element have a meaningful title attribute?
 Does the page have equivalent content in a noframes element for user agents
that do not support frames?
 Are all cues for filling out the form available to users of assistive technology, e.g.
mandatory fields, help boxes, error messages?
 Is the tab order to reach the form and the tab order between form elements
logical and consistent with the normal and visual order of entering form data?
 Are logically-related groups of form elements identified with appropriate fieldset
and legend elements?
 Do form error messages identify the error(s) to the user and describe them to the
user in text?
 If frames are used, each frame includes a title that describes the frame’s purpose
or content.

6. Forms and Frames
 Form non-text controls, have a text alternative that identifies the purpose of the
non-text control
 Do noframes elements have appropriate equivalent or alternative content for user
agents that do not support frames?
 When electronic forms are designed to be completed online:
o Use the LABEL and ID elements when form controls are text input fields.
o Make dynamic HTML scripting keyboard accessible.
o Use title attributes.
o Include special instructions within FIELD labels.
o Create form fields in logical tab order.
o Render buttons in HTML rather than as images.
Embedded Media
 Is a full text transcript provided for all prerecorded audio?
 Is a full text transcript provided for all prerecorded video?
 Are open or closed captions provided for all synchronized video?
 Is fully synchronized text alternative or sound track provided for all video
interaction that is not otherwise described?
Tables
 Data tables identify row and column headers.
 Data cells in tables are associated with row and column headers.
 When tables are used for layout, does the content linearize properly when layout
tables are turned off?
 For tables containing data, do the elements appropriately define every row and/or
every column headers?
 For tables containing data, do the elements contain the scope attribute for row
and/or column headers that are not logically placed, e.g. in the first row and first
column as applicable?
 For tables containing data, is the summary attribute used to explain the meaning
of the table if it is not otherwise evident from context?

7.  For tables that are used for layout, are th elements or summary, headers, scope,
abbr, or axis attributes NOT used at all?
 For complex tables, do th elements appropriately define row and/or column
headers?
 For complex tables, does each th element contain an id attribute unique to the
page and/or does each th element and any td element that acts as a header for
other elements contain a scope attribute of row, col, rowgroup, or colgroup?
 For complex tables, does any td element that is associated with more than one th
element contain a headers attribute that lists the id attribute for all headers
associated with that cell?
 Are the summary attribute and thead and tbody elements used to clarify the table
meaning and structure if needed?
 Does any page element NOT flicker at an unhealthy rate, e.g. less than three
flashes per second?
 Does any page NOT contain the marquee and blink elements?
Document General Concerns
 Document file name does not contain spaces or special characters.
 Document file name should be concise, generally be limited to 20-30 characters,
but make the content of the file clear in the context in which it is presented.
 If applicable, does the text-only version meet all Section 508 criteria, contain the
same exact information as the original document, and provide the functionality
equivalent to that of the original document?
 Is an alternative provided for components, e.g. plug-ins & scripts, which are not
directly accessible? A text-only version is provided when there is no other way to
make the content accessible. For example, a flow chart must have a text
equivalent.
 Is any content or functionality provided by JavaScript through mouse action also
provided through keyboard-triggered event handlers?
 Are link-type behaviors created with JavaScript on focusable elements?
 If content is provided by JavaScript, is there an equivalent text alternative?
 Are links provided to any special readers or plug-ins that are required to interpret
page content, including a link to download acrobat reader if the content is a pdf?
 Verify that all linked files are 508-compliant or provide a text alternative.

8.  Do special readers or plug-ins comply with the requirements of Section 508
paragraphs §1194.21(a)-(l)?
o (1) When compliance with the provisions of this part imposes an undue
burden, agencies shall provide individuals with disabilities with the
information and data involved by an alternative means of access that
allows the individual to use the information and data.
 File format and size of non-HTML linked files are provided.
 Does each appropriate input element or form control have an associated and
visible label element or title attribute?
 Is placeholder text, redundant or distracting to users of assistive technology?
 Is enough time provided to allow users to read and interact with content?
 Are contextual changes predictable to assistive technology users?
 Does the user have control over the timing of content changes?
 If a page or application has a time limit, is the user given options to turn off,
adjust, or extend that time limit?
 Can automatically moving, blinking, or scrolling content, lasting longer than 3
seconds, be paused, stopped, or hidden by the user?
 Does the user have manual control over the timing of the page updates,
redirection or refresh?
 If an authentication session expires, can the user re-authenticate and continue
the activity without losing any data from the current page?
 Can the user control font size.
Navigation
 If repetitive navigation links are at the beginning of the source of the HTML page,
can a user navigate via the “skip link”, at the top of each page directly to the main
content area?
 If a “skip link” is provided, does the anchor element contain text content that is
visible with CSS disabled?
 If a “skip link” is provided and it is hidden with CSS, is it available to users of
assistive technology, by other means than the display:none method?

9.  Can a user navigate over groups of links, between multiple groups of links, and
between sections of the page content by means of section headings or visible
and audible local links?
 Are heading elements used to convey logical hierarchy and denote the beginning
of each section of content?
Well-Formed HTML and CSS
 W3.org HTML and CSS validation confirms best practice and well-formed code.
 Well-formed and validated CSS is responsive to major devices, platforms and
modern browsers without breaking, and uses elements that are semantic to
clearly describe the content.
 Semantic web technology makes it easier for search engines and screen readers
to convey and organize content.
 Missing a H1 tag could produce an improper hierarchy of headings and 508 non-
compliance. Without an h1 the user has no simple way to learn what the page is
about. Best practice page structure, uses one h1 tag because it is more
comprehendible to those using a screen reader.
 Home text with links back to home page on every page except home page
 Graphics, animations, movies, or other objects avoid strobing, flickering, or
flashing effects.
 Scripts include text and keyboard access, and the web page functions properly
when the scripts are disabled. Images used in navigation scripts needs alt tags
and “onClick” commands are accompanied by “onkeypress.”)

10. References
Access Board. (2000, December 21). Section 508 Standards for Electronic and Information
Technology. Retrieved October 17, 2014, from ttp://www.access-board.gov:
http://www.access-board.gov/guidelines-and-standards/communications-and-it/about-
the-section-508-standards/section-508-standards
Cliff, LeeHunter, leenwebb, Tor Arne Thune. (2012, December 10). Using headings to improve
accessibility. Retrieved October 17, 2014, from www.drupal.org:
https://www.drupal.org/node/561750
Font0awesom. (2013, November 13). dorajistyle / font-awesome-ie7.min.css. Retrieved October
17, 2014, from GitHub: https://gist.github.com/dorajistyle/7461853#file-font-awesome-
ie7-min-css
HHS.gov. ( 2014, August). hhs.gov. Retrieved October 17, 2014, from www.hhs.gov:
http://www.hhs.gov/web/508/accessiblefiles/checklisthtml.html
PowerMapper. (2014, October 20). Retrieved October 20, 2014, from SortSite - Accessibility
Checker and Validator Free demo limited function first 10 pages:
http://try.powermapper.com/demo/sortsite
snook.ca. (2009, March 30). Colour Contrast Check. Retrieved October 20, 2014, from
snook.ca: http://snook.ca/technical/colour_contrast/colour.html
W3.org. (2014, October). G195: Using an author-supplied, highly visible focus indicator.
Retrieved October 20, 2014, from w3.org: http://www.w3.org/TR/WCAG20-
TECHS/G195.html
W3C. (2008, December 11). Web Content Accessibility Guidelines (WCAG) 2.0. Retrieved
October 17, 2014, from http://www.w3.org: http://www.w3.org/TR/WCAG20/
WebAIM. (2014, October 17). http://wave.webaim.org/. Retrieved October 17, 2014, from WAVE
web accessibility evaluation tool: http://wave.webaim.org/
webaim.org. (2014, October). Section 508 Checklist. Retrieved October 2014, from webaim.org:
http://webaim.org/standards/508/checklist
Wood, J. (2011, October). The Best Fonts to Use in Print, Online, and Email. Retrieved October
17, 2014, from American Writers & Artist Inc. since 1997:
http://www.awaionline.com/2011/10/the-best-fonts-to-use-in-print-online-and-email/
YUI Team. (2009, February 23). Improving Accessibility Through Focus Management. Retrieved
October 17, 2014, from YUI: http://www.yuiblog.com/blog/2009/02/23/managing-focus/