I am fairly new to accessibility issues and I am trying to have the aria-label read in NVDA.
This is my HTML:
<div class="myClass">
<input type="checkbox" name="mycheckbox" id="toggle" onclick="togglelongText()"aria-label="tldr">
<label for="toggle" aria-label="tldr"><span class="active" aria-label="tldr">tl;dr</span>
<span class="toggleshape"></span><span class="inactive" aria-hidden="true">tl;dr</span></label>
</div>
The label cannot be read on NVDA on Windows and I have found out that it is not consistently succesful if the element is inside div or span:
https://www.w3.org/WAI/GL/wiki/Using_aria-label_to_provide_an_invisible_label
What are the alternatives? Can you help?
Thanks,
Regards,
P.
EDIT:
I have done some re-work and I managed to have the aria label only partially working as it now reads "tl;dr". This has been tested on Windows 7 with Chrome 54, IE 11 and Firefox 49, all presenting the same issue. Here the reworked code:
<div class="myClass">
<input type="checkbox" tabindex="0" name="mycheckbox" id="toggle" onclick="toggleLongText()"
aria-label="TL;DR switch">
<label for="toggle" aria-label="TL;DR switch"><span class="active" tabindex="0"
aria-label="TL;DR switch">tl;dr</span><span class="toggleshape"></span>
<span class="inactive">tl;dr</span></label>
</div>
Can you help?
Try using title attribute.
Or you can use aria-labelledby="mytexttoberead" as an attribute
<span class="hidemefromUsers" id="mytexttoberead">This text will be read</span>
add a css for the class "hidemefromUsers" so it wont be visible to the end users, only the screen reader will be aware of its existence.
add this in your css
.hidemefromUsers {
position: absolute;
left: -99em;
height: 0;
}
aria-label, aria-labelledby, and aria-describedby do not work consistently with all HTML elements. Short answer: they should be used on interactive elements.
Longer answer by Léonie Watson here.
Related
I am trying to pass some content in the textbox using the following:
driver.find_element_by_xpath('path').send_keys(value)
Apparently nothing is getting passes.
Similar issue with clicking button:
driver.find_element_by_xpath('path').click()
This is also not working, in the code i could see
display:none:
<li style="display:none">
</li>
</ul></div>
<div class="row form-group">
<div class="col-sm-12 form-group">
<label for="Username">Username</label>
<input autocomplete="off" class="form-control" data-val="true" data-val-
required="User name is Required" id="Username" name="Username" type="text" value="">
As per the HTML you have shared and #Sighil pointed out the style attribute display: none is part of the previous <li> tag which must not affect the Username field. To pass some text to the Username field you can use the following line of code :
driver.find_element_by_xpath("//input[#class='form-control' and #id='Username']").send_keys("Dimple Mathew")
It may be possible you have to induce a waiter for the Username field to be interactable and in that case you have to induce WebDriverWait as follows :
WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//input[#class='form-control' and #id='Username']"))).send_keys("Dimple Mathew")
Use explicit wait statement before you use sendkeys or click. As per my understanding element is not visible while click or sendkeys.
For your reference visit Explicit and Implicit Wait Docs
I was having a similar issue not to long ago, try this:
js= "document.getElementById('Username').value = '" + str(YOURVALUE) + "';"
driver.execute_script(js)
It worked for me, hope this helps.
See the below code for a basic hover dropdown-pane:
<button class="button" type="button" data-toggle="example">Toggle Dropdown</button>
<div class="dropdown-pane" id="example" data-dropdown data-dropdown data-hover="true" data-hover-pane="true">
<div class="row">
<div class="medium-12 columns">
<p>When I am hovering over any content in this dropdown-pane, how can I make the above button appear as "active" i.e. Same state as hovering over the button.</p>
</div>
</div>
</div>
Now what I'd like to have happen is that when the user is viewing any content within that dropdown-pane, the button that triggered the event has a visual indicator that it is the "active" trigger. Here's a picture example:
Any insight you can provide would be very much appreciated.
Foundation has you covered here.
When the .dropdown-pane (content wrapper) is active, the button is given the class .hover (not to be confused with :hover state).
So you can simply add specific styles to that class (relative to your button if you want multiple different types of effect in different scenarios). You would have to manually ensure that your Foundation :hover matched your new .hover state.
HTML (e.g.)
<button class="button" type="button" data-toggle="example-dropdown">Toggle Dropdown</button>
<div class="dropdown-pane" id="example-dropdown" data-dropdown data-auto-focus="true">
Example form in a dropdown.
<form>
<div class="row">
<div class="medium-6 columns">
<label>Name
<input type="text" placeholder="Kirk, James T.">
</label>
</div>
<div class="medium-6 columns">
<label>Rank
<input type="text" placeholder="Captain">
</label>
</div>
</div>
</form>
</div>
<button class="button" type="button" data-toggle="example-dropdown-1">Hoverable Dropdown</button>
<div class="dropdown-pane" id="example-dropdown-1" data-dropdown data-hover="true" data-hover-pane="true">
Just some junk that needs to be said. Or not. Your choice.
</div>
CSS
.button.hover,
.button:hover{
background-color: green;
}
Working example: https://jsfiddle.net/tymothytym/8re4jcy0/ << in this example (and above) I'm manually setting :hover and .hover because I've used a default F6 CSS build which has a set :hover state but if you have already set :hover (e.g. to green) you don't need to re-set it.
Use css. Find the style of the hovered over button and either make an :hover pseudo class and apply the style that way or you can use javascript to add a class to the element that will have the exact css as the hovered over button.
.element:hover{
add styles here
}
or
var element=document.getElementByClassName('.className');
element.addClass('.classToAdd');
I have a ember template with 2 sections, where one section is visible by default and other one is hidden until I hit a button.
I am using liquid-fire, most specifically the liquid-if helper to do a simple fade in / fade out of the 2 sections. This works however there is a slide up / slide down that occurs between toggling the 2. As anyone seen this behavior before? I would to prevent this slide effect from happening
Here's sample how template looks like:
{{#liquid-if isPasswordResetLinkConfirmVisible class="lf-fade"}}
<h1 class="text-center">{{t 'reset_password.text.resend_email_header'}}</h1>
<p class="text-center">
{{t 'reset_password.text.resend_email_line_1'}}<br/>
{{t 'reset_password.text.resend_email_line_2'}}
<i class="fa fa-envelope-o email-icon"></i>
</p>
{{/liquid-if}}
{{#liquid-if isPasswordResetLinkVisible class="lf-fade"}}
<h1 class="text-center">{{t 'reset_password.text.expired_header'}}</h1>
<p class="text-center">
{{t 'reset_password.text.expired_line_1'}}<br/>
{{t 'reset_password.text.expired_line_2'}}
</p>
{{mx-button action=(action "sendNewPasswordResetLink") size="large" label=(t 'action.send_new_link') block=true}}
{{/liquid-if}}
Here's a sample of my transition
this.transition(
this.hasClass('lf-fade'),
this.toValue(true),
this.use('fade', {
duration: 600
})
);
Thanks, I was able to find a solution looking at the code. Seems what Im experience is related to fact my content is different size and doing slide animation to resize you can deactivate that by doing by using the enableGrowth param
{{#liquid-if isPasswordResetConfirmVisible class="lf-fade" enableGrowth=false}}
You want to put the two templates into an if/else like this:
{{#liquid-if isPasswordResetLinkConfirmVisible use="fade"}}
<h1 class="text-center">{{t 'reset_password.text.resend_email_header'}}</h1>
<p class="text-center">
{{t 'reset_password.text.resend_email_line_1'}}<br/>
{{t 'reset_password.text.resend_email_line_2'}}
<i class="fa fa-envelope-o email-icon"></i>
</p>
{{/else}}
<h1 class="text-center">{{t 'reset_password.text.expired_header'}}</h1>
<p class="text-center">
{{t 'reset_password.text.expired_line_1'}}<br/>
{{t 'reset_password.text.expired_line_2'}}
</p>
{{mx-button action=(action "sendNewPasswordResetLink") size="large" label=(t 'action.send_new_link') block=true}}
{{/liquid-if}}
Notice too I used use="fade" in the liquid-if which means I don't have to create a transition.
#jpoiri you can read more about the transitions here
I'm following Foundation 6 documentation to create an off canvas menu : http://foundation.zurb.com/sites/docs/off-canvas.html
Here is what I did :
<body>
<div class="off-canvas-wrapper">
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
<div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
<ul class="vertical menu">
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
</div>
<div class="off-canvas position-right" id="offCanvasRight" data-off-canvas
data-position="right"></div>
<div class="off-canvas-content" data-off-canvas-content>
<div class="title-bar">
<div class="title-bar-left">
<button class="menu-icon" type="button" data-toggle="offCanvasLeft"></button>
<span class="title-bar-title">Zurb</span>
</div>
<div class="title-bar-right">
<button class="menu-icon" type="button" data-toggle="offCanvasRight"></button>
</div>
</div>
</div>
</div>
</div>
</body>
But when I open the menu, here is what I get :
I can scroll it and see my test1/2/3/4, but why do I have this result?
What I want is the same as what we can see on foundation documentation when you click on 'Toggle Off-canvas'
Did I put my list in the wrong place?
I'm pretty sure my framework is up to date, and I've been following the documentation step by step, but it does not give as much informations as I would like to have
You have the menu in the right place and your example is equivalent to the examples provided in the Foundation 6 documentation.
This seems to be a bit of a design issue where the length of the Off Canvas menu is dependant on the size of the content. Because you have no content on the page, the menu is equal in height to the menu bar.
As soon as you populate off-canvas-content, the menu should appear as expected.
Click Here for a Demo.
Thank you for sharing your code. It is slightly different than the examples by ZURB for the Foundation 6 starter pages. ZURB uses "wrap" instead of "wrapper". I changed my code to match yours and voila! Their tutorial is at:
http://foundation.zurb.com/sites/docs/v/5.5.3/components/offcanvas.html
Yours:
<div class="off-canvas-wrapper">
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
ZURB:
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
I'm not really getting the rationale behind the overabundance of <a>s in the code at http://foundation.zurb.com/docs/components/buttons.html; and the lack of representation for the other elements.
Short of one mention, and one line, both under the Accessibility section, no mention is made of any other element (why not <button>, or <input> for example?). It almost seems as if (due to the overwhelming overrepresentation) the documentation were saying "we really designed this for <a>s". Is that really the case?
(Small aside: the line that mentions using other elements, I have a problem with: If there is no <a href=""> then simply add the tabindex="0" to the div or span to make it focusable. If a button is focusable, I expect to be able to trigger it with the spacebar. Unfortunately, when you've got a div or a span, you can't. So is this really useful, or even constructive?)
I get that you can use <a>s for cases where no forms are involved, but what of your standard "submit" button where a form is involved? Wouldn't using a <button> resolve all the issues that you would have using an <a>? 1. It's focusable. 2. When focussed, you can trigger it with the spacebar. 3. You can conveniently press <Enter> to submit the form. What do other folks use for your submit button/s?
The buttons tags are usable in foundation 5. There is not a lot of documentation on it but (and I tested it to make sure I was correct) the <button> tag works as normal.
The <a> tag is used on the example site sure, but that doesn't limit its use when working with it.
You should still use <button> with forms and use <a> for links.
If you look at adioso.com (they use foundation) and inspect their forms, they use buttons for functional uses outside of links.
<form class="flight_search" method="get" action="/search_form">
<div class="search_form_inputs">
<ul class="row">
<li class="columns large-3 small-12 medium-6">
<li class="columns large-3 small-12 medium-6">
<li class="columns large-3 small-12 medium-6">
<li class="columns large-3 small-12 medium-6">
</ul>
</div>
<div class="search_sundries">
<div id="passengers" class="awesome-search">
<div id="submit-wrap">
###<button id="submit-btn" type="submit" class="search_button" tabindex="9">Find Flights</button>###
</div>
</div>
</form>
Check the above code. The example website isn't a very solid representation of what foundation can do but play with it a bit and you'll see its a very solid framework.