a11ychecks

Frequently Asked Questions

This page provides some helpful information about Best Practices for accessible websites and web applications.

Accessibility Best Practices

Accessibility best practices refer to a set of guidelines, principles, and techniques that aim to ensure that digital content, products, services, and environments are designed and developed in a way that makes them usable and accessible to as many people as possible, including those with disabilities. These practices are intended to eliminate barriers and provide equal access to information and functionality, regardless of an individual's abilities or disabilities.

Accessibility best practices encompass a wide range of considerations, including web design, user interface design, content creation, software development, and physical spaces. The goal is to create inclusive experiences that accommodate various disabilities, such as visual, auditory, motor, cognitive, and speech impairments.

Landmarks

Identify landmarks on the page:

  • Use equivalent HTML5 sectioning elements (preferred)
  • Use ARIA landmark role attributes if HTML5 sectioning elements cannot be used.
  • Ensure all content on the page is contained within a landmark region
  • Ensure only one instance of: role="banner" or <header> (when <header> is a child of <body>). A <header> is not considered a banner when it is the child of <article>, <aside>, <main>, <nav> or <section>. <footer> <main>
  • Ensure <header> (when the banner), <footer>, <main> are direct children of <body>
  • Limit the use of <nav> to primary and secondary navigations
  • Use the aria-label attribute to differentiate multiple (different) <nav> items.
  • Use the aria-labelledby attribute to label a <nav> region that begins with a heading element
  • Provide short and descriptive labels
  • The landmark role is declared by a screen reader along with the name, if any. Do not use the landmark role (e.g., “navigation”) as part of the name; for instance, the label is “Site” not “Site Navigation” for a navigation landmark.
  • Use role="search" rather than role="form" when the form is used for search functionality.
    • Headings

    Identify headings on the page:

  • Provide headings for each page
  • Use heading elements <h1> - <h6> for all headings
  • Don’t use heading elements for text that is not a heading. Instead, use CSS to change font size or styles
  • Ensure headings are concise and meaningful (they describe the topic or purpose)
  • Ensure headings follow a hierarchical sequence without skipping any levels
  • Provide one <h1> heading that describes the page content
    • Content Structure

    Identify Content Structure on the page:

  • Ensure an <article> element is used in a web page for self-contained composition
  • For thematic grouping of content, ensure the <section> element is used.
  • Use the paragraph (<p>) element for paragraphs.
  • Use quotes:
  • For longer and more complex quotes, use the <blockquote> element.
  • For shorted quotes, that are usually embedded in another sentence, use the inline quote <q> element.
  • To indicate that content has strong importance or urgency, use the <strong> element.
  • For words that have a stressed emphasis compared to surrounding text, use the <em> element.
  • Expand abbreviations on first use on the page, with the abbreviation accompanying the expansion, one or the other in brackets.
  • Ensure each web page defines its topic or purpose in a descriptive title, set in a <title> element in the HTML <head> element. Optionally, identify the larger collection of Web pages after the page description.
  • When phrasing instructions on where to find or how to use content, avoid descriptions that rely exclusively on being able to see or hear. Be sure to include a text label in the instruction and at the item of interest.
    • Language

    Identify Language on the page:

  • Add a lang attribute to the <html> element to set the default language for the entire page.
  • For English: <html lang="en">
  • For French: <html lang="fr">
  • For other languages, choose the appropriate language code from ISO-639. Use the shortest available language code.
  • You may add a region subtag if you need to say that this is the language as spoken somewhere in a particular; e.g., lang="fr-CA" indicates French as spoken in Canada.
  • Insert a lang attribute anywhere the default language changes to a different language.
  • XHTML should use both the lang attribute and the xml:lang attribute.
    • Lists

    Identify Lists on the page:

  • HTML provides three list structures, each with specific semantics:
  • Use unordered lists (<ul>) when the order of the items is irrelevant. Each list item (<li>) in an unordered list is marked with a bullet.
  • Use ordered lists (<ol>) for sequential information. Each list item (<li>) is numbered by the browser.
  • Use description lists (<dl>) to group related terms (<dt>) and their descriptions (<dd>).
    • iFrames

    Identify iFrames on the page:

  • If the iframe consists of decorative images or JavaScript, hide it from screen readers by setting the aria-hidden="true" attribute on the <iframe> element.
  • If the <iframe> contains content intended for the user:
  • Give the <iframe> element a descriptive title attribute value.
  • Ensure the <iframe> title attribute value is unique across iframes on the page.
    • Parsing and Validity

    Identify parsing and validity on the page:

  • Elements have complete start and end tags.
  • Elements are nested according to their specifications.
  • Elements do not contain duplicate attributes.
  • Any IDs are unique.
    • © Copyrights 2025 | a11ychecks.com | All rights reserved.