The following meet WCAG 2.0 AA standards for both legal conformance and accessibility best practices.
Table of Contents | ||||||
---|---|---|---|---|---|---|
|
Page titles
Required
- The page <title> MUST
Must be present
and MUST contain text.
- The page <title> MUST
Must be updated when the
web addressURL changes.
- The page <title> MUST
Must be accurate and informative.
Non-required / best practice
- If a page is the
Should describe result of
auser action or
scriptedchange of context
, the text of the <title> SHOULD describe the result or change of context to the user.if either occur
Should
The <title> SHOULDbe concise.
- The page <title> SHOULD
Should be unique, if possible.
Unique information
SHOULDshould come first in the
<title>.title. Example: About us | Cornell Alumni
Should match H1 tag
The page <title> SHOULD match (or be very similar to) the top heading in the main content.
Language
Required
- The primary language of the page MUST Must be identified accurately on in the <html> element.The primary language of the page MUST be identified tag with a valid value on the <html> element.
- Inline language changes MUST be identified with a valid lang attribute.
- language code. Example: <html lang="en">
- Valid lang attribute must be used for inline language changes. Example: <p>And then I said in a German accent, <span lang="de">Bach ist ein Komponist.</span>.</p>
Headings
Required
Must be accurate and informative
The language code MUST be valid.
Non-required / best practice
Headings
Required
If text looks like a heading, or is structurally a heading, use HTML heading tags. Example: <h2>The history of Cornell University</h2>
Do not use HTML heading tags for anything other than true headings
Should be concise
Should convey clear and accurate structural outline of web page content
Should not skip hierarchical levels Example: Don't jump from <h2> to <h4>
Beginning of main content should start with <h1>
Should only have one <h1>
Navigation
Required
- Navigation must be consistent in presentation order across website
- Skip link must be visible on keyboard focus (or at all times).
- Reading order must be logical.
- Navigation order of focusable elements must be logicalHeadings MUST be accurate and informative.
Non-required / best practice
- Navigation lists should be marked with <nav> or role="navigation".
- Include a visible way of letting users know which page they're on. Same for screen readers. Same for paginated views.
- The skip link should be the first focusable element on a page.
- Page table of contents should reflect the heading structure of the page.
- Positive tabindex values should not be used.
Links
Required
- Must be visually distinguishable from surrounding text. Color alone isn't enough unless color contrast is at least 3:1, and hovering or focus provides additional differentiation.
- Must be semantically designated as links. Example: <a href="https://cornell.edu">Cornell University</a>
- Must have programmatically-discernible text. Example: 1) if an image is used inside a link, put link text in the alt tag 2) if an icon is used, add an aria-label such as: <a href="https://cornell.edu" aria-label="Cornell University"><icon html... \></a>
- Link labels and text alternatives must be consistent across the website. Example: don't use "Contact Us" and "Give us a call" for the same URL
- Anything focusable (that you can tab to) must have visual indicator appear when it's focused.
Non-required / best practice
- Links and buttons should semantically reflect their functions. Example: Use <a href="..."> for links and <button> for buttons.
- Link text should clearly state its purpose.
- Link text shouldn't use the word "Link." Example: Say "More information on gummy bears." not "Link to more information on gummy bears."
- Indicate that a link will open in a new window. Example: add a new-window icon next to links that open in a new window
- Links to files or non-web destinations should tell users what kind of files they are. Example: add "PDF" next to links to PDFs
- Enhance focus indicator on focusable elements. Example: instead of the default browser focus, add a colorful, thicker border with a change in background when elements receive focus
Lists
Required
Must use HTML semantic markup. Example: <ul><li>Grain-fed bats</li></ul>
Tables
Required
- Headers must use <th>
- Data header text must describe category of the corresponding data cells.
- Data cells must be associated with their corresponding header cells.
- Data group headers must be associated with their corresponding data cell groups.
- Header/data associations that can't use <th> and scope must use with headers plus id
- Data headers and data associations must not be referenced across nested, merged, or separate tables.
- Layout tables must not contain data table markup.
Non-required / best practice
- Tabular data should use HTML table semantics.
- Data tables should have an associated caption or name that describes table accurately, and be unique.
- Provide a data table summary to make it easier for screen reader users
- Don't use tables for non-data page layout
iFrames
Required
- must have a descriptive title Example: <iframe title="Star Wars: The Last Jedi trailer"> and be unique in relation to other iFrames on the page
- for iframes bringing in other web pages, the external page must have a <title>
Non-required / best practice
- Hidden frames should also be hidden from assistive technologies using aria-hidden="true".
Other (content)
Required
- Important strikethrough text must be supplemented with a text-based method to convey the meaning of the strikethrough.
- Important insertion text must be supplemented with a text-based method to convey the meaning of the insertion.
Non-required / best practice
- <blockquote> should be used for long (block level) quotations. It shouldn't be used for visual styling alone (non-quotes).
- Code should be marked with the <code> element and styled to look different from non-code text. Blocks of code should use the <pre> element for formatting.
- Strikethrough text should use the <del> element.
- Insertion text should use the <ins> element.
- Highlighted text should use the <mark> element.
- Important highlighted text should have a text-based way of conveying the importance of the text
- Text that acts as a heading visually or structurally SHOULD be designated as a true heading in the markup.
- Text that does not act as a heading visually or structurally SHOULD NOT be marked as a heading.
- Heading text SHOULD be concise and relatively brief.
- Headings SHOULD convey a clear and accurate structural outline of the sections of content of a web page.
- Headings SHOULD NOT skip hierarchical levels.
- The beginning of the main content SHOULD start with <h1>.
- Most web pages SHOULD have only one <h1>.