When and when not to use role="button" - html

In terms of accessibility, can someone describe to me the difference between a <button> and a <a> for screen reader and keyboard users? From what I can tell a keyboard user can use ENTER and SPACE to activate a button, whereas only ENTER for an anchor tag. In a Single Page Application I feel like the roles of these elements get somewhat confused and I'm not sure where the line draws between the two.
Buttons that look like links
In my application I have a generic styling for a link, the class name for this is simply .link.
In the first example I have a button with an onclick handler that performs an action on the same page, therefore I've used a button element for it. However it stylistically looks like a link.
<button class="link" onclick={(e) => console.log('Do the thing')}>This is a link</button>
If the roles are reversed and the link behaves like a traditional anchor where the route changes as a result of it being clicked, I'd do something like this:
<a class="link" href="/route/change">This is a link</a>
Even though both of these look the same due to the applied class, should the anchor tag example have role="button" applied so it behaves like a button even though it's styled like a link? Is it better to maintain consistency between these styled elements for users with accessibility needs throughout the entire application, or is it better to interchange which gets the role applied to it based on the application of the element regardless of how it's styled.
Two "buttons" next to each other
Following up on the first question. If the definition of an <a> tag is that it moves you to a different page/anchor point, should two side by side buttons which perform different tasks both be considered buttons.
Taking the following example, the confirm button performs an action on the same page, and the cancel button routes you back to the previous page.
The code looks something like this:
<button onclick={() => console.log('do a thing'}>Confirm</button>
Cancel
The definition of role="button" from MDN says the following:
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.
Should the cancel button have the button role applied even though it's technically not behaving in the way of the roles definition?
Closing
Is there more concise guidelines on when these roles should and should not be used? Is there any harm in applying role="button" to any/all links that use the same styling if they are used interchangeably with the <button> element? Or should anchor tags and roles never mix, regardless if they stylistically look like another element type?
I appreciate you for reading. I'm attempting to take accessibility seriously but can't seem to find any clear and concise specifications surrounding use cases for this scenario.

Whenever i get this question of Buttons vs link I ask myself, is it scripted functionality or a is it Navigation(internal or external)?
Buttons activate scripted functionality on a web page (dialogs, expand/collapse - regions).
Links take you to another location, either to a different page or different location on the same page.
Coming to a11y
Role tells screen readers and other assitive technology the semantic category of an element, meaning the type of thing that it is. Every element already has a default role of some kind. The <button> element has an implied role="button", and the <img> element has an implied role="img" and so on.
role="button"
if you use <button> don't add role (it's implicit)
<div role="button"> - (Adding roles do not cause browsers to provide keyboard behaviors or styling). Try to use real <button> If that’s problematic for styling purposes, you can use role="button". Be sure to add tabindex="0" to make it keyboard focusable, and ensure it works with both the Enter key and Spacebar, ensure it has proper disabled, hover, focus state, works in high contrast using media query.
Don't use <a role="button"> : it doesn't make sense in any way, it'll give you a block element just like <div> which you can style anyway, remember the question, it is a scripted functionality use
<button> or <div role="button"> , if it is a navigation use
<a> without any role (style it the way you want)
Also, <a> cannot be disabled, <buttons> can be.
Screen readers have shortcuts to read out all the links eg NVDA user can press
K - jumps to Next link
INS + F7 it lists all links, headings
U Un visited Link Quick Key
V Visited Link Quick Key
I also think about do I want screen reader users to hear this link when they press ins + f7 ?
EDIT: I missed to mentions assigning a role to an element overrides its native role. so <a role="button" is no more a role="link" and won't come up in INS + f7 list and as it will be treated by the accessibility API as a button

In this particular case I would recommend to use role='button' on the link since it's one of two choices the user has in this situation, and the two choices should appear in the same form (i.e. as two buttons), also for a user who hears it being read by a screenreader.
I just wonder why you use a link for the cancel option in the first place, and not a button right away...

The solution is easy : "If it's not a link, it's a button"
A link should drive you somewhere else : another page, another anchor within the page.
A link does not submit a form, does not perform any action.
In your example, "Confirm" and "Cancel" are actions : you're submitting your consent or explicitly indicating your desire to cancel your action. They should have the ARIA button role.
This is a different from "Continue" and "Back to the previous" page, which should have the link role.

