I've been reading about using ARIA to get screen readers to read labels that otherwise wouldn't be there. However, I'm having a hard time getting a dropdown menu (from Foundation 6) to be read. Consider this piece of code:
<li role="menuitem">
<label id="label1" class="sr-only">Testing click label</label>
<a class="submenu-link" href="/" tabindex="1">
<span class="has-tip right" data-tooltip aria-haspopup="true" data-disable-hover="false" title="Foundation tooltip">
<i class="fa fa-plus-circle"></i>
<span class="text" aria-hidden="true" aria-labelledby="label1">Click here</span>
</span>
</a>
</li>
There are two things I'm baffled about:
Why isn't the <a> tag being read by the screen reader like all others that aren't in a menu dropdown?
Why isn't the aria-labelledby being read?
I suspect it's the "aria-hidden" on the span. As far as the screenreader can tell, that link has nothing in it.
Also:
label might seem like a logical thing here, but it's actually only intended for use with inputs.
Putting aria-hidden and aria-labelledby on the same element doesn't really make sense.
Avoid tabindex=1; use 0 if you need it to be clickable/focusable by the user, or -1 if you just need to be able to focus it via javascript.
There's a lot going on in your code sample; can you explain or show what it is you're trying to achieve? Why is there a dropdown item with a label, with a tooltip with an icon in it? How is this menu item supposed to look and function? What do each of these labels actually represent?
Adding labels where appropriate is definitely good to think about, but wherever possible, let normal markup do the heavy lifting.
Related
I have below code to show buttons in a multi select dropdown. I have used tabindex="0" for each tag. Also added focus in CSS.
.btn-clear-all:focus {
outline: -webkit-focus-ring-color auto 1px;
outline: 1px solid black;
}
<div class="form-group-multi__MultiControls">
<p tabindex="0" class="btn-tertiary--light">Cancel</p>
<p tabindex="0" class="btn-clear-all">Clear all</p>
<p tabindex="0" class="btn-secondary">Apply</p>
</div>
My problem here is 'Cancel' button is accessible on tab key, but not other two - Clear all and Apply.
You are missing an extremely obvious thing (I mean, for semantics and accessibility).
Look at your buttons and pay attention to what you see. Do you see buttons?
Correct answer: No. You see paragraphs (<p>s, not <button>s).
There are two solutions, one best and one not so good:
The best solution. Change all of your <p>s to <button>s. You already have Bootstrap's btn-secondary class applied to them, so I'm pretty confident your styling won't suffer in any way.
Add role="button" to your <p>s. Again, as the first rule of ARIA states that you mustn't use ARIA if you absolutely haven't to, it's a not too good solution.
I have been getting this error only in chrome browser:
element not interactable: element has zero size (Session info: chrome=84.0.4147.105)
when I try to click on <a href="/cart" class="button--counter header__mini-basket" ...></a>.
This is the snippet from my DOM:
<nav class="header__navigation">
<div class="user-section">
<ul class="user-section__list">
<li class="user-section__item user-section__item-my-account js-my-account">
My account<ul class="dropdown dropdown__my-account-desktop">
<li>
<div class="spacer"></div>
</li>
<li>
<div class="arrow-up"></div>
</li>
<li>
<a href="/my-account" role="button" class="my-account__link button button--inverse atm-nav-account" title="My account details">
My account details</a>
</li>
<li>
<a href="/logout" class="logout__link button button--inverse atm-nav-logout" role="button" title="Log out ">
Log out</a>
</li>
</ul>
</li>
<li class="user-section__item">
<a href="/wishlist" class="header__my-wishlist-link atm-nav-wishlist" title="Wishlist">
Wishlist</a>
</li>
<li class="user-section__item dropdown">
<a href="/cart" class="button--counter header__mini-basket" data-toggle="dropdown" data-close-on-bounce="false" data-toggle-status="closed" data-toggle-has-overlay="">
<span class="counter-bubble">
<span class="counter-bubble__quantity">
<span class="cart-counter-wrapper" style="display: inline;">
<span class="counter-bubble__quantity cart-counter" data-counter-type="cart-counter">1</span>
</span>
<span data-counter-type="cart-title">
My cart</span>
</span>
</span>
</a>
<div class="my-account__background-overlay js-account-background-overlay display-none"></div>
</div>
</nav>
I have tried locating the element in different ways:
li.user-section__item a.header__mini-basket
ul.user-section__list a.header__mini-basket
div.user-section a.header__mini-basket
nav.header__navigation a.header__mini-basket
but nothing helped.
This is what I have in the test:
clickOnMiniBasketIcon(){
this.cartIcon.waitForExist(TIMEOUT_5000_MS);
this.cartIcon.waitForDisplayed(TIMEOUT_5000_MS);
this.cartIcon.waitForEnabled(TIMEOUT_5000_MS);
this.cartIcon.scrollIntoView({block: "center"});
this.cartIcon.waitForClickable({timeout: TIMEOUT_3000_MS});
this.cartIcon.click();
}
I am using webdriverio 5 and cucumber.
Interesting point is that running the test against firefox is passing just fine (headless or non headless version) but in chrome (headless or non headless) I get this error.
Also I have to mention that the test resizes window to mock mobile/responsiveness with the command:
browser.setWindowSize(300, 700);
Does anybody have any idea how to resolve this for chrome? Anybody had similar issue?
Any kind of help is very much appreciated.
Thanks!
I can't comment - so this is comment-like
I suspected a Chrome bug at first, but now I think it literally means - you need to check your css - in relation to size zero.
Maybe css is not one of your hobbies (if I'm wrong, write a nice comment and I'll shut up)
Run validator
or/and css_validator will write to you if there are any problems, including spelling errors (sometimes it miss something, but very rarely)
If that doesn't help, check the page code in your browser - (tools for developers or similar) it will show you in colors and literally everything related to your css and html.
You are looking for any size zero -font-size: 0, height: 0,
... also font: normal normal 0 tahoma, sans-serif - it goes like this : font: style variant weight size line-height font-family but some of values can be omitted... It won't be easy
Probably one of this long list is to blame:
<ul class="user-section__list">
<li class="user-section__item dropdown">
<a href="/cart"
class="button--counter header__mini-basket"
data-toggle="dropdown"
data-close-on-bounce="false"
data-toggle-status="closed"
data-toggle-has-overlay="">
<span class="counter-bubble">
<span class="counter-bubble__quantity">
<span class="cart-counter-wrapper" style="display: inline;">
<span class="counter-bubble__quantity cart-counter" data-counter-type="cart-counter">1</span> //</span>
<span data-counter-type="cart-title">
My cart</span> //</span></span></a>
Hm, I was hoping you will find out due to investigation :)
In your browser right-click menu should be this tool or alt+command+i support
if you make a mess - close with x and open again will return with default look
on top you should have Elements E (html), bottom Styles S and in the corner strange picture (cubism like Picasso) P
in E click your tragic <a> and read down in S - on left is like:
a{ font-size: 0; inline on right you have link https://.../style.css:123 = address:line to file containing this ...creature,
but first you can test what exactly is blame - with little checkboxes - disable / enable - play with this sometime it works wonderfully
It emulates behaviour without this piece, you may also (hover mouse around, Opera has this under 3 vertical dots) insert Style Rule - may help (or not) to find solution...
... your code smells like bootstrap or something else what I don't use.
I don't know how you create css - if after following the above you know exactly what to change/remove/add just do it
if you don't know how - let me know... well, we will see
The concern is that CSS is hereditary
for some reason these strange properties were used - maybe by mistake, maybe on purpose
if you change class properties it will affect every element of the class wherever they are
if you remove a class name from <a>, it will lose all properties of that class
there can always be other, more complicated relationships between elements, such as .class div.class2 a.class {}
The least damaging blind solution in this case, is to remove the class name from the <a> element, and to add inline patches if necessary...
I read once again your question - webdriverio 5 and cucumber - unknown for me..
I think you should read this
I had this issue and found a ton of reasons why this can happen in Webdriver.io v4 on NodeJS:
You are trying to click on an ID where there are multiple elements with that ID.
The DOM element you are trying to click on has zero width, height, font-size, line-height, etc.
There is something covering the element to be clicked on.
It's trying to click on something different than what you think it's trying to click on.
You can cover #2 & #3 by clicking directly in the middle of the thing you expect to click on. Does it work? If you can't click on it in the UI, then webdriver.io/chromeDriver can't click on it either.
In my case, it was #1, but I was duped into thinking everything was fine because I had used JQuery (ie. $("#myId").length) & document.getElementByID("myId") and there was only a single element. They lie! They only expect one thing by that ID so they find the first one and return it. Those two methods will only show one item for a given ID even if there are 50.
To find if there's a second element with the same ID, you need to:
Press CTRL-SHIFT-I to open developer tools in Chrome
Go to the Elements tab.
Press CTRL-F to search.
Type in your expected Id (ex. "myId") and keep searching to make sure there is only one.
Here's the HTML:
<div class="dropdown">
<button class="btn dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><input type="checkbox" checked="checked" onclick="return false"/></button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#"><input type="checkbox" onclick="return false" disabled="disabled"/></a>
<a class="dropdown-item" href="#"><input type="checkbox" onclick="return false"/></a>
<a class="dropdown-item" href="#"><input type="checkbox" checked onclick="return false"/></a>
</div>
</div>
Basically it's a Bootstrap dropdown example.
I need this to a table column filter, to be able to filter either by true, false, or no filter.
Never mind the JS logic here.
the checkboxes are "presentation only" - they should not function as checkboxes, they serve as checkbox symbols. I don't have time and resources to provide vector graphics / specialized fonts here. I want that as simple as possible. Paste that into JSFiddle and include Bootstrap to see how it looks.
all checkboxes must be displayed correctly on modern desktop and mobile browsers
It should not break anything.
The Visual Studio however warns me about input inside a button. I know, it's against HTML standard, but I tested it on Edge, Chrome and FireFox and it works. Is there a catch here?
I know, a checkbox (or any other input) BEHAVIOR inside a button element is undefined. But if I don't want them to function, just display - it should be OK? Well, I even taken care about the undefined behavior: if one browser decided to allow checkbox to function inside the button, I explicitly set onclick attribute to just return false.
So, would you leave it or not? Is there a better way to present such filter? Maybe a free web-font playing nice with Bootstrap? A web-font having symbols like checked box, unchecked box, star or any other symbol representing "I don't care if checked".
No, you shouldn't ignore the warning. It's invalid HTML to place interactive elements (such as <input> elements) inside of <a> links or <button> elements, and creates accessibility issues.
Some additional considerations:
Are your dropdown menu items acting like checkboxes? If a user clicks one, does the state of the checkbox change? If so, you should use <input type="checkbox"> elements instead of links.
Conversely, if your dropdown menu items are acting like links (taking the user to new content), you shouldn't make them visually look like checkboxes.
If you do find a semantically justifiable reason for needing <a> links or <button> elements that look like checkboxes, you should use an <img> for the box part of the checkbox instead of co-opting another element that isn't semantically appropriate.
I'm having an accessibility problem with the button element. I'm wondering if this is the good way to do it. I have a button and the only content is a Font-Awesome (font-icon) in it. I was wondering if adding a title attribute to my button was enough to make it accessible ?
Like this:
<button class="prev" title="My accessible title">
<i class="fa fa-chevron-circle-left"></i>
</button>
The correct property in this case should be aria-label or aria-labeledby:
<button class="prev" aria-label="My accessible title">
<i class="fa fa-chevron-circle-left"></i>
</button>
With this, the screen reader for example will reproduce My accessible title instead the icon inside it.
See more:
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute
You have to use both titleand aria-label attributes as some screenreaders does not read the title attribute, while other users won't benefit of the aria-label attribute.
You have to remember that accessibility does not only target screenreaders users but also every other people, so aria-label won't be sufficient.
Also note that, for better accessibility, you might want to add a way to show the description when you focus the button with the keyboard. That would be a good idea.
That being said, I will be silly enough to suggest that some part of the description of your button might be always visible for better accessibility.
For instance, the following examples shows how the two attributes might be used conjointly with a short visible hint for a popup close button :
<button aria-label="Back to the page" title="Close popup">
<i class="fa fa-times"></i>
Close
</button>
The title attribute is the most widely supported attribute for assistive technologies. This includes Dragon (which heavily relies on the title attribute for targeting elements) as well as all modern screen readers that implement the ARIA accessible name computation algorithm and many older screen readers.
As can be seen in step D of that algorithm, the final element that is evaluated is the title attribute.
I am getting H2 violation for below anchor tags.
It says 'H2: Combining adjacent image and text links for the same resource'
<div class="selected-label ccyImage">
</div>
<a href="javascript:void(0);" class="btn dropdown-html-toggle" tabindex="-1">
<span class="caret"></span>
</a>
But there is no any image used. Not getting how to resolve it.
So you have some unspecified tool which is detecting an accessibility problem which is different to the accessibility problem you actually have (or it is being really smart and noticing that you are expressing content using background images … don't do that).
There's not much you can do about the misidentification of the problem other than to report a bug to whomever makes the tool.
You can make your HTML more accessible by:
Not using links when you aren't linking somewhere. If you're using href="javascript:void(0);" then you're doing something wrong.
Link to somewhere useful and progressively enhance or
Use a button (not a link) if you can't make it work without JS
Putting content in your links (or buttons). There is no text at all there to give any clue to the user what the interactive element is going to do.