How do you handle situations where 2 elements have the same accessible name, but different functoinality?

user_13564695 0
Viewed 183

I have an e-commerce shop page in development, where there is a button with the word "filter" on it, that when clicked, pops up a filter modal to the user. In the top of the filter modal is a heading with the text "filter" on it.

<button>Filter</button>

<div class="modal">
<h2>Filter</h2>
</div>

I have read about accessible names and it says that if two things have the same accessible name, it should do the same thing. But in this case, the auto-generated name for the filter button will be the same as the filter title even though they have different functionalities (one is a functional button, other is just a heading for display).

My question:

  1. Is it okay for two elements with different roles and functionality to have the same accessible name?
  2. If not, how do I change my DOM to highlight the difference?
wai-aria accessibility html
1 Answers

Nothing wrong with your example, when people talk about things having the same name they are often referring to hyperlinks (so if you use the same hyperlink text twice it should always be to the same page) or buttons etc.

In your example you use a button and a heading, these will be identified by the screen reader as buttons and headings so there is no confusion there.

Hopefully that answers your first question.

For your second question if you do ever find yourself in a situation where you have the same item (e.g. a <button>) that has the same name but you need them to perform different actions you may want to add some extra visually hidden text to explain what each button does in more detail.

For example if you had two different galleries that needed filtering, one about trees and the other about flowers you would do the following (although it would be preferable to not visually hide the text and instead include it in the visible text if possible):-

.gallery{
    width: 100%;
    height: 200px;
    background: #666;
}
.visually-hidden { 
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap; /* added line */
}
<h2>Trees</h2>
<button>Filter <span class="visually-hidden">Trees</span></button>
<div class="gallery"></div>

<h2>Flowers</h2>
<button>Filter <span class="visually-hidden">Flowers</span></button>
<div class="gallery"></div>

You will see that visually the buttons are identical but on a screen reader the button has extra information to make the distinction between the two buttons clear.

If using a modal make sure you use aria-expanded, aria-controls on the button and ensure that you trap focus within the modal. If you need help with those raise another question.

user_27028940
Related