Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Accessibility: Add aria-label to the search button #2014

Merged
merged 6 commits into from
Jan 1, 2019
Merged

Accessibility: Add aria-label to the search button #2014

Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
35207a2
Accessibility: Add aria-label to the search button
SeanKilleen Jan 1, 2019
ec7eedd
update button aria text
SeanKilleen Jan 1, 2019
7d5b90b
add aria text to menu toggle
SeanKilleen Jan 1, 2019
09a8b72
add span for search toggle
SeanKilleen Jan 1, 2019
46c8c00
update span for menu label & remove aria
SeanKilleen Jan 1, 2019
fdbc88c
update ui-text.yml to add search_label
SeanKilleen Jan 1, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion _includes/masthead.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
{%- endfor -%}
</ul>
{% if site.search == true %}
<button class="search__toggle" type="button">
<button class="search__toggle" type="button" aria-label="Button that opens the search section">
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. To keep things consistent you can follow the pattern used for the menu toggle (see menu button after for example) instead of adding aria-label. This is valid and will pass the accessibility test.

  2. Label probably doesn't need to be so verbose, "Toggle search" should be adequate. I would also suggest hooking into /_data/ui-text.yml so this text can be localized (or overrided) by theme users.

Example:

<button class="search__toggle" type="button">
  <span class="visually-hidden">{{ site.data.ui-text[site.locale].search_label | default: "Toggle Search" }}</span>
  <svg class="icon" width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.99 16">
    <path d="M15.5,13.12L13.19,10.8a1.69,1.69,0,0,0-1.28-.55l-0.06-.06A6.5,6.5,0,0,0,5.77,0,6.5,6.5,0,0,0,2.46,11.59a6.47,6.47,0,0,0,7.74.26l0.05,0.05a1.65,1.65,0,0,0,.5,1.24l2.38,2.38A1.68,1.68,0,0,0,15.5,13.12ZM6.4,2A4.41,4.41,0,1,1,2,6.4,4.43,4.43,0,0,1,6.4,2Z" transform="translate(-.01)"></path>
  </svg>
</button>

And added to _data/ui-text.yml

en: &DEFAULT_EN
  menu_label: "Toggle menu"
  search_label: "Toggle search"

<svg class="icon" width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.99 16">
<path d="M15.5,13.12L13.19,10.8a1.69,1.69,0,0,0-1.28-.55l-0.06-.06A6.5,6.5,0,0,0,5.77,0,6.5,6.5,0,0,0,2.46,11.59a6.47,6.47,0,0,0,7.74.26l0.05,0.05a1.65,1.65,0,0,0,.5,1.24l2.38,2.38A1.68,1.68,0,0,0,15.5,13.12ZM6.4,2A4.41,4.41,0,1,1,2,6.4,4.43,4.43,0,0,1,6.4,2Z" transform="translate(-.01)"></path>
</svg>
Expand Down