Screen reader skipping content

Question

I am using a screen reader (Chrome Vox) to test my site's accessibility. The problem is that after reading the menu, the reader skips all the content and goes direct to the footer.

What's the main cause for this behavior?

Answer 1

Before I answer the question, I urge you to look at a proper screen reader for testing. ChromeVox is good for high-level testing, but will not give you the same experience as VoiceOver, JAWS, NVDA, Narrator, or Orca.

Now to your question. You have instances of tabindex with a positive value.

When tabbing through a page, which applies to screen reader users and keyboard users, anything with a positive tabindex value will be given focus before the other focusable content on the page.

Here are four places it occurs:

<input name="fname" class="olark-form-input" id="olark-form-input-fname" placeholder="" tabindex="1" autocomplete="on" required="" data-reactid=".0.3.1.1.0.0:$fname.0" type="text">

<input name="email" class="olark-form-input" id="olark-form-input-email" placeholder="" tabindex="2" autocomplete="on" required="" data-reactid=".0.3.1.1.0.0:$email.0" type="email">

<input name="phone" class="olark-form-input" id="olark-form-input-phone" placeholder="" tabindex="3" autocomplete="on" required="" data-reactid=".0.3.1.1.0.0:$phone.0" type="tel">

<textarea class="olark-form-message-input" tabindex="4" name="body" id="olark-form-input-body" placeholder="Escreva sua mensagem." title="Escreva sua mensagem." required="" data-reactid=".0.3.1.1.0.0:$body.0.1" style="height: 26px !important;"></textarea>

The simplest solution is to remove the tabindex value altogether as it adds no value and only complicates the page for some users.

Here are some tips on tabindex best practices (with more detail in this post):

tabindex="-1"

Setting tabindex="-1" allows you to set an element’s focus with script, but does not put it in the tab order of the page. This is handy when you need to move focus to something you have updated via script or outside of user action.

tabindex="0"

Setting tabindex="0" will take an element and make it focusable. It doesn’t set the element’s position in the tab order, it just allows a user to focus the element in the order determined by its location with the DOM.

tabindex="1" (or any value > 0)

Do not set a tabindex="1" or any value greater than zero (or any positive value).