WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Code review please

for

From: Mallory
Date: Aug 10, 2017 7:15AM

  • Next message: escetic@gmail.com: "Re:
    Hi Karthik,
    Another area to improve is where you have the checkboxes.

    When you have a group of checkboxes or radio buttons that are all
    answering a single question, we should group them in a radiogroup (the
    fieldset tag does this, and with CSS you can remove anything visible it
    adds if that's not allowed) and set the question in the legend.
    Currently, your question text above the checkboxes is just loose text,
    and not programmatically linked to any of the form controls.
    Example:
    <fieldset>
    <legend>Select the required service</legend>
    <label for="cloud">Cloud services</label>
    <input type="checkbox" id="cloud" name="service1" value="Cloud"> Cloud
    services<br>
    <label for="security">Security practices </label>
    <input type="checkbox" id="security" name="service2"value="Security">
    Security
    practices <br>
    <label for="network">Digital network architecture</label>
    <input type="checkbox" id="network" name="service3"value="Network">
    Digital
    network architecture <br>
    <label for="collaboration">Collaberative services</label>
    <input type="checkbox" id="collaboration"
    name="service4"value="Collaboration">
    Collaborative services <br>
    </fieldset>

    How screen readers act with fieldsets and legends differs per screen
    reader (JAWS likes to repeat the legend before each control; VoiceOver
    either doesn't automatically announce the legend or didn't used to (a
    bug, not sure if fixed already but I thought so), but this is the
    recommended-by-specs way of writing a group of questions.
    Notice I added id's to your checkboxes here.

    cheers,
    Mallory

    > > > On Wed, Aug 9, 2017 at 1:21 AM, karthik k < <EMAIL REMOVED> >
    > > wrote:
    > > >
    > > >> Hi all,
    > > >>
    > > >> I am testing a webpage, as a screen reader, i am not finding any
    > > >> issues with this form. but when i ran AXE, it says "all form fields
    > > >> are violations"
    > > >> pasting the code below. Please help!
    > > >>
    > > >> <!doctype html>
    > > >> <html lang="en">
    > > >> <title> submit request </title>
    > > >> <form>
    > > >> <label for="yourname">your name</label>
    > > >> <input type="text" name="Yourname"><br>
    > > >> <label for="emailid">Email id</label>
    > > >> <input type="text" name="emailid">
    > > >> <label for="country/province">Country/province</label>
    > > >> <select name="country/province">
    > > >> <option value="India">India</option>
    > > >> <option value="America">America</option>
    > > >> <option value="Japan">Japan</option>
    > > >> <option value="China">China</option>
    > > >> </select>
    > > >> Select the required service
    > > >> <label for="cloud">Cloud services</label>
    > > >> <input type="checkbox" name="service1" value="Cloud"> Cloud
    > > services<br>
    > > >> <label for="security">Security practices </label>
    > > >> <input type="checkbox" name="service2"value="Security"> Security
    > > >> practices <br>
    > > >> <label for="network">Digital network architecture</label>
    > > >> <input type="checkbox" name="service3"value="Network"> Digital
    > > >> network architecture <br>
    > > >> <label for="collaberation">Collaberative services</label>
    > > >> <input type="checkbox" name="service4"value="Collaberation">
    > > >> Collaberative services <br>
    > > >> Message:
    > > >> <label for="query">Got any query?</label>
    > > >> <textarea name='comment' id='comment'></textarea><br />
    > > >> <input type="submit" >
    > > >> </form>
    > > >>
    > > >>
    > > >>
    > > >> --
    > > >>
    > > >> thanks and regards,
    > > >> Karthik K
    > > >> Phone, +919060989650
    > > >> > > >> > > >> > > >> > > >>
    > > > > > > > > > > > > > > >
    > >
    > >
    > > --
    > >
    > > thanks and regards,
    > > Karthik K
    > > Phone, +919060989650
    > > > > > > > > > >
    > > > >