making quiz accessible

Discussion in 'HTML' started by mark | r, May 17, 2005.

  1. mark | r

    mark | r Guest

    www.neue.co.uk/quest.htm

    anyone got any tips on making a multipe choice quiz accessible - how do you
    make radio buttons attach to a label (becaus theres more than one of them so
    how would for= work?) also would the label tag be around the text question
    or the values of the radio buttons 1,2,3 etc?

    Mark
     
    mark | r, May 17, 2005
    #1
    1. Advertising

  2. mark | r wrote:

    > www.neue.co.uk/quest.htm
    >
    > anyone got any tips on making a multipe choice quiz accessible - how do
    > you make radio buttons attach to a label (becaus theres more than one of
    > them so how would for= work?)


    Radio groups are created by adding multiple radio inputs with the same NAME.
    The label element references an element based on its ID.

    > also would the label tag be around the text
    > question or the values of the radio buttons 1,2,3 etc?


    Its rather difficult to associate data properly with the format. I'd
    probably structure the data more along the lines:

    <h2>External Focus - Strategic Thinking</h2>
    <fieldset>
    <legend>Anticipates, identifies and evaluates current and future business
    opportunities and threats</legend>
    <div>
    <input type="radio" name="q1" id="q1a" value="a">
    <label for="q1a">Disagree strongly</label>
    </div>
    <div>
    <input type="radio" name="q1" id="q1b" value="b">
    <label for="q1b">Disagree</label>
    </div>
    etc


    --
    David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
    Home is where the ~/.bashrc is
     
    David Dorward, May 17, 2005
    #2
    1. Advertising

  3. mark | r

    mark | r Guest

    "David Dorward" <> wrote in message
    news:d6ckbu$65e$1$...
    > mark | r wrote:
    >
    > > www.neue.co.uk/quest.htm
    > >
    > > anyone got any tips on making a multipe choice quiz accessible - how do
    > > you make radio buttons attach to a label (becaus theres more than one of
    > > them so how would for= work?)

    >
    > Radio groups are created by adding multiple radio inputs with the same

    NAME.
    > The label element references an element based on its ID.


    thats my point...

    > > also would the label tag be around the text
    > > question or the values of the radio buttons 1,2,3 etc?

    >
    > Its rather difficult to associate data properly with the format. I'd
    > probably structure the data more along the lines:
    >
    > <h2>External Focus - Strategic Thinking</h2>
    > <fieldset>
    > <legend>Anticipates, identifies and evaluates current and future

    business
    > opportunities and threats</legend>
    > <div>
    > <input type="radio" name="q1" id="q1a" value="a">
    > <label for="q1a">Disagree strongly</label>
    > </div>
    > <div>
    > <input type="radio" name="q1" id="q1b" value="b">
    > <label for="q1b">Disagree</label>
    > </div>


    ....hmm never thought of it like that
     
    mark | r, May 17, 2005
    #3
  4. mark | r wrote:

    >> Radio groups are created by adding multiple radio inputs with the same
    >> NAME.
    >> The label element references an element based on its ID.


    > thats my point...


    What is? You have a bunch of radio buttons with the same name but different
    ids. What's the problem?

    --
    David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
    Home is where the ~/.bashrc is
     
    David Dorward, May 17, 2005
    #4
  5. mark | r

    mark | r Guest

    "David Dorward" <> wrote in message
    news:d6d1h5$7l9$1$...
    > mark | r wrote:
    >
    > >> Radio groups are created by adding multiple radio inputs with the same
    > >> NAME.
    > >> The label element references an element based on its ID.

    >
    > > thats my point...

    >
    > What is? You have a bunch of radio buttons with the same name but

    different
    > ids. What's the problem?
    >
    > --
    > David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
    > Home is where the ~/.bashrc is


    i want the label to be for the group of radio buttons, i dont want 1,2,3,4
    etc as independent labels next to each radio button because that doesnt make
    sense visualy

    mark
     
    mark | r, May 17, 2005
    #5
  6. mark | r

    Oli Filth Guest

    mark | r wrote:
    > "David Dorward" <> wrote in message
    > news:d6d1h5$7l9$1$...
    >
    >>What is? You have a bunch of radio buttons with the same name but
    >>different ids. What's the problem?

    >
    > i want the label to be for the group of radio buttons


    But that's meaningless. The whole point of a form label is so that when
    it receives focus (i.e. it's clicked on or whatever), it sends the focus
    to its respective control.

    > i dont want 1,2,3,4 etc as independent labels next to each radio button
    > because that doesnt make sense visualy


    <label> doesn't have a visual effect (AFAIK)


    --
    Oli
     
    Oli Filth, May 17, 2005
    #6
  7. mark | r

    Toby Inkster Guest

    mark | r wrote:

    > i want the label to be for the group of radio buttons, i dont want 1,2,3,4
    > etc as independent labels next to each radio button because that doesnt make
    > sense visualy


    What makes sense visually is irrelevent in HTML. That's what CSS is for.
    Label each individual radio button and then hide the labels using
    display:none.

    If you need to define a semantic relationship between a question and a
    group of radio buttons, use another method -- e.g. table row headers.

    http://examples.tobyinkster.co.uk/radio-buttons

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
     
    Toby Inkster, May 18, 2005
    #7
  8. Leif K-Brooks, May 18, 2005
    #8
  9. mark | r

    kchayka Guest

    Leif K-Brooks wrote:
    > Toby Inkster wrote:
    >> http://examples.tobyinkster.co.uk/radio-buttons

    >
    > Don't most aural browsers render column headers along with every row,
    > making the hidden-for-visual-browsers labels redundant?


    I don't know about the column headers, but I do know that most screen
    readers apply screen media rules the same as graphical browsers (because
    they use WinIE as the rendering engine), so display:none will make the
    labels invisible to screen readers, too.

    The only UAs who will "see" those labels are those with no support for
    the display property - mostly text browsers and those with CSS disabled.
    If the intent was to have the labels vocalized in a screen reader,
    you've failed.

    --
    Reply email address is a bottomless spam bucket.
    Please reply to the group so everyone can share.
     
    kchayka, May 18, 2005
    #9
  10. mark | r

    Toby Inkster Guest

    kchayka wrote:

    > If the intent was to have the labels vocalized in a screen reader,
    > you've failed.


    As I indicated, I was not intending any particular rendering -- just
    posting what makes sense structurally.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
     
    Toby Inkster, May 19, 2005
    #10
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. darrel

    Making DropDownLists accessible

    darrel, Apr 26, 2004, in forum: ASP .Net
    Replies:
    4
    Views:
    538
    darrel
    Apr 27, 2004
  2. milkyway
    Replies:
    2
    Views:
    2,929
    Sudsy
    Dec 24, 2004
  3. Ross
    Replies:
    2
    Views:
    771
  4. Ruby Quiz

    [QUIZ] Animal Quiz (#15)

    Ruby Quiz, Jan 14, 2005, in forum: Ruby
    Replies:
    11
    Views:
    431
    James Edward Gray II
    Jan 18, 2005
  5. David Tran
    Replies:
    9
    Views:
    248
    David Tran
    Jan 21, 2005
Loading...

Share This Page