0

I inherited a vuejs project. People using screen readers as assistive devices complain that their screen readers are unable to read the options in drop down menus that were made from vue-search-select. Here is how you can reproduce the issue:

  1. Install a screen reader such as NVDA.
  2. Turn on NVDA screen reader.
  3. Go to https://vue-search-select.netlify.app/#/model
  4. Tab to a search text field.
  5. Confirm drop down of results appear.
  6. Press the down arrow key to focus on any of the search result items.
  7. Confirm the NVDA says the word "Blank" instead of actually reading out the contents of the selected item.

Here is a 10 second clip to that demonstrates steps 3 of 7.

https://www.youtube.com/watch?v=Nxx1k1oKETI

How do you modify vue-search-select such that in step 7, the screen reader will read out the contents of the selected item instead of reading out the word "Blank"?

Right now, as a temporary solution, I'm trying to write a setTimeout function that will automatically add the appropriate meta data to force screen readers to read out the content. But I'm not sure how successful this approach will be. I prefer an approach that is idiomatic to vue-search-select.

I tried adding a customAttr like so:

<model-select :custom-attr="ariaAttrs" />
function ariaAttrs() {
   return function() { return '" aria-label="hello" tabindex="0'; }
}

Although the attributes do appear in my developer console's inspector, my screen reader still does not read out the options.

John
  • 32,403
  • 80
  • 251
  • 422
  • Vue expects the attributes to be put on the element in the template – Derek Pollard Jun 02 '21 at 17:01
  • @DerekPollard - does `function ariaAttrs() {return function() { return '" aria-label="hello" tabindex="0'; }}` satisfy your definition of 'attributes to be put on the element in the template'? If not, can you clarify? Thank you! – John Jun 02 '21 at 17:03
  • From what I can tell in the code, when you press the up and down arrow keys, the result items are NOT actually being `.focus()` by the the browser. Instead, the `vue-search-select` simply adds or removes the css class `selected` from the corresponding`
    ` item. Because the `div.selected` isn't actually being in `.focus()`, the screen reader naturally speaks the word "blank" to indicate you haven't actually focused anything.
     – John Jun 03 '21 at 12:41

1 Answers1

1

It seems custom-attr will not help you as it does not allow you to add any attr you want - anything the function returns is just placed as a value of data-vss-custom-attr attribute

Any decent Vue library with similar functionality would offer a slot to customize rendering of menu items, but this does not. Plus it doesn't seem to be maintained for a long time so maybe it is a time to look for an alternative....

Michal Levý
  • 33,064
  • 4
  • 68
  • 86