0

We have UI widget that is a composite of input field and an icon. This widget is basically meant to be used as a form field to let users select a value from a huge list of values. Users can either type a value in the input field or click on the icon to launch a dialog with all the possible value list. Selecting a value in this dialog will set the value in the input field. Users can also type a partial value in the input field and tab-out in which case, the widget tries to autocomplete the value entered and if it doesn't succeed, it will launch the same dialog as user clicking on the icon.

How would I make such a widget accessible through screen readers? There doesn't seem any role or any other aria attribute which seems to be tailor made for my usecase. At the minimum, I would expect the users using screen readers to know that this widget has an helper icon from where a value can be selected.

Arjun
  • 1,922
  • 1
  • 13
  • 21

2 Answers2

2

I am reading this as an order database/form, where call takers can just select type in the customer number or fill out the 10+ fields. And if the caller doesn't know their ID or whatever, the call taker can do a search.

I recommend removing the autocomplete on tab functionality, because that wouldn't too fun for some. I'd code it like:

<p id="instr">Put instructions here</p>
<label for="user">Look Up User</label> <input id="user" aria-describedby="instr">
<input type="button" value="Populate Form">
<input type="button" value="Search">

I made an answer about modals quite some time ago, that should get you started. The listing in the dialog may not be the most fun to wade through. I'd recommend either updating this question or making a new one for that part.

Community
  • 1
  • 1
Ryan B
  • 3,364
  • 21
  • 35
-2

Interesting and challenging.

  1. To start with make sure icon has an alt text which explains its role - this is assuming it is an image. If not use title attribute to explain its role.
  2. Add a title attribute to the input box and succinctly mention that user can also chose values using icon or partially type its value to autocomplete it.
  3. If your form design allows instructions to be placed next to the form fields place a descriptive text right next to the widget.

These recommendations may not make it entirely accessible but will surelytake you close to where you want to be. I'm hoping that this widget will be used in more than one place in your project allowing user to get accustomed to it.

Last one to consider is to see if any aria role fits your widget controls in any way.

508Ninja
  • 95
  • 2
  • The input box should have a label, not a title. – Ryan B Jul 03 '14 at 18:52
  • Not sure why this was marked down. I'm assuming Label is already added. The content of instruction can not be added to label hence the Title approach. – 508Ninja Jul 03 '14 at 20:32
  • First the `title` is not accessed by all AT. Second, people who don't use the mouse or on a mobile device cannot gain access to `title`, and you're passing important information via it. Third, the `title` should be treated like an `alt`, putting full sentences in is not really a best practice. Fourth, instructions should always be on the screen, using `title` does the exact opposite. – Ryan B Jul 07 '14 at 13:15