6

I am working on a site where we are designing with an emphasis on accessibility. One of these groups we have in mind is people with autism.

We have some forms with radio buttons. Some of the answers will need clarification or more details, depending on the answer. An example:

1) Do you have any hobbies? [Radio button: Yes] [Radio button: No]
2) Do you like dragons? [Radio button: Yes] [Radio button: No]

If you answer yes to 1), we want to ask what hobbies by inserting a textbox:

1) Do you have any hobbies? [Radio button selected: Yes] [Radio button: No]
1a) What hobbies do you have? [Textbox]
2) Do you like dragons? [Radio button: Yes] [Radio button: No]

Obviously, we only want to show 1a) if the answer to 1) is "Yes". What is the best way to change it from being hidden to showing on the page, without it being too stimulating? Just to make it clear, not only would there be new information on the page, but the content on the rest of the page would be pushed down.

THE QUESTION: Do we just change the CSS for Ia) from display:none; to display:block;, pushing the rest of the page down instantly, or would we be better "sliding" it onto the page, using animation? (This would be done slowly, to avoid being too stimulating).

Answers would be grateful appreciated, and if you had a source for them that would be even better (but I am interested in anecdotal evidence as well). Many thanks!

Improve this question
11
  • 8
    Could you reveal each question separately instead of showing the whole form up-front? Then you wouldn't have to worry about showing/hiding content, plus it'd keep the focus on the current question with less distractions around the screen. That has negatives in that it's unclear how long the form is going to be though as you can't see it all in one go, so that needs considering.
    – JonW ♦
    Jun 6, 2014 at 11:21
  • Cheers for the suggestion, Jon, but splitting the form to one answer per page would impact the experience for everyone else. It would also add a lot of extra clicks to the process, as well as time spent waiting for the new page to load. I also don't want to show the textbox from the start, just disabled, because screen-readers would still read out the label. I'm just trying to minimise any impact adding the question to the page layout would cause. Also, thank you for the extra tags edit. :)
    – Jezcentral
    Jun 6, 2014 at 11:27
  • You can display one question at a time without any load time in between if you preload as many questions as possible, load other asynchronously and use client side JavaScript controllers e.g. AngularJS to swap the displayed question. Also, you may be able to reduce the extra clicks via gestures.
    – Danny Varod
    Jun 6, 2014 at 12:10
  • Yeah, I don't mean one question per-page, but just displaying one question at a time on the same page, bringing the next one in with JScript or something like that.
    – JonW ♦
    Jun 6, 2014 at 12:51
  • Danny, I'm not sure many would recommend AngularJS for accessibility! :) The question is really about what is better for a person who has difficulty processing information, an animated div sliding slowly into visibility, or a div suddenly blinking into view?
    – Jezcentral
    Jun 6, 2014 at 12:52

1 Answer 1

Reset to default
3

Why don't you try visibility:hidden <-> visibility:visible instead of display:none <-> display:block . That way there will be no scrolling of remaining questions. There will be empty space with the No option but with some styling it (probably) won't look too awkward. It may even serve as a hint that there is something more to the question than the radio buttons:

No

versus:

Yes

You can animate this transition as well.

Improve this answer
2
  • Ooh, interesting! That's something I hadn't thought of. Thanks, NonNumeric. That makes a lot of sense. Do you have any insight into how "fading-in" text versus "blinking-in" text is processed by people who have problems processing visual data?
    – Jezcentral
    Jun 10, 2014 at 7:41
  • 1
    I don't know. What I have observed (but this is only anecdotal evidence) is that even people with good visual perception sometimes fail to recognize single-frame "blinking-in" changes on screen. Animating a transition (for a second or less) catches more attention in a way that I feel might be better in your case. This is still a weak recommendation - I am not sure myself.
    – NonNumeric
    Jun 10, 2014 at 11:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.