Versions Compared

Old Version 19

changes.mady.by.user Chris Lastovicka

Saved on

compared with

New Version Current

changes.mady.by.user Chris Lastovicka

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Table of Contents
maxLevel2
minLevel2
typeflat

Page titles

Required

  • The page <title> MUST Must be present and MUST contain text.

  • The page <title> MUST Must be updated when the web address URL changes.

  • The page <title> MUST Must be accurate and informative.

Non-required / best practice

  • If a page is the Should describe result of a user action or scripted change of context , the text of the <title> SHOULD describe the result or change of context to the user.if either occur

  • Should The <title> SHOULD be concise.

  • The page <title> SHOULD Should be unique, if possible.

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

  • Should match H1 tagThe 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>The language code MUST be valid.

Headings

Required

  • Headings MUST Must be accurate and informative.

Non-required / best practice

  • Text that acts as If text looks like a heading visually , or is 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.

  • 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 Headings SHOULD convey a clear and accurate structural outline of the sections of content of a web page .content

  • Should not Headings SHOULD NOT skip hierarchical levels .Example: Don't jump from <h2> to <h4>

  • Beginning of main content should The beginning of the main content SHOULD start with <h1>.

  • Should only have Most web pages SHOULD have only 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.
  • 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 logicalThe navigation order of focusable elements MUST be logical and intuitive.

Non-required / best practice

  • A navigation list SHOULD be designated with the <nav> element Navigation lists should be marked with <nav> or role="navigation".A
  • navigation list SHOULD include Include a visible method way of informing letting users know 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.
  • they're on. Same for screen readers. Same for paginated views.
  • The skip link should The "skip link" SHOULD be the first focusable element on the a page.
  • If a Page table of contents for the page is included, it SHOULD should reflect the heading structure of the page.
  • Positive tabindex of positive values SHOULD NOT 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.
  •  

Required

  • Links MUST 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 isn't enough unless color contrast is at least 3:1, and an hovering or focus provides additional differentiation is provided when the link is hovered or receives focus.. 
  • Must Links MUST be semantically designated as such.links. Example: <a href="https://cornell.edu">Cornell University</a> 
  • Must A link MUST have programmatically-discernible text. Example: 1) if an image is used inside a link, 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.
  • 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 focusedAll 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

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

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.