Section 508 and NASASession 3:

Web-based Intranet and Internet Information and Applications

Presentation to Ames Research Center

November 2011

Antonio HaileSelassie

2

What Is Section 508?In 1998, Congress amended the Rehabilitation Act of 1973 to include Section 508, which provides people with disabilities opportunities to gain meaningful employment with the Federal government and to reflect the focus on technology.NASA Section 508 Policy NPR 2800.2

3

Web StandardsWeb-based Intranet and Internet Information and Applications (1194.22) – Web pages (HTML)– Electronic Documents– Social Networking – Multimedia– File Sharing– Web 2.0, AJAX, etc.

4

Non-Text Elements(a) A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content).– Every image, Java applet, Flash file, video file, audio file, plug-in,

etc. has an alternate description, transcript, or other textual equivalent.

– Complex graphics (graphs, charts, etc.) are accompanied by detailed text descriptions.

– The alternate descriptions succinctly describe the purpose of the objects, without being too verbose (for simple objects) or too vague (for complex objects).

– Alt descriptions for images used as links are descriptive of the link destination.

– Decorative graphics with no other function have empty alt descriptions (alt= ""), but they never have missing alt descriptions.

5

FAQ: Non-Text ElementsHow much information actually needs to be in the text equivalent?– The text information associated with a non-text element should,

when possible, communicate the same information as its associated element.

– For example, when an image indicates an action, the action must be described in the text.

– The types of non-text elements requiring actual text descriptions are limited to those elements that provide information required for comprehension of content or those used to facilitate navigation.

– Web page authors often utilize transparent graphics for spacing. Adding a text description to these elements will produce unnecessary clutter for users of screen readers. For such graphics, an empty ALT attribute is useful.

6

Multimedia on the Web(b) Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation. – Multimedia files have synchronized captions. – Captioning for the audio portion and audio description of visual

information of multimedia presentations are considered equivalent alternatives.

7

FAQ: Multimedia on the WebIf a Federal agency official delivers a live audio and video webcast speech, does it need to be captioned?– Yes, this would qualify as a multimedia presentation and would

require the speech to be captioned.

If a website offers audio files with no video, do they have to be captioned?– No, because it is not multimedia. However, since audio is a non-

text element, a text equivalent, such as a transcript, must be available. Similarly, a (silent) web slide show presentation does not need to have an audio description accompanying it, but does require text alternatives to be associated with the graphics.

8

FAQ: Multimedia on the WebDoes video with a countdown, background noise or conversation, or other non-essential audio need to be captioned?– Captioning and audio descriptions are only required to be provided when

important to understand the audio or visual components of a video or multimedia production. That is, even if a production "supports the agency’s mission," only those audio portions that are necessary for the comprehension of the production’s content need to be captioned.

Ex: A videotaped lecture would need to capture the lecturer’s words in captions if it is intended to be used for future training, but the captions need not also relate that students’ chairs were squeaking or that the door at the back of the room was closing loudly as people exited.

– Similarly, only those visual portions that are necessary for the comprehension of the production’s content need to be audio described.

Ex: A videotaped lecture would need to include an audio description of graphics the lecturer draws on a chalkboard to illustrate a point, but would not need to include an audio description of the strictly verbal – or "talking heads" – portion of the lecture.

9

Color(c) Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup. – If color is used to convey important information, an alternative

indicator is used, such as an asterisk (*) or other symbol.– Textual alternatives exist.– Contrast is appropriate.

10

Readability(d) Documents shall be organized so they are readable without requiring an associated style sheet. – Style sheets may be used for color, indentation and other

presentation effects, but the document is still understandable (even if less visually appealing) when the style sheet is turned off.

– Non-HTML web-based documents (i.e. .pdf, .doc, etc.) are presented in an organized readable format.

11

Image Maps(e) Redundant text links shall be provided for each active region of a server-side image map. – Separate text links are provided outside of the server-

side image map to access the same content that the image map hot spots access.

(f) 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.– Standard HTML client-side image maps are used, and

appropriate alt text is provided for the image as well as the hot spots

12

Data Tables(g) Row and column headers shall be identified for data tables.

– Data tables have the column and row headers appropriately identified (using the <th> tag)

– Tables used strictly for layout purposes do NOT have header rows or columns.

(h) 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.

– Table cells are associated with the appropriate headers (e.g. with the id, headers, scope and/or axis HTML attributes).

13

Frames and Flicker(i) Frames shall be titled with text that facilitates frame identification and navigation.

– Each frame is given a title that helps the user understand the frame's purpose

– Each page is titled using <title> tags.

(j) Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz.

– No elements on the page flicker at a rate of 2 to 55 cycles per second, thus reducing the risk of optically-induced seizures.

14

Text-Only Alternative(k) 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.

– A text-only version is created only when there is no other way to make the content accessible, or when it offers significant advantages over the "main" version for certain disability types.

– The text-only version is up-to-date with the "main" version.– The text-only version provides the functionality equivalent to

that of the "main" version.– An alternative is provided for components (e.g. plug-ins,

scripts) that are not directly accessible.

15

Scripting(l) 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.

– Information within the scripts is text-based, or a text alternative is provided within the script itself, in accordance with (a) in these standards.

– All scripts (e.g. JavaScript pop-up menus, form elements) are either directly accessible to assistive technologies (keyboard accessibility is a good measure of this), or an alternative method of accessing equivalent functionality is provided (e.g. a standard HTML link).

– AJAX, scripted CSS changes, scripted server calls, etc do not prevent access.

16

FAQ: ScriptingDoes my webpage need to work with JavaScript disabled and where did that silly notion come from?

– No. Section 508 does not require web pages to work with JavaScript disabled. But, pages using scripting must allow access to all textual information by Assistive Technology. One of the best ways to determine scripting accessibility is keyboard accessibility.

– And, the first version of the World Wide Web Consortium’s (W3C) Web Accessibility Guidelines included a provision that required pages to work with scripting disabled, but Section 508 never required this and it has since been deprecated from the updated W3C guidelines.

17

Applets/Plug-ins(m) 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).

– A link is provided to a disability-accessible page where the plug-in can be downloaded.

– All Java applets, scripts and plug-ins (including Acrobat PDF files and PowerPoint files, etc.) and the content within them are accessible to assistive technologies, or else an alternative means of accessing equivalent content is provided.

18

Electronic Forms(n) 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.

– All form controls have text labels adjacent to them.– Form elements have labels associated with them in the markup

(i.e. the id and for, HTML elements).– Dynamic HTML scripting of the form does not interfere with

assistive technologies

19

FAQ: Electronic FormsHow can developers provide accessible HTML forms?– The first rule of thumb is to place labels adjacent to input fields,

not in separate cells of a table, for example. – For the web developer who does not wish to place form

elements immediately adjacent to their corresponding titles, the HTML 4.0 specification includes the <LABEL> tag that lets web developers mark specific elements as "labels" and then associate a form element with that label. There are generally two ways to use the label tag: explicit labels and implicit labels.

20

Skip Nav and Timed Response(o) A method shall be provided that permits users to skip repetitive navigation links.

– A link is provided to skip over lists of navigational menus or other lengthy lists of links.

(p) When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required.

– The user is alerted that a timed response is required– The user is provided a means to extended the time if needed. – Includes security timeouts

21

Demonstration: Quick Review Of Websites for Compliance

Tools Needed:– WebAim’s WAVE Toolbar for Firefox – Firebug for Firefox

22

ResourcesGeneral and NASA-specific information and resources: http://www.section508.nasa.govNASA virtual Section 508 help desk– section508help@nasa.gov– Available to NASA employees and contractors

GSA site:www.section508.govAccess Board : http://www.access-board.gov/508.htmYouTube captioning tutorial: http://www.google.com/support/youtube/bin/answer.py?answer=100077 Firebug for Firefox: http://getfirebug.com/ Wave Toolbar for Firefox: http://wave.webaim.org/toolbar

23

Questions?