WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Code review please

for

Number of posts in this thread: 5 (In chronological order)

From: karthik k
Date: Tue, Aug 08 2017 11:21PM
Subject: Code review please
No previous message | Next message →

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

From: Ryan E. Benson
Date: Tue, Aug 08 2017 11:31PM
Subject: Re: Code review please
← Previous message | Next message →

The values in the attributes must be the same yourname is different than
Yourname. So The label cannot find the yourname form field, and the form
field cannot find a label for Yourname.

--
Ryan E. Benson

On Wed, Aug 9, 2017 at 1:21 AM, karthik k < = EMAIL ADDRESS 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
> > > > >

From: karthik k
Date: Wed, Aug 09 2017 1:16AM
Subject: Re: Code review please
← Previous message | Next message →

that could be one of the reasons, but there was no id attribute. we
have added it now

On 8/9/17, Ryan E. Benson < = EMAIL ADDRESS REMOVED = > wrote:
> The values in the attributes must be the same yourname is different than
> Yourname. So The label cannot find the yourname form field, and the form
> field cannot find a label for Yourname.
>
> --
> Ryan E. Benson
>
> On Wed, Aug 9, 2017 at 1:21 AM, karthik k < = EMAIL ADDRESS 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

From: Jonathan Cohn
Date: Wed, Aug 09 2017 7:04AM
Subject: Re: Code review please
← Previous message | Next message →

You need id attribute for each of your input tags. E.G.space id="emailid"
On Wed, Aug 9, 2017 at 3:16 AM karthik k < = EMAIL ADDRESS REMOVED = > wrote:

> that could be one of the reasons, but there was no id attribute. we
> have added it now
>
> On 8/9/17, Ryan E. Benson < = EMAIL ADDRESS REMOVED = > wrote:
> > The values in the attributes must be the same yourname is different than
> > Yourname. So The label cannot find the yourname form field, and the form
> > field cannot find a label for Yourname.
> >
> > --
> > Ryan E. Benson
> >
> > On Wed, Aug 9, 2017 at 1:21 AM, karthik k < = EMAIL ADDRESS 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
> > > > >

From: Mallory
Date: Thu, Aug 10 2017 7:15AM
Subject: Re: Code review please
← Previous message | No next message

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 ADDRESS 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
> > > > > > > > > >
> > > >