I am trying to make my web application more accessible and one of the things I want to do it create a role group and the contents inside should be read in a particular fashion.
For ex on the UI it looks like a menu bar
TITLE
Button1 Button2 Button3
The html looks like
<div class="tab-content-header" role="menubar">
<span id="{{label}}">{{label}}</span>
<button type="button" class="btn btn-primary">button1</button>
<button type="button" class="btn btn-primary">button2</button>
</div>
I want the screen reader to focus on the button ONLY and read 'button1 button, title" and "button2 button, title". Right now it doesnt read that way. any idea?
Before I answer your question, note that you are using a role="menubar" but none of the items within contain role="menuitem". I recommend you read through the menu bar pattern in the ARIA Authoring Practices 1.1, as it also defines the keyboard actions you will need to implement. Further, in most cases using ARIA to define menus is a way of telling a user that it will behave just like a system menu bar. If you do not match the necessary interactions then you will confuse users.
Now, a screen reader will announce the accessible name of a <button> as the text within the element: <button>Accessible Name</button>
If you want it to announce some additional text, you can use aria-describedby, though it will be announced after a pause.
So this may get you what you want:
<span id="Desc">Description text</span>
<button aria-describedby="Desc">Button Text</button>
Now, you state that you want something to be read in a particular order, and that you want only the button to be read, and your question says you want a role name read. These are all confusing requirements so I am not sure I addressed your goal.
All that being said, please be careful to assert how a screen reader user should experience your content. Often using ARIA to enforce the author's ideal reading order makes a page more inaccessible than if nothing was done at all. So please be certain to test with real users.
Related
Which would be correct role to use within a button, so the aria-label attribute is used by screen readers.
<button class="favorite-button">
<span class="material-symbols-outlined"
aria-label="add to favorites"
role="???">
grade
</span>
</button>
So I use a google font material symbol, without aria-label + role "grade" would be read to screen reader users.
Which role would be a suitable one in this case?
Your question implies that setting a role forces the aria-label to be read. That's not exactly true (although for region landmarks, some screen readers don't announce the landmark if it doesn't have an accessible name, so that's kind of the opposite of what your question implies - that the role won't be announced unless there's an aria-label.)
In your case, it's very simple. The role is already there because of the <button> element and the aria-label should be on the button itself.
<button class="favorite-button" aria-label="add to favorites">
<span class="material-symbols-outlined">
grade
</span>
</button>
However, the above solution causes WCAG 2.5.3 Label in Name issue. You will now have a button that visually displays "grade" but the screen reader will say "add to favorites". The visible label won't match the screen reader text.
Can you provide more details on what you're trying to do? Is the purpose of the button to add an element to a favorites list? Or is the purpose of the button to show grades? It sort of sounds like you need two separate interactive elements. One to show the grade and one to add to favorites, but more detail is needed.
I'm following along with a YouTube video & it's teaching me about buttons. The video uses the attribute role, but how come they use role instead of type?
<button type="button"></button>
<button role="button"></button>
Which one should I use and why? None of the HTML documentation I've looked up shows a role as an attribute for the button.
The role attribute describes the role of an element in programs that
can make use of it, such as screen readers or magnifiers.
The button role should be used for clickable elements that trigger a
response when activated by the user. Adding role="button" will make an
element appear as a button control to a screen reader. This role can
be used in combination with the aria-pressed attribute to create
toggle buttons.
Read more on this from https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role
Since you are already using a button element. It no longer needs role="button" attribute since it is itself a button and all the events are already available.
So it is not recommended to use role="button" on button.
I have a custom component in angular that handles images. I have alt text as an input to the element and the screen reader picks it up to utter it out. But whenever I tab to the image, it says 'Trash' group. I want the screen reader to read it out as 'Trash' button. How can I achieve this? The following is my current implementation:
Icn component:
<img [ngClass]="class" [file]="file" [alt]="alt">
Usage:
<icn class="del-icon" [file]="'trash'" [alt]="Trash"></icn>
I tried role="button" but that didn't work.
I don't know Angular so you may need to do some digging on how to structure this but your approach is making things difficult.
Instead make the button a <button>. This way you get all the native accessibility built in (e.g. accessible via tab by default, accepts focus, has hover and focus states etc.)and you will also get the correct announcements in screen readers.
Then place the icon inside the <button> and just style it appropriately.
<button> <!--add whatever directives angular requires here-->
<img [ngClass]="class" [file]="file" [alt]="alt">
</button>
Also you may consider using inline SVGs for your icons as they offer styling options and can change colour according to user preferences. It is also one less resource to download so will help with performance.
I figured out the solution to this problem by experimenting more with the roles.
The image tag doesn't take the role="button" as an attribute. Instead, the role needs to be assigned to the parent element of the image tag i.e., in my case the component icn like follows:
<icn class="del-icon" role="button" [file]="'trash'" [alt]="Trash"></icn>
Now, the screen reader software reads out as the 'Trash button' and gives further more instructions on how to interact with the button. And also if the above doesn't work, just by encapsulating the custom component in a span tag and assigning the role="button" to the span tag works like a charm.
<span class="del-btn-container" role="button">
<icn class="del-icon" [file]="'trash'" [alt]="Trash"></icn>
</span>
Note: Button role examples
My company is doing some ADA conformance revision. I need to have the button text read when the user interacts with it. Will that happen with aria-label or .. how do you do it?
The button text should be read when the user navigates to the button. That could be done with the tab or a screen reader shortcut key such as B to go to the next button, and several other ways.
Are you saying you want the button label announced when the user navigates to it and when the user selects it? That sounds like unusual behavior but perhaps it makes sense in the context of your app.
If you want something announced when the button is selected, you can do that with aria-live. You'd have to trick the screen reader into saying it. You can have a visually hidden element such as
<div id="foo" aria-live="polite" class="sr-only"></div>
(Note: See What is sr-only in Bootstrap 3? for info on the "sr-only" class.)
When the button is selected, inject the text you want announced into the <div> and it'll be read.
A Screen Reader will announce the title of the button when it comes into tab focus, and let the user know that it's a button to begin with. As a base requirement though, a native <button> element should be used since the functionality is already built in. With that said, you don't need any other particular aria tags by default.
I'm guessing you just want to know how to mark up a button so that JAWS says its text when the user tabs or cursors to it.
If it's a native button with text written on it:
<button>Next</button>
JAWS will read it automatically.
If it's an input:button with a text value:
<input type="button" value="Next" />
again, JAWS will speak its text automatically.
If it's a button with an icon:
<button><span class="fas fa-arrowRight"></span></button>
mark it up like this and JAWS will speak its name (remember to change the aria-label text if you're using a different language):
<button aria-label="Next"><span aria-hidden="true" class="fas fa-arrowRight"></span></button>
Hope this helps.
I have a split button construct in our applications that is similar to the following jsbin.
http://jsbin.com/opAtiYEl/8
The first button would do a default action and the second button would give a menu (ul) with more related actions.
When i tab into the first button it reads "action button". That's fine. But when i tab into the arrow down button it reads "button".
What is the correct approach to make this work accessibly? I'm thinking aria-haspopup but that doesn't read on Voice Over.
Ideally this should be correct for VOice Over, NVDA and Jaws (latest minus 2). I'm trying to find a good baseline here or suggestion?
You are some what on the right track with aria-haspopup.
And as #Menelion Elensúle said your arrow button has no content.
Let's say we do something like the iTunes store and have 1 link to a category and a dropdown for sub-categories...
This is the proper markup
Movies
<button type="button" class="action-dropdown hide" aria-haspopup="true" aria-expanded="false" aria-controls="movies-menu">movies dropdown</button>
<ul id="movies-dropdown">
<li>Adventure</li>
...
</ul>
Use the class "hide" to visually hide the text. (Don't use display:none)
And when the arrow is clicked change aria-expanded to true, and remember to switch it back to false when the dropdown is hidden.
My JAWS 15 says "Unlabeled 3 button". You have to label your button. Here:
<button>Action</button>
<button class="arrow"></button>
Please note: the second button has nothing between the tags. If it's impossible to insert something in there (it would corrupt your design), then it would be appropriate to make your arrow as a plain image with an alt attribute.