I have a div element with role="listitem". It contains multiple divs with some text inside. When he outer div is focused, I want a custom aria-label to be read instead of the inner texts. Here is my sample code:
<div role="listitem" aria-label="Hello World" tab-index="0">
<div> A </div> <div> b </div> <div> c </div> <div> d </div>
</div>
On JAWS and Narrator, it works as expected. On NVDA, it's reading the inner text.
On changing outer div to anchor tag, NVDA is reading correct aria-label, but I cannot do that in prod code.
NVDA seems to honor the aria-label for some roles but not others. It works for button and menuitem, it reads both the aria-label and the nested <div>s for checkbox, and ignores aria-label for listitem, as you mentioned.
This seems to be a current bug. See https://github.com/nvaccess/nvda/issues/7807
Related
To make a span into a clickable link.
I have made a span that contains only a background image (as part of a Gilder/Levin image replacement technique) into a clickable link, and it seems to work fine -- but, so far, that is only on my own desktop computer, and on Chrome, Opera, and IE 11.
Is this viable?
<div id="logo">
<a href="[absolute url]">
<span></span>
</a>
<h1>page name</h1>
</div>
It works on my computer, with Chrome, IE11 and Opera. Will it work universally?
While it might look okay in most browsers, you're using the <a> element incorrectly, as what goes inside it should be a meaningful label. The proper thing to do would be to wrap the entire <h1> in the link, or to put the <a> within the <h1> (both are valid HTML5).
<a href="[absolute url]">
<span></span> <h1>page name</h1>
</a>
But judging from your comments, it's probably too early for you to start worrying about image replacement techniques an web semantics when you're still figuring the syntax out.
What's the point of image replacement techniques and why using an empty <a> tag is bad?
The Gilder/Levin image replacement technique involves adding non-semantic elements to a page (such as <span> elements) and using CSS to replace them with icons, so that these elements are ignored by screen readers. After all, an icon next to a menu button might make the button more visible for someone who can see, but the icon becomes redundant when you're blind and are using a screen reader which will read the text of the button out loud anyway. This also might make your website easier to parse by search engines.
However, in the original code, you didn't put any label on the link (actual text between the <a> and </a>), therefore making it especially confusing for screen readers and robots to know what this link is supposed to be. The entire title should be within the <a> element in this case, allowing the whole line to be clicked to follow the link. It's definitely not a good practice to use an empty <a> element, and the fact that there is a <span> within it changes nothing.
And since the idea of leaving an <a> element is semantically absurd, I haven't found any reliable place documenting the behavior of such an element across browsers.
wasn't pretty sure what you are asking for:: or trying to achieve.
3. wrap span in a href tag.
2. span onclick() function with javascript
1. span:hover with css.
<div id="logo">
<a href="[absolute url]">
<span>this span is now like link text.</span>
</a>
<h1>page name</h1>
</div>
<div id="logo">
<span onclick="myFunction()">this span is now like link text.</span>
<h1>page name</h1>
</div>
<style>
span:hover{color:red;}
span:active {color:green}
</style>
The css one isn't really click stuff.
Yes, it's a reliable way to put <span> or <img>(or any element you want to be a link) in a <a> tag.
click here for Definition and Usage
The tag defines a hyperlink, which is used to link from one page
to another.
The most important attribute of the element is the href attribute,
which indicates the link's destination.
So I have an HTML button, with 2 divs inside it - each of which displays certain text. Sample code below. I need to insert some text between the 2 divs such that it is only to be read by screen readers and isn't needed visually speaking. This is a large shared component so I can't really modify the control itself, hoping to just tweak the accessibility part:-
I tried using aria-label on div2, and arialabelledBy keeping the label text hidden on the screen (display: none).
<button>
<div id="div1" >Main text here</div>
<div id="div2" >sub text here</div>
</button>
In the above example, I need the screen reader to read something like:-
"Main text here, in between, sub text here". How do i represent "in between" above. I tried aria-label \ labelledBy but those get ignored by Narrator.
You need the additional text in its own <div> and then use a class to visually hide the element but still allow screen readers to read it. This is a very common practice. See What is sr-only in Bootstrap 3? for an example of a class that will do this.
Also check out "Invisible Content Just for Screen Reader Users" by WebAIM.
So you'd have something like:
<button>
<div id="div1" >Main text here</div>
<div class="sr-only" >in between</div>
<div id="div2" >sub text here</div>
</button>
I am just becoming more acquainted with HTML/CSS. I have recently learned of the css-grid layout (intro here), and I had been using it to style my html buttons, as in the following image:
I have a few labels and text inputs, but most importantly, setting display: grid in the encompassing div allows the 3 button's on the right to be 1) lined up, and 2) possess that gray square style.
However, as soon as I envelop the third button in <A>...</A>, it loses the previous styling, and I get the following (out of line, and defaulting to the normal button style)
How could I force the button enclosed in <A> to display the same style as before?
I am including a Codepen link that displays the same problem.
<h1 class="Hello">Hello</h1>
<div class="wrapper">
<button class="1">Button 1</button>
<button class="2">Button 2</button>
<button class="3">Button 3</button>
<a class="wrapper"><button class="4">Button 4</button></a>
</div>
I just tried adding the wrapper class to the and it displayed correctly,
You can maybe try it to see if it works
Having a button inside <a> tag is not valid HTML5.
HTML5 Spec Document:
The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g., buttons or other links).
However adding
a button{
height: 50px;
}
to your codepen fixed the problem.
I have anchor tag defined as below:
<a href="www.abc.com">
<div tabindex="0" aria-label="XXXX">
...
<div>
</a>
Currently, the screen reader reads the content of href in <a> tag. However, I don't want the href to be read, but the content in the aria-label in the div.
I would like to know what is the right way to achieve the goal?
Your <div> does not have any semantic meaning so the aria-label will essentially be ignored. See https://www.w3.org/TR/using-aria/#label-support. Specifically, the third last bullet point:
Don't use aria-label or aria-labelledby on a <span> or <div> unless its given a role.
You do not want tabindex="0" on an element that is not actionable/interactive.
Just put your aria-label on the anchor itself:
<a href="www.abc.com" aria-label="XXXX">
Note that if there is any visible text in your anchor link (you have "..." in you sample code so I wasn't sure if there was any text there), make sure the aria-label contains that same text, plus any additional text that you want. If you don't, then speech interface users may not be able to select your link.
remove aria-label from the elements or you can use aria-hidden="true"
Screen reader cannot read me
To know more about this check here
Add the attribute aria-hidden=“true” to the <a> to hide it from screen readers. That will hide its child elements as well, so add aria-hidden=“false” to the <div> to un-hide it.
Problem: I have a div that is nested inside a span tag with the role of button, whenever the span button is focused, what I want to have happen is the screen reader 'read' the text in the nested div --> p tag when the span receives focus
<span role="button" tabindex = 0>
<div id= "nestedDiv" aria-hidden ="false" tabindex = 0>
<p tabindex =0> Read this text </p>
</div>
</span>
I tried different screenreaders and different browsers, same issue, it doesn't read the div, it just skips over to the next readable element.
I tried this in NVDA + firefox and it reads "read this text. button" when I tab to the span. Which browser are you having trouble in?
You could try adding an ID to the paragraph such as <p id="foo"> and add aria-labelledby="foo" to the <span>.
However:
Karl Brown's comment is 100% accurate - it's best to use semantic markup. Does the span do something? If so, it should be a button. Does it bring you to a different page? If so, it should be an anchor.
Also, why so much tabindex? It takes three tabs to get outside of this element, which is not good. If you use proper semantics you wont need tabindex and you wont need any aria attributes.