Related

How to make JAWS not read an anchor tag as link but as button

I have a requirement where I have an anchor tag in my HTML page.
<a aria-label="Back Button" class="secondary-button btn-font" title="Back" ngClass="btn-font"
ngClass.xl="btn-font-xl" i18n-title='importantFacts##back-button' id="backButton"
i18n="##importantFacts-back-button" routerLink="/apply-for-benefit/verification">
Back
</a>
My requirement is that JAWS 2022 read it as 'Back Button', but JAWS reads it as 'Back Button link'. I know it's an anchor tag and it is supposed to read it as a link, but is there a way where it can read it as just 'Back Button' ?
I have already tried using element and but it does not fulfil some other requirement. Only an anchor tag does. I have also tried giving 'role' value as 'button' to the anchor tag, but again with this other requirement was not getting fulfilled.
Kindly help.
Sounds like you already tried the correct solution - set the role.
<a role="button">Back</a>
You don't need an aria-label because the contents of your link already has the text to announce, "Back". And even if you wanted to have an aria-label, you should not specify the role in the label itself. That is, don't use aria-label="back button" but instead just use aria-label="back".
As a side note, links and buttons are quite different things. Links should be used for navigation purposes - going to a new page or navigating to a different location on the same page. Buttons should be used for "actions".
From a keyboard perspective, links only allow the enter key to select them whereas buttons allow both enter and space. If you press space on a link, it will scroll the page (the default behavior on most browsers is to scroll the page when you press space).
Also, if a screen reader user hears "link", not only will they assume they are being navigated somewhere but they will also expect the browser's "back" button to take them back to where they were previously. Buttons don't have that behavior.
So you really need to think about whether setting a role="button" on a link is the right thing to do instead of using a real <button>. If you do want to use role="button" on a link, then you'll also need a keyboard event handler to allow the space to work as explained above.

Should ARIA buttons provide context?

