Skip to main content
California Department of Education Logo

Draft Web Page and Website Standards

Describes CDE’s requirements for web pages. This document is part of the CDE Web Standards.

Introduction

This section of the California Department of Education (CDE) Web Standards provides requirements for web pages (and by extension websites) that are developed, procured, maintained, or used under its responsibility.

This section is one part of the CDE Web Standards.  For any given web content, one or more parts of the CDE Web Standards may be applicable. Visit the CDE Web Standards Home page for more information.

CDE uses a content management system for its primary public website (www.cde.ca.gov) and for its private intranet website. Requirements that are assumed to be compliant with these standards when using CDE's content management system (Adobe Contribute and CDE's own WebNETS system) are denoted with an asterisk (*).

Expand All | Collapse All

Requirements for All Web Pages

Web pages that CDE develops, maintains, procures, or uses must meet all of the standards in this sub-section without regard to how or where the web page is made available on the web. Sub-sections that follow add additional requirements in specific circumstances.

[WEB-101] Section 508 and WCAG 2.0 at the AA level

Web pages must comply with federal Section 508 and conform to the Web Content Accessibility Guidelines (WCAG) 2.0 at the AA level. Whenever the standards that follow are not adequate for achieving compliance with federal Section 508 and conformance to WCAG 2.0 at AA, the web page either needs to be modified to bring it into compliance/conformance or it cannot be used.

[Resources: Federal Section 508 External link opens in new window or tab. , WCAG 2.0 External link opens in new window or tab.]

See also the Accessibility Section of these CDE Web Standards.

[Supports: California State Information Management Manual Section 25 External link opens in new window or tab., California Government Code Section 7405 External link opens in new window or tab., and Section 508 of the Rehabilitation Act of 1973 External link opens in new window or tab.]

[WEB-102] Web Page Features and Styles

