Skip to content
    SeaCode
    Learning tracksCode ArenaWorkshops & EventsInstructors
    Log inSign up
    </>HTML

    Document foundations

    • What is HTML?
    • Metadata and language
    • Attributes and character references
    • Headings, paragraphs and formatting

    Content and media

    • Links
    • Images
    • Lists
    • Tables
    • Responsive images and media

    Forms

    • Forms and inputs
    • Grouping form controls
    • Form validation and submission

    Structure and accessibility

    • Semantic HTML
    • Keyboard and screen-reader access
    • Disclosure with details
    • Project: your profile page
    HTML

    Structure and accessibility · Lesson 14 of 16

    Keyboard and screen-reader access

    Clear names, natural order and native controls.

    8 minutes2 games

    Start with native elements: button for actions and a for navigation. Keep a logical HTML order for reading and Tab navigation. A skip link lets users reach the main content without traversing every navigation link.

    HTML
    <a href="#main">Skip to content</a>
<nav aria-label="Main"><a href="#courses">Courses</a></nav>
<main id="main" tabindex="-1">
  <h1 id="courses">Courses</h1>
  <button type="button">Save lesson</button>
</main>

    Tab to navigate

    Name describes purpose

    Enter or Space as supported

    Visible focus location

    Important

    Avoid positive tabindex and do not remove focus indicators. aria-label should not replace visible text when visible text is appropriate.

    Interview question

    Why is a div with onclick not a full button replacement?

    Quick question

    Which element suits a save action?

    Exercise

    Add a skip link targeting main with id content, containing an h1.

    HTML
    Learn more from
    • W3C WAI: Page structurew3.org
    • web.dev: Focusweb.dev
    Played 0 of 2 games
    Sign in to save your progress and earn XP.
    PreviousSemantic HTMLNextDisclosure with details
    SeaCode
    Learn to code for real, online or at our branch in front of Cairo University, Giza.
    Learn
    • All courses
    • Interactive tutorials
    • Interview practice problems
    • Mock interview
    • Learning tracks
    • Code Arena
    • Workshops & Events
    • Knowledge library
    • Team projects
    Your account
    • Log in
    • Sign up
    • Learning plan
    • Certificates
    • Site map
    Contact us
    • WhatsApp
    • 010 9094 1104
    • In front of Cairo University, Giza
    © 2026 SeaCode. All rights reserved.