WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: input type file - label not announced?

for

From: Mallory
Date: May 8, 2018 7:57AM

One way I've seen it done, which I thought was clever, was a button with the necessary label text and possibly file info came first, and the file input was hidden (aria-hidden, opacity 0 and tabindex=-1 was done in this case, rather than display: none but I think it would still work with display: none... test to see). The button had a click handler that basically just triggered a click on the file input, so everything else is still basically native.

I think the reason this was done was more because of the notorious styling issues with input type=files, but it also definitely reads out the button text. Since it's not uncommon to actually use a button for this job, it being announced as a button rather than an input may not matter.

I'm not saying this is a recommended practice, but when I ran into it, testing in screen readers and speech rec etc all seemed to work fine. If display: none still allows the input to be clicked and work, then I would prefer that. The page I was testing had aria-hidden and opacity 0 but had forgotten to add in the tabindex=-1 at the time, meaning I could tab to a mysterious nothing.

cheers,
_mallory

On Mon, May 7, 2018, at 5:12 PM, Sonja Weckenmann wrote:
> Hi,
>
> I am facing some issue while trying to access the <input type="file">
> element using a Screen reader like NVDA with Firefox.
>
> The Screen reader doesn't announce the label (label + for) of the field?
> In stead it only speaks the BROWSE button.
>
> Is it a NVDA-Bug? But I think JAWS with IE does the same?
>
> What's best practice to achieve, that the label is announced (e.g. foto)
> and also further informations about the possible file formats (e.g.
> .jpg, .psd etc.).
>
>
> Thanks a lot
> Sonja
>
>
> --
>
> BITV-Test | BIK für Alle
> DIAS GmbH
> Haubachstraße 72, D - 22765 Hamburg
>
> Tel: +49 40 43 18 75 18
> Fax: +49 40 43 18 75 34
> E-Mail: <EMAIL REMOVED>
>
> www.bitvtest.de | www.bik-für-alle.de | www.dias.de
> Twitter: @bitvtest
> > > >