Headings

Why does heading structure matter?

• Helps screen readers, voice input users, and keyboard navigators quickly scan and jump to sections.
• Improves SEO by indicating page structure.

Best Practices for Headings:

• Headings (H1 to H6) give structure to the text on your page.
• Use one H1 per page for the page title.
• Follow a logical hierarchy (H1 → H2 → H3, etc.); do not skip levels.
• Use headings to introduce sections, NOT for styling.

Example:

• Heading 1 (page title)
  • Heading 2
    • Heading 3
  • Heading 2
    • Heading 3
      • Heading 4
        • Heading 5
        • Heading 5
          • Heading 6

ARIA & Semantic Markup

For Web Developers

• Use ARIA landmarks (e.g., <header>, <nav>, <main>, <footer>) to define page regions.
• Include “skip to main content” links for quick navigation.

Readability

• Write in clear, concise sentences.
• Keep paragraphs short and to the point.
• Avoid jargon.
• Use a descriptive and concise page title and headings.
• Always mark paragraphs with the <p> tag.
• Use bullet lists to break up long blocks of text.

Links

• Use unique, descriptive link text (do not use “click here” or “read more”).
• Ensure that link text clearly describes the destination or action.
• Consider using ARIA labels for extra context when needed.
• Avoid linked URLs when possible.

Examples:

• Instead of “click here for more info,” use “Learn more about applying”
• When including URLs, use a shortened or descriptive version (e.g., “uab.edu/news”)

Lists

• Use built-in list formatting for all lists—do not type numbers.
  • Use bullet (unordered) lists for items that do not need to be in a specific order.
  • Use numbered (ordered) lists for items that are accomplished in a specific order.
• This ensures screen readers correctly interpret the list structure.

Examples:

Unordered Lists:

• Apples
• Oranges
• Pineapples

Ordered Lists:

1. Download Application
2. Fill out
3. Send to This email address is being protected from spambots. You need JavaScript enabled to view it.

Color

• Use sufficient color contrast (check with WebAIM Contrast Checker opens a new website).
• Don’t rely solely on color to convey information — provide text alternatives (e.g., using an asterisk “*” for required fields).
• Do not use color alone to indicate importance.

Title

• Important: Applications are due by April 1 (using appropriate text to indicate importance)
• * Indicates a required field

Additional Tools:

• Use tools like Chrome’s Eye Dropper opens a new website to match exact colors.
• Follow guidelines in the official Brand Guide opens a new website.

Tables

• Use tables only for presenting data—not for page layout.
• Always code tables with proper semantic HTML.
• Ensure tables are responsive and mobile-friendly.

Important:

• Do not build complex tables with multiple interior headings. They cannot be made accessible.
• Do not leave anything blank. Use "n/a" or other notation if there is no value for a spcific table entry.

iFrames

• Provide a descriptive HTML title for each iframe to explain its purpose.

Examples:

• title="YouTube video player - UAB Spring 2024 Graduate School Commencement"