Placeholder text (A11y)

[j6design]

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

[scottcarol]

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]

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.

[jeanwalshie]

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

[scottcarol]

@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.

[jszwedko]

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!

[scottcarol]

@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.

[chaunceygraves]

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) @jszwedko<https://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 GitHub<#147 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AJPX256X17FjDvFdXVJu3mjVf-lY875uks5shu2YgaJpZM4HUuU3>.

[scottcarol]

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