What's the appropriate ARIA attribute to use for an anchor tag without href?
<a class="no-underline h-100" aria-label="Fund Balance" id="card0">
......
</a>
This is getting flagged when running against axe DevTools but w3.org suggests I should be able to use any aria attributes.
Global aria-* attributes and any aria-* attributes applicable to the allowed roles.
https://www.w3.org/TR/html-aria/#docconformance
Any help with this would be greatly appreciated.
Thanks.
It depends on what you're trying to do with the anchor tag.
If the anchor tag is missing a valid href attribute, the screen reader doesn't interpret it as an anchor tag. It also isn't included in the page tab order, so it's not keyboard accessible.
If you want a screen reader to interpret your element as an anchor tag without using an href, then you can explicitly add role="link" as well as a tab stop using tabindex="0". But, as others have pointed out, it's not clear why you'd want to use an anchor tag if it doesn't link to anything - perhaps you should consider using a different element.
Otherwise, just add a valid href attribute such as href="#" which will make the link visible to screen readers and will make the link keyboard accessible.
Related
I am relatively new to working with JAWS and trying to fine tune some discrepancies between Firefox and IE when working with it.
Currently, I have a crystal reports popup window that has two toggles, for example, one is for find. That once it's triggered, the user can type their search string. This div has an aria-role="button"as well as an aria-pressed="true/false" value. However, in IE11, JAWS is not reading back whether the button is pressed or not like Firefox does.
Any insight? Has anybody else hit this issue?
<div tabindex="0"
title="Find"
class="someClassName"
id="someID"
role="button" aria-pressed="false">...img...</div>
Note: I've replaced the lengthy classes and auto-generated ID.
It might be a JAWS bug. However, basically it is not good to do things like <div role="button">:
Do not do this:
<h1 role=button>heading button</h1>
Do this:
<h1><button>heading button</button></h1>
© Www Consortium, The second rule of ARIA use from here.
So, in your case I'd use a <button> rather than a <div>.
Actually, the first rule of ARIA use also applies and maybe is even more appropriate here:
If you can use a native HTML element [HTML 5.1] or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property
to make it accessible, then do so.
I accessibility guidance for my CSS-only tooltip — http://chantastic.github.io/tip.css/
This is how you use it:
<span data-tip-content="this is a tip" data-has-tip>Hover here</span>
The current API
To avoid the browsers default rendering of title, I'm using data-tip-content for tooltip text. By doing that, I'm also losing the accessibility benefits of title (Related SO Question).
My Current Work around
I'd like to add aria-label as a content source, making use look like this:
<span aria-label="this is a tip" data-has-tip>Hover here</span>
My Question
Does aria-label make sense in this case? Is there an accessibility interest that this will not cover?
I am very new to accessibility and would appreciate experience-based feedback. Thank you.
If you think there is a better solution, please consider these constraints:
CSS-only. Many JS-tooltips simply remove and restore the title-attr on mousenter/mouseleave. I'm not interested in a JS solution.
No Additional Markup. This library is intended to be minimal and simple. It uses :after, :before, and content to avoid the requirement for additional markup blocks.
Two-Attribute API. This library only requires the addition of 2 attributes.
The aria-label attribute specifies a label for the element, typically an accessible name for an input element that would otherwise lack an explicit label, because the user is expected to infer its role from the visual context. Although its description refers to the HTML title attribute and tooltips, it’s not really meant to be used for things like CSS tooltips. Rather, it is useful for labelling elements instead of using the title attribute, which has some drawbacks in such use.
However, there is unfortunately no ARIA attribute that would be more suitable. There is odd asymmetry: ARIA has aria-label for direct labeling and aria-labelledby for indirect labeling, i.e. for specifying an element that contains a label for the current element, but for descriptions, there is just the indirect aria-describedby.
So this boils down to using aria-label, given your current approach and markup. In a different approach, where the tooltip text is element content and not an attribute value, you could use aria-describedby.
P.S. The attribute data-has-tip looks redundant here, since you can use, both in CSS and in scripting, just the presence of a data-tip-content attribute instead.
wanted to put a social icons on my site, when looking for some i ran across this site:
A site with a social icons that i want to adapt
then i saw that they are not images:
I don't know that css attribute "content"- what is it?
what is \e006, is it a font? looked at the site resources but didn't see anything related.
and looked for it on google "css content attribute" and "css \e006" But no luck.
The ::before selector inserts content before the content of the selected class that is .icon-instagram. We use the content property to specify the content to insert. You can only use the content property with pseudo-elements like :after and :before.
In your case, \e006 is a UTF-8 character. What happens is, whenever something has the class .icon-instagram applied to it, it will append this character before it. This is what it means by the pseudo-element :before. It might be a glyphicon. (Instagram icon).
I have a html page and i insert a iframe in this page.
I have a problem with iframe contants. In iframe show a button which have link to go on website anywhere, i want to that button does not show how set in CSS
{display: none}
but how in iframe button no detect any css rule for displaying none.
Help me CSS MASTERS
You must use seamless attribute:
This Boolean attribute indicates that the browser should render the
inline frame in a way that makes it appear to be part of the
containing document, for example by applying CSS styles that apply to
the <iframe> to the contained document before styles specified in that
document, and by opening links in the contained documents in the
parent browsing context (unless another setting prevents this). In
XHTML, attribute minimization is forbidden, and the seamless attribute
must be defined as <iframe seamless="seamless">.
The problem is that browser support is currently negligible. Meanwhile, you can watch Seamless iframes. The future, today!, a slideshow which can give you some ideas of how to implement those functionalities.
I need a way to make an entire DL element clickable with only one anchor tag, that validates as XHTML. As in:
<a>
<dl>
<dt>Data term</dt>
<dd>Data definition</dd>
</dl>
</a>
This currently doesn't validate as XHTML as the anchor tag cannot contain the DL. The only way I can get it to validate is if I make two anchor tags and place them inside DT and DD. As in:
<dl>
<dt><a>Data term</a></dt>
<dd><a>Data definition</a></dt>
</dl>
I'm trying to avoid this, as it would result in two href attributes requiring maintenance, introducing the possibility they could become out of sync.
Suggestions?
You cannot do this and still validate. You will have to make a choice:
Use non-valid markup
Use inner anchors
Use JavaScript
I recommend #2 as it is valid and will work for clients without JS.
Two years passed but someone may stumble upon this.
New list of solutions:
Use non-valid markup
Use inner anchors
Use JavaScript
Use HTML5 doctype instead, it validates nested elements into <a> tags