Skip to content

W3C Web Standards

  • We use HTML to structure content (into headings, paragraphs, etc.).
  • We use CSS to format and layout content for different devices.
  • We use JavaScript to add dynamic behavior and interaction.

Keyboard Navigation

  • Tab: Navigates to links and form fields.
  • Shift + Tab: Navigate backwards.
  • Enter: Activates links and buttons.
  • Spacebar: Activates checkboxes and buttons.
  • Arrow keys: Selects radio buttons, select-menu options, sliders, tab panels, autocomplete, tree menus, etc.

Headings

  • Titles are labeled with a h1 tag.
  • We nest page sections and subsections in a sequential hierarchy of h2h6.
  • Links in the content are underlined.

HTML5 Sectioning Elements

  • We use HTML sectioning elements: <header><nav><main> (only one <main> per page), <aside>, and <footer>.

Semantic HTML

We use <p> for paragraphs, <blockquote> for quotes, and <time> for times and dates.

We use “skip-links” for readers to skip the navigation and jump directly to the page content.

Images

  • HTML img elements are given an alt attribute.
  • Images that are only decorative, like a logo or icon are marked as decorative.
  • Any decorative images in an img element will have an empty alt (alt="").
  • Descriptions have been added (for non-visual readers) to understand the contents and purpose of the image in the alternate text.

Color Contrast

We offer options for high contrast and grayscale using the toolbar on the right of the browser.

Text

  • Size: We offer options for text size to enlarge the text using the toolbar on the right of the browser.
  • Font: We use the standard Google font Open Sans throughout the site
  • Lists:   <ul><ol>, or <dl>.
  • Quotes:  <blockquote> tag, and a quote meant to display inline (e.g., within a paragraph) we use a <q> tag.
  • Abbreviations: We define acronyms and abbreviations in the title attribute of the abbr element.

Audio and Video

  • Controls are on each video to start, stop, and pause.
  • Subtitles are available on each video under Settings.

Language

  • We declare our primary human language in the head: <html <?php language_attributes(); ?>>.
  • lang=”en-US

Forms

  • Our Forms are Logical and Easy to Use
  • Keyboard Accessible
  • We provide Form Labels with Controls