...
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.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
- Links and buttons SHOULD be designated semantically according to should semantically reflect 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
- 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
- Table headers MUST be designated with <th>.
- Data table header text MUST accurately describe the category of the corresponding data cells.
- Table data Data cells MUST must be associated with their corresponding header cells.
- Table data Data group headers MUST must be associated with their corresponding data cell groups.
- Header/data associations that cannot be designated with can't use <th> and scope MUST be designated must use with headers plus id
- Data table headers and data associations MUST NOT must not be referenced across nested, merged, or separate tables.
- Layout tables MUST NOT must not contain data table markup.
Non-required / best practice
- Tabular data SHOULD be represented in a <table>should use HTML table semantics.
- Data tables SHOULD should have a programmatically-an 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
- 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>
- 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
...
- Hidden frames or frames that do not convey content to users SHOULD 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
- 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 It shouldn't be used for visual styling alone .The <q> element (for inline quotations) SHOULD NOT be used as the only way to designate quotations(non-quotes).
- Code SHOULD should be marked with the <code> element and styled to look different from non-code text. Blocks of code SHOULD be formatted with should use the <pre> element for formatting.
- Strikethrough text SHOULD be marked with should use the <del> element.Text designated for insertion SHOULD be marked with
- Insertion text should use the <ins> element.
- Highlighted text SHOULD be marked with should use the <mark> element.
- Critical Important highlighted text SHOULD be supplemented with should have a text-based method to convey the meaning way 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 insertionconveying the importance of the text.