Tips & Tricks Thursday 08: Logical Focus Order Code Improvements

Maintain Logical Focus Order

• Logical Sequence: Ensure that the focus follows logical progression, such as left to right and top to bottom and the focus order follows a logical sequence that matches the visual layout and reading order. Use semantic HTML and avoid setting a custom tabindex unless absolutely necessary.
• Example:

<nav>
  <a href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#services">Services</a>
  <a href="#contact">Contact</a>
</nav>

<main>
  <h1 id="home">Welcome to Our Website</h1>
  <section id="about">...</section>
  <section id="services">...</section>
  <section id="contact">...</section>
</main>

The sample code for maintaining logical focus order is a solid start in terms of structure, but there are a few areas where improvements can be made, particularly to ensure accessibility and focus management in Single Page Applications (SPAs).

Key Areas for Improvement:

1. Logical Focus Navigation (Heading Levels)

• While you’ve used an h1 for the “Home” section, it’s important to maintain correct heading levels for the rest of the sections. Ensure each section has an appropriate heading (h2, h3, etc.) for its content to create a clear, hierarchical structure for screen readers and assistive technologies.
• Example:

<main>
  <h1 id="home">Welcome to Our Website</h1>
  <section id="about">
    <h2>About Us</h2>
    <!-- Content -->
  </section>
  <section id="services">
    <h2>Services</h2>
    <!-- Content -->
  </section>
  <section id="contact">
    <h2>Contact</h2>
    <!-- Content -->
  </section>
</main>

2. Focus Management for Dynamic Sections (SPA Behavior)

• If these sections are dynamically shown/hidden (common in SPAs), focus should be programmatically managed when navigating between sections. Right now, clicking a link simply jumps to the corresponding section, but it doesn’t ensure that focus moves to the newly visible content.
• Adding JavaScript to move focus to the correct section or heading ensures keyboard users can keep track of where they are on the page.
• Example:

<nav>
  <a href="#home" onclick="focusSection('home')">Home</a>
  <a href="#about" onclick="focusSection('about')">About</a>
  <a href="#services" onclick="focusSection('services')">Services</a>
  <a href="#contact" onclick="focusSection('contact')">Contact</a>
</nav>
<main>
  <h1 id="home">Welcome to Our Website</h1>
  <section id="about">
    <h2>About Us</h2>
    <!-- Content -->
  </section>
  <section id="services">
    <h2>Services</h2>
    <!-- Content -->
  </section>
  <section id="contact">
    <h2>Contact</h2>
    <!-- Content -->
  </section>
</main>

<script>
  function focusSection(sectionId) {
    // Move focus to the corresponding section or heading
    document.getElementById(sectionId).focus();
  }
</script>

3. tabindex="-1" for Programmatic Focus

• Since you’re programmatically moving focus to the sections or headings, you may need to make these elements focusable using tabindex=”-1″. This ensures that sections (or headings) can receive focus, but they won’t appear in the natural tab order for keyboard users.
• Example:

<h1 id="home" tabindex="-1">Welcome to Our Website</h1>
<section id="about" tabindex="-1">
  <h2>About Us</h2>
  <!-- Content -->
</section>
<section id="services" tabindex="-1">
  <h2>Services</h2>
  <!-- Content -->
</section>
<section id="contact" tabindex="-1">
  <h2>Contact</h2>
  <!-- Content -->
</section>

4. Skip Link for Improved Accessibility

• To help keyboard users and screen readers navigate more effectively, consider adding a “Skip to Content” link at the top of the page. This allows users to skip the navigation and jump directly to the main content.
• Example:

<a href="#main-content" class="skip-link">Skip to Content</a>
<nav>
  <!-- Navigation links -->
</nav>
<main id="main-content">
  <!-- Main content sections -->
</main>

You can style .skip-link to be visually hidden but accessible for keyboard focus by applying styles like:

.skip-link {
  position: absolute;
  top: -40px;
  left: -40px;
  background: #000;
  color: #fff;
  padding: 8px;
}
.skip-link:focus {
  top: 0;
  left: 0;
}

5. Accessible Names for Links

• To make the links more accessible, ensure they have clear accessible names (e.g., include a title attribute or additional text). Although this isn’t always necessary in basic cases, it’s a good practice when the link text could be unclear to assistive technology.
• Example:

<a href="#home" onclick="focusSection('home')" title="Go to Home Section">Home</a>

Final Example

<a href="#main-content" class="skip-link">Skip to Content</a>
<nav>
  <a href="#home" onclick="focusSection('home')">Home</a>
  <a href="#about" onclick="focusSection('about')">About</a>
  <a href="#services" onclick="focusSection('services')">Services</a>
  <a href="#contact" onclick="focusSection('contact')">Contact</a>
</nav>
<main id="main-content">
  <h1 id="home" tabindex="-1">Welcome to Our Website</h1>
  <section id="about" tabindex="-1">
    <h2>About Us</h2>
    <!-- Content -->
  </section>
  <section id="services" tabindex="-1">
    <h2>Services</h2>
    <!-- Content -->
  </section>
  <section id="contact" tabindex="-1">
    <h2>Contact</h2>
    <!-- Content -->
  </section>
</main>

<script>
  function focusSection(sectionId) {
    // Move focus to the corresponding section or heading
    document.getElementById(sectionId).focus();
  }
</script>

Summary of Improvements

• Heading structure: Ensure logical heading levels for each section.
• Focus management: Use JavaScript to manage focus when navigating between sections.
• Programmatic focus: Use tabindex="-1" to allow non-interactive elements to receive focus.
• Skip link: Add a “Skip to Content” link to improve navigation for keyboard and screen reader users.