WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: input type file - label not announced?

for

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

From: Sonja Weckenmann
Date: Mon, May 07 2018 9:12AM
Subject: input type file - label not announced?
No previous message | Next message →

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

www.bitvtest.de | www.bik-für-alle.de | www.dias.de
Twitter: @bitvtest

From: Mallory
Date: Tue, May 08 2018 7:57AM
Subject: Re: input type file - label not announced?
← Previous message | No next message

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 ADDRESS REMOVED =
>
> www.bitvtest.de | www.bik-für-alle.de | www.dias.de
> Twitter: @bitvtest
> > > >