(This question is similar to Should ARIA labels provide context?, but not identical, as I'm talking about buttons and do not have full control over the markup.)
I have some amount of items and buttons that act on those items. Here's a simplified example:
<ul>
<li><span>Item: foo</span> <button>remove</button></li>
<li><span>Item: bar</span> <button>remove</button></li>
<li><span>Item: baz</span> <button>remove</button></li>
</ul>
As far as I understand, when someone using a screen reader tabs through the page, they will be read the button text but not the item text. This doesn't seem ideal to me, as they don't have context on which item the button will remove.
Assume that I don't have full control of the markup; I can only add attributes.
What is the best practice in this situation?
add an aria-label to the button that gives more context:
<button aria-label="Remove item foo">remove</button>
make the item text itself tabbable and give it an aria-label so it's read aloud:
<span tabindex="0" aria-label="Item foo">Item: foo</span>
leave things as they are, because this is intended behavior and/or I'm misunderstanding something about screen readers
something else entirely?
The answer depends on if you're trying to conform to the Web Content Accessibility Guidelines and are only worried about compliance issues (from a legal perspective), or if you want to have a great user experience regardless of whether you conform or not.
The first part, conformance, is a little tricky. Regarding context, 2.4.4 Link Purpose (In Context) comes into play but only for links. The guideline says the text for a link is ok if the user can figure out the meaning of the link from the link text and the surrounding context (such as what text is before or after it). And then context is defined as the link being in the same list item (<li>) as the surrounding text.
So that sort of fits your scenario, but you have buttons instead of links, so WCAG 2.4.4 doesn't really apply to you.
There isn't a clear guideline for the context of buttons except WCAG 2.4.6 Headings and Labels. It says that the label [of a button] must describe the purpose of the button. So who decides whether the label is descriptive enough? That's a tough call. Is "remove" descriptive enough? Maybe, maybe not. It kind of depends who you ask.
So if you are focusing on a great user experience rather than conformance to WCAG, adding context to the buttons is a really good thing.
You are correct that if a screen reader user tabs through the interface, they will only hear the button label and not the list context. But screen reader users have many ways to navigate a webpage. One option is to navigate by list elements (<ul> or <ol>) by using the L key (JAWS and NVDA). Another is to navigate by list item (<li>) by using the I key. (That's the letter 'i', not a number 1). So a user can navigate to your list items, hear the text of the list and the text of the button and get some context.
I would not recommend your second idea of adding tabindex to the list. You don't want the user to tab to elements that are not interactive.
Adding more context via a label is the best approach. I would recommend using aria-labelledby before resorting to aria-label. If you have an element in the DOM already that has the text context you need, give that element an ID and then refer to that ID in the aria-labelledby of the button. It's a little more work but then you don't have to worry if you change the text in the list because the button is using an indirect reference and will automatically pick up the new text.
You'll also need an ID on the button and then you have the button point to itself and to the context. That sounds confusing but here's all it is:
<ul>
<li>
<span id='item1'>Item: foo</span>
<button id="button1" aria-labelledby="button1 item1">remove</button>
</li>
<li>
<span id='item2'>Item: bar</span>
<button id="button2" aria-labelledby="button2 item2">remove</button>
</li>
</ul>
A simpler approach is to use aria-label as in your first suggestion but I don't like repeating text in an aria-label that's already in the DOM. If your list text changes at some point, you have to remember to change the aria-label too.
Making the span focusable is a very bad idea unless it produces an action itself when clicked. Only elements that are actually interactive should be focusable.
It's very confusing for the user is something is focusable but don't provide any interaction when focused.
Adding context with aria-label is a good idea, but in fact there is better.
The recommended way is to add off-screen text instead:
<button>Remove <span class="sr_only">Item 123</span></button>
Where .sr_only is a CSS class present in many frameworks with different names (sr_only, visually-hidden, etc.) which send the text off-screen. It is invisible for normal users, but read as normal by screen readers.

Should buttons have labels from WCAG point of view?

I am building an app which has to be WCAG compliant. It requires about 12 buttons. Some of the buttons have only tooltips and icons but no labels. I haven't been able to find clear cut language in WCAG about this problem. Are titles necessary for buttons?
Short answer
Yes, your button must have so form of text label associated with it.
But don't be confused with <label>, which is normally unneeded for a button.
Long answer
The answer isn't answered directly in WCAG, but this is a question of perception, which is the first WCAG core principle.
If your button has only an icon but no alternative text or label, it follows that screen reader users won't perceive your button.
So, in the broad sense, yes, your button must have a kind of label.
You have several ways to set an accessible label, technically known as accessible name, to a button having no text itself:
Attribute alt of <input type="image"/> or the <img/> which is inside the button
aria-label or aria-labelledby attributes
Visually hidden text
Don't be confused with <label> element. It's unneeded for a button, since a button usually carry its own accessible name.
An <input type="text"/> need a separate <label> because it has typically no accessible name otherwise.
This may also be a question of understandability, which is the second WCAG principle.
Even for perfectly sighted people, are you sure that the meaning of your button without any text is crystal clear ? Few icons are known to be almost universally understood by everybody without any hint, any help, any tooltip, nothing.
IN that quite small list you can certainly find multimedia buttons (play/pause/stop/record), parameters/settings wheel, power on/off, but probably not many more.
As a consequence, the question isn't only about having an accessible name for screen readers. It goes much beyond that.
To wrap up, yes, your button definitely must have some form of text label associated with it.
Short Answer
You should add aria-label to your buttons.
Longer Answer
Buttons need a name that can be computed for accessibility. First to answer your questions:
Are titles necessary for buttons?
No
Should buttons have labels from WCAG point of view?
No once again, in fact they are probably not valid.
So what should I do?
Buttons don't need titles or <label>s (in fact a <label> on a button would probably not be valid without some WAI-ARIA).
But, they do need to have an accessible name, and I think this is the part that is causing confusion.
Because your buttons only have an icon and a tooltip, they probably / possibly do not have any text that is useful to assistive technology (such as a screen reader).
So when they reach a button with just an icon using a screen reader they will hear "button", with no indication of what the button is for!
The fix
There are several ways to approach this, but the easiest is aria-label.
WAI-ARIA is a set of attributes you can add to HTML elements to add extra meaning / semantics to make a page make more sense to assistive tech users.
The aria-label attribute, when used on an interactive element (such as a button, an anchor / hyperlink etc.), will indicate the the browser "hey, please present this as the accessible name for this element.".
So in your example, something similar to the following would ensure that the purpose of a button is clearly described:
<button aria-label="Add New Document">
<!-- your icon -->
</button>
So instead of just saying "button" when focused it will now say "Add New Document, button".

Is there any alternative to <div> that will accept focus?

Is there any alternative to <div>? My website is losing "accessibility" because I cannot set focus on a <div>. What control should I use in order to replicate <div> and still hold focus?
This is what my HTML looks like:
<div style="height:70px; overflow:hidden" id="divMsg">
<div class="DivClass">abcdefg abcdkfjghfjdfkj</div><br>
<div class="DivClass">abcdefg abcdkfjghfjdfkj</div><br>
</div>
You can add tabindex to make it focusable; however, this is usually not enough. If you want the element to be clickable, you will also need to add a keydown or keypress handler so that the user can activate it using ENTER, similar to a A link. Otherwise the user will be able to tab to it, but may not be able to do anything with the link after.
If you are trying to create a clickable element, it is sometimes simpler to start with a A tag, and then style it so that doesn't look like a link. A elements respond to both keyboard and mouse and fire onclick for both, so you don't have to do additional keyboard input handing like you do with a DIV.
Finally, if you are making a DIV or A that visually looks like a button or some other control, add the appropriate ARIA role so that a screenreader will call out the appropriate element type - eg.
Complete Transaction
Just give it a tabindex attribute.
If you are specifically looking for accessibility, try out the new HTML 5 tags like <article>. So for example a textreader knows what to read, and your page is much better structured.
Check out this site.
To answer your exact question, it depends why you are using the div; I'm guessing for layout. The tab ordering is dependent upon more than tabindex, as defaults and overflow affects positioning and focus.
To be more specific, you won't use a div to latch onto for tabindex. Rely upon JavaScript and a unique ID; <div class="content" id="page1">
This will also provide you an anchor so you could use http://index.html#divMsg to link focus to the exact place in your HTML document. Note you have only one div ID and reuse the same div class twice in your example.
If this is all new to you the article on difference between ID and CLASS may be of interest to you
Links (element a) and form elements (input text and alike, file, radio and checkbox, submit, image and type button, select, textarea, button element, etc) are focusable by default.
Thumb rule: if an element does something, it should be a link or a form element part of a form. (OT: I guess I've a problem with conjugation here but can't find exactly what - english isn't my mothertongue)
Think twice (at least :)) before using the tabindex attribute: it'll work for a while in your project and then you make some modification elsewhere and suddenly all is broken. And it'll break again, again and again.
For testing with Safari, you'll need to modify Preferences: this browser (maybe also Chrome?) only cycle by default through form elements and not links. Users of keyboard cycle through every focusable elements I guess, like in IE and Firefox.
To learn further, Web Content Accessibility Guidelines 2.0 (WCAG 2.0) have Sufficient Techniques (and "Failure(s)" also) about keyboard use.

Any advantage of <a href="javascript:void(0);"> over <span> link text </span>

I have some HTML DOM elements for which I need to capture click events, like a drop-down menu widget, etc.
I guess we can implement in 2 ways:
My text
or another way is:
<span id="option2">My text 2</span>
In the second option, of course I can add CSS property cursor:pointer.
All I need is to capture the click event, for which I can have the same click handler function for both the cases.
Do you think there is any reason why we would use anchor tag method?
The second option looks more clean. Also, the IE has a default behavior for anchor tag click events, which can have unwanted consequences, etc.
Some benefits of the anchor tag:
you can provide a default behavior for users who don't have JavaScript enabled (if you care about that).
tabbing on the keyboard will set focus on anchor tags by default.
you get default styles that may be desirable on anchor tags.
Depends on what you need/want. Using links have the benefit they will be displayed as links (other color, different mouse cursor, possibility to search only for links, maybe accessibility issues, etc.)
Using spans does not do this but has other benefits like no different color if you activated or visited the link already.
That being said there is IMHO no real benefit for choosing either method probably depends if the text should be displayed/behave like a link or not.
For span look like an anchor you have to setup colors (standard and hover. And there'is no way to set Visited for it), underline and cursor:pointer. Still think it's cleaner?