LogoLogo
  • 🧙‍♂️Dude Coding Standards
  • HTML
    • Accessible HTML Guidelines
      • Blocks
      • Upper title/Prefix
      • Global links
      • Search form
    • HTML elements
      • Lists
      • Headings
  • PHP
    • PHP Guidelines
    • Linting PHP with PHP_CodeSniffer
  • CSS
    • CSS and SCSS Guidelines
      • Naming Conventions
        • Custom properties and variables
        • Naming classes
      • Defining font families
      • Nesting
    • Stylelint
  • SVGs
    • Importing SVG files into a project
    • SVGs and accessibility
    • Styling SVGs
Powered by GitBook
On this page
  • Wrong
  • Right

Was this helpful?

Edit on GitHub
Export as PDF
  1. HTML
  2. Accessible HTML Guidelines

Upper title/Prefix

Or prefix. Whatever you like to call them.

Last updated 2 months ago

Was this helpful?

Wrong

Why it is wrong

Assistive tools and keyboards see this as: paragraph, title. They are not linked to each other. For seeing users this is no problem as we have styled the small paragraph but for others it causes confusion.

<p>Smaller prefix title</p>
<h1>The main title</h1>

Right

Why it is right

This markup actually links the smaller prefix title to the main title. Remember to always use unique id for this in both aria-describedby and id attribute values. This can be easily achieved with WordPress's function.

<p aria-describedby="unique-sanitized-title-id">
    Smaller prefix title
</p>

<h1 id="unique-sanitized-title-id">
    The main title
</h1>
sanitize_title()
Page cover image