CodeBlanks Logo Icon CodeBlanks
Login Register

Summary - Accessible widget

HTML course · Expert · Lesson 6/39

Write an accessible widget skeleton with all ARIA techniques.

What we learned in this group

In this group you met five techniques for accessibility:

  • WCAG principles: the POUR frame
  • Keyboard navigation: tabindex and focus management
  • Live regions: announcing with aria-live
  • Dialogs: <dialog> and aria-modal
  • Heading hierarchy: h1-h6 order

Now you will combine them into an accessible widget skeleton.

Exercise Write the accessible widget skeleton

Write an <h1> inside body (for example 'Settings'). Then add a <button id="opener" aria-haspopup="dialog"> (non-empty text). Then add a <dialog aria-modal="true" aria-labelledby="dlg-title">. Inside the dialog put an <h2 id="dlg-title"> (non-empty text), a <p role="status" aria-live="polite"> (non-empty text) and a <button> (non-empty text). Close the dialog.

Show example solution 
<body>
  <h1>Settings</h1>
  <button id="opener" aria-haspopup="dialog">Edit profile</button>
  <dialog aria-modal="true" aria-labelledby="dlg-title">
    <h2 id="dlg-title">Reset profile</h2>
    <p role="status" aria-live="polite">Changes saved</p>
    <button>Close</button>
  </dialog>
</body>

Test yourself

  1. Match each technique to its purpose

    aria-live
    Announces dynamic content
    aria-modal
    Says it is a modal
    tabindex="0"
    Enters keyboard flow
    h1
    Main page title
    alt
    Image alternative text

  2. Write the opener button attribute

    <button id="open-btn" ____="dialog">Open</button>
    Show answer 
    <button id="open-btn" aria-haspopup="dialog">Open</button>

  3. Which technique announces dynamic content to a screen reader?

    • tabindex
    • h1 heading
    • alt text
    • aria-live region
    Show answer

    aria-live region — Correct. The aria-live region announces dynamic content changes to the screen reader.

All lessons in Expert

1 Advanced accessibility

  1. WCAG principles
  2. Keyboard navigation
  3. Live regions
  4. Dialog and modal
  5. Heading outline
  6. Summary - Accessible widget

2 Advanced ARIA patterns

  1. ARIA roles
  2. States and properties
  3. Grid and tree
  4. Tabs and accordion
  5. Menu and menubar
  6. Summary - Accessible tabpanel

3 Project: High-performance page

  1. Project: High-performance page
  2. Critical resource order
  3. Image optimization
  4. Template and noscript
  5. Project final - Performance page

4 Internationalization

  1. Lang and dir
  2. Hreflang strategy
  3. Bidi and bdo
  4. RTL-aware markup
  5. Multilingual SEO
  6. Summary - Multilingual page

5 Project: Secure page

  1. Project: Secure form page
  2. Rel noopener
  3. CSP meta
  4. Referrer policy
  5. Project final - Secure page

6 Advanced web components

  1. Custom element registry
  2. Slot and shadow boundary
  3. Declarative shadow DOM
  4. Form-associated custom element
  5. AOM and accessibility tree
  6. Summary - Component library skeleton

7 Expert final

  1. Challenge - Accessible dialog
  2. Challenge - ARIA tabpanel
  3. Challenge - Multilingual RTL
  4. Challenge - Security package
  5. Challenge - Expert capstone