WCAG heading context example using grouping label

Link Context Example

Source Code

  <h3 id="id1">
    Royal Palm Hotel
  </h3>
  <ul class="horizontal" aria-labelledby="id1">
    <li>
      <a href="royal_palm_hotel_more_info.html">
        More Info
      </a>
    </li>
    <li>
      <a href="royal_palm_hotel_map.html">
        Map
      </a>
    </li>
    <li>
      <a href="royal_palm_hotel_photos.html">
        Photos
      </a>
    </li>
    <li>
      <a href="hroyal_palm_hotel_directions.html">
        Directions
      </a>
    </li>
    <li>
      <a href="royal_palm_hotel_reviews.html">
        Guest reviews
      </a>
    </li>
    <li>
      <a href="royal_palm_hotel_book.html">
        Book now
      </a>
    </li>
  </ul>
  <h3 id="id2">
    Hotel Three Rivers
  </h3>
  <ul class="horizontal" aria-labelledby="id2">
    <li>
      <a href="hotel_three_rivers_more_info.html">
        More Info
      </a>
    </li>
    <li>
      <a href="hotel_three_rivers_map.html">
        Map
      </a>
    </li>
    <li>
      <a href="hotel_three_rivers_photos.html">
        Photos
      </a>
    </li>
    <li>
      <a href="hotel_three_rivers_directions.html">
        Directions
      </a>
    </li>
    <li>
      <a href="hotel_three_rivers_reviews.html">
        Guest reviews
      </a>
    </li>
    <li>
      <a href="hotel_three_rivers_book.html">
        Book now
      </a>
    </li>
  </ul>