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 patterns that are repeated on web pages MUST be presented in the same relative order each time they appear and MUST NOT change order when navigating through the site.
- A skip link MUST be either visible at all times or visible on keyboard focus.
- The reading order MUST be logical and intuitive.
- The navigation order of focusable elements MUST be logical and intuitive.
Non-required / best practice
- A navigation list SHOULD be designated with the <nav> element or role="navigation".
- A navigation list SHOULD include a visible method of informing users which page within the navigation list is the currently active/visible page.
- A navigation list SHOULD include a method of informing blind users which page within the navigation list is the currently active/visible page.
- A keyboard-functional "skip" link SHOULD be provided to allow keyboard users to navigate directly to the main content.
- The "skip link" SHOULD be the first focusable element on the page.
- If a table of contents for the page is included, it SHOULD reflect the heading structure of the page.
- tabindex of positive values SHOULD NOT be used.
- A paginated view SHOULD include a visible method of informing users which view is the currently active/visible view.
- A paginated view SHOULD include a method of informing blind users which view is the currently active/visible view.
Links
Required
- Links MUST be visually distinguishable from surrounding text.
Color alone must not be used to distinguish links from surrounding text unless the color contrast between the link and the surrounding text is at least 3:1 and an additional differentiation is provided when the link is hovered or receives focus. - Links MUST be semantically designated as such.
- A link MUST have programmatically-discernible text, as determined by the accessible name calculation algorithm.
- Features such as labels, names, and text alternatives for content that have the same functionality across multiple web pages MUST be consistently identified.
- All focusable elements MUST have a visual focus indicator when in focus.
Non-required / best practice
- Links and buttons SHOULD be designated semantically according to their functions.
- The purpose of each link SHOULD be able to be determined from the link text alone.
- The link text SHOULD NOT repeat the role ("link").
- A link that opens in a new window or tab SHOULD indicate that it opens in a new window or tab.
- A link to a file or destination in an alternative or non-web format SHOULD indicate the file or destination type.
- Focusable elements SHOULD have enhanced visual focus indicator styles.
Lists
Required
Lists MUST be constructed using the appropriate semantic markup.
Tables
Required
- Table headers MUST be designated with <th>.
- Data table header text MUST accurately describe the category of the corresponding data cells.
- Table data cells MUST be associated with their corresponding header cells.
- Table data group headers MUST be associated with their corresponding data cell groups.
- Header/data associations that cannot be designated with <th> and scope MUST be designated with headers plus id
- Data table 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 be represented in a <table>.
- Data tables SHOULD have a programmatically-associated caption or name.
- The name/caption of a data table SHOULD describe the identity or purpose of the table accurately, meaningfully, and succinctly.
- The name/caption of each data table SHOULD be unique within the context of other tables on the same page.
- A data table summary, if provided, SHOULD make the table more understandable to screen reader users.
- Tables SHOULD NOT be used for the purpose of purely visual (non-data) layout.
iFrames
Required
- iframes that convey content to users MUST have a non-empty title attribute.
- The iframe title MUST be accurate and descriptive.
- Frames MUST have a unique title (in the context of the page).
- The source page of an iframe MUST have a valid, meaningful <title>.
Non-required / best practice
- The heading hierarchy of an iframe SHOULD be designed to fit within the heading hierarchy of the parent document, if possible.
- Hidden frames or frames that do not convey content to users SHOULD be hidden from assistive technologies using aria-hidden="true".
Other (content)
Required
- Critical emphasis in the text SHOULD be conveyed through visual styling.
- Critical emphasis in the text SHOULD be conveyed in a text-based format.
- The <blockquote> element SHOULD be used to designate long (block level) quotations.
- The <blockquote> element SHOULD NOT be used for visual styling alone.
- The <q> element (for inline quotations) SHOULD NOT be used as the only way to designate quotations.
- Code SHOULD be marked with the <code> element and styled to look different from non-code text.
- Blocks of code SHOULD be formatted with the <pre> element.
- Strikethrough text SHOULD be marked with the <del> element.
- Text designated for insertion SHOULD be marked with the <ins> element.
- Highlighted text SHOULD be marked with the <mark> element.
- Critical highlighted text SHOULD be supplemented with a text-based method to convey the meaning of the highlighting.
Non-required / best practice
- Critical strikethrough text MUST be supplemented with a text-based method to convey the meaning of the strikethrough.
- Critical text designated for insertion MUST be supplemented with a text-based method to convey the meaning of the insertion.