NIH Enterprise Architecture Website

Front End Design Style Guide

• Introduction
• Brand and Visual Voice
• Visual Specifications
• Templates
• Navigation System
• Content Design
• Front End Technology Benchmark

Front End Technology Benchmark: Accessibility/Section 508 Compliance

Sapient will ensure that the site is accessible to all users, wherever possible. The MCMS XHTML templates that Sapient will provide to OCITA shall be Web Accessibility Initiative (WAI) compliant. WAI is a recommendation of the W3C.

Federal Requirements Related to Government Sites

In 1998, Congress amended the Rehabilitation Act to require Federal agencies to make their electronic and information technology accessible to people with disabilities. Section 508 (link to Section508.gov) of the Rehabilitation Act (29 U.S.C. 794d), as amended by the Workforce Investment Act of 1998 (P.L. 105-220), August 7, 1998, was enacted to eliminate barriers in information technology, to make available new opportunities for people with disabilities, and to encourage development of technologies that will help achieve these goals. The law applies to all Federal agencies when they develop, procure, maintain, or use electronic and information technology. Under Section 508, agencies must give disabled employees and members of the public access to information that is comparable to the access available to others.

The Section 508 technical standards related to web-based Intranet and Internet information and applications systems (Subpart B, section 1194.22) effectively enact into Federal regulations the access guidelines developed by the aforementioned WAI.

What Does This Mean?

The Section 508 provisions ensure access for people with vision impairments who rely on various assistive products to access computer-based information, such as screen readers, which translate content on a computer screen into automated audible output, and refreshable Braille displays. Certain conventions, such as verbal tags or identification of graphics and format devices, like frames, are necessary so that these devices can "read" them for the user in a sensible way. The standards do not prohibit the use of web site graphics or animation. Instead, the standards aim to ensure that such information is also available in an accessible format. Generally, this means use of text labels or descriptors for graphics and certain format elements. (HTML/XHTML code already provides an alt attribute tag for graphics which can serve as a verbal descriptor for graphics). The provisions also encourage proper structural markup in code, e.g., use of header tags for headings and use of the title tag for page naming. The regulations also address a wide range of other tools of webcraft the usability of multimedia presentations, image maps, style sheets, scripting languages, applets and plug-ins, and electronic forms.

The rules of Section 508 also apply to the descriptive elements related to the display of tabular data in tables in an ordered and meaningful form. Consequently, tables should utilize their summary and caption attributes, as well as other more granular means at the cell level, to ensure accessibility of the said content to all readers.

The basics of usability and accessibility are reviewed at HHS’ Usability.gov website.

What Shall We Do?

Sapient will use proper document structure to implement these regulations. In simple terms, that means the following:

General Content

The WAI recommends that simpler language is better. Keep language as simple as possible. Explain, in simple language, the meaning of all terminology. If the understanding of a given document is predicated upon the comprehension of a particular set of knowledge, define the prerequisites and provides links to learn the meaning of those prerequisites. Please refer to the Content Guideline for details regarding content style for the NIH Enterprise Architecture website.

General Markup

• Use the title tag to sensibly name a document’s content.
• All documents shall employ structural, not presentational, markup within its code.
  • Use header tags, not bold or italics, to define a document’s sectional headings
  • Use p tags to define paragraphs, not the break (br) tag.
  • Use the blockquote tag only to offset extended quotations, not as a method of presentation.
  • Lists shall be defined as lists—definition, ordered, or unordered, not as text separated by breaks.
  • Words requiring emphasis shall use the emphasis tag, not italics.
  • Words requiring enforcement shall use the strong tag, not bold.
• All documents should follow a logical flow, thereby allowing an user of a non-standard browser to understand the relationships between the document's various sections.
• All documents shall contain navigational elements accessible to all users, generally in textual elements.
  • Navigation elements shall be consistent across all pages.
  • All navigation elements shall function in a consistent manner, e.g., if ‘Home’ link takes you to the site’s home page on one page, it will take a you to the home page on all pages.
  • The metadata link tag should be employed to allow expression of relationships between documents, e.g., next, previous, index, etc.
• Use the abbr tag to define abbreviations. Use the tag’s title attribute to spell out the abbreviation for those with memory difficulties and its lang attribute to define its language, e.g.

  <abbr title="Maryland" lang="en">MD</abbr>

• Use the acronym tag to define acronyms. Use the title attribute to spell out the meaning of the acronym and the lang attribute to define the acronym’s language, e.g.,

  <acronym title=”National Institutes of Health”>NIH</acronym>

  or the Spanish version

  <acronym title=”Institutos Nacionales de la Salud” lang=”es”>INS</acronym>.

  Using this tag is very helpful to anyone with memory difficulties, especially in jargon-laden documents.
• The language attribute, which applies to many tags, may take not only a language notation, but also an optional country notation in this form, viz. lang=”en-us”. The default language is English.
• Use the address tag to define actual, physical street or web addresses.

Forms

• Design the form to follow a logical flow.
• Use alt tags for image buttons.
• Use accesskey tags to allow keyboard access to form functions.
• Use the label tag to provide accessible labels for a form’s input elements.
• Use tabindex tags to allow tabbing between form fields.

Links

• Use the accesskey attribute to allow keyboard accessibility.

Tables

• Tables shall contain only tabular data
• Declaration of table titles via the caption tag is required, even if the visibility of the caption itself is suppressed in via screen style sheet.
• Table summaries, via the summary tag, are required.
• Table shall use the table header (thead), table body (tbody), and table footer (tfoot) tags as appropriate.
• Usage of column and columnar group notation is encouraged to allow non-visual users to better understand the table’s data internal organization.
• Header cells shall use the th tag to denote them as such.
• Both th and td tags should use either the header or scope attributes to allow non-standard browsers to properly interpret cell information, e.g., allow an aural browser to voice the header information regarding the content of a particular cell in a financial statement.
• Use the id attribute on all tags to better allow identification of table parts by non-visual browsers.

Visual Elements

• All images shall use alt tags to describe them, e.g. an image comprised of the word ‘Home’ shall have an alt attribute saying ‘Home’.
• Any image that displays information of functional nature, i.e, a chart or graph, essential to the content of the document shall use the longdesc tag. This tag will link to an external document which provides a detailed explanation of the image.
• The area tag of image maps shall use the alt tag to explain the map linkage.
• All multimedia elements shall provide appropriate textual access. The actual access method is dependent upon the particular media.