Proper ARIA handling of breadcrumb navigation

Question

What can be done to improve the accessibility of a breadcrumb menu similar to:

Answer 1

I would avoid the use of aria-level and use a

element instead. It is best to avoid using aria attributes wherever a native alternative exists. Using aria adds an extra layer of complexity. Simple HTML is far better and already has semantics that are surfaced to AT. This is the first rule of ARIA.

Borrowing from the WAI-ARIA-Practices document, breadcrumbs would look like something like this:

    

      

        
          WAI-ARIA Authoring Practices 1.1
        
      
      

        
          Design Patterns
        
      
      

        
          Breadcrumb Pattern
        
      
      

        
          Breadcrumb Example
        
      
    

Some notes:

1. Wrapping the breadcrumbs in a
   element lets screen reader users quickly find and jump to the breadcrumbs.
2. Using
   element surfaces an order to screen reader users.
   1. The
      should be a child of the
      . Some implementations apply role="nav" to the
      itself. This is wrong and will override the default
      semantics.
      1. aria-current informs screen reader users that this is the current page. If the last breadcrumb for the current page is not a link, the aria-current attribute is optional.