[Athen] Form Labels

[Sean Keegan]

I encountered this type of question format a lot when dealing with
assessment tests. Part of the challenge is that you want to offer the
ability to navigate the text content, but at the same time ensure that the
input element is also useable, makes sense given the context of the
surrounding text, and does not unduly influence the test participant into
how to answer the question.

Keeping it simple, one way to handle this would be to use aria-label
attributes on the input fields. The aria-label for the <input> field could
be, aria-label="Enter response" or "Enter answer". For the second example,
the aria-label for the <select> could be aria-label="Select the value".

Another option I have seen would be to use aria-labelledby and concatenate
the question as part of the form field's label. In other words, you have
the text preceding the form field wrapped in a <span> with an id attribute.
You then have the text after the question wrapped in a <span> with a
different id attribute. There is then a third <span> (visually hidden) with
an third id attribute and the text content set as "blank".

Using aria-labelledby on the input element to concatenate the values, this
would be: aria-labelledby="span1 span3 span2". The result would be spoken
as, "The blank has a greater average weight."

Separate from changing the UI, I think there are a few ways to make this
accessible. What would be important, though, would be to see all the
different question types in the system and come up with consistent design
patterns so that the experience is consistent as the participant moves from
question to question.

Take care,
Sean
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mailman12.u.washington.edu/pipermail/athen-list/attachments/20190319/225c18df/attachment.html>