Mass.gov
Massachusetts Department of Elementary and Secondary Education
Go to Selected Program Area
 Massachusetts State Seal
 News  School/District Profiles  School/District Administration  Educator Services  Assessment/Accountability  Family & Community  
 > Administration  Finance/Grants  PK-16 Program Support  Information Services  
>  WebTeam Home
>  Accessibility Support
>  Programming Standards
>  Conventions
>  ESE Logos

Developer's Guide to Accessibility

  1. Write HTML to current W3C standards

    Massachusetts Standard 1.1: A state agency web page must use HTML markup tags according to industry standards.

    • Replace deprecated tags and attributes with style sheets, (in particular U, I, B, FONT, ALIGN)

    • Always use closing tags, (e.g. </P>, </LI>, </OPTION>)

    • Every page must have DOCTYPE declaration:
      example: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    • Write Semantic XHTML - markup conveys the meaning of the information (this is a paragraph, this is emphazized text etc.) and not define its presentation

  2. Use Scope Attribute for TABLES

    Massachusetts Standard 1.1: A state agency web page must use HTML markup tags according to industry standards.

    Federal Standard Section 508, 1194.22 (g) Row and column headers shall be identified for data tables.

    Federal Standard Section 508, 1194.22 (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.

    • Using the" scope" attribute is one of the most effective ways of making HTML compliant with these requirements. The first row of each table should include column headings. Typically, these column headings are inserted in <TH> tags, although <TD> tags can also be used if you add the attribute scope="col" This associates the text in that cell with every cell in that column.

    • Similarly, the first column of every table should include information identifying information about each row in the table. Each of the cells in that first column are created by either <TH> or <TD> tags. Include the following attribute in these cells: scope="row" This attribute associates the text in that cell with every cell in that row.

    EXAMPLE:

    <table cellspacing="0" cellpadding="3" class="borderall">
     <TR>
      <TH scope="col" > </TH>
      <TH scope="col" >Spring</TH>
      <TH scope="col" >Summer</TH>
      <TH scope="col" >Autumn</TH>
      <TH scope="col" >Winter</TH>
     </TR>
     <TR>
      <TD scope="row">Betty</TD>
      <TD>9-5</TD>
      <TD>10-6</TD>
      <TD>8-4</TD>
      <TD>7-3</TD>
     </TR>
     <TR>
      <TD scope="row" >Wilma</TD>
      <TD>10-6</TD>
      <TD>10-6</TD>
      <TD>9-5</TD>
      <TD>9-5</TD>
     </TR>
     <TR>
      <TD scope="row" >Fred</TD
      <TD>10-6</TD>
      <TD>10-6</TD>
      <TD>10-6</TD>
      <TD>10-6</TD>
      </TR>
    </TABLE>

    This table would be displayed as follows:

      Spring Summer Autumn Winter
    Betty 9-5 10-6 8-4 7-3
    Wilma 10-6 10-6 9-5 9-5
    Fred 10-6 10-6 10-6 10-6


  3. Use Style Sheet for ALL formatting

    Massachusetts Standard 1.2: A state agency web page should control presentation with style sheets, but the web pages must be organized so they are readable without requiring an associated style sheet.

    • All formatting must be derived from style sheets. Do not use HTML tags to convey formatting. See list of Deprecated Tags and Attributes.

    • It is highly recommended developers link to the master ESE Sheet. This styles is optimized for accessibility and use colors from the ESE palette. You should not need to use a second style sheet.

  4. No Frames

    Massachusetts Standard 1.3: A state agency web page should avoid using frames.

    By EOE convention - no framesets. The following accessibility features are required for iFrames

    • write a meaningful "name" and "title" for each iframe
    • include a link to the content that is presented within the iframe so that the user can access it directly
    • all content wihin the iframe must meet accessibility standards
    • set scrolling to "auto" (default) or "yes"
  5. Proper Use of Alt Text

    Massachusetts Standard 3.1: A state agency web page must provide a text equivalent for every non-text element

    Federal Standard Section 508, 1194.22(a) A text equivalent for every non-text element shall be provided (e.g., via "alt," "longdesc," or in element content).

    • Simple images - provide a brief description of the image in the ALT attribute.

    • Linked images - provide a brief description of the destination or purpose of the link.

    • Transparent images - For transparent images used to control spacing in page layouts, " " (a blank space) should be given as the text equivalent in the alt attribute of the <IMG> element.

    • Content images - for images such as graphs and charts that convey information, use the ALT attribute and provide a detailed description of the image by:

      1. Placing description text next to (or surrounding) the image, or
      2. Placing description text on a separate page accessible via a link to a detailed description, or
      3. Placing description text on a separate page accessible via the longdesc attribute.
  6. Use of Color

    Massachusetts Standard 3.5: A state agency must ensure that the use and selection of color do not affect the information conveyed on a page.

    Federal Standard Section 508, 11194.22(c): Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.

    • Ensure that all information conveyed with color alone is also available without color.
    • Ensure that foreground and background color combinations provide strong contrast.

  7. Skipping Repetitive Content

    Massachusetts Standard 2.1: A state agency web page must use clear and consistent navigation mechanisms.

    Federal Standard Section 508, 1194.22(o)A method shall be provided that permits users to skip repetitive navigation links.

    Use a transparent GIF linked to an HTML bookmarks, put this in your top level include file.

    <a href="#skipnav" title="Skip to main content.">Skip to main content</a>

    …[Navigational links] …

    < a name="skipnav" id="skipnav">

    …[Main page content]…

  8. PDF & WORD docs

    Massachusetts Standard 4.1: All information published on a state agency web page must be published in HTML, whenever possible, to eliminate the need for additional software.

    Federal Standard Section 508: 1194.22(a) PDF files should be translatable into HTML using the Adobe Access plug-in available from the Adobe Website. PDF files may not be usable with assistive technologies even if translatable; therefore, provide an additional copy of the file in an alternate format that is usable by assistive technologies.

    First/Best option for posting is HTML. If this is not possible then PDF only is not acceptable. An equivalent text or MS OFFICE doc format must be provided in addition to the PDF. Any non-html links must be labeled as such, either with icons or text.

    Prepare PDF and MS OFFICE docs to these specs:

    Document TypeTask/InstructionsReason
    PDF & OFFICE docs: Title the documentfor recognition by search engines, shortcuts, bookmarks, title bars etc.

    PDF & OFFICE docs: All images must have alt textto meet State and Federal Standards
    OFFICE Docs:Remove track changes and commentsESE convention

    OFFICE Docs: Structure properly using styles and tablesto meet State and Federal Standards
    PDF: Optimize for fast web viewto meet State and Federal Standards
    PDF: Add accessibility tagsto meet State and Federal Standards
    PDF: Initial View, magnification is set to "fit page"ESE convention

    PDF: Initial View, show is set to" Document Title"ESE convention

    PDF: Language is set as English, US, (or matching language for foreign language docs)to meet State and Federal Standards
    PDF:Security method is set to "No Security"ESE convention

    Note -It is recommended to add alt text, and titles to source document before creating PDF.

  9. Javascript

    Massachusetts Standard 1.4: State agencies must ensure that their web pages are usable when scripts, applets, or other programmed objects are turned off or are not supported.

    Federal Standard Section 508: 1194.22 (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.

    • If you use images inside of JavaScript URLs, (rather than text), use the alt attribute of the image to convey the information.

    • If you use JavaScript to rewrite the status line, ensure that all important information conveyed in the status line also be provided through the "alt" attribute, as described above.

    • Avoid using device dependent event handlers.

      Device DependentDevice Independent
      onMouseOveronFocus
      onMouseOutonBlur
      onMouseClickonClick*
      onMouseDown onChange
      onMouseUp onSelect
      onDblClick 
      onMouseMove 
      onKeyDown  
      onKeyUp  

      *onClick is device independent when used with hypertext links or form controls, it is triggered if the Enter key is pressed when the link or control has focus.

    • Replace device dependent events as follows:

      Instead of... Use...
      OnMouseOver onFocus
      OnMouseOut onBlur
      onMouseClick onSelect
      onMouseDown onMouseDown and onKeyDown (redundantly)
      onMouseUp onMouseUp and onKeyUp (redundantly)
      onDblClick (no keyboard input equivalent; avoid using this event)
      onMouseMove (no keyboard input equivalent; avoid using this event)

      Multiple device dependent event handlers can be used together to allow both mouse and keyboard activation of JavaScript.

    • Ideally provide a button control to submit forms. Never use JavaScript to submit onChange. Use input type=submit rather than input type=image in order to avoid Javascript. Add class="submit" to the INPUT tag to maintain ESE style conventions. No additional accessibility information is required, submit buttons have implicit label tags.


    Excelent Article on Accessible Javascript by Jim Thatcher

  10. Use Server -Side validation

    Massachusetts Standard 1.4: State agencies must ensure that their web pages are usable when scripts, applets, or other programmed objects are turned off or are not supported.

    Federal Standard Section 508: 1194.22 (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.

    If scripts are turned off, client side validation will not work and users will be unable to submit forms. Furthermore screen readers cannot read text in an alert or confirm dialog. You may use server-side AND client-side validation either in tandem of by determining if scripting is supported and directing the browser accordingly.

  11. Accessible Forms

    Massachusetts Standard 1.5: Forms designed to be completed online, and other interactive interface elements, must be accessible by people using assistive technology.

    Federal Standard Section 508: 1194.22(n) When electronic forms are designed to be completed online, 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.

    • Function of a form element must be clear to a person using assistive technology.
    • Field labels must be implicitly AND explicitly associated with form controls.
    • Person must be able to manipulate the form controls with keyboard only

    Some form controls automatically have labels associated with them (type = submit, type=button) but most do not (text fields, checkboxes and radio buttons).

    Implicit labels are visually associated with their form elements For readability, layout forms with tables. Position labels immediately adjacent to fields:
    • Text labels immediately above or to the left of the associated form element.
    • Radio and Checkbox labels to the right of the associated element.

    Because implicit labels separate the form elements with HTML tags and formatting instructions it is also necessary to us explicit labels.

    Explicit Labels are programmatically associated with their form elements. The "for" attribute binds a label to another element. Set the value of the "FOR" attribute of the LABEL tag equal to the value of the "ID" attribute of the related element.

    EXAMPLES:

    SELECT TAG - assign same value to NAME and ID

    <LABEL FOR="programs">Select One</LABEL>
    <SELECT name="programs" id="programs">
      <OPTION value="1">choice 1</OPTION>
      <OPTION value="2">choice 2</OPTION>
    </SELECT>

    stopline

    TEXT INPUT - assign same value to NAME and ID

    <LABEL FOR="firstname">First Name</LABEL>
    <INPUT type="text" NAME ="firstname" id="firstname">

    stopline

    TEXTAREA - assign same value to NAME and ID

    <LABEL FOR="comments">Comments:</LABEL>
    <TEXTAREA COLS="20" ROWS="10" name="comments" id="comments"></TEXTAREA>

    stopline

    RADIO INPUT - assign same value to VALUE and ID

    <INPUT type="radio" name="sex" id="male" value="male">
    <LABEL FOR="male">Male</label>

    stopline

    CHECKBOX INPUT - assign same value to VALUE and ID

    <INPUT type="checkbox" name="color" id="red" value="red">
    <LABEL FOR ="red">Red</LABEL>

    stopline

    Sample of Properly Coded Label Tags

    FIELDSET and LEGEND

    The FIELDSET element allows authors to group thematically related controls and labels. Grouping controls makes it easier for users to understand their purpose while simultaneously facilitating tabbing navigation.

    The LEGEND element allows authors to assign a caption to a FIELDSET. The legend improves accessibility when the FIELDSET is rendered non-visually.

    <FIELDSET>
       <LEGEND>Colors:</LEGEND>
         <BR>
         <INPUT type="checkbox" name="color" id="red" value="red">
         <LABEL FOR="red">Red</LABEL>
         <BR>
         <INPUT type="checkbox" name="color" id="blue" value="blue">
         <LABEL FOR ="green">Blue</LABEL>
    </FIELDSET>

    FIELD SET/LEGEND DISPLAY:
    fieldset display
    INPUTS w/o text prompts - do not need LABEL tags, the VALUE attribute carries an explicit label. Use ALT attribute for images.

    TYPE = "submit"
    TYPE = "button"
    TYPE = "hidden"
    TYPE = "reset"

    TAB ORDER - form fields must have logical tab order

    Screen reader and keyboard users move between form fields (and links) using the Tab key. The order in which form fields receive focus is called the tab order. By default, the tab order follows the order in which elements appear in a page's HTML code.

    Depending on the design and layout of a page, the tab order may not match the visual (or logical) order of fields on a form. Reading fields out of their intended order can be disorienting for a screen reader or keyboard user.

    Make sure that fields appear in the HTML code in the logical order and/or use tabindex to set the appropriate order.

    EXAMPLE:

    <INPUT id="firstname" name="firstname" type="textbox" TABINDEX="1">

    <INPUT id="lastname" name="lastname" type="textbox" TABINDEX="2">

    Helpful Links
  12. Timed responses

    Massachusetts Standard 1.6: When a timed response is required, the user must be provided the opportunity to request additional time to continue working before the time-out occurs.

    Federal Standard Section 508: 1194.22(p)When a timed response is required, user shall be alerted and given sufficient time to indicate more time is required

    Some Web pages, frequently those that require a user to log in with an ID and password, "reset" themselves after a certain period of inactivity. Users with visual, physical, or cognitive disabilities may require more time than average to read and interact with a Web page.

    Provide a clear explanation of any time limits and offer the user a way to extend or remove the limits if necessary. Avoid using time limits unnecessarily.



Last Updated: August 20, 2012
E-mail this page| Print View| Print Pdf  
Massachusetts Department of Elementary and Secondary Education Search · Site Index · Policies · Site Info · Contact ESE