I'm doing something with NVDA (the screen reader) and with aria too, the thing is that i want to make nvda able to read the content that is in a button as a text. For example, i want it to say "Log in dialogue" instead of "dialogue" in the NVDA speech viwer when click on it.
I tried with many aria roles and do things with aria-describedby, but i can't make it work, can someone help me with this? thanks. Here is the line that i'm trying to modify
</div Login Button
Try this:
<a href="%" role="button">
<div aria-hidden="true" class="login-icon"></div>
Login Button
</a>
role="button" will make the anchor link work as a button for screen-readers. When you have an anchor tag with text inside it, you need not give aria-describedby or aria-labelledby. If you want the screen-reader to read out something other than the text you put in the anchor tag (in your case 'Login Button'), use aria-label if its a small text, otherwise you can use aria-labelledby if you want to reference any particular div or h2 or h3 with an id.
If you want to use aria-label, you can do this:
<a href="%" role="button" aria-label="Text other than Login Button">
<div aria-hidden="true" class="login-icon"></div>
Login Button
</a>
Related
I have the follwing html on my site's header
<header>
<div class="logo_container">
<a href="/">
<img src="xxx" alt="">
</a>
</div>
<nav class="">
<ul>
<li>
<a href="xxx" title="xxxx" >xxx</a>
</li>
<li>
<a href="xxxx" title="xxx" >xxx</a>
</li>
<li>
xxx
</li>
<li>
</ul>
</nav>
<div class="toggle_menu" role="button" aria-label="open menu" tabindex="1"><em class="fa-solid fa-bars"></em>
</div>
</header>
At this header the nav is hiding on mobile device and shows up when the user press the div.toggle_menu.
The way this is read by VoiceOver screen reader of iphone 14, is "Button, open menu, end banner".
I would like it to say just "open menu". So I remove the role button and left only the aria-label="open menu".
Now it reads just "End of banner". Νο "Open menu" or "button".
I am quite new on aria and I am not sure what do I have to do.
Any help is appreciated.
To make it short: You shouldn’t do that. There is a good reason screen readers read the way they do and you should respect that. Its users rely on that.
That being said, it’s great that you are diving into ARIA and caring about screen reader’s experience.
Role
The role is very important for screen reader users, to know what to expect in terms of interaction and keyboard control. Roles communicate interaction patterns.
The whole point of ARIA is to add meaning to otherwise meaningless elements, where you cannot use the proper HTML element.
By removing the role, you are leaving a meaningless <div>, which might be focusable, but it would be way less intuitive to screen reader users to know how to interact with it. Assistive technology couldn’t know what it’s good for, voice control software would probably not let you click on it.
The accessible name provided by aria-label cannot be used on any element. The role determines if the name should (or must) be used or not. VoiceOver will not announce names for meaningless elements like <div>.
Tabindex 1
By adding tabindex="1", you are putting the button before any other focusable page contents, which messes with the expected focus order.
I guess you placed it so that you could have the button after the navigation. But a large part of screen reader users are sighted, and rely on contents exposed by their screen reader to match with what they can see. The logo comes before the button, and it would be irritating if it’s not focused first.
Refer to the ARIA Authoring Practices Guide
When it comes to your toggle button, you should implement the ARIA pattern, which requires not only the role button, but also aria-expanded to explain to assistive technology that the button opens and closes something, and its state.
The button should be before the contents that get expanded.
See Disclosure (Show/Hide) on the ARIA Authoring Practices Guide (APG)
<header>
<div class="logo_container">
<a href="/">
<img src="xxx" alt="Home, ACME">
</a>
</div>
<button class="toggle_menu" aria-label="open menu" aria-expanded="false"><em class="fa-solid fa-bars"></em></button>
<nav hidden>
<ul>
<li>
xxx
</li>
<li>
xxx
</li>
<li>
xxx
</li>
<li>
</ul>
</nav>
</header>
Hello I have been playing with overrides and I decided to make language overrides for pagination Next and Previous Text buttons but the issue is when I make language override using for example:
CODE: SELECT ALL
<i title="Next article" class="fa fa-fast-forward"></i>
or
plain
<i class="fa fa-address-book" aria-hidden="true"></i>
I get the icon but also get "> displayed in front of it.
Screenshot for clarification
What am I doing wrong here?
Thank you!
check your tags and attributes inside the tags if they are properly closed, e.g. there can be some mistake like
<i title="Next article" class="fa fa-fast-forward">"></i>
Below is my HTML
<div id="slectrole" class="collapse in" role="tabpanel" aria-labelledby="selectrole">
<div class="panel-body">
<div class="dropdown">
<input class="search-control jsSayt jsRolesFreeText" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Eg: Delivery, BPO, Driver'" placeholder="Eg: Delivery, BPO, Driver" value="" aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" type="text">
<ul class="jsSaytList jsRolesFilter">
<li id="jsFilter_subRole_1" class="checkbox-inline jsFilterSubRole jsRoleValue_1" data-value="Accountant">
<input id="Accountant" class="radio-custom jsFilterRadio jsRole" value="Accountant" name="Role" data-roleid="1" type="radio">
<label class="radio-custom-label" for="Accountant">Accountant</label>
Below is the code I am using to click the radio button:
wait.until(EC.visibility_of_element_located((By.XPATH, "//div[#id='slectrole']/descendant::li[#data-value='Accountant']/label[#for='Accountant']")))
driver.find_element_by_xpath("//div[#id='slectrole']/descendant::li[#data-value='Accountant']/label[#for='Accountant']").click()
The code runs ok but it does not select the radio button.
OK, so I can understand your frustration, I tried your code and wasn't able to .click() (select) the element when located via xpath. See bellow print-screen:
As you can see, it was only clicking the radio-button when issuing a .click() via a CSS-located element.
Question No.1: Are you bound to the xpath locator strategy in one way or another?
If NOT, then just use a regulat CSS selector: 'input[id="Accountant"]'.
Else, you have to figure out what is wrong with the website you are testing, or switch to another WebElement locator strategy. (e.g.: ID, Class, CSS, LinkText, etc.)
If you would opt to go with the CSS locator-strategy, then your code would look like this:
wait.until(EC.visibility_of_element_located((By.CSS_SELECTOR, "label[for='Accountant']")))
driver.find_element_by_css("input[id='Accountant']").click()
Alternatively, you can try to click on the <label> tag attached to the radio-button, which in my console works the same way:
wait.until(EC.visibility_of_element_located((By.CSS_SELECTOR, "label[for='Accountant']")))
driver.find_element_by_css("label[for='Accountant']").click()
Explanation: In a real-life scenario, you can select the radio-button both via the actual radio-button, or via its label. That's why your solution worked.
Question No.2: Why are you using such a long xpath selector?
In order to have a optimal selector, you should ALWAYS go with the shortest, combination of tags/attributes that will UNIQUELY identify your target element. Else you will be susceptible to website changes, flaky test cases, etc.
You can perform the click on the drop down and then wait for the radio button to appear, before clicking it. Hence, try following:
driver.find_element_by_xpath("//div[#id='slectrole']/div/div[#class='dropdown']/input[1]")).click()
wait = WebDriverWait(driver, 10)
wait.until(EC.visibility_of_element_located((By.XPATH, '//div[#id='slectrole']/descendant::li[#data-value='Accountant']/input[1]')))
driver.find_element_by_xpath("//div[#id='slectrole']/descendant::li[#data-value='Accountant']/input[1]").click()
Let me know, if above code works for you.
Is it possible to navigate using keyboard to the drop down menu using arrow keys(up/down) for JAWS users?
Here is the code:
<div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Dropdown link1</li>
<li>Dropdown link2</li>
</ul>
</div>
Steps:
1. open JAWS 15.0
2. focus on button with drop down menu
3. Press enter key
4. Press Up/Down key to move focus
Expected results:
Focus should be visible
Actual results:
1. Focus is invisible after JAWS started
2. Focus is visible if JAWS not start
http://jsfiddle.net/fewu2/t8q71q8f/
A good way to prevent Virtual Cursor mode from becoming activated when pressing "up" or "down" buttons via the keyboard is to use the role of application in a parent element.
If you are using Javascript to control navigation between the <li> elements, try this:
<div role="application">
<div class="btn-group" role="group">
...
</div>
</div>
Try giving your dropdown option li elements a role o menuitem.
In NVDA at least, I believe, which works very similarly, coming across a dropdown like this will trigger it to go into what Jaws would call "forms mode", which means you can use the arrow keys.
If this doesn't work, try moving the user's focus after clicking that dropdown button onto the first li of the menu.
I do have some code that handled this satisfactorily, and I remember that one of these were what fixed it for me. I'll go find out specifically which, if not both.
HTH.
I have text that I am displaying from a database. I would like to have a portion of the text displayed on page load (up to a certain character number), and then display the rest of the text using the "collapse" function from Twitter Bootstrap. I am unsure of how to do this. This is what I have so far:
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">See More...</a>
<div id="collapseOne" class="accordion-body collapse"><span class="description_text">{{$artist->description}}</span></div>
This will display the entire text contained in the "description" field on the click of the "see more" link. What I would like to have is a portion of the text showing on page load, and then the rest displayed (and toggled) on the click of the see more button. It would also be nice to have the "see more" button change to "see less" when the full text is displayed.
You can run PHP inside the blade tags, so;
<a class="accordion-toggle" data-toggle="collapse"
data-parent="#accordion2" href="#collapseOne">
{{ substr($artist->description,0,30).'...' }}
</a>
The final substr parameter being the number of characters to include
To change the link text, you will need to write some jquery to catch the show.bs.collapse callback and replace the innerhtml of the link.
This Twitter bootstrap 3.0 icon change on collapse is similar but is changing an icon.