External Web Page and App Stds. Retired Feb-28-09

The following standards were retired on February 28, 2009. This page will serve to document this Web standards change. Return to the Web Standards Change Log for March 2009, or visit the current External Web Page and Application Development Standards.

*****

The following standards apply to Web applications with a unique look and feel that is different from that of the California Department of Education (CDE) Web site. These standards apply only to applications and Web sites developed by contractors and housed on an external Web server (i.e., the Web address [URL] does not contain "cde").

Visit the CDE Web Standards to determine if these standards apply to a specific Web product that is being developed and to determine which other standards might apply.

Design and Layout

Required

1. If table borders are used, non-breaking spaces ( ) must be used in blank table cells.

Recommended

1. On external Web sites, all Web pages must have "bread crumbs" that follow the format and usage on the CDE Web site. Web applications must have bread crumbs on the main page (also recommended on all appropriate sub pages).
2. All pages will use the variable ems font sizing unless page/report display requirements dictate a thinner width font.
3. Contact information must appear on all pages that are viewable by end users, or pages must contain a link to an e-mail form designed for messaging the appropriate contact.
4. External cascading style sheets (CSSs) are required for applying text and other styles to HTML Web pages. HTML font tags are not allowed. Use W3School's CSS site for reference and a tutorial.
5. External cascading style sheets (CSSs) are recommended for layout of HTML pages. Use W3School's CSS site for reference and a tutorial.
6. Popups (new browser windows) are allowed as long as the HTML <TITLE> describes the page.
7. All Web (ASP or HTML) page content must:
   • Print out correctly (e.g. 660 pixels content width), or
   • Have a link to a printer-friendly version, or
   • If appropriate, near the top of the page, include language indicating that the document must be printed in landscape format.
8. Links to non-HTML pages should be followed by consistent notations that convey to the user the type of the linked document.
9. In tables, avoid using blank rows and columns for spacing.

Metadata

Required

1. All pages must have an HTML <TITLE> tag that is specific to the page.

Recommended

1. HTML < META > description and keywords should be specified if the page will be indexed by Internet search engines. Use <meta name="robots" content="noindex,nofollow"> if the page should not be indexed.

Multimedia

Required

1. The CDE Multimedia Standards must be followed.

Usability

Required

1. Web sites and applications must, at a minimum, function correctly. Elements that are not intuitive should have explanations or instructions. Broken links or broken functional components must be fixed or removed. The most basic principles of Web design or Web application design must be followed, such as hyperlink names that relate to the destination, or correct error-handling logic in a Web application.

Recommended

1. Applications and sites must be easy to use, visually appealing, and intuitive.
2. Information on Web forms should be broken into manageable chunks using the <fieldset> (Outside source) and <legend> tags, where applicable. This practice makes the form more accessible for screen readers and improves the usability and appearance for sighted users.
3. PDF documents must be optimized for fast Web view.

Accessibility

Required

1. Web applications and external Web sites must clearly meet all CDE Web Accessibility Standards.
2. Heading styles (e.g., <h1>, <h2>, etc.) must be applied to all page headings and subheads.
3. All tables that are used to display data (not used for layout purposes) must have, at a minimum, a table header row (use the <th> tag.)
4. Do not use colored text or backgrounds to convey information (e.g., "click the red button"). Red text may be used for alerts.
5. When using form input controls (e.g., test fields, radio buttons, check boxes, etc.), the <label> tag must be used.*
6. Tables used for layout must make sense when linearized. Otherwise, if the table does not make sense, provide an alternative equivalent (which may be a linearized version).
7. If a table is used for layout, do not use any structural mark up for the purpose of visual formatting (e.g. <th> tags as headings), however, structural elements that create paragraphs (<p>), headers (<h1>, <h2>), lists (<ol>, <ul>), etc., should be used so the page makes sense.
8. Spell out abbreviations and acronyms for application titles or organization names on the application home page, referring pages, and the login page (if any). The abbreviation or acronym should be included in parenthesis so users will know what it stands for. Use of only the abbreviation or acronym is acceptable on subsequent pages.
9. Background images may be used in place of standard images with alternative text as long as text that is descriptive and equivalent is included in the body of the page or is available when cascading style sheets are disabled.

Recommended

1. Use the title and summary attributes for all tables that are used to display data (not used for layout purposes).
2. The text size adjustment feature must be used on all pages that are visible to users.
3. PDF documents must be tagged for accessibility.
4. Hyperlinks where the link text consists of the target page URL must use the title attribute within the <a> tag.
5. Do not use Java applets.
6. If Java applets are used, the page upon which the applet is used must have highly visible text indicating that the Java Virtual Machine is required along with a link for the user to download the appropriate browser plug-in. Also, a plan must be in place to phase out the use of Java applets.
7. Layout tables should be avoided. When used, the content must make sense when linearized. A recommendation is to use structural markup (e.g. <div>, <p>, <h1>), or Cascading Style Sheets (CSS) instead of using layout tables.
8. Avoid the use of nested tables.
9. Do not use icons for links unless necessary. When they are necessary, use a key or legend on each page before introducing icons that are used for links.

Miscellaneous Standards

Required

1. Any "confidential" information being sent over the Internet must be encrypted using SSL. If SSL is required, the Web application will be placed on a Web server with an SSL certificate.
2. Include a description of the administrative relationship between the contractor and CDE (e.g., "The content in this section of the site has been developed with funds administered by the California Department of Education [CDE])."
3. Logos and other images that refer to the CDE must be up to date, reviewed, and approved by the CDE. To request permission to use a CDE related logo or image, contact Copyright Office CDE at 916-319-0881, FAX: 916-324-9787, or copyright@cde.ca.gov. The specifics of the request include:
   • The name or description of the CDE copyrighted logo or image that will be used
   • How the logo or image will be used
   • The number of times the logo or image will be used
   • If for educational purposes, please provide institution name and course name/number, etc. (i.e. coursepack)
   • Proposed URL/Application
4. Content that is attributed to the CDE, CDE policies, and CDE staff must be approved under the process listed in the Department of Education Administrative Manual (DEAM) Section 3800
5. One or more links must be provided by the contractor to appropriate area(s) of the CDE Web site.

Recommended

1. Always use relative references for hyperlinks, images, etc.
2. A link to the external site / application must be located in an appropriate location on the California Department of Education Web site.
3. All HTML/ASP pages are validated to the W3C HTML 4.01 transitional standard.