Accessibility issues — form field #a11y #999

New issue

Open

opened 2023-08-29 12:47:46 -04:00 by luce-carevic · 3 comments

luce-carevic commented

2023-08-29 12:47:46 -04:00

(Migrated from github.com)

Add a role="search" on the form.
Placeholder is not a good way to label an input. It disappears and people can get confused as what to type then.
Here it is also misleading as I understand that we can search keywords also?

Consider using a visible label: "Enter username or keyword…"

The search button has no accessible name.

You can add a text with a sr-only class for example or put an aria-label on the <button> tag.

It could look like this:

<form method="get" action="/search" autocomplete="off" role="search">
            <input name="f" value="users" style="display: none; ">
  <label for="toto">Enter username or keywords...</label>
            <input id="toto" type="text" name="q" autofocus="" placeholder="Enter username..." dir="auto">
            <button type="submit" aria-label="Search"><div class="icon-container"><span class="icon-search" title=""></span></div></button>
</form>

<form method="get" action="/search" autocomplete="off" role="search">
            <input name="f" value="users" style="display: none; ">
  <label for="toto">Enter username or keywords...</label>
            <input id="toto" type="text" name="q" autofocus="" placeholder="Enter username..." dir="auto">
            <button type="submit"><div class="icon-container"><span class="icon-search" title=""></span></div><span class="sr-only">Search</span></button>
</form>

1. Add a role="search" on the form. 2. Placeholder is not a good way to label an input. It disappears and people can get confused as what to type then. Here it is also misleading as I understand that we can search keywords also? Consider using a visible label: "Enter username or keyword…" 3. The search button has no accessible name. You can add a text with a sr-only class for example or put an aria-label on the `<button>` tag. It could look like this: ``` <form method="get" action="/search" autocomplete="off" role="search"> <input name="f" value="users" style="display: none; "> <label for="toto">Enter username or keywords...</label> <input id="toto" type="text" name="q" autofocus="" placeholder="Enter username..." dir="auto"> <button type="submit" aria-label="Search"><div class="icon-container"><span class="icon-search" title=""></span></div></button> </form> ``` Or ``` <form method="get" action="/search" autocomplete="off" role="search"> <input name="f" value="users" style="display: none; "> <label for="toto">Enter username or keywords...</label> <input id="toto" type="text" name="q" autofocus="" placeholder="Enter username..." dir="auto"> <button type="submit"><div class="icon-container"><span class="icon-search" title=""></span></div><span class="sr-only">Search</span></button> </form> ```

adeleke5140 commented

2023-09-30 10:57:16 -04:00

(Migrated from github.com)

@zedeus do you need some help fixing these errors? I could take a look at them.

zedeus commented

2023-09-30 13:59:10 -04:00

(Migrated from github.com)

@adeleke5140 Sure! I don't have much time these days, so any help is greatly appreciated!

🚀 1

adeleke5140 commented

2023-10-05 22:04:27 -04:00

(Migrated from github.com)