Screen reader ignore focus event

2
votes

Got an interesting issue. I'm working on accessibility for a large nationwide client. The site is a series of form questions.

Everything is working with screen readers and keyboard accessibility except the client wants to focus on the first input on load while also reading from the top of the site to the bottom.

I've got the focus on load down, however the screen reader (rightfully) starts to read from the input down not from the top down.

I do not have the ability to change the specs. In other words, this has to work as expected.

  • site loaded
  • cursor on first input
  • screen reader reads from top to bottom from the start of the page.

Any ideas on how I get the screen reader to ignore the focus event and read from the top to the bottom?

2
accessibilityscreen-readers

2 Answers

4
votes

I don't believe that what your're asking is possible. The behavior that you're experiencing is by design and correct. Attempting to force a different behavior would likely degrade accessibility rather than improve it.

Once a screen reader focuses or enters an input element (depending on the specific behavior), it exits the standard "browse mode" and enters "application mode". This is also sometimes referred to as "forms mode" or "focus mode".

While in application mode, users will only be able to access form content, such as input, select, textarea and button elements.

The normal page content, such as paragraphs, headings, tables, etc. will be ignored wile the screen reader is in application mode.

Although not technically a violation of WCAG, setting focus on page load is generally frowned upon in the accessibility community for the reason that it's potentially disorienting to non-sighted users.

References:

https://www.accessibility-developer-guide.com/knowledge/desktop-screen-readers/browse-focus-modes/

https://tink.uk/understanding-screen-reader-interaction-modes/

0
votes

What Josh says is correct, there is no (correct) way to make the screen reader behave differently here.

However what you can do as a workaround is to let users know before they get to the page (assuming it is part of a natural flow through the website) the behaviours that is about to happen.

You could do this via some visually hidden text in the link that activates the page.

e.g.

<a href="pageURL">
    Anchor Text 
    <span class="visually-hidden">
        The first input field will be focused automatically on page load.
    </span>        
</a>

Alternatively if this page is to be loaded directly you could add the visually hidden text as part of the input label.

e.g. 

<label for="focusedinput">
    First Field Name 
    <span class="visually-hidden">Please note we have focused this form field automatically, there is content above this input field.</span>
</label>
<input id="focusedinput />

CSS

.visually-hidden { 
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap; /* added line */
}