External Web Page and Application Design Standards

The following standards apply to Web sites and applications with a look and feel that is different from that of the main California Department of Education (CDE) Web site. These Web sites and applications are usually developed under contract with the CDE, but could also be developed in some cases by CDE developers.

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.

Required

• Data tables, which represent the only use of tables that is allowed, must utilize table headers at the top or left side of each table. Each individual data item in a table cell must relate directly to the appropriate table header label. If multiple table header rows or multiple table header columns are used at the top or left side of a table, headers and sub-headers must be associated with table data cells using table elements and attributes.
• Data tables may not include intermediate table headers (not grouped at the top or left side of the table), blank rows or columns for spacing, or merged data cells (unless the content of the merged cell can be programmatically linked to the appropriate table headers.) 
• If blank cells are used in a data table (not recommended, use "n/a" instead) and if the data table has visible borders, use of a non-breaking space ( ) in the blank cell is required.
• Navigation on each Web page that is consistent throughout the site/application that ensures users can navigation without using browser controls (such as the “back” button).
• All Web pages must use the variable “em” font type to allow font resizing by users.
• If popups (new browser windows) are used, a unique html metadata title must be included that describes the page.
• All content on each Web page must be printable by users in a logical order.  Web pages must either:
  • Use an alternate print css style,
  • Have a link to a printer-friendly version,
  • Print out correctly (e.g. 660 pixels content width), or
  • If appropriate, near the top of the page, include language indicating that the document must be printed in landscape format.
• Tables may never be used for Web page layout. Usually, external CSS files must be used for layout of Web pages.
• Use of frames is not allowed.
• Use of font tags is not allowed.
• All Web pages must have a unique metadata title that is descriptive of the Web page content or function. This unique metadata title should ideally match the page title heading element on each page (<h1>) and any hyperlinks pointing to the page.
• Web sites and applications must, at a minimum, function correctly. Elements that are not intuitive must have explanations or instructions. Broken links or broken functional components must be fixed or removed.
• Web sites and applications must follow the most basic principles of Web design.
• All language used within Web sites or applications must use correct spelling and punctuation. For more information on Web standards for writing, see the CDE Style Manual.
• Heading styles (e.g., <h1>, <h2>, etc.) must be applied to all page headings and subheads.
• Do not use colored text or backgrounds to convey information (e.g., "click the red button"). However, if colored text is not used to convey information, it may be used, and in fact, is recommended for certain kinds of text that are commonly associated with Web functionality, such as
  • Error messages should use red text.
  • Unvisited hyperlinks often use blue text.
• When using form input controls (e.g., test fields, radio buttons, check boxes, etc.), the <label> tag must be used.
• Spell out abbreviations and acronyms the first time they are used on each Web page (with the abbreviation or acronym in parenthesis so users know what it stands for). Thereafter, the abbreviation or acronym may be used exclusively on that page. The exception to this standard is that when the abbreviation or acronym refers to the name of the Web site or application, the abbreviation or acronym need only be spelled out on the first page of the application.
• Background images may be used in place of standard images as long as any content words or meaning that are more than decorative that are provided in the background image are available in text within the Web page.
• PDF documents must be fully accessible, including the following:
  • Be tagged for accessibility.
  • Must have alternative text for all images.
  • Be text-based (not scanned), or if scanned, the OCR feature, which provides text in the background, must be used.
  • Be organized so they read in the proper order.
• Web sites and applications must be thoroughly tested in screen resolutions of 800 x 600 and 1024 x 768. Web sites and applications must not require horizontal scrolling when viewed at a screen resolution of 1024 x 768 or higher.
• Elements must be used in a consistent manner throughout the site/application, including:
  • Top, bottom, left, and right menus
  • Main navigation
  • Punctuation
  • Capitalization
  • Hyperlink styles
  • Text styles
  • Heading styles
  • Spacing
  • Link notations
  • Non-HTML file notations
  • Colors
• A description of the administrative relationship between the Web site or application and CDE (e.g., "This section of the site has been developed with funds administered by the California Department of Education.”)
• Use of the official CDE seal on external Web sites and Web applications must utilize the most recent version of the CDE seal that is supplied by the CDE Press Office and its use must be approved by the CDE Press Office. In most cases, use of the CDE seal on contracted and affiliated sites is not desired. The CDE has an interest in ensuring that visitors to sites other than the official main CDE Web site are not confused by the use of the official seal. For information about using the official seal and to contact CDE Press, please visit the CDE’s Copyright Statement page.
• Use of CDE graphics or icons that are copied from the main CDE Web site are not allowed.
• One or more links must be provided on the Web site or Web application to appropriate area(s) of the CDE Web site.
• When descriptive link text (recommended) is used for hyperlinks rather than hyperlinked URLs, the descriptive text must be unique for each link destination on the page and must be adequately descriptive of the destination so that a visitor is sufficiently able to discern the link destination using only the text that is linked.
  • Specifically, device dependent and page location specific terms like “click” and “here” must never be used as links or in text referring to links.
• Each link to commercial Web sites and the language associated with the link must be specifically approved by appropriate CDE staff.
• Microsoft Office documents (Word, Excel, and PowerPoint) must be saved at 97-2003 version files and with the following standard file extensions (.doc, .xls, .ppt). Note that PowerPoint presentations are not fully accessible and always require a text equivalent alternative.
• The width of any Web page content, including data tables, must not extend beyond the left and right width of the page header and footer.

Recommended

• Web sites and Web applications should be easy to use, visually appealing, and intuitive.
• A link to the external Web site or application should be placed in an appropriate location on the main California Department of Education Web site.
• All Web pages in the Web site or Web application should have valid code. For example, use the W3C validation service or the Firefox HTML validator add-on to confirm that each page has valid code.
• Contact information should appear on all pages that are viewable by end users, or pages could contain a link to an e-mail form designed for messaging the appropriate contact.
• External cascading style sheets (CSSs) should be used for applying text and other styles to HTML Web pages.
• Links to non-HTML pages should be followed by consistent notations that convey to the user the type of the linked document (e.g., Word, Excel, etc.).
• Metadata descriptions and metadata keywords should be used if the page will be indexed by Internet search engines.
• Information on Web forms should be broken into manageable chunks using the fieldset and legend tags, wherever appropriate.
• PDF documents should be saved so that Fast Web Viewing is enabled.
• Underlined text should not be used in any Web page, application, or document. The use of underlined text should be reserved for active hyperlinks only.
• The title and summary attributes should be used for data tables.
• Hyperlinks where the link text consists of the target page URL should use the title attribute within the <a> tag.
• Java applets are discouraged. However, if Java applets are used, the page upon which the applet exists should 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.
• The use of Icons for links is discouraged. If they are used, a key or legend on each page should be included before introducing icons that are used for links.
• The use of the term “welcome”, which is often used on the main page of Web sites and Web applications, should not be used.
• The use of the term “please” should be avoided in regular usage on and Web site or Web application. It is most commonly seen in Web application error messages; standard requests to submit applications, forms, or data; and within “instructions” content.
• The CDE desires to standardize around the terms “logon” and “logoff” whenever user authentication is required. These terms should be used in place of terms like: “login”, “log in”, “log off”, “sign in”, “logout”, “log out”, etc.
• When lists of information are presented, use of a hierarchical organized list (e.g., numbered, lettered) or unorganized list (bulleted) is preferred.
• Test the site or application using screen reader software that is widely used by disabled persons.