Form inputs and accessibility

Hey everyone,

I would like to propose that we establish a requirement that all new form
inputs include both a unique ID attribute and a <label> like so:

<label for="name">Name:</label>
<input id="name" type="text" name="name"/>

For form fields where the is no label we should use bootstrap's .sr-only
class on the label to hide it like so:

<label for="name" class="sr-only">Name:</label>
<input id="name" type="text" placeholder="Name:" name="name"/>

This allows screen readers to relate a label field to an input in a
meaningful way making it easier for the visually impaired to use our
application (as an added bonus unique input IDs also allow for easier to
write and maintain QA automation). It is important that the ID be unique
to the page so as not to confuse screen readers and also in order to
produce valid HTML.

Please help this effort by keeping an eye out for new input fields that
on't have IDs and labels and if you happen to notice an input without an ID
and label please fix it.

See also [1].

Thanks,
Walden

[1] https://webaim.org/techniques/forms/controls#input

> Hey everyone,
>
> I would like to propose that we establish a requirement that all new form
> inputs include both a unique ID attribute and a <label> like so:
>
> <label for="name">Name:</label>
> <input id="name" type="text" name="name"/>
>
> For form fields where the is no label we should use bootstrap's .sr-only
> class on the label to hide it like so:
>
> <label for="name" class="sr-only">Name:</label>
> <input id="name" type="text" placeholder="Name:" name="name"/>
>
> This allows screen readers to relate a label field to an input in a
> meaningful way making it easier for the visually impaired to use our
> application (as an added bonus unique input IDs also allow for easier to
> write and maintain QA automation). It is important that the ID be unique
> to the page so as not to confuse screen readers and also in order to
> produce valid HTML.
>
> Please help this effort by keeping an eye out for new input fields that
> on't have IDs and labels and if you happen to notice an input without an ID
> and label please fix it.
>
In foreman, its all going though a single code path, so a simple change to

··· On Fri, Sep 29, 2017 at 7:16 PM, Walden Raines wrote:

foreman/app/helpers/form_helper.rb at develop · theforeman/foreman · GitHub
will get what you are looking for.
See also [1].

Thanks,
Walden

[1] WebAIM: Creating Accessible Forms - Accessible Form Controls


You received this message because you are subscribed to the Google Groups
“foreman-dev” group.
To unsubscribe from this group and stop receiving emails from it, send an
email to foreman-dev+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

I think there was a patch that added randomized IDs to all elements
which were missing it. I think it did not get it through review.

LZ

··· On Sat, Sep 30, 2017 at 6:33 PM, Ohad Levy wrote: > > > On Fri, Sep 29, 2017 at 7:16 PM, Walden Raines wrote: >> >> Hey everyone, >> >> I would like to propose that we establish a requirement that all new form >> inputs include both a unique ID attribute and a like so: >> >> Name: >> >> >> For form fields where the is no label we should use bootstrap's .sr-only >> class on the label to hide it like so: >> >> Name: >> >> >> This allows screen readers to relate a label field to an input in a >> meaningful way making it easier for the visually impaired to use our >> application (as an added bonus unique input IDs also allow for easier to >> write and maintain QA automation). It is important that the ID be unique to >> the page so as not to confuse screen readers and also in order to produce >> valid HTML. >> >> Please help this effort by keeping an eye out for new input fields that >> on't have IDs and labels and if you happen to notice an input without an ID >> and label please fix it. > > In foreman, its all going though a single code path, so a simple change to >> >> >> https://github.com/theforeman/foreman/blob/develop/app/helpers/form_helper.rb#L326 >> will get what you are looking for. >> See also [1]. >> >> Thanks, >> Walden >> >> [1] https://webaim.org/techniques/forms/controls#input >> >> -- >> You received this message because you are subscribed to the Google Groups >> "foreman-dev" group. >> To unsubscribe from this group and stop receiving emails from it, send an >> email to foreman-dev+unsubscribe@googlegroups.com. >> For more options, visit https://groups.google.com/d/optout. > > > -- > You received this message because you are subscribed to the Google Groups > "foreman-dev" group. > To unsubscribe from this group and stop receiving emails from it, send an > email to foreman-dev+unsubscribe@googlegroups.com. > For more options, visit https://groups.google.com/d/optout.


Later,
Lukas @lzap Zapletal

I don't know that we want randomized IDs as that doesn't really help QE
any. Ideally we'd have purposefully chosen unique IDs so that we meet both
goals here:

  1. Accessibility for the visually impared
  2. Simplifying QE automation testing

Cheers,
Walden

··· On Mon, Oct 2, 2017 at 10:38 AM, Lukas Zapletal wrote:

I think there was a patch that added randomized IDs to all elements
which were missing it. I think it did not get it through review.

LZ

On Sat, Sep 30, 2017 at 6:33 PM, Ohad Levy ohadlevy@gmail.com wrote:

On Fri, Sep 29, 2017 at 7:16 PM, Walden Raines wraines@redhat.com > wrote:

Hey everyone,

I would like to propose that we establish a requirement that all new
form
inputs include both a unique ID attribute and a like so:

Name:

For form fields where the is no label we should use bootstrap’s .sr-only
class on the label to hide it like so:

Name:

This allows screen readers to relate a label field to an input in a
meaningful way making it easier for the visually impaired to use our
application (as an added bonus unique input IDs also allow for easier to
write and maintain QA automation). It is important that the ID be
unique to
the page so as not to confuse screen readers and also in order to
produce
valid HTML.

Please help this effort by keeping an eye out for new input fields that
on’t have IDs and labels and if you happen to notice an input without
an ID
and label please fix it.

In foreman, its all going though a single code path, so a simple change
to

foreman/app at develop · theforeman/foreman · GitHub
helpers/form_helper.rb#L326
will get what you are looking for.
See also [1].

Thanks,
Walden

[1] WebAIM: Creating Accessible Forms - Accessible Form Controls


You received this message because you are subscribed to the Google
Groups
“foreman-dev” group.
To unsubscribe from this group and stop receiving emails from it, send
an
email to foreman-dev+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.


You received this message because you are subscribed to the Google Groups
“foreman-dev” group.
To unsubscribe from this group and stop receiving emails from it, send an
email to foreman-dev+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.


Later,
Lukas @lzap Zapletal


You received this message because you are subscribed to the Google Groups
“foreman-dev” group.
To unsubscribe from this group and stop receiving emails from it, send an
email to foreman-dev+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.