The following meet WCAG 2.0 AA standards for both legal conformance and accessibility best practices.

Page titles

Required

  • Must be present.

  • Must be updated when the URL changes.

  • Must be accurate and informative.

Non-required / best practice

  • Should describe result of user action or change of context if either occur

  • Should be concise.

  • Should be unique, if possible.

  • Unique information should come first in the title. Example: About us | Cornell Alumni

  • Should match H1 tag

Language

Required

  • Must be identified accurately in the <html> tag with a valid 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.

Non-required / best practice

  • 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 logical.

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. 

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.