The City and County of San Francisco has adopted enhanced Web Development guidelines based upon the Federal Access Board’s Section 508 Guidelines (a)-(p). Enhancements to these guidelines have been made to address new technologies and to provide more robust detail for developers. References to Web Content Accessibility Guidelines have been included as well as custom checkpoints.

a. Provide “Alternate Text” Equivalent for Non-Text Content

1. All meaningful non-text elements are required to contain a text equivalent, for example, by providing an ALT attribute, or in element content. Non-text elements include, but are not limited to, images, image map regions, applets and programmatic objects, frames, scripts, stand-alone audio files, audio tracks of video, and video.
   1. An ALT attribute will not exceed 150 characters.
   2. A LONGDESC attribute is required within an element if alt text exceeds 150 characters.
   3. Elements which are strictly for decoration, such as bullets, will have an ALT attribute defined with no value (e.g., alt="").
2. All OBJECT and APPLET elements are required to contain element content. These elements typically use technologies that are not available to all users. The element content or the ALT attribute shall be used to describe the purpose of the applet element. The element content shall be used to describe the purpose of the object element.
3. When EMBED elements are used, the NOEMBED element is required in the page. EMBED elements present functionality not available to all users. The NOEMBED element can be used to provide a description.

b. Multimedia

1. Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation.
2. Audio within content: Information will not be conveyed exclusively by audio alone (audio clip sounds to provide instructions, warnings or other information).
3. Audio Presentation: Provide text transcripts for audio containing speech.
4. Multi-Media: Provide synchronized text captions for multi-media content containing speech, or other audio necessary to understand the content. [Ref: WCAG 1.4]
5. Video/Visual: Provide video description for multi-media content that contains video, or other visual information necessary for the understanding of the content. [Ref: WCAG 1.4]
6. Web Cast: All Web casts will have synchronized captioning of the speech, or other audio content contained in the Web cast.

c. Use of Color to Convey Information

1. Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.
2. Text, graphs or diagrams and their background colors must have sufficient contrast. [Ref: WCAG 2.2]

d. Document Structure & Style sheets

1. Documents shall be organized so they are readable without requiring an associated style sheet.
2. Web pages will be created using the most current Web document specifications (e.g., HTML, XML, and XHTML).
3. In addition to using most current Web document specification, use valid and semantic markup to convey document structure. Avoid the use of deprecated HTML elements and attributes.

e. Server-side Image Maps

1. The of use server-side image maps is not recommended.
2. Server-side image maps should only be used in instances where a region of the map cannot be provided by an available geometric shape.
3. Redundant text links shall be provided for each active region of a server-side image map.

f. Client-side Image Maps

1. Client-side image maps shall be provided instead of server-side image maps.
2. All AREA elements are required to have the ALT attribute to provide a text equivalent.
3. Redundant text links will be provided for each active region of a client-side image map. [Ref: WCAG 9.1, P1]

g. Data Tables

1. Row and column headers will be identified for data tables.
2. Tables with tabular data will use the SCOPE attribute to identify both horizontal and vertical headings.
3. All data tables are required to contain the SUMMARY attribute.
4. Markup shall be used to associate data cells and headers cells for data tables that have two or more logical levels of row and column headings.

h. Layout Tables (For Data Tables & Table Header Cells see guideline g)

1. Avoid using tables for content layout. When it is necessary to use tables for layout, ensure that the reading order of the content is logical. [Ref. WCAG 5.3, P2]

i. Frames, Context and Orientation

1. If possible, do not use frames.
2. If frames must be used, a NOFRAMES alternate shall be provided.
3. All frame elements shall use a descriptive NAME and TITLE attribute to identify its purpose and how each frame relates to each other. [Ref: WCAG 12.1, P1 / WCAG 12.2, P2]
4. For title text greater than 150 characters, a LONGDESC attribute shall be used.

j. Flicker/Blink/Animation

1. Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz (2 to 55 flashes per second)
2. The use of the deprecated blink and marquee elements is prohibited.
3. Avoid the use of any unnecessary animation on the page if it does not enhance the delivery of the page content.
4. A mechanism will be in place to allow users to turn off screen elements that flicker. [Ref: WCAG 7.3, P2]

k. Text-Only Pages

1. A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of these standards, when compliance cannot be accomplished in any other way.
2. The content of the text-only page shall be updated whenever the primary page changes.
3. A ‘Text Version’ link shall be made available within each page.

 

l. Scripting languages

1. When pages use programmatic elements such as scripting languages and applets 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.
2. Ensure that pages are usable when scripts or applets are turned off or are not supported. If this is not possible, provide equivalent information on an alternative accessible page. [Ref. WCAG 6.3, P1]
3. Device-independent event handlers will be used instead of event handlers that require a specific input device (e.g., mouse or keyboard). If a generic event handler is not available, more than one device-specific event handler will be used. [Ref: WCAG 6.4, P2]

m.Downloadable/Embedded Objects

1. Provide accessible HTML or text versions instead of downloadable documents (PDF, Word) whenever possible. If a downloadable document must be provided, ensure that it is accessible in compliance with guidelines (a) through (i).
2. When a web page requires that an applet, plug-in or other application (such as MS Word or Adobe PDF) 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 guidelines (a) through (l).
3. If the plug-in or applet is not compliant with guidelines (a) through (l), direction on how to access an accessible version of the same content provided by the plug-in or applet will be provided.
4. If a downloadable document cannot be provided in an accessible electronic format, provide information on how to request an alternate format.

n.Forms

1. 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.
2. Associate labels explicitly with their respective form field elements such as buttons input type="button", text boxes input, list boxes select, and more. A text label typically identifies each field.
3. Provide any special form field instructions within the form field labels.
4. Form field elements will be in logical tab order.

o.Navigation and Links

1. A method shall be provided that permits users to skip repetitive navigation links.
2. All navigation mechanisms will be provided in a consistent manner. [Ref. WCAG 13.4]
3. Web pages will be designed to be device independent, for example, allow navigation with or without a mouse.
4. All text links will indicate the destination or purpose and are understandable out of context.
5. Avoid the use of small image links or text links smaller than 12 pixels wide by 12 pixels tall.
6. Links pointing to an additional Web browser, pop-up window or a redirect will provide advance notice (e.g., "the following link will open a new browser window").
7. All Web pages will allow the user to return to the Official San Francisco Web site home page.

p.Timed Responses

1. When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required.
2. Client-side auto-refresh or client-side auto-redirect will not be used without a mechanism in place to first alert the user. [Ref. WCAG 7.4]

Additional Requirements:

• Contact information should be easily identified for each site. Contact information should include email, telephone, and if available, text telephone (TTY).
• Clearly identify changes in the natural language of a document's text and any text equivalents (e.g., captions). [Ref: WCAG 4.1, P1]
• Ensure that equivalents for dynamic content are updated when the dynamic content changes. [Ref: WCAG 6.2, P1]
• Use the clearest and simplest language appropriate for a site's content. [Ref: WCAG 14.1, P1]
• Clarify the first appearance of acronyms on each page by providing the full wording of the acronym followed by the acronym in parenthesis.