WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Creating a workaround for a online matching question

for

From: Isabel Holdsworth
Date: Nov 8, 2018 5:38AM

Hi Itzel,

I studied with the Open University here in the UK, and the way they
present their matching exercises to blind students is very similar to
what you're proposing. It didn't work for me, as I'm probably dyslexic
and couldn't think through the pairing exercise at all.

I was asked a few weeks ago to make an online matching exercise
accessible, and I came up with this approach, which works reasonably
well:

Create two listboxes, each containing a set of matchable items. We
positioned one to the left and one to the right of the screen.

Ensure that each listbox only has one tab stop, and that the contained
items are navigable using the arrow keys.

When Space or Enter is pressed while a list item has focus, pop up a
menu containing all of the matching and match removal options.

When an option is chosen from the menu by pressing Space or Enter,
perform the requested action by drawing or removing a line between two
matched items.

I also tweak the aria-label on each item when a match is made or
removed: "Pup (matched with Seal, dog)", "Seal (matched with pup)".

I think it works well. The experience using a keyboard is totally
different from the way the matching is carried out using a mouse, but
the important thing is it's achievable and doesn't require a special
UI.

This is only a very quick and basic description of my prototype, but I
hope it helps.

Cheers, Isabel

On 07/11/2018, glen walker < <EMAIL REMOVED> > wrote:
> A few side-related questions:
>
> If the existing matching activity is online, is there a reason you are not
> creating an accessible online version too? While Word and PDF can be made
> accessible, I find making an accessible html version much easier.
>
> Is the word/pdf version specifically for the screen reader user or will
> other users have access to it? That is, do you have a mandate to create a
> word/pdf version for all users and you just want to make sure it will be
> accessible to everyone?
>
> If you use the table approach, just make sure the table column headers are
> marked properly. In word, go to the table properties, then the "row" tab,
> and check the "repeat as row header at the top of each page" checkbox. (Do
> that for the first row of your table). If you save the word doc as pdf, it
> should tag the column headers properly. I'm not aware of a way to create
> row headers in word.
>
> However, I'm not sure a table is necessarily the right object for screen
> reader users. There's no correlation between the two columns, on purpose,
> because the user has to match the columns, so having a table doesn't really
> give you any advantage. Alternatively, just two ordered lists would be ok
> too. One list could be A-D and the other could be 1-4.
>
> If you create an accessible online version, then each A-D could be a
> <label> element and each <select>/<option> could have all the 1-4 answers.
> Then the user just answers each question with one of the four possible
> answers.
>
> Glen
> > > > >