How do I make an "add to list" pattern accessible for assistive technology users?

Question

Given the following code:

const form = document.getElementById("items-form");
const input = form.querySelector("input");
const list = document.getElementById("items-list");

function addItem(e) {
  e.preventDefault();

  const li = document.createElement("li");
  const id = Date.now(); // "random" id for the sake of demo
  li.id = id;
  li.innerHTML = `
<button onclick="document.getElementById(${li.id}).remove()">Remove</button>
<span>${input.value}</span>
`;
  list.appendChild(li);
}

form.onsubmit = addItem;

span {
  margin-left: 4px;
}

<form id="items-form">
  <input />
  <button>Add item</button>
</form>

<ul id="items-list"></ul>

Currently, if an item is added to the list, what will screen reader users experience? Will they know that an item has been added, where it is, and that there's an option to remove it? If not, how can I modify this to make it accessible to people with assistive technology?

Answer 1

The label of your button "add item" seem to be clear, so screen readers will certainly know what it does.

As a bonus, you may pop up a confirmation message telling "XYZ has been added to the list", using aria-live=polite or role=alert. By using one of these, the message will automatically be read as soon as it appears on screen.

This will confirm to the user that it worked, and it isn't only useful to screen reader users. Other users will benefit from it as well:

• For partially sighted users, in case they don't see immediately where the item has been added exactly
• For users with cognitive impairement, who may be afraid or wondering whether their actions are really working, or may not understand immediately that it has been added if only the list is refreshed alone

In fact, it's rarely bad to have a confirmation that everything is working smoothly. In regard to WCAG, it's completely optional, though.

---

For your second question about removal, as a first glance, it looks in order. The remove button is just after the target item, so it should be fine. Screen reader users reading through the list with arrow keys will rather quickly understand that the button with a concise but clear "remove" label is going to remove the preceding item.

However, it would improve accessibility, especially for screen reader users who go through focusable elements using tab, if you change the label of the button to clearly indicate which item it's going to remove, directly inside the button. So, instead of "remove", it's better to precise "remove XYZ".

Otherwise, by using tab, without reading the text nearby, a screen reader user will only see a serie of "remove" buttons, but won't know which is going to remove what.

According to WebAim surveys, experienced screen reader users use more arrow keys and heading navigation rather than just tab. So the precision isn't strictly necessary. But it will help beginners, who tend more to use tab as a first navigation method.

Again, adding that precision will not only help screen reader users. Partially sighted users, as well as those with dyslexia or cognitive impairement, and at the end all users afterall, will benefit from a clearer indication.

Other than taking more space on screen, there is probably no other harm. If space is really a big problem, you can use the visually hidden technique to make the precision readable only by screen reader users, and double that with a tooltip on hover.

<button>Remove<span class="sr_only">&nbsp;XYZ</span></button>