Ensure that the web page or website is .

  1. Ensure that valid code has been used and that tags have been used for their intended purpose. For example:
    1. Valid HTML
    2. Valid ARIA
  2. * Web pages must work correctly with Internet Explorer (IE), Version 11 and the current stable release and one previous release of:
    1. Apple Safari
    2. Google Chrome
    3. Microsoft Edge
    4. Mozilla Firefox

  3. * New websites must have a responsive web design (RWD) and be optimized for a variety of screen sizes from small (smart phone) to large (desktop or laptop).

  4. * All web pages must print correctly.
  1. * Websites must include a "skip navigation" or "skip to content" link or function to shortcut to bypass repeated navigational content and jump to the main page content.
  1. Set the language for the web page.

    [Resources:
  2. Specify the language for a passage or phrase when it is different from the primary language.

    [Resources:
  3. * Use cascading styles and in the following order whenever possible:
    1. External or shared style sheets
    2. Internal style sheets
    3. Inline styles

  4. Use List tags for list elements.

See WEB-110 for specific requirements for use of headings in web pages.

[Supports WCAG 2.0 sections 1.3.1 (Info and Relationships) External link opens in new window or tab. , 2.4.5 (Multiple Ways) External link opens in new window or tab., 3.1.1 (Language of Page) External link opens in new window or tab. , 3.1.2 (Language of Parts) External link opens in new window or tab. , 3.2.3 (Consistent Navigation) External link opens in new window or tab., and 4.1.1 (Parsing) External link opens in new window or tab.]

[WEB-103] Layout, Organization, and Required Elements
  1. Don't use spaces or extra line breaks to create layout.
    1. Avoid visual-only styles and recognize that web pages are designed to reflow and will display differently depending on the user's screen size, settings, and web browser.
    2. Exception: A single extra line may be added between lines (e.g., of text or list items) if no vertical space is present.

  2. * There is a skip navigation link on each web page and it is the first focusable element.

    [Resources:
  3. * There is an accessible visual cue for each tab stop.

    [Resources:
  1. * The web page is navigable and in the expected order when used with a keyboard only or assistive technology.
    1. The content reads in the correct order.

      [Resources:
  2. * Use of dynamic content changes is accessible and Accessible Rich Internet Applications (ARIA) is used appropriately when needed.

    [Resources:
  3. * Attribution of ownership/authorship
    1. Each web page must clearly indicate the owner or author of the web page's content.
      • Usually the website logo or branding serves this purpose.
      • Add supplementary information if the owner/author is different from the website owner.

  4. Maintain consistency in formatting and layout.
    1. Where style considerations are left to web page and website creators, ensure that there is consistency in usage styles throughout the web page and website.
    2. For example: spelling; capitalization; use of bold, italics, underlines; alignment of text and table contents

[Supports CDE Requirements and WCAG 2.0 sections 1.3.2 (Meaningful Sequence) External link opens in new window or tab., 2.1.1 (Keyboard) External link opens in new window or tab., and 2.4.3 (Focus Order) External link opens in new window or tab.]

[WEB-104] Text and Content
Uses Valid Text

Ensure the integrity and viability of the text content in the document. Text content is comprised of easy to read standard characters in widely available characters sets (fonts). Except for some proper nouns, the text forms standard words.

  1. All visible text renders correctly as text.
    1. Ensure that line breaks do not cause words to merge together to form misspellings.
    2. Text is not included as a picture.

  2. Ensure that there are no spelling errors.

  3. No grammar errors.
Fonts
  1. * Use easy to read fonts that are commonly available on most devices.
    1. Comparable in readability to Arial 12pt. or larger.
    2. For example: Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, or Garamond
Abbreviations
  1. All but the most common abbreviations are spelled out.
    1. Very common abbreviations that do not need to be spelled out include common street address abbreviations, personal titles used before surnames, and ‘N/A’.
    2. All other abbreviations (including CDE-specific or education-specific) abbreviations must be spelled out and defined on the first use of the abbreviation (defining the abbreviation) or at the next available opportunity if there is not enough room.
    3. Abbreviations must be spelled out and defined on first use within each Accordion feature where abbreviations are present, unless already defined above the Accordion feature, and outside of an Accordion feature. (Updated 14-Oct-2021)
Device-Specific Words
  1. Do not use device-specific words when there is any alternative that works.
    1. Do not use words such as "click" or "hover" when words like "select" or "navigate" are available.
Special Characters and Symbols
  1. Use appropriate special characters/symbols in place of keyboard symbols. For example, do not use:
    1. Underline with the plus sign for plus/minus (±)
    2. Asterisk (*) or letter 'x' for the multiplication sign (×)
    3. Slash for the division sign (÷) or the division slash (∕)
    4. Hyphen for the minus sign (−)
    5. Three periods in a row for the horizontal ellipsis (…)
    6. Horizontal lines or underlines to express summation or division

      Note 1: The plus sign (+) and equals sign (=) are keyboard characters that can be used for math without inserting a special character.

      Special Character Name Special Character Symbol HTML Character Entity
      Plus or minus ±
      ±
      ±
      &PlusMinus
      Division Sign
      ÷
      ÷
      ÷
      Division Slash ∕ ∕
      Minus Sign
      −
      −
      Multiplication Sign
      ×
      ×
      Horizontal Ellipsis
      …
      …

      [Resources:

See WEB-109 for additional requirements when special characters or symbols are used.
See WEB-202 for additional requirements for web pages authored by or on behalf of CDE staff.

[WEB-105] Metadata
  1. Has a unique metadata title that identifies the web page.
    1. The metadata title should match (exact is not necessary) the H1 page title

  2. Has a metadata description that describes the web page, its audience, purpose, or usage.

See WEB-403 for additional requirements for web pages posted to the primary CDE website and the CDE Intranet website.

[Supports: WCAG 2.0 Section 2.4.2 (Page Titled) External link opens in new window or tab.]

[WEB-106] Hyperlinks
  1. Links are not broken. At CDE, a broken link is defined as a link that:
    1. Does not work
    2. Returns an http 404 error
    3. Does not resolve to the indicated content

  2. Links are used consistently throughout the web page.

  3. The purpose of the link can be determined from the link alone, its nearby text, or its column header (e.g., no “click here” or “more” links).

  4. Hyperlinks are easily distinguished visibly from non-linked content (e.g. color difference, underlines).

  5. Ensure that the spaces before and after the hyperlink are not linked.

  6. Ensure that what appears to be a single link is not actually multiple links.

  7. Links within the same website must be relative
    1. That is, should not include the full URL.

See WEB-107 to learn more about color contrast requirements in web pages. Color contrast requirements apply to all states of a hyperlink: unvisited, visited, hover, and active.
See WEB-305 for additional requirements for web pages posted to websites using the CDE domain: 'cde.ca.gov'.

[Supports: WCAG 2.0 Section 2.4.4 (Link Purpose In Context) External link opens in new window or tab.]

[WEB-107] Color
Color Contrast

Ensure sufficient color contrast between all content that conveys meaning (including all text) and its background at the WCAG 2.0 AA level.

  1. Ensure that the color difference has a contrast ratio that is at least 4.5 to 1.

    [Resources:
  2. Text that is large, which is 18pt. (or 14pt. bold or italicized) must have a color contrast ratio of at least 3 to 1.

    [Resources:
  3. For gradient backgrounds or text, measure at the combination with the least contrast to determine compliance.
When Color Alone Conveys Meaning
  1. In a chart or graphic where colors convey meaning, ensure that there is another method of conveying meaning. For example, use different types of dotted lines, fill textures, or ensure that colors map to shades that will be clearly different in gray scale (e.g., when printed in black and white).

    [Resources:
  2. Where color alone conveys meaning, equivalent text is necessary as the primary method to describe meaning.

    [Resources:

See WEB-112 for additional requirements for web pages that use form fields.
See WEB-306 for additional requirements for web pages posted to CDE’s Main and Intranet websites.
See WEB-501 for additional requirements for web pages posted to California School for the Blind websites.

[Supports: WCAG 2.0 Section 1.4.3 (Contrast Minimum) External link opens in new window or tab.]

[WEB-108] Images

Images are used with the following preconditions:

  1. Are only used with the permission of the copyright holder. This is established in one of the following ways for each image used:
    1. CDE is the copyright holder or the image is owned by or on behalf of CDE (taken, created, or purchased outright for CDE use).
    2. Explicit permission to use the image for its intended use has been obtained (free or paid).
    3. There is explicit information to show that permission is not required for the intended use.
    4. When CDE is not the copyright holder, documentation that establishes CDE's permission to use the image is retained as long as the image is used.

      Note: Searching the Internet for available pictures or via a Google image search does not establish permission for CDE to use an image.

  2. Except for stock photos where clearance has been established, permission has been obtained from a parent or guardian for all minor children that appear in the image.

  3. Appropriate permission has been obtained for all use of the Official Seal of the California Department of Education.

  4. Flashing or animated images are not used.

  5. Use only JPG, GIF, or PNG formatted images.

  6. Don't include graphics of actual signatures.
    1. A stylized graphic of a signature can be used.
    2. When necessary, consider adding
      • Original Signature on File
      • Original signed by [name of signer(s)]. A hard copy of the signed document is available by contacting [name and contact].

See WEB-307 for additional requirements for web pages posted to websites using a .cde.ca.gov domain.

[Supports: CDE requirements and WCAG 2.0 Section 3.2.4 (Consistent Identification) External link opens in new window or tab.]

[WEB-109] Equivalent Text
Image Equivalent Text Methods
  1. Informative images (e.g., with content or that convey meaning) must have an equivalent in text.
    1. Non-informative images (e.g., decorative-only) must use the null set ("") so that assistive technology will skip these images.

    [Resources:

There are three different ways to provide allowable equivalent text and each way has its own requirements:

  1. Adjacent Text
    1. The text adjacent to the image provides content that is fully equivalent to the image.
    2. If the image is not introduced in the adjacent text and the existence of the image can be ignored (because the content the image provides is fully and equivalently described in adjacent text) the image alternative text (alt text) must be blank.
    3. If the image is introduced (e.g., mentioned in the text or indicated with a title or caption), the image alternative text must provide the name of the image and indicate that it is a visual representation of adjacent text.
    4. It is unlikely that the adjacent text will be considered fully equivalent to the image if the author did not plan ahead for accessibility.

  2. Alternative Text (or Alt Text)
    1. This is text that describes the image that is added to the image in the background if it can describe the content and purpose of the image equivalently in around 15 words or less. Alternative text can never exceed 30 words.

      [Resources:
  3. Long Description
    1. A long description must be used if either the adjacent text or any alt text of no more than 30 words cannot provide fully equivalent content.
    2. Has an active hyperlink adjacent to the image with link text that names the picture and indicates the link destination is a "plain text" or "accessible" version of the picture. The link leads to the long description of the image.
    3. The image has alternative text that is used to name the picture and provide a summary (the standard of trying for 15 words or less, but no more than 30 words applies).
    4. The link may lead to another portion of the same document or a separate web page or document that has the fully equivalent text version of the content.

      [Resources:
Text in the Image
  1. When there is text in the image that is part of its meaning or content, it must be included in the adjacent text, alternative text, or long description. Also:
    1. Ensure there is sufficient contrast between the text in the image and its background.

      [Resources
    2. Ensure that the text in the image is readable.

      See WEB-104 for additional information on text that can be used within the image.
Other Required Text Equivalents

For any information that is conveyed with color, formatting, layout, or symbols, ensure that there is text method that serves the equivalent purpose.

See WEB-107 for requirements when color is used to convey meaning.

  1. Whenever possible use semantic text instead of special characters or symbols.
    1. For example, use "Yes/No" instead of "Y/N.
    2. When special characters or symbols are used (including letters as symbols), the symbols must be defined on or before their first use (e.g., in a key).
    3. The only exceptions are subscript, superscript, or asterisks when they are used for used for notes, footnotes, or endnotes don't need to be defined.

  2. Use "0", "none", or "n/a" instead of blank space that is meant to convey zero or nothing.
    1. For example, don't use a combination of 'X' (or any other symbol) and "blank" to mean applicable or included and not applicable or not included.

  3. When formatting is added to text that conveys meaning, such as strikethrough, its specific meaning in context must be described with text that serves the equivalent purpose.
    1. Short and simple instances of strikethrough and similar formatting that can be added to text can often be described equivalently by adding a note in brackets immediately after the formatted text to describe the text that received the formatting.
    2. More extensive and complex uses of strikethrough or similar formatting require indications of where the formatting begins and ends.

      [Resources:
Accessible Alternative Versions (AAV)
  1. CDE no longer allows AAVs to provide for accessibility.
    1. Typically these were provided along with otherwise inaccessible content.
    2. For images only (not images that are primarily text or scans of text) the Long Description in d. above may provide similar functionality.
    3. AAVs that were posted before and remain unchanged after January 18, 2018 may remain posted along with the associated inaccessible content.

[Supports: WCAG 2.0 sections 1.1.1 (Non-text Content) External link opens in new window or tab. and 1.3.1 (Info and Relationships) External link opens in new window or tab.]

[WEB-110] Headings

Uses HTML headings to indicate the page title and section divisions in the web page.

  1. Headings are used instead of visual alterations of text.
    1. Headings are a short descriptive title of a section or category.
    2. A single heading may never exceed 100 characters.

      [Resources:
  2. Heading Level-1 is used at the top of every web page and only once for the visible web page title.

  3. Heading levels 2 and above are use in a hierarchical order.
    1. While heading levels may be skipped, they cannot be used out of order.
    2. Headings taken as a whole must form a logical "outline" of the document.

      [Resources:
  4. Text that is not a section heading or divider does not use heading styles.

[Supports WCAG 2.0 Section 1.3.1 (Info and Relationships) External link opens in new window or tab.]

[WEB-111] Tables
Table Use
  1. Tables are used for tabular data. Tabular data is not presented using spacing or tabs. Tables are not used for layout or formatting.

    [Resources:
  2. Use HTML table elements for table markup.

    [Resources:
  3. Introduce each table.
    1. Tables must either be introduced in the content preceding the table, with a heading placed above the table, or with a HTML table caption.
    2. Headings placed above the table (e.g., Heading-2 through Heading-6), when used to introduce the table must be either left justified or centered to match the alignment of the table.
Complex Tables (Table Regularity)

It is possible to make complex tables accessible in web pages when the web page creator has the knowledge and ability to modify the page's HTML. The Department's Contribute/WebNETS content management system doesn't provide the ability to customize HTML code for individual tables. Instead of adjusting HTML code for complex tables, adjust the data to create one or more simple data tables. Another term for a simple table is a table that has regularity. Simple tables have a grid structure where the contents of each cell relate directly to the column header for that cell.

  1. No blank cells, columns, or rows for simple tables.
    1. Except, the last row in a table may have blank cells if the row is being used as a totals row where one or more of the cells is used to total the data in its column; and
    2. When the last row is a totals row, "Total" or a similar word or phrase must be present in the first cell in the row.
  2. No merged or split cells for simple tables

  3. One single column header row as the first row for simple tables. All tables must have headers.

    [Resources:
  4. No intermediary sub-headers (rows used to delineate sub-sections of a table) for simple tables.

  5. No visual-only alignment of contents (e.g. indenting) and no use of layout and formatting alone to convey hierarchy for simple tables.

  6. Data cells are programmatically (not just visually) associated with the table header cells for complex tables.

    [Resources:
Alternative Text
  1. Add alternative text to tables to describe the broad nature of the table data for all tables.

[Supports WCAG 2.0 Section 1.3.1 (Info and Relationships) External link opens in new window or tab.]

[WEB -112] Forms

Use fillable PDF, an online survey (Snap Survey at CDE), or have a contractor or programmer make a custom web application.

  1. Legacy Listserv Subscribe/Unsubscribe Forms
    1. A few exist on the primary CDE website (www.cde.ca.gov).
    2. These may remain, but new implementations must use subscribe/unsubscribe hyperlinks instead.

See PDF-112 for more information on fillable PDF forms.
See Survey Development (CDE Intranet) for more information about creating an online survey, application, form, etc.
See Software Development (CDE Intranet) or Purchasing IT (CDE Intranet) for information on creating custom web applications within CDE or on contracting for a custom web application.

Additional Requirements if Developed by CDE Staff or on Behalf of CDE

When web pages are being developed, procured, or maintained by CDE staff, as a result of a CDE contract, or on behalf of CDE by others, the additional requirements in this sub-section apply. These additional requirements allow CDE to provide a consistent user experience across all of its web pages.

[WEB-201] CDE's Correspondence Guide and Style Manual

For writing usage, spelling, and grammar...

  1. Follows the CDE Correspondence Guide (CDE Intranet) for correspondence only.
    1. Relies upon the Gregg Reference Manual when the CDE Correspondence Guide does not address a usage issue.

  2. Follows the CDE Style Manual for all non-correspondence content.
    1. Relies upon the Chicago Manual of Style when the CDE Style Manual does not address a usage issue.
[CDE Requirements]
[WEB-202] Text
Underlines
  1. Underlines are not used except for hyperlinks and hyperlinked e-mail addresses.
    1. Except, underlines may be used to indicate the text of laws or regulations that are being added, modified, or deleted as prescribed by the California Office of Administrative Law.
Justified Text
  1. Don’t use justified text, (i.e., fully justified or full justification).
    1. Except in flyers, newsletters, brochures and CDE Press publications.
Phone Number Format
  1. Always use the 10-digit '999-999-9999' phone number format.
    • Don't use parenthesis for the area code.
    • Don't use dots or other symbols to separate portions of a phone number.
    • Don't add additional spaces within the 10-digit number.
    • When providing an example, use ten 9s (999-999-9999).
    • Don't use the letter 'x' (xxx-xxx-xxxx)
    • Don't use the number symbol (###-###-####)

[CDE Requirements]

Additional Requirements for Specific Web Pages and Websites

Posted to Websites Using the CDE Domain: 'cde.ca.gov'

This includes to any web pages or website that has 'cde.ca.gov' as the base domain.1

[WEB-301] Approved Use of Web Pages on CDE Websites

CDE prefers to have its own websites be comprised mostly of web pages.

  1. Except for forms, any type of content is allowed to be formatted as one or more web pages.

See WEB-112 for more information on web forms.

[CDE Requirements]

[WEB-302] Prohibited Use on CDE Websites
  1. Content that is typically posted to CDE websites using a different format or where posting as one or more web pages makes the content substantially more difficult to use. (content type)

[CDE Requirements]

[WEB-303] Layout, Organization, and Required Elements

The built-in layout for the primary CDE website (www.cde.ca.gov) and the private CDE Intranet (intranet.cde.ca.gov) include attribution of authorship and a last reviewed date.

See WEB-103 for specific requirements for use of headings in web pages.

[CDE Requirements and supports WCAG 2.0 Section 2.4.2 (Page Titled) External link opens in new window or tab.]

[WEB-304] Filename

Use the following CDE standards to create the filename:

  1. To the extent possible, relates to the document title.

  2. Does not use spaces or symbols other than hyphen ( - ).
    1. A single period is used between the name and the extension.
    2. Underscores may be used for Intranet images files if they have been automatically created by the Adobe Contribute software (e.g., filename_001.jpg).

  3. Is all lowercase.

  4. Is less than or equal to 24 characters before the file extension.

  5. Starts with an alphabetic character.

  6. Applies to picture files when they are added to CDE websites.
Examples of Conforming and Nonconforming Filenames
Nonconforming Filename Reason Filename is Nonconforming Conforming Filename
David_ab602.asp
  • Has a capitalized letter (D)
  • Has an underscore
 ab602david.asp
AnR1_6_01.aspx
  • Has capitalized letters (A and R)
  • Has two underscores
 anr1-6-01.aspx
gardensandservicelearning.asp
  • Is over 24 characters before the file extension (25)
 gardandservlearn.asp
2017 Form G.asp
  • Begins with a number (2)
  • Has capitalized letters (F and G)
  • Has spaces (2)
 formg2017.asp
teacher.credentials.asp
  • Has more than one period before the file extension.
 teachercredentials.aspx
02image.jpg
  • Begins with a number (0)
  • Has a generic name that does not apply to the picture
 frameworkchart2.jpg
Funding-related Filenames

Different naming conventions are used for naming files related to requests for applications, proposals, submissions, or data (RFAs/RFPs/RFSs/RFDs) and funding results.

  1. Construct the filename with three parts (prior to the file extension) presented in this order:
    1. Name of program
    2. Fiscal year
    3. Associated abbreviation of the funding component type

      For example, 'homeless18rfa.asp' might be the filename of a RFA template web page for homeless education in fiscal year 2018-19. Likewise, 'homeless18ins.asp' might be the filename for a web page of RFA instructions for the same program and year.

  2. Always use 'rfa' as the abbreviated component type for the main funding component whether it is a RFA, RFP, RFS, or RFD.
    1. For example, 'evenstart16rfa.asp'

  3. Always use 'result' as the abbreviated component type of any web page that uses the funding results template.
    1. For example, 'evenstart16result.asp'
Funding Component Type and Associated Abbreviations
Funding Component Type Associated Abbreviation

Request for:

  • applications
  • proposals
  • submissions
  • data
 rfa
(required)
Funding results result
(required)
apportionment recipients (schedule) apptsch
cover letter cov
apportionment letter apptltr
application app
instruction ins
form form
appendix apnd
appendixes (multiple) apnda, apndb, apndc, etc.
attachment att
attachments (multiple) atta, attb, attc, etc.
frequently asked questions faq
scoring rubric rub
criteria crit
video video
bidders' conference bid
eligible schools eligsch
teacher eligibility eligtch
report rpt

Contact the Funding Master Plan in CDE's Fiscal and Administrative Services Division for more information on filename conventions for funding related web pages.

[CDE Requirements]

[WEB-305] Hyperlinks, Window Behavior, and Link Notations
Hyperlinks and Window Behavior
  1. Use linked descriptive text
    1. Except, use linked URLs for CDE correspondence.
      • Letters
      • State Board of Education items
      • Management bulletins and advisories
      • Reports to the Legislature
      • Conference welcome letters
      • Grant award notifications
      • Emails, memos, and faxes
    2. When linked URLs are used, they can be a:
    3. However, use linked descriptive text in CDE correspondence for two particular link instances that occur at the bottom of correspondence:
      • 'Enclosure'/'Enclosures'
      • 'Attachment'/'Attachments'

        [See the CDE Correspondence Guide (CDE Intranet) for more information]

    1. Except, use linked email addresses (e.g., tsdweb@cde.ca.gov versus name)
      • The destination for all linked email addresses must include "mailto:"

    2. Text must be descriptive enough so that the link destination or purpose of the link is conveyed via the linked descriptive text alone.
      • Avoid inaccessible and choppy links by linking all applicable text. Typically these are one- and two-word links.
      • For example, link all of "2013 Independent Audit Report" versus "Audit Report", or "Report".

    1. Descriptive text must be unique for each different URL.
      • For example, a web page with a single link to an agenda can use "Meeting Agenda" as the descriptive link text, but if the web page has multiple agendas, then text must be added to differentiate links to them. Instead of multiple links to "Meeting Agenda", the date could be added to each link: "May 2017 Meeting Agenda" and "July 2017 Meeting Agenda".
      • Except links in a table where the link purpose is described by the column heading.

  2. Links that point outside of the 'cde.ca.gov' domain:
    1. Set to open in a new window or tab.

  3. Links that point inside the 'cde.ca.gov' domain:
    1. Set to open in the same or default window if on the same exact website (e.g. a link on www.cde.ca.gov that points to a webpage or document on www.cde.ca.gov)
    2. Set to open in a new window or tab if not on the same exact website (e.g. a link on www.cde.ca.gov that points to a webpage or document on www3.cde.ca.gov)
    3. When the link is on a public CDE web page and points specifically to the private CDE Intranet (as opposed to IAPro, for example), replace 'intranet' in the URL with 'igate'. This allows for a more graceful failure for anyone trying to access an Intranet link from outside the CDE network. Note these types of links are extremely rare.

  4. Link Formatting
    1. Links must be active, use standard colors (e.g., hex # 0000FF), and resolve to the proper destination.
      • Except, links in public comments must never be active links.
    2. Don't add any formatting to hyperlinks. For example: bold, italics, heading styles, color changes.
      • Except, italics may be added to any portion of a descriptive text hyperlink if that portion contains text that must be italicized per CDE style rules. For example: Education Code.

  5. Links to Commercial Websites
    1. CDE web pages may link to a variety web pages and documents. These may include educational agencies and institutions, government agencies, and both non- and for-profit entities.
    2. Linking to commercial or for-profit entities does not infer endorsement. Because CDE is a public agency, it does not promote the interests of commercial organizations.
    3. Adding links to commercial or for-profit entities is only done when linking fulfills a business need of the Department.
    4. Linking to commercial or for-profit entities may never be done for payment, reciprocal linking, or at the commercial or for-profit entities' request when there is no associated Department business need.

      [See the Department's Linking Policy for more information]

  1. When Broken Links Must Remain
    When links become broken, they must be replaced with a working link that points to the correct destination or removed. However, there is an exception when a specific link must remain for historical purposes. For example, a link in a legal document or in an official report. When a broken link must remain:
    1. This only applies to linked URLs (e.g., correspondence) or email addresses. When linked descriptive text becomes broken, the link must be fixed or removed.
    2. Inactivate the link. This returns the link to using standard text color, no underline, and no destination. The link is not selectable.
    3. Use strikethrough on the URL or email address.
    4. With a single intervening space after the now stricken URL, add a bracketed note that explains what has been stricken and optionally offers a replacement URL or email address.
    5. This same technique and style may be used for other text that needs to remain but with strikethrough.
    6. Examples (remember that the bracketed note must explain what is stricken):

      Accessible Strikethrough Example # Example
      1
      		 Learn more on the Department's Early Childhood Educator web page at: https://www.cde.ca.gov/aa/bb/cc/earlyed.asp [Note: the preceding URL is no longer available]
      2
      		 Find CDE's featured videos at https://www.cde.ca.gov/aa/bb/cc/featured.asp [Note: the preceding link is no longer available and has been replaced by: https://www.cde.ca.gov/re/di/ws/featuredvideos.asp]
      3
      		 The program is managed by name1@cde.ca.gov [Note: the preceding email address is no longer valid]
      4
      		 The program is managed by name1@cde.ca.gov [Note: the preceding email address is no longer valid and has been replaced by name2@cde.ca.gov]

    7. For a more complete explanation of requirements when visual formatting of text conveys information, see
      WEB-109.f.
Link Notations

CDE has a standard way of providing meta information for most hyperlinks. At CDE, that meta information is provided immediately following the hyperlink in a link notation.

  1. Link Notations
    1. May be comprised of up to four elements.
    2. Some are required and some are optional, but which are used depends on the where the link is located and where it points to.
    3. When used, the link notation elements are always presented in the following order:
      • Source
      • Type
      • Size/Length
      • Date

  2. Source Element
    1. Is never used for linked URLs (e.g., Correspondence). This is because the source is apparent from the domain in the linked URL.
    2. The External Link icon ( External link opens in new window or tab. ) is used as the source element for descriptive links from 'cde.ca.gov' web pages to non- 'cde.ca.gov' web pages.
    3. The External Link icon is never used for links from 'cde.ca.gov' web pages to other 'cde.ca.gov' web pages or documents.
    4. For links on a private 'cde.ca.gov' website (e.g., the CDE Intranet or IAPro) that point to a public 'cde.ca.gov' web page or document, use "CDE Internet" as the source element in the link notation.
    5. For links on a public 'cde.ca.gov' website (e.g., www.cde.ca.gov or www3.cde.ca.gov) that point to a private 'cde.ca.gov' web page or document (very rare), use "CDE Intranet" as the source element in the link notation.
    6. For links on any 'cde.ca.gov' website that point to any CDE SharePoint site, use "CDE SharePoint" as the source element in the link notation.

  3. Type
    1. Is never used for linked URLs (e.g., Correspondence). This is because the source is apparent from the file extension in the linked URL.
    2. Use one of the following types:

      Link to File Type Link Notation Type or Type Abbreviation
      Any Web Page There is no link notation type for links from web pages to other web pages.
      Microsoft Word Document DOCX

      (Also, DOC for MS Word documents created before January 18, 2018 and not updated since then)
      Microsoft Excel Workbook or Spreadsheet XLSX

      (Also, XLS for MS Excel workbooks or spreadsheets created before January 18, 2018 and not updated since then)
      Microsoft PowerPoint Presentation PPTX

      (Also, PPT for MS PowerPoint presentations created before January 18, 2018 and not updated since then)
      Adobe PDF or Adobe PDF Portfolio PDF
      Zip Archive ZIP
      Application or Program EXE
      Text TXT
      Data File (comma separated values) CSV
      Audio File (MP3, WAV, etc.) Audio
      Video or Multimedia File (MP4, WMV, AVI, MOV, etc.) Video
      iCalendar iCal

  4. Size/Length
    1. Required for Audio, Video, and Multimedia. Use the following format where hours are only used when applicable, but minutes and seconds are always used
      • (Audio; 1:03:07)
      • (Video; 3:00)

    2. Required for all other file types only when the file is over 1MB in size.
    3. Not allowed for files that are not audio, video, or multimedia and that are less than 1MB in size.
      • Always round size to the nearest MB.

  5. Date
    (Note: Realigned to legacy standards Aug-2019)
    1. Dates may be added to the link notation. Dates are always optional and they are allowed in a link notation for any kind of link.
    2. Dates must follow a specific format and must include one of several standard modifier words that introduces the date.
    3. Use the DD-Mmm-YYYY or Mmm-YYYY format:
      • 7-Jan-2018
      • Sep-2018

    4. Prepend with a standard modifier word:
      • Posted 8-Jul-2018

    5. The modifier word only can optionally use bold, CDE's standard shade of red for alerts (See WEB-306 for information on color), and/or both bold and the red used for alerts:
      • Updated 10-Apr-2018
      • Added 12-Dec-2019
      • Modified 31-Oct-2018
      • New 19-Feb-2019

    6. Standard Date Modifier Words: (Updated 6-Jul-2020)
      • Certified
      • Corrected
      • Dated
      • Effective
      • Modified
      • New * (see item vii below)
      • Notice Published
      • Posted
      • Published
      • Recertified
      • Revised
      • Updated
      • Suspended

    7. The 'New' date modifier is special in that it can only be used for 60 days or less. After 60 days, either the optional date element of the link notation must be removed or else the date modifier must be changed. For example, the date element could be changed from: 'New 19-Feb-2019' to 'Posted 19-Feb-2019'
      • WebNETS users must set the review date for any web page that uses the 'New' data modifier to no more than 60 days from the WebNETS action date.

  6. Link Notation Formatting
    1. Link notations are not part of the link.
    2. They are placed with a single intervening space immediately after a hyperlink.
      • In some cases, it can be difficult to determine what to do with punctuation around a link.
      • Extra spaces or punctuation may not be placed between the link and the link notation.
      • It may be necessary to add punctuation to the hyperlink or to place it after the link notation.
      • For purposes of spelling and grammar, the link and the link notation are joined to become a single element.

    3. Except for the External Link icon, the notation for a link is a single parenthesis with all applicable link notation elements included and separated by a semicolon and a space:
  7. Coming Soon
    1. The 'Coming Soon' notation is not a true link notation since it is used with text that will become a link within the next 60 days.
      • WebNETS users must set the review date for any web page that uses the 'New' data modifier to no more than 60 days from the WebNETS action date.

    2. Bold is applied to text that will become a link.
    3. The 'Coming Soon' notation is placed within parenthesis with an intervening space immediately after the text that will become a link
    4. If the text will not become a link within 60 days, it should not be setup as link placeholder and the 'Coming Soon' notation must not be used.
Examples
Example Number Description of Link For Example
Link is On (origin)
[URLs are not intended as links]		 For Example
Link Points To (destination)
[URLs are not intended as links]		 Opens in Same/Default Window or New Window/Tab? Visual Example Link Notation
[links are not functional]
1
 From/to a 'cde.ca.gov' web page on the same website. https://www.cde.ca.gov/ https://www.cde.ca.gov/ Same/Default Another Web Page
2
 From a public 'cde.ca.gov' web page to a different public 'cde.ca.gov' website. https://www.cde.ca.gov/ https://www3.cde.ca.gov/ New Window/Tab Another Web Page
3
 From a private 'cde.ca.gov' web page (e.g., Intranet or IAPro) to a different public 'cde.ca.gov' website. http://intranet.cde.ca.gov/ https://www.cde.ca.gov/ New Window/Tab

Another Web Page (CDE Internet)
4
 From a public 'cde.ca.gov' web page to a different private 'cde.ca.gov' website. [very rare!] https://www.cde.ca.gov/ http://igate.cde.ca.gov/

(for the CDE Intranet)		 New Window/Tab Another Web Page (CDE Intranet)
5
 From a 'cde.ca.gov' web page to a web page on a non- 'cde.ca.gov' website. https://www.cde.ca.gov/ http://www.yahoo.com/ New Window/Tab Yahoo! External link opens in new window or tab.
6
 From a 'cde.ca.gov' web page to a MS Word document on the same website. https://www.cde.ca.gov/ https://www.cde.ca.gov/ Same/Default Another MS Word Document (DOCX)
7
 From a 'cde.ca.gov' web page to a MS Excel workbook or spreadsheet that is larger than 1MB on the same website. http://intranet.cde.ca.gov/ http://intranet.cde.ca.gov/ Same/Default Another MS Excel Workbook (XLSX; 2MB)
8
 From a 'cde.ca.gov' web page to a MS PowerPoint presentation on the same website that is larger than 1MB, with a date, and the 'posting' modifier. https://www.cde.ca.gov/ https://www.cde.ca.gov/ Same/Default Another MS PowerPoint Presentation (PPTX; 4MB; Posted 01-Jan-2018)
9
 From a 'cde.ca.gov' web page to two versions of the same content on the same website. Only one version is larger than 1MB. https://www.cde.ca.gov/ https://www.cde.ca.gov/ Same/Default
  • Content Title (DOCX; 1MB)
  • Content Title (PDF)
10
 From a 'cde.ca.gov' web page to a MP3 file on a non- 'cde.ca.gov' website. https://www.cde.ca.gov/ https://instrumentalfx.co/wp-content/uploads/2017/10/best-flute-ringtone-2017.mp3 New Window/Tab Flute Ringtone External link opens in new window or tab. (Audio; 0:27)
11
 From a 'cde.ca.gov' web page to a video on CDE's YouTube channel. https://www.cde.ca.gov/ https://www.youtube.com/watch?v=wiqY8cbqfj0 New Window/Tab Introduction - Transitional Kindergarten Implementation External link opens in new window or tab. (Video; 4:17)
12
 From/to a 'cde.ca.gov' web page on the same website with a date (month only) and a 'new' date modifier that adds emphasis to the modifier. https://www.cde.ca.gov/ https://www.cde.ca.gov/ Same/Default Another Web (New Feb-2018)
13
 From a private 'cde.ca.gov' web page (e.g., Intranet or IAPro) to the same website. http://intranet.cde.ca.gov/ http://intranet.cde.ca.gov/ Same/Default iCalendar File (iCal)
14
 From a 'cde.ca.gov' correspondence web page to a web page on a non- 'cde.ca.gov' website. https://www.cde.ca.gov/ http://www.usc.edu/ New Window/Tab Visit the University of Southern California website at http://www.usc.edu/.
15
 From a 'cde.ca.gov' correspondence web page to a PDF document on the same website. https://www.cde.ca.gov/ https://www.cde.ca.gov/ Same/Default For more information, see the Average Daily Attendance resource guide at http://www.cde.ca.gov/aa/bb/cc/adaresourceguide.pdf (Modified 04-Mar-2017)
16
 From a 'cde.ca.gov' correspondence web page to a MS Word document on a non- 'cde.ca.gov' website that is using a URL shortener. https://www.cde.ca.gov/ https://portal.smarterbalanced.org/library/en/v1.0/digital-library-connections-grade-4-brief-writes.docx New Window/Tab Try Brief Writes for Grade 4 from the Smarter Balanced Assessment Consortium at: http://bit.ly/2CGGtjI (DOCX).
17
 Text for a future link (within 60 days) from a 'cde.ca.gov' web page. https://www.cde.ca.gov/ N/A N/A 2019 Fiscal Report (Coming Soon)

[CDE Requirements and WCAG 2.0 Section 2.4.4 (Link Purpose In Context) External link opens in new window or tab.]

[WEB-306] Color
  1. For CDE content or CDE authored web pages, use a black font on a white background. Exceptions:
    1. Flyers, newsletters, brochures and CDE Press publications may use other font colors and background colors as long as the contrast between the font color and background color meets accessibility standards (see WEB-107).
    2. The color red (specifically Boston University Red, hex value #CC0000, or RGB 204, 0, 0) may be used sparingly to highlight a word, phrase, sentence, or small paragraph as a reminder, warning, or an alert.
      • Using Adobe Contribute, this specific shade of red can be implemented using the RedText style in the Contribute styles dropdown.(updated Nov-2019)
      • However, red may not be applied to text in tables using alternating row colors (added Nov-2019)
    3. Accent background color that is 15% or less in saturation may be used if the color contrast of any text or links is tested and found to meet accessibility standards (see WEB-107).
    4. Except for flyers, newsletters, brochures and CDE Press publications, URLs use the “standard hyperlink blue” (hex value #0000FF or RGB 0, 0, 255).

[CDE Requirements and WCAG 2.0 Section 1.4.3 (Contrast Minimum) External link opens in new window or tab.]

[WEB-307] Images
Image Use
  1. Use of decorative images is kept to a minimum.
    1. When used, images should primarily be used to convey information.

See WEB-108 for additional information on image use.

[CDE Requirement]

Posted Using Contribute (for www.cde.ca.gov and intranet.cde.ca.gov)

[WEB-401] Templates
  1. Use the appropriate Adobe Contribute template. If there is no template for a specific purpose, use the Basic Page template.
Templates for the Primary CDE Website (www.cde.ca.gov)
Template Name Template Can be Used For
Basic-Page For most pages.
CurrCommission Curriculum Commission letterhead.
FundingResults For funding results only (e.g., results of grants, contracts, and allocations).
Letterhead For current Department letters only (current version).
Letterhead-SBEonly State Board of Education letterhead.
News-Release2004 For 2004 news releases and newer.
News-ReleasePriorYear For new releases from a previous year.
RequestForApp

For:

  • Requests for Applications (RFA)
  • Requests for Proposals (RFP)
  • Requests for Data (RFD)
  • Requests for Submissions (RFS)
Wide-Data-Tables For pages where a data table is too wide to be displayed properly on one of the other templates.
Templates for the private CDE Intranet (intranet.cde.ca.gov)
Template Name Template Can be Used For
Basic Page Template For most pages.
Letterhead For Department letters using the current letterhead only.
Memorandum For pages recreating the official Department memorandum.
No Left Nav For pages that must display an embedded object that is too wide for other templates.
Wide-Data-Tables For pages where a data table is too wide to be displayed properly on one of the other templates.
[WEB-402] HTML Features and Styles
Features
  1. * Website logo with a link back to the Home page.
    1. This is a required element.

  2. * Questions Line at the bottom of most web pages.
    1. Intended to give visitors to our pages the ability to contact a “real person” if they need to know more about the content that is on a particular web page.
    2. There are three elements included in the Questions Line:
      • Name of a person, project, or entity.
      • E-mail address, or link to electronic form that is similar to e-mail.
      • Telephone number with area code.
    3. Pipes ( | ) with a single unlinked space on either side are used to separate the elements.
    4. The name of a person, project, or entity is required, along with either the email address or the telephone number.
      • Providing both the email address and the phone number is optional.
      • The only exception to the requirement of the e-mail address or telephone number is if the name is a project or entity and it is being linked to another web page on a CDE website that houses the appropriate contact names and numbers for the project or entity.
      • Because the public CDE Internet site (www.cde.ca.gov) has been organized topically, rather than by organizational structure, use of an office, unit, or division by name is not allowed for the entity name if it will be linked to a contact information Web page.
    5. If a name of a person is used (versus a project or entity), either one or two additional separate entries can be made (for a total of three), one per row for additional persons. If this type of multi-row Questions Line is used, the same type of information should be displayed for each person (e.g., name and e-mail; name and phone; or name, e-mail and phone).
    6. Examples:

      Example Number Questions Line Example
      (Note: email addresses and links are not active)      		 Notes
      1
      Questions: John Schmo | jschmo@cde.ca.gov | 916-123-1223
      		 Compliant: All three elements: a name, an email address, and a phone number.
      2
      Questions: After School Education & Safety Program | expandedlearning@cde.ca.gov | 916-123-1223
      		 Compliant: All three elements: a work group, an email address, and a phone number.
      3
      Questions: Joe Schmo | jschmo@cde.ca.gov
      		 Compliant: A name and an email address.
      4
      Questions: Joe Schmo | 916-123-1223
      		 Compliant: A name and a phone number.
      5
      Questions: After School Education & Safety Program | expandedlearning@cde.ca.gov
      		 Compliant: A work group and an email address.
      6
      Questions: After School Education & Safety Program | 916-123-1223
      		 Compliant: A work group and a phone number.
      7
      Questions: After School Education & Safety Program | expandedlearning@cde.ca.gov
      		 Compliant: A work group that is linked to a contacts web page and an email address.
      8
      Questions: After School Education & Safety Program | 916-123-1223
      		 Compliant: A work group that is linked to a contacts web page and a phone number.
      9
      Questions: Expanded Learning Division | expandedlearning@cde.ca.gov
      		 Only compliant for private CDE websites (e.g., the CDE Intranet or IAPro) because public CDE websites may not have office or division contact pages. Public CDE websites are topic and program based, not based on organizational structure. Private CDE websites may have office and division websites.
      10
      Questions: Expanded Learning Division | expandedlearning@cde.ca.gov
      		 Compliant: An office or division can be listed as the contact, but the office name or division name can only be linked to a contacts web page on a private CDE Website.
      11
      Questions: After School Education & Safety Program
      		 Compliant: A work group name links to a contact web page for the work group.
      12
      Questions: Elizabeth Schmo | eschmo@cde.ca.gov | 916-123-1225
      Alice Schmo | aschmo@cde.ca.gov | 916-123-1224
      Joe Schmo | jschmo@cde.ca.gov | 916-123-1223
      		 Compliant: Up to three compliant entries can be added to the Questions Line. Don't add additional information beyond name, email, and phone. If needed, address this in the body of the web page.
      13
      Questions: After School Education & Safety (ASES) Program | Contact ASES Staff | 916-123-1223
      		 Only compliant if the link points to an email form. Otherwise, if the link points to expandedlearning@cde.ca.gov, then it is non-compliant.


  3. * Breadcrumbs on the primary CDE website (www.cde.ca.gov)
    1. This is a required element.

  4. Tabs (www.cde.ca.gov)
    The CDE website includes a tab feature. The feature has the following characteristics and requirements:

    1. * Must be implemented using the color pattern for the appropriate area of the main CDE website or using the correct standard colors for web applications.
    2. * The tab section must incorporate a one-pixel border using the appropriate color.
    3. * Tabs must be presented in a single row above the tab section.
    4. * Tab labels must be at least three characters in length.
    5. * Combined, tab labels can have no more than 100 characters (including spaces and punctuation) total.
    6. It is strongly recommended that the top portion of tab sections be visible when the web page first loads without the need to scroll down. This is tested with a desktop or laptop computer with an average to large size screen.
    7. Any page that will contain tab sections must benefit from their use. Tab sections are created by staff in the Web Services Unit, but can then be edited by Contribute Users.

  5. Sub-navigation menus (Pipes)
    Sometimes it is necessary to create sub-navigation for a set of CDE web pages. Using links and pipes to create sub-navigation is a time-tested navigation method. When used, pipe sub-navigation menus must meet the following requirements:
    1. The sub-navigation menu should be placed at or near the top of each page and in the same location on each page for all pages that have a corresponding link in the sub-navigation menu.
    2. The sub-navigation menu is only placed on pages that have a corresponding link in the sub-navigation menu. It is not placed on pages that are not part of the sub-navigation menu. Instead, sub-pages should have “back to…” links to help users return to a page that is within the sub-navigation menu.
    3. Sub-navigation menus are usually center-aligned horizontally.
    4. Pipes should not be placed to the left of the first sub-navigation menu item on each line or to the right of the last sub-navigation menu item on each line.
    5. Each pipe should have a single unlinked space on either side.
    6. Links between the pipes should use standard descriptive text hyperlinks, except for the words indicating the current page, which should be unlinked, colored using #666666 (dark gray), and be in bold.
    7. Links in sub-navigation menus should always be presented in the same order.
    8. The text, “home”, may not be used without additional adjoining and descriptive text in sub-navigation menus because of possible ambiguity in meaning. For example: The word “home” is not allowed on its own in a sub-navigation menu. With additional descriptive text, such as “CALPADS Home” the word “home can be used in a sub-navigation menu.
    9. The dark gray color used for the unlinked active page (#666666) is found in the Contribute color picker in the third row and in the first column:

      Contribute color picker with hex color 666666 indicated. It is in the third row and the first column.

  6. Accordions
    Accordions are a feature that is available on both CDE's primary public website (www.cde.ca.gov) and its private Intranet web site (intranet.cde.ca.gov).
    1. May only be used for frequently asked questions sections, content that is contained in county lists, or to sort content by month or year. (Updated 01-Sep-2020)
    2. In a tabbed web page, accordions can only be used in the non tabbed area or in only one of the tabbed sections. This ensures that 'expand all' and 'collapse all' links will work correctly.
    3. In determining the length of pages with accordions, page length is determined based on all accordions being closed.
    4. Accordions utilize heading-5, so heading-5 can't be used for any other purpose on a web page that has accordions.
    5. Must have a set of 'Expand All | Collapse All' links. (Updated 01-Sep-2020)
    6. Abbreviations must be spelled out and defined on first use within each Accordion feature where abbreviations are present, unless already defined above the Accordion feature, and outside of an Accordion feature. (Updated 14-Oct-2021)

  7. Find in Page
    The 'Find in Page' feature is available on CDE's primary public website (www.cde.ca.gov).
    1. It may only be used for web pages that are dense with content where providing an easy to use equivalent for the browser's Ctrl+F feature (find) is desired.
    2. The feature must be placed near the top of the web page.
Styles

CDE's primary public website (www.cde.ca.gov) and its private Intranet web site (intranet.cde.ca.gov) use cascading style sheets. The following are standard styles for these sites:

  1. * CDE's web page font family is:
    1. Arial
    2. Helvetica
    3. sans-serif

  2. * Font size
    1. Primary website: 16pt.
    2. Intranet website: 80%

  3. Indent style
    1. To indent text, use the Indent style from the Adobe Contribute styles dropdown menu.
    2. Don't use the Indent buttons, which add the HTML <blockquote> tag incorrectly. The indent buttons should only be used for actual quotations.

  4. No Heading Space style
    1. Use the optional NoHeadingSpace style from the Adobe Contribute styles dropdown menu to reduce the space between a heading and the content below it.
    2. When used, the NoHeadingSpace style must be applied in a consistent manner throughout a web page or a set of web pages.

  5. No Bullet List style
    1. Use the NoBulletList style from the Adobe Contribute styles dropdown menu to create a bulleted HTML list where the bullets will not be visible.

  6. Page length at or over 350 lines of text (measured at 100% at 1024 x 768 resolution)
    The following is required:
    1. The page must have a table of contents along with anchor hyperlinks and one or more 'back to top' links.
    2. Be split into multiple web pages (required if at or over 700 lines of text).

  7. Shading of alternate table rows
    1. From the Adobe Contribute styles dropdown menu can be used on any table, but most useful on lengthy tables.

  8. Print URL
    1. The Print URL Style (printurlstyle) may only be used to augment descriptive link text in order to add a URL that is only visible whenever the Web page is printed.
    2. Descriptive link text is followed by all of the following: space ( ), left bracket ([), unlinked URL (http://xxx.xxx.xxx), and right bracket (]).
    3. The Print URL Style must be applied beginning with the space that follows the descriptive link text, through and including the ending right bracket.
    4. The Print URL Style is applied before any of the link notations, including the External Link icon.
    5. For example:
      California Department of Education [https://www.cde.ca.gov]

      [Resources:
  9. Important Notice
    A shared asset is available that will place an Important Notice box within a Contribute Web page. If this shared asset is used, the following conditions must be met:
    1. Only one Important Notice may be used on a Web page.
    2. The Important Notice must be placed as the first item in the body of the page at the top of the content area.
    3. The title, ‘Important Notice’ must be left intact without any modifications.
    4. The border and background color of the box must not be changed.

See WEB-404 for additional information about use of headings.

[WEB-403] Metadata

Web pages posted to CDE's primary website and its Intranet website require more specific metadata.

  1. Unique metadata title (document properties) that is descriptive of the document must use title case, be less than or equal to 50 characters (inclusive of spaces and punctuation), only use abbreviations if they are defined in the title or if there is not enough space to spell out whole words, and must adhere to the following format:
    1. For the primary CDE website (www.cde.ca.gov):

      Unique Document Title

    2. For the CDE Intranet website (intranet.cde.ca.gov):

      Unique Document Title - Sub-sub-topic Name (CDE Intranet)

  2. The metadata title (Unique Document Title) must be different from any other web page within the same sub-sub-topic (or sub-topic if applicable).

  3. Has a page description that describes the audience, purpose, or use of the web page.
    1. Uses between 45 and 250 characters (inclusive of spaces and punctuation) to sufficiently describe the page.
    2. Is not a mere restatement of the title.
    3. Abbreviations are only used if they are defined in the title or description and if there is not enough space to spell out whole words.
    4. Use sentence case.
    5. The description ends with a period punctuation mark.

  4. For the primary CDE website, the title and description may only use keyboard symbols (not HTML character entities).
    1. This is because the title and description are entered via the WebNETS system and these fields cannot reliably accept HTML character entities.
    2. Use a hyphen instead of the endash in web page titles and descriptions.

  5. For 'index.asp' web pages on the primary CDE website, the ampersand will be used in place of the word 'and' in metadata titles. Whenever possible, the serial comma will be used as well.

See additional information about metadata at WEB-105.

[CDE Requirements]

[WEB-404] Headings

For documents posted to CDE's primary website and its Intranet website, there are more specific requirements for headings:

  1. Heading styles must not be combined with other formatting styles, such as hyperlinks or table headers.

  2. Headings should use title case and should typically not have punctuation.

See WEB-402 for information on the use of the NoHeadingSpace style.

[CDE Requirement]

Posted to Other Specific Websites

[WEB-501] Posted to a California School for the Blind Website
Color Contrast (AAA Level)

Ensure sufficient color contrast between all content that conveys meaning (including all text) and its background at the WCAG 2.0 AAA level.

  1. Ensure that the color difference has a contrast ratio that is at least 7 to 1.

  2. Text that is large, which is 18pt. (or 14pt. bold or italicized) must have a color contrast ratio of at least 4.5 to 1.

  3. For gradient backgrounds or text, measure at the combination with the least contrast to determine compliance.

See WEB-107 to learn more about standard and other color contrast requirements in web pages.

[Supports WCAG 2.0 Section 1.4.6 (Contrast [Enhanced]) External link opens in new window or tab.]
[General Resources: Web Accessibility in Mind: Web Accessibility Evaluation Tool (WAVE) External link opens in new window or tab. and Color Contrast Checker External link opens in new window or tab., and World Wide Web Consortium (W3C), Understanding Conformance External link opens in new window or tab.]

Required Testing

There is no testing tool that can ensure compliance with all of the standards above. However, there are a variety of testing tools that can help and they should be used to ensure compliance and quality of web pages. At a minimum, the following testing is required for all CDE web pages.

[WEB-801] Spelling and Grammar
  1. Use the spelling/grammar checker in MS Word to check for basic and intermediate spelling and grammar errors.
    1. Copy/paste the content into MS Word in order to use the MS Word checker.
    2. Fix any misspelled words.
    3. Fix grammar errors and consider revising content when there are many grammar warnings.

See WEB-201 for additional CDE writing requirements for web pages developed by or on behalf of CDE staff.
See WEB-202 for additional text requirements for web pages developed by or on behalf of CDE staff.

[WEB-802] Automated Checker
  1. Run the Web Accessibility Evaluation Tool (WAVE) for either Chrome or Firefox.
    1. Fix all errors.
    2. Check all warnings. Assume warnings are errors that must be fixed unless it can be confirmed that the warning can be ignored and still meet these standards and be WCAG 2.0-compliant.
    3. Check all color contrast errors/warnings.

      [Resources:
  2. Use the the Show/Hide link at the bottom of each Staging or iStaging web page.
    1. For pages on the primary CDE website (www.cde.ca.gov) or the CDE Intranet (intranet.cde.ca.go)
    2. Fix all errors and irregularities.

      [Resources:
[WEB-803] Broken Links
  1. Ensure that all links work and that there are no broken links.
    1. Use a link checker to check all links.

      [Resources:

See WEB-106 for CDE's definition of a broken link.

[WEB-804] Assistive Technology Checks

When there is a question about how a web page or website will function with assistive technology, use these checks:

  1. * Use all pages without a mouse. Ensure that all functions and links are available with a keyboard only.
  2. * Use a screen reader to test the page and ensure that it reads correctly and in the correct order.

    [Resources:
[WEB-805] Color Contrast
  1. * Automated Color Contrast Check
    1. Use an automated color contrast checker to check for all instances of contrast errors. Fix all contrast errors:

      [Resources:
  2. * Manual Color Contrast Check
    1. Using a color selector and a color contrast checker, manually check the color contrast of every foreground/background color combination in the document to ensure that it meets the applicable requirements in WEB-107, WEB-306, and WEB-501.
    2. This technique is required for informative images and for all text in images.

      [Resources:
[WEB-806] Valid Code

  1. Ensure that the HTML code is valid using a validation tool.
    1. For CDE web pages on the primary CDE website (www.cde.ca.gov), most pages have a link that is only available within the CDE network to the W3C Validator External link opens in new window or tab.

[Supports WCAG 2.0 Section 4.1.1 (Parsing) External link opens in new window or tab.]

Additional Information and Resources

The following information and resources form other organizations may be helpful in trying to gain a more complete understanding of the accessibility-compliant and standards-based approach that CDE applies to the web pages that it develops, procures, maintains, and uses.

Checklists

  1. Checklist #1 (coming soon)
    (All Web Pages)
    • CDE work product
    • CDE funded
    • CDE partnership

  2. Add Checklist #2 (coming soon)
    (Authored by CDE Staff or on Behalf of CDE)
    • CDE attribution
    • Has CDE branding
    • Developed under CDE contract

  3. Add Checklist #3 (coming soon)
    (Posted to any 'cde.ca.gov' domain website)

  4. Add Checklist #4 (coming soon)
    (Posted to the primary CDE website (www.cde.ca.gov) or the private CDE Intranet (intranet.cde.ca.gov))
    • Contribute Users are responsible for Checklists 1-4.

  5. Add Checklist #5 (coming soon)
    (Only added for specific websites)
    • California School for the Blind Website

Footnotes

1 Websites using the CDE domain (cde.ca.gov) include:

  • CDE Primary Internet website (http://www.cde.ca.gov/)
  • CDE Intranet website (http://intranet.cde.ca.gov/)
  • CDE Monitoring Tool (http://cmt.cde.ca.gov/)
  • CELDT Results (http://celdt.cde.ca.gov/)
  • CAASPP (http://caaspp.cde.ca.gov/)
Questions:   Web Services Unit | tsdweb@cde.ca.gov
Last Reviewed: Tuesday, May 16, 2023
Related Content
  • Web, Document, and Accessibility Standards
    For all Web products (Web pages, Web documents, Web sites, Web applications, or other Web services) developed by the CDE, by CDE personnel, or as a result of a contract with the CDE, these Web standards must be followed.
Trending in Department Information
Recently Posted in Department Information