WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Screen reader and greyed-out submit button

for

From: Graham Armfield
Date: Jan 15, 2020 8:42AM

Thanks for your comments Birkir.

I would however caution against relying on the inbuilt browser validation
for input type="email", input type="number" etc. A recent survey pointed
out that the resultant error messages are not always read out by screen
readers. Also if you have multiple numeric or email fields in a form, it's
not clear to screen reader users which of the fields generated the error
message.

In my view it's best to deactivate the browser validation and rely on
purpose built validation and informative error messages - whether generated
by JavaScript or by return from a server submit.

Regards
Graham Armfield

coolfields.co.uk <http://www.coolfields.co.uk/>;
M:07905 590026
T: 01483 856613
@coolfields <https://twitter.com/coolfields>


On Wed, 15 Jan 2020 at 13:50, Birkir R. Gunnarsson <
<EMAIL REMOVED> > wrote:

> Lots of good points in that email!
> Here are a few more thoughts.
> The native HTML way to mark form controls as unavailable is the
> disabled attribute
> <button disabled>submit</button>
> (should be "differently able" to be more PC)
> This attribute removes the control from te focus order and disables
> the click event on it.
> I believe this is consisent across browsers.
> If you want to keep the element focusable but dsabled you have to do
> that with a Javascript (event.preventDefault()) and then you can
> aria-disabled="true" on the element to mark it as disabled for a
> screen reader.
> YOu haveYou hav to use this approach for links (including links turned
> into buttons with styling and ARIA) because the disabled attribute is
> not valid on links.
>
> IN TML5 you can do a lot of browser validation without Javascript, by
> using the appropriate input type attributes (e.g. type="email" on an
> input causes browser validtion errors if you have no @ symbol, or
> multiple ones).
> If you are good at regular expressions you can use the pattern
> attribute to force all sorts of input validation.
> These are not Javascript dependent and if the browser does not support
> HTML5 they wll basically just be regular text inputs.
>
>
> On 1/15/20, Graham Armfield < <EMAIL REMOVED> > wrote:
> > Hi Barry,
> >
> > Having a submit button only become active when all fields pass the form
> > validation seems to be a popular pattern within some organisations. But
> > it's also considered a bit of an anti-pattern by some within the UX (user
> > experience) and accessibility communities.
> >
> > I can think of a couple of reasons why this is not a good idea.
> >
> > Firstly, the submit button on/off functionality relies on JavaScript
> > routines running in the browser to perform the validation before enabling
> > the submit button. Some people may be browsing in setups where JavaScript
> > has been blocked, or where the JavaScript files don't load and these
> users
> > may never be able to submit the form since the validation routines don't
> > run.
> >
> > Secondly, I'm told that if field prompts are not sufficiently
> informative,
> > or don't contain format guidance, some people favour submitting a form
> > early and using the resultant error messages to help understand the
> > information that is required. If the submit button is not activated until
> > validation is satisfied, this is not possible.
> >
> > There are also some other ideas in this article:
> > https://axesslab.com/disabled-buttons-suck/
> >
> > Regards
> > Graham Armfield
> >
> > coolfields.co.uk <http://www.coolfields.co.uk/>;
> > M:07905 590026
> > T: 01483 856613
> > @coolfields <https://twitter.com/coolfields>
> >
> >
> > On Wed, 15 Jan 2020 at 06:57, Barry Hill < <EMAIL REMOVED> > wrote:
> >
> >> Hi all
> >>
> >>
> >>
> >> When a web form has a submit button that is greyed-out when the form is
> >> incomplete, how should it be handled with screen readers? Or should the
> >> user be able to submit the form and get the alert that the form is
> >> incomplete?
> >>
> >>
> >>
> >> Thanks in anticipation.
> >>
> >>
> >>
> >> Cheers
> >>
> >>
> >>
> >> Barry
> >>
> >>
> >>
> >> > >> > >> > >> > >>
> > > > > > > > > >
>
>
> --
> Work hard. Have fun. Make history.
> > > > >