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
Always use closing tags, (e.g. &</p>, </li>)
Write Semantic HTML - markup conveys the meaning of the information (this is a paragraph, this is emphazized text etc.) and not define its presentation
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 DESE Sheet. This styles is optimized for accessibility and use colors from the DESE palette. You should not need to use a second style sheet.
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
more about iFrames >
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:
more about ALT text >
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.
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]…
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:
Note -It is recommended to add alt text, and titles to source document before creating PDF.
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.
*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:
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 DESE style conventions. No additional accessibility information is required, submit buttons have implicit label tags.
Excelent Article on Accessible Javascript by Jim Thatcher
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.
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.
Some form controls automatically have labels associated with them (type = submit, type=button) but most do not (text fields, checkboxes and radio buttons).
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:
<LABEL FOR="programs">Select One</LABEL> <SELECT name="programs" id="programs"> <OPTION value="1">choice 1</OPTION> <OPTION value="2">choice 2</OPTION> </SELECT>
<LABEL FOR="firstname">First Name</LABEL> <INPUT type="text" NAME ="firstname" id="firstname">
<LABEL FOR="comments">Comments:</LABEL> <TEXTAREA COLS="20" ROWS="10" name="comments" id="comments"></TEXTAREA>
<INPUT type="radio" name="sex" id="male" value="male"> <LABEL FOR="male">Male</label>
<INPUT type="checkbox" name="color" id="red" value="red"> <LABEL FOR ="red">Red</LABEL>
Sample of Properly Coded Label Tags
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>
TYPE = "submit"TYPE = "button"TYPE = "hidden"TYPE = "reset"
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">
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: March 15, 2018