I would like to make a div element navigable by arrow keys when JAWS is running. The div should not be navigable using the TAB key; so using tabindex is not applicable. Here is an example snippet of the html/reactjs structure. The two nested div should not be available to the accessibility API; hence the use of aria-hidden=”true”. The div
Tag: accessibility
focus() on element triggers keyup event
Can someone explain to me, why calling the focus() method on an element, triggers that elements keyup event, when the focus() method is called from an click event handler, but that handler is triggered by a keypress? Above is an example, that you can try out yourself. The expexted behaviour for me is, that when clicking or hitting enter on
How to add text around dynamically assigned aria labels with Vue JS
I am very new to vue.js and accessibility, I am trying to make an element be announced by the screen reader as (“This is ” + person.name). I was able to announce the person.name with :aria-label=”person.name” but I am not able to add text around this. How do I add text around the dynamically assigned :aria-label? Answer Did you try
Using v-html with message data — does Vue not support the element?
I am using Vue.js 2, my SDK is IntelliJ: I am trying to import HTML into a Vue.js file. The purpose is for the <title></title> attribute, since Vue doesn’t directly seem to support this. In the <template> markup, I have: In the data, I have a very simple message1: Interestingly, I can display message1 with “moustache” syntax, but it just
How to announce new content after ‘Show more’ button is clicked?
I have been trying to add VO support in an area that loads some additional content after user clicks Show more button (refer the screenshots attached). Required behavior: I need the VO to announce the info about additionally loaded elements, something like “What is a cookie? and 11 more items”. Tried: Method-1: used aria-live=”polite” aria-relevant=”additions” behavior: announces “What is a
How to change screen reader focus to vuetify modal once it opens?
I’m implementing adjustments for accessibility on a project and I need to make it possible to navigate through the page using only the keyboard. I am experiencing a problem with modals using the vuetify’s v-dialog component. When I try to change the focus of the page to the content within the modal for screen readers to announce to the user.
Can’t fully reset activeElement (focus for the Tab key) to its default position
OK, I’m trying to reset the activeElement from the middle of the page so that the tab key would start from the top like, the same way as the page is just refreshed. For that purpose (tested in FF and Chrome) I’m trying to use document.activeElement.blur() (from the browser console). As result, the selection of the <a href></a> gets visually
About implement single HTML page with multiple tabs via CSS with or without JavaScript aid
I am interested in building a web page with one single HTML file and multiple tabs. Since only one tab at a time can be selected, I thought that the most appropriate way to handle the user’s choice of which tab to show is via radio buttons, i.e. with a <nav> wrapping a <ul> wrapping a list of <li>s each
What should be role value of div in html after apply onclick on div
What should be the value of the role attribute when I apply onclick to a div. I read the documentation WAI-ARIA Roles, but not able to find any specific role value of a div. I am working in React and this component is inside a loop, on this component I have to go to another page when clicking on this
Accordion component keyboard commands
I have an accordion component which is working correctly using the ‘tab’ to navigate through the controls, and on ‘enter’ and ‘spacebar’ the accordion expands. I am trying to figure out a way to navigate to the next accordion using the ‘up’ and ‘down’ arrow keys. I am familiar with Javascript but I have not been able to achieve this