WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: radio buttons, vertical vs horizontal

for

From: John Foliot
Date: Oct 4, 2012 2:45PM

Hi all,

I sometimes find that "visuals" help make the case. Have you tried coding up
examples of both (vertical vs. horizontal), then render in a browser, set
magnification to 200X and then take a screen capture? It sounds almost too
simplistic, but sometimes the ability to visualize the problem helps bring
it home for those who don't eat, sleep and breathe accessible web issues.

Just my $0.05 Canadian (Canada is phasing out pennies - yay!)

JF



> -----Original Message-----
> From: <EMAIL REMOVED> [mailto:webaim-forum-
> <EMAIL REMOVED> ] On Behalf Of Elle
> Sent: Thursday, October 04, 2012 12:52 PM
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] radio buttons, vertical vs horizontal
>
> Sure!
>
> From what I understand and from witnessing it first hand in usability
> testing, low-vision users typically orient themselves to the top and
> left
> side of a web page. That's home base, as it were. Since it's customary
> to
> see radio buttons stacked vertically on forms, that's an expected
> layout.
> If you, as a low-vision user, have your screen magnified several times
> over
> and you're filling out a form, you would benefit from having vertically
> stacked radio buttons. If there are radio buttons are positioned
> horizontally, you might miss one that's far off on the right side of
> the
> page.
>
> A couple of additional thoughts: Try to consider proximity when
> building
> your forms, grouping all relevant information nearby, like placeholder
> text, error messaging, disclaimer information. This also benefits
> mobile
> users, too, for similar reasons, where screen real estate is very
> small.
>
> Making websites more accessible for low-vision users has been a real
> focus
> for our teams this year, so I'm really interested in the topic.
>
>
> Hope that helps,
> Elle
>
>
>
>
> On Thu, Oct 4, 2012 at 3:14 PM, Trafford, Logan
> < <EMAIL REMOVED> >wrote:
>
> > Thanks Elle. Can you elaborate as to why.
> >
> > -----Original Message-----
> > From: <EMAIL REMOVED> [mailto:
> > <EMAIL REMOVED> ] On Behalf Of Elle
> > Sent: October 4, 2012 3:12 PM
> > To: WebAIM Discussion List
> > Subject: Re: [WebAIM] radio buttons, vertical vs horizontal
> >
> > Additionally, low-vision users benefit from having vertically stacked
> radio
> > buttons.
> >
> >
> >
> > Thanks,
> > Elle
> >
> >
> >
> > On Thu, Oct 4, 2012 at 3:05 PM, Trafford, Logan
> < <EMAIL REMOVED>
> > >wrote:
> >
> > > Thanks. That's essentially the argument I'm presenting but getting
> some
> > > resistance. The Neilson's stats may be exactly what I'm looking
> for.
> > >
> > > Logan
> > >
> > > -----Original Message-----
> > > From: <EMAIL REMOVED> [mailto:
> > > <EMAIL REMOVED> ] On Behalf Of Chagnon | PubCom
> > > Sent: October 4, 2012 2:41 PM
> > > To: 'WebAIM Discussion List'
> > > Subject: Re: [WebAIM] radio buttons, vertical vs horizontal
> > >
> > > As a graphic and interface designer, I recommend stacked vertically
> radio
> > > buttons and checkboxes.
> > > Sighted humans are conditioned to scan top-to-bottom in a document
> > (whether
> > > printed or on screen).
> > > If you place a series of radio buttons or checkboxes horizontally,
> the
> > user
> > > could skip past some of the options to the right, especially if
> there is
> > a
> > > wide gap of white space between them.
> > > I just had this happen to me in an online form I filled out
> yesterday.
> > > Never
> > > saw the other checkboxes on the far right of the screen because I
> didn't
> > > scroll left/right in the browser.
> > >
> > > Jakob Neilsen's group has some statistics to back up the top-to-
> bottom
> > eye
> > > movements if you need some official research on this.
> > >
> > > -Bevi Chagnon
> > >
> > > - PubCom.com - Trainers, Consultants, Designers, and Developers.
> > > - Print, Web, Acrobat, XML, eBooks, and U.S. Federal Section 508
> > > Accessibility.
> > > - It's our 31st year!
> > >
> > > -----Original Message-----
> > > Have spent the last hour trying to find a definitive answer as to
> whether
> > > or
> > > not radio buttons should be stacked vertically for to enhance both
> > > usability
> > > and/or accessibility. It seems to be somewhat debatable. Looking
> for
> > > input.
> > >
> > > > > > > > > > > >
> > >
> > > This e-mail originates from the City of Ottawa e-mail system. Any
> > > distribution, use or copying of this e-mail or the information it
> > > contains by other than the intended recipient(s) is unauthorized.
> > > If you are not the intended recipient, please notify me at the
> > > telephone number shown above or by return e-mail and delete
> > > this communication and any copy immediately. Thank you.
> > >
> > > Le présent courriel a été expédié par le système de courriels de
> > > la Ville d'Ottawa. Toute distribution, utilisation ou
> > > reproduction du courriel ou des renseignements qui s'y trouvent
> > > par une personne autre que son destinataire prévu est interdite.
> > > Si vous avez reçu le message par erreur, veuillez m'en aviser par
> > > téléphone (au numéro précité) ou par courriel, puis supprimer
> > > sans délai la version originale de la communication ainsi que
> > > toutes ses copies. Je vous remercie de votre collaboration.
> > >
> > >
> > > > > > > > > > > >
> >
> >
> >
> > --
> > If you want to build a ship, don't drum up the people to gather wood,
> > divide the work, and give orders. Instead, teach them to yearn for
> the vast
> > and endless sea.
> > - Antoine De Saint-Exupéry, The Little Prince
> > > > > > > >
> >
> > This e-mail originates from the City of Ottawa e-mail system. Any
> > distribution, use or copying of this e-mail or the information it
> > contains by other than the intended recipient(s) is unauthorized.
> > If you are not the intended recipient, please notify me at the
> > telephone number shown above or by return e-mail and delete
> > this communication and any copy immediately. Thank you.
> >
> > Le présent courriel a été expédié par le système de courriels de
> > la Ville d'Ottawa. Toute distribution, utilisation ou
> > reproduction du courriel ou des renseignements qui s'y trouvent
> > par une personne autre que son destinataire prévu est interdite.
> > Si vous avez reçu le message par erreur, veuillez m'en aviser par
> > téléphone (au numéro précité) ou par courriel, puis supprimer
> > sans délai la version originale de la communication ainsi que
> > toutes ses copies. Je vous remercie de votre collaboration.
> >
> >
> > > > > > > >
>
>
>
> --
> If you want to build a ship, don't drum up the people to gather wood,
> divide the work, and give orders. Instead, teach them to yearn for the
> vast
> and endless sea.
> - Antoine De Saint-Exupéry, The Little Prince
> > >