Shifting focus to input added by button click

Question

I have a button, "Add Thing" under a list of form inputs. When you click the button, it adds another input above the button, at the bottom of the list.

When using a screen reader, it's not immediately obvious that the input has been added unless you navigate backwards using SHIFT + TAB or screen reader controls.

I'm conflicted over whether I should shift focus to the input on button click (using JS) - that would make it more obvious for screen reader users however it could be annoying if you wanted to click "Add thing" multiple times to add multiple inputs at once.

I can't find anything that would cover this in the WCAG guidelines, or elsewhere for that matter.

Can any accessibility experts out there advise? Should I move focus to the added input on button click?

score 2 · Accepted Answer · answered Feb 05 '21 at 14:19

aria-live is your friend here.

Simply add a visually hidden div to the page with the aria-live="polite" attribute.

Then when you add a new row change the text to "new row [rowNumber] added to bottom of the previous table" or similar.

The reason we need to insert the rowNumber is because aria-live only announces if the text inside it changes. It also has the added minor benefit that it lets someone using a screen reader who wants to add 10 rows know what row number they are on so that they can keep track without having to keep going back to the table.

Obviously if this isn't a table then make sure there is some way of identifying the number of "rows" added such as using an ordered or unordered list.

var btn = document.querySelector("button");
var announcer = document.querySelector("div");


btn.addEventListener("click", addRow);

var rowNumber = 1;

function addRow(){
    rowNumber++;
    announcer.innerHTML = "new row " + rowNumber + " added to bottom of previous table";
}

.visually-hidden { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}

<button class="add-new-row">Add Row</button>
<div class="visually-hidden" aria-live="polite"></div>

Thanks for the answer! Using a live region did cross my mind. Could you explain why you prefer this over shifting focus? Less jarring perhaps? Thanks again. — Jimothey, Feb 05 '21 at 15:35
For the exact reason you stated, if I want to add 10 items it is better to leave focus where it is. To be fair i should add a caveat, if you are expecting people to fill things out as they go (for example their work history details perhaps as part of a CV) then it might be better to change focus to the newly added item. I was just showing you a way you can do this without shifting focus for if you are likely to add multiple rows. If you want to put some HTML in your question so I can get a feel for what you are building I can be more specific, the above is general guidance. — GrahamTheDev, Feb 05 '21 at 15:47

Shifting focus to input added by button click

1 Answers1