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
h1tag. - We nest page sections and subsections in a sequential hierarchy of
h2–h6.
Links
- 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.
Skip Links
We use “skip-links” for readers to skip the navigation and jump directly to the page content.
Images
- HTML
imgelements are given analtattribute. - Images that are only decorative, like a logo or icon are marked as decorative.
- Any decorative images in an
imgelement 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
titleattribute of theabbrelement.
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
