adopt-a-drain icon indicating copy to clipboard operation
adopt-a-drain copied to clipboard

Published 20 hours ago • verified publisher icon sfbrigade

Placeholder text (A11y)

Open j6design opened this issue 9 years ago • 8 comments

When return to address input box, screen reader is picking up the placeholder text instead of the value in the box

j6design avatar Feb 06 '16 00:02 j6design

Hi @j6design, it looks like the placeholder text is being used as a label (not good for a11y).

Can you brainstorm a better solution with me?

Here is the current code. Right now there is no label:

%fieldset.form-group = search_field_tag "address", params[:address], :placeholder => t("labels.address"), :class => "search-query form-control" .help-block

I added a label that is visible to screen readers only:

%fieldset.form-group %label.sr-only{:for => "address"} = t("labels.address") = search_field_tag "address", params[:address], id:"address", :placeholder => t("labels.address"), :class => "search-query form-control" .help-block

However, the text of the sr-only label is "labels.address" -- which is the same as the placeholder text. This means the person with the screen reader will hear (in English) "Address, Neighborhood" two times -- once from the sr-only label and once from the placeholder text.

Ideally there would be a label for everyone to view, with supplemental placeholder text.

But if the design can't change, is this an acceptable solution for screen reader users?

scottcarol avatar Aug 27 '17 02:08 scottcarol

Hey @jszwedko see this article on using placeholders as labels.

Any chance we can add a visible label to the address search form?

Otherwise, I can submit a pull request with the workaround I posted above, which adds an invisible label for screen readers only.

scottcarol avatar Aug 29 '17 16:08 scottcarol

@scottcarol thanks for reviving this and for the informative article!

jeanwalshie avatar Aug 29 '17 16:08 jeanwalshie

@jeanwalshie Thanks! I'm getting my adopt-a-drain feet wet (pun intended) and would like to start with a11y issues. Planning to come to the coding meetup 9/13 to meet some collaborators in person.

scottcarol avatar Sep 05 '17 23:09 scottcarol

Hey @scottcarol,

Apologies for the delay; I've been traveling the past couple of weeks. I agree with the points in the article you linked to would be happy to see the placeholder moved to a label on that field.

I'll be at the 9/13 hack night though and would be happy to chat more there!

jszwedko avatar Sep 12 '17 01:09 jszwedko

@jszwedko - great. Something came up and I won't be there tonight but I will be there 9/20.

I'll submit a pull request for this as soon as I can.

scottcarol avatar Sep 12 '17 20:09 scottcarol

Hi Carol, Be where ? Weren’t you talking about Code for SF Meet Up on 9th street? I thought that is WEDNESDay?

Cheers,

John Seagrave | Engineering Associate Hydraulic Engineering | Public Works | City and County of San Francisco 1680 Mission St | San Francisco, CA 94103 | (415) 554-8305 | [email protected]mailto:[email protected]

From: Carol [mailto:[email protected]] Sent: Tuesday, September 12, 2017 1:46 PM To: sfbrigade/adopt-a-drain Cc: Subscribed Subject: Re: [sfbrigade/adopt-a-drain] Placeholder text (A11y) (#147)

@jszwedkohttps://github.com/jszwedko - great. Something came up and I won't be there tonight but I will be there 9/20.

I'll submit a pull request for this as soon as I can.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHubhttps://github.com/sfbrigade/adopt-a-drain/issues/147#issuecomment-328979425, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AJPX256X17FjDvFdXVJu3mjVf-lY875uks5shu2YgaJpZM4HUuU3.

chaunceygraves avatar Sep 13 '17 00:09 chaunceygraves

Oops yes I meant I won't be there today (Wednesday) but will be there next week!

scottcarol avatar Sep 13 '17 22:09 scottcarol