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.
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>
I have few dropdowns on my page, with buttons opening and closing a dropdown. Everything goes well after initial page load, but after changing to a different page, the dropdown opens with a click, but never closes. It seems that button's aria-expanded is stuck on true and the dropped down div has classes collapse open, which tries to collapse but won't ever do it (clicking the button gives the div collapsing class and then returns).
I have no idea why this happens and and if it's got to do with Liferay, freemarker, css or any of those...
This is my application display template:
<div id="a_language_selector">
<button
aria-controls="a_language_list"
aria-expanded="false"
role="button"
data-toggle="collapse"
data-target="#a_language_list"
>
<!-- CHANGE THIS -->
<#liferay.language key="EN" />
</button>
<ul
id="a_language_list"
class="panel-collapse collapse"
aria-labelledby="a_language_list"
>
<#if entries?has_content>
<#list entries as navigationEntry>
<li aria-label="${navigationEntry.getName()}">
<a href="${navigationEntry.getURL()}">
${navigationEntry.getName()}
</a>
</li>
</#list>
</#if>
</ul>
</div>
The answer was found and has to do with Liferay's own javascript (SennaJS)!
Changing a page in Liferay doesn't update the whole site and leaves old information lying around the session, breaking the collapsing.
I added this line to my portal-ext.properties and while it now loads after all page changes, it works well!
javascript.single.page.application.enabled=false
More information found here (help.liferay.com)
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>
Please open Microsoft Edge and go to this site here: https://www.bodecanada.com/
Click on the Scroll button at the bottom of the blue box at the top of the page. Notice that it doesn't scroll further down the page. If it does, try it a few times. It will eventually stop working. This bug is only replicable in Edge.
We developed this site in Vue.js. This is the code for the scroll button:
<div id="scroll-wrap">
<a #click="$vuetify.goTo('#section2')" class="white--text" style="margin:0 auto;">
<p class="white--text" style="font-size:12px;">Scroll</p>
<v-icon color="white" style="width:100%; text align:center;">expand_more</v-icon>
</a>
</div>
Can anyone tell why it won't always scroll in Edge? Thanks.
You could directly use <a> tag href attribute link to an element with a specified id within the page.
<a href="#section2" #click="$vuetify.goTo('#section2')" class="white--text" style="margin:0 auto;">
I have a dropdown on my top menu, and for certain browser window widths, the dropdown gets much too big and moves way over to the left. I'd like to have it always be the same size and stay in the same position, even if that would mean going off the edge of the screen. (Currently it moves even before it would go off the edge though)
Album with screenshots of correct/incorrect behavior
Here is a fiddle showing the behavior. Code for the dropdown is:
<a href="#"
data-dropdown="drop1"
aria-controls="drop1"
data-options="is_hover:true;"
aria-expanded="false"
class="button custom">
Link2
</a>
<ul id="drop1" class="tiny f-dropdown content" data-dropdown-content aria-hidden="true" tabindex="-1">
<li>Drop1</li>
<li>Drop2</li>
<li>Drop3</li>
</ul>
Thanks!
This works well for me, hope it will resolve your issue.
Remove width:100% from the class
.f-dropdown.content{
width:auto!important;
}