Focusable content should have tabindex='-1' or be removed from the DOM error

Question

Hi I'm receiving an error when running a local scan on a web page I've got using Shopify. Im just practicing at the moment but I don't know how to correctly use tabindex="-1"

      {%- if section.blocks.size > 0 -%}
  <div id="SlideshowWrapper-{{ section.id }}" class="slideshow-wrapper" role="region" aria-hidden="true" tabindex="-1">
    <div tabindex="-1">Tabbable due to tabindex.</div>
    <div class="slideshow slideshow--{{ section.settings.slideshow_height }} {% if display_controls %} slideshow--display-controls{% endif %}"
         id="Slideshow-{{ section.id }}" aria-hidden="true" 
         data-autorotate="{{ section.settings.autorotate }}"
         data-speed="{{ section.settings.autorotate_speed | times: 1000 }}"
         data-adapt-height="{%- if section.settings.slideshow_height == 'adapt' -%}true{%- else -%}false{%- endif -%}"
         data-slide-nav-a11y="{{ 'sections.slideshow.load_slide' | t: slide_number: '[slide_number]' }}"
         {%- if section.settings.slideshow_height == 'adapt' -%}data-min-aspect-ratio="{{ min_aspect_ratio }}"
         style="height: {{ wrapper_height }}vw"{%- endif -%}  aria-labelledby=”Slideshow″ >

The error Im getting is:

Focusable content should have tabindex='-1' or be removed from the DOM

If you look at line 2 this is where my code im working on is. I dont know if this is the correct place for it but I seem to have narrowed the element down to here. Could someone explain how I can correctly use tabindex in this situation?

I'm not sure your question is a duplicate, exactly, but I think this post might be helpful for you: https://stackoverflow.com/a/32912224/3084820 — Matt Morgan, Nov 10 '22 at 21:18
Simple side question: why aria-hidden=true ? Do you have a good reason to hide that content from screen readers ? If it's legitimate to do so, then nothing under aria-hidden=true should ever be focused even programmatically. One of aria-hidden=true or tabindex must be removed. — QuentinC, Nov 11 '22 at 09:50
In asnwer to the side question it's a slideshow but thats handy to know am I right in thinking you cang have tabindex and aria hidden true together then? — Peter Kirby, Nov 11 '22 at 13:04

score 1 · Accepted Answer · answered Nov 15 '22 at 09:01

To give you a complete answer I think more context is needed (I don't add this as a comment as I can't, not 50 reputation yet). It is not clear what functionality you want for this component. It seems like a slideshow/carrousel component but the ARIA attributes that you are using are not accurate.

You are using aria-hidden="true" both in the .slideshow-wrapper and .slideshow div's and at the same time you are using other ARIA attributes such as role="region" and aria-labelledby. The thing is that aria-hidden is completely hiding these elements to screen readers, so non-visual users are not going to be able to see this element. Is that what you want? Completely hidding information for non-visual users, if that information is not just "decorative" won't meet accessibility standards as WCAG 2.1
tabindex="-1" removes an element from the normal focus order in the DOM but makes it possible to give it focus using JavaScript's .focus() method. The thing here is that a div element is not focusable by default so tabindex="-1" is not necessary in this context. It should only be used if you have a good reason to do so.

So, tabindex="-1" and aria-hidden do not make sense in this context (without seeing further scripting or behaviour). Here's the ARIA example for a carousel or slide show, it may be useful.

Focusable content should have tabindex='-1' or be removed from the DOM error

1 Answers1