TDI Web Development Guidelines
Portions of this guideline were adapted from various sources, including accessibility guidelines and policies adopted by the State of Texas and the State of Connecticut.
TDI web sites, web pages and applications need to be compliant with the World Wide Web Consortium (W3C) standards. By following the W3C standards, pages and application will be well-structured, compatible, and useable, while also working well with assistive technologies. TDI uses XHTML 1.0 and CSS Web standards for all TDI websites. Keep attributes and values one word and lowercase.
- Maintain accurate and up-to-date information.
- Recognize that information created by a government agency is largely considered to be in the public domain.
- Correctly attribute all information on the site.
- Observe all copyright laws.
- Maintain public confidence in the Web site.
- Define Web page visits (hits) in a conservative manner.
- Follow correct HTML format at all times, quickly correcting any coding found to be incorrect.
- Avoid the use of frames.
- Increase download speed.
- Improve navigation of our growing site.
- Provide a consistent visual appearance.
- Maintain a search capability on every page.
- Show users their current location in the Web site structure.
- Show users other navigational options at any given level of the Web site hierarchy.
- Keep the user's needs in mind and strive for simplicity.
Designing Accessible Pages
- Include a document type declaration (DOCTYPE) on each page.
- Follow current XHTML 1.0 standards, and use Cascading Style Sheets, while maintaining some accessibility to older browsers.
- Maintain a standard Web site page layout and navigation scheme.
- Use consistent headings, lists and other page structure.
- Avoid the use of frames.
- Avoid unnecessary icons, graphics and photographs.
- Design Web pages so that all information conveyed with color is also available without color.
- Organize Web pages so they are readable without requiring an associated style sheet.
- Use proper HTML tags and provide other directions and cues to help those with disabilities correctly complete and submit online forms.
- Use plain backgrounds; keep layouts simple.
- Make sure text color and background color provide sufficient contrast for easy reading.
- Include a text-only index and site map.
- Provide textual navigation aids.
- Avoid abbreviations of words and dates.
- Avoid dynamic content or provide an alternative for those unable to view it.
- Do not use moving elements or designs that cause screen flicker.
- Test pages with a variety of Web browsers and technologies, including older browsers and software used by the disabled. (Include views of pages via http://browsershots.org.)
- Avoid HTML tags or extensions supported by only one browser.
- Check Web pages and images at various monitor resolutions, monitor sizes and color depth settings.
- Include file size and type with descriptions of downloadable files.
- Always allow users to skip repetitive navigation links.
- Use various accessibility checklists and guidelines to increase accessibility of pages.
- End all sentences, headers and list items with a period or other suitable punctuation.
- If possible, avoid side-by-side presentation of text in columns or tables.
- As an alternative to forms, consider using a list of information that can be submitted via a mailto link or e-mail form.
- Provide access to text-only versions of pages that are always updated whenever the primary page changes.
- Minimize the number of hyperlinks in a single line of text, with one hyperlink the best. Vertical lists are a good way to handle links.
- Avoid using text in the form of bitmap images, unless a text version is provided as an alternative.
- Use table summary to provide extra details to text readers and Identify row and column headers for data tables.
- Use special markup to associate data cells and header cells in data tables that have two or more logical levels of row or column headers.
- With lists, begin a description that identifies the items and their number. That gives users a better idea of what is coming and the length. Using numbers instead of bullets also helps someone remember items of interest, especially those using text readers.
- Use hypertext links that make sense when read out of context. Don't use short hand, such as "click here." Use the following kinds of link text: "Follow this link to our News Page." (Screen readers can search specifically for linked text. As a result, "click here" links provide no indication of where the link will take them.) If documents are provided in a specialized format, such as PDF (Portable Document Format), provide a link to equivalent material in plain text or HTML format if offered.
- Minimize the number of colors in images.
- Minimize file size and number of images on a page.
- Keep background images at the lowest color depth and resolution possible.
- Make sure text is clear and readable against any graphic background.
- Limit use of image maps. Provide alternate text links if an image map is used.
- Use the "ALT" attribute in IMG tags to provide meaningful text for all graphics.
- Use a linked document if a detailed description of an image is needed.
- If an image is used as a bullet, put an " o " in the "ALT" attribute. Do not describe bullet.
- If possible, avoid audio or video material that does not include text transcriptions (captions), descriptions or other written explanations of critical information.
- Include file format and file size in kilobytes with each description of an audio or video file.
Scripts, Applets and Plug-ins
- Provide an alternative if dynamic content is inaccessible or unsupported or eliminate the need for it.
- Consult Access Adobe resources for the latest methods in making Adobe PDF files accessible.
Key Accessibility and Usability Features
- Skip Navigation - A "Skip Navigation Link" option should be available at the top of every Web page. This allows users with mobility impairments and those who use screen-reader software to go directly to the main content of a Web page without having to deal with repetitive navigation links.
- Spanish Translations - We provide key consumer documents in Spanish through our En Español Link. Some TDI Web site pages also offer rough machine translation of pages into a number of languages, including Spanish, French, German, Chinese and several other languages.
- Text and Textual Equivalents - We try to ensure that alternative text (ALT tags) are provided for all non-text elements used on our Web sites.
- Documents Not Tied to Hardware - Our Web pages are designed and tested to be usable by people without a mouse, with only voice or text output and with alternative keyboards.
Accessibility Testing and Validating
Validation is one of the simplest ways to check whether a page is built in accordance with Web standards. TDI Web pages, applications and CSS should be checked with W3C's Validators.
- W3C Markup Validator - http://validator.w3.org/
- W3C CSS Validation Service - http://jigsaw.w3.org/css-validator/
- W3C Unified Validator - http://validator.w3.org/unicorn/
Instant Web page accessibility testing can be done with:
- PowerMapper's SortSite Online Checker - http://www.powermapper.com/ or
- WAVE Web Accessibility Evaluation Tool - http://wave.webaim.org/
TDI selected PowerMapper's SortSite to test Section 508 requirements on all TDI Websites on a regular schedule. Developers also are encouraged to test with a screen reader, preferably JAWS.
Testing of web sites, web pages and applications also should incorporate browser compatibility. TDI web pages and applications should be tested against the most popular web browsers on multiple platforms, including Internet Explorer 7 and above and recent versions of Firefox, Chrome, and Safari. Mobile web browsers also should be taken into consideration for pages that might interest mobile web users.
State of Texas Required Policies
Under Texas Administrative Code (TAC) Chapter 206, TDI home pages and all key public entry points must have links to:
- State policies (privacy, linking and accessibility notices)
- State of Texas and agency resources
- TRAIL Metadata requirements
Please refer to Chapter 206 in the Texas Administrative Code for more information.
Additional Considerations for Web pages and Applications
- Use common resolutions sizes. Use CSS styles, if needed, to make layouts accommodating.
- Keep your pages lean. Have your pages below 20 KB so they can be downloaded as fast as possible. A 20k web page will take from 20 seconds to 40 seconds to load on dial-up modem.
- Keep file names lowercased without special characters, and do not exceed 15 characters long, not including the extension.
- Use conventional Web design methods.
- Use appropriate metadata.
- Apply proper titles on all pages.
- Avoid inline styles.
- Keep links underlined.
- A web page should have one <h1> heading tag. Do not add an <h1> tag without checking to be sure it's not already included with your web page template.
- Avoid the use of embedded web-fonts.
For more information contact:
Last updated: 10/17/2016