accessibility - 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?

question from:https://stackoverflow.com/questions/66064433/shifting-focus-to-input-added-by-button-click

Answer 1

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>