This is a very (very) specific question, but would it be appropriate to use the alt attribute for a pre tag when using that to show ASCII art? It's essentially like an image (which wouldn't be intelligible using a screen reader), so using alt makes sense.
<pre alt="A cute little blob creature">༼ つ ◕_◕ ༽つ</pre>
Would is be read by a screen reader? Would this be appropriate or good form?
(I could imagine other situations where this might arise, like using a typographical object to denote a particular action, such as a "home" link.)
The aria-label attribute exists for this purpose.
<pre aria-label="A cute little blob creature">༼ つ ◕_◕ ༽つ</pre>
For more information, check out this MDN article on it.
You have different options to consider as screen readers are just one step in the big journey of accessibility.
The title attribute
The alt attribute is specific to img and area tags. For other element, you can use the title attribute which will give the use access to a tooltip in many browser implementations:
See HTML5 doc:
The title attribute represents advisory information for the element, such as would be appropriate for a tooltip. On a link, this could be the title or a description of the target resource; on an image, it could be the image credit or a description of the image; on a paragraph, it could be a footnote or commentary on the text; on a citation, it could be further information about the source; on interactive content, it could be a label for, or instructions for, use of the element; and so forth. The value is text.
Warning! Relying on the title attribute is currently discouraged as many user agents do not expose the attribute in an accessible manner as required by this specification (e.g. requiring a pointing device such as a mouse to cause a tooltip to appear, which excludes keyboard-only users and touch-only users, such as anyone with a modern phone or tablet).
The title attribute might be used with some conditions: using it on a targetable element (using tabindex=0) so that it can be accessed with keyboard, using javascript to show the tooltip when the browser doesn't, and giving visual clue that we can access the definition by focusing the element (underlying, question mark, ...).
The aria-label attribute
Many screen readers do not read by default the value of the title attribute, so you are encouraged to use the aria-label which is somehow specific to screen-readers. As people not using screen reader won't benefit of an aria-label, you have to use it in conjunction with the title attribute.
Note that you can use two different text as the title can be used as a description when aria-label is more a text replacement.
<pre aria-label="Welcome!" title="A cute little blob creature">༼ つ ◕_◕ ༽つ</pre>
Ignoring it.
You can also consider that this is meaningless to a screen reader, and consider it as a purely decorative text using the aria-hidden attribute.
<pre aria-hidden="true">༼ つ ◕_◕ ༽つ</pre>
Related
For my study project I'm currently checking an example website for WCAG 2.1 compliance.
Checking it with different tools I still get some Warnings I don't understand or know how to solve.
One of the warnings is "title on non interactive element": I have some title="" attributes on <div>, , and elements and get a Success Criterion 3.3.2 Labels or Instructions warning.
I know the title attribute is not always read by the screen reader. But if I don't expect it to, where's the problem? I even tried to add an aria-label="" with the same content as the title but still get a warning for the title attribute.
<div class="criterion_secion" id="criterion_214" title="Success Criterion '2.1.4 Character Key Shortcuts'" aria-label="Success Criterion '2.1.4 Character Key Shortcuts'">...</div>
I believe that the warning is given because it’s not expected to have a label or a title on a non-interactive element, like a div.
A div is by nature a non-interactive element. We could make it interactive through the tabindex attribute or by giving it a role. However, I would advice not to do that and just use the div for what it's intended, as a container.
It make sense your tool are flagging title on non interactive element as a warning, because a lot of users can't access to your content in the title attribute. A warning doesn't mean it's automatically a failure.
The aria-label attribute on a div (without role attribute) is useless. This element have no semantic and it's not supposed to have an accessible name.
ARIA & Tooltips: 2 commonly misunderstood attributes
There is a very easy solution to this issue: remove both title and aria-label attributes and include their content that reads "Success Criterion '2.1.4 Character Key Shortcuts'" inside the DIV element, if not already included.
aria-label
The aria-label attribute defines a string value that labels an interactive element.
First of all, ARIA is for the screen readers only and it overwrites the accessible name of the element.
For example,
<label for="name" aria-label="surname">Name</label>
<input id="name" type="text" />
will be announced as "surname" and the screen reader user will never understand it is for the input field that collects users' "name".
As for the non-interactive elements, a paragraph never needs any aria-label for the simple reason that you can always include whatever information you want inside it. Besides, it may not be read or may confuse your users as a non-interactive element that acts like an interactive one.
It is also important to know that repeating what is already available as text with an aria-label is simply a nuisance, making the screen reader say the same thing twice or even thrice sometimes, along with a tooltip.
Tooltips
Tooltips are intended for sighted users. They provide some extra information that was not made available elsewhere. Examples from Mozilla.
It is helpful to understand these:
Tooltips are not accessibility features
Repeating what is already available as text using the title attribute helps no one and annoys screen reader users. It is simply bad practice.
Here is a comprehensive resource that will probably make you think twice before using another tooltip: If you want to hide content from mobile and tablet users as well as assistive tech users and keyboard only users, use the title attribute.
I am making a table using HTML. It needs to meet WCAG standards, but I am having issues understanding what is an acceptable caption for a table. Can I use <h1> and aria-describedby instead of a <caption> element?
I have followed a W3 Web Accessibility tutorial - all of their examples meet WCAG. Though it seems like my table doesn't meet WCAG H39 Using caption elements to associate data table captions with data tables.
Based on Approach 2 from W3 this is what I currently have:
<h1 id="tableHeading">Table of requests</h1>
<p>Some other text that is relevant to the page</p>
<table aria-describedby="tableHeading">
....
You first have to understand that elements can have an "accessible name" and an "accessible description". The "accessible name" is often just referred to as the "name" and is what assistive technologies use to refer to the element. For example, the name is what is announced by a screen reader when you navigate to the element and the name is what a speech interface user would say to select the element ("click <name>").
In your example, which refers to Approach 2 from W3, aria-describedby is setting the "accessible description" of the table. The <caption> is what sets the accessible name. Note that the W3 example sets both and not just aria-describedby.
So, if you only use aria-describedby and not also a <caption>, then you are only setting the description of the table. The table won't have a name for the screen reader to announce but it will still announce the description.
So the answer to your question is, "not exactly". You can use an <h1> and aria-describedby but it does not replace <caption> because the caption is the accessible name of the table. But you can tweak it a bit and use <h1> and aria-labelledby instead of a caption to set the accessible name.
Note that you can have a <caption> that is not visible so that the accessible name is set (and the screen reader announces it) in case you are worried about the aesthetics of the page and don't want a visible caption. Visible captions are a best practice but you can certainly hide it if needed. But don't hide the caption with CSS display:none. Instead, hide it with CSS that essentially sets the size to 1 pixel using something like an "sr-only" class.
I've tested your example in Chrome 94 using JAWS 2020 and NVDA 2021.2 and I can't see any problem with using an <h1> tag with aria-describedby on the <table> element instead of using <caption>. Both screen readers announce the <h1> with aria-describedby in exactly the same manner as the native <caption> element, and treat the <h1> text as the table's caption when the <caption> element is removed.
Many applications use custom table layouts where <caption> is not applicable, so they instead rely on aria-labelledby or aria-describedby to name the table and describe its contents.
In my opinion, the WCAG recommendation is there to ensure that developers use standard HTML5 elements as much as is practical, but your method of using <h1> and aria-describedby achieves the same effect. So, use standard HTML5 elements wherever possible; where it's not possible (i.e. you don't have control over that portion of the code) you can use ARIA to achieve the same effect for screen readers.
What is the use of the title attribute on a html element?
<div class="myDiv" title="This is the title"> Stuff </div>
Is it intended to be used as a tooltip? Does it have any further use?
Pretty much. The HTML spec calls it advisory text, but it uses the word "tooltip" as well, because that's how it is typically represented:
The title attribute represents advisory information for the element, such as would be appropriate for a tooltip. On a link, this could be the title or a description of the target resource; on an image, it could be the image credit or a description of the image; on a paragraph, it could be a footnote or commentary on the text; on a citation, it could be further information about the source; on interactive content, it could be a label for, or instructions for, use of the element; and so forth. The value is text.
Its role in relation to the content depends entirely on the context given by the content, but in general it serves as optional, supplementary information for that content.
Title attribute is for tool tip. IN title attribute we can pass some text to tell the user for what purpose that particular element is.
This topic is already well explained. But it is important to remember that using the title attribute is not very useful when it comes to HTML accessibility and usability. The use of this attribute is neither recommended by W3C. In W3C words:
Relying on the title attribute is currently discouraged as many user
agents do not expose the attribute in an accessible manner as required
by this specification (e.g., requiring a pointing device such as a
mouse to cause a tooltip to appear, which excludes keyboard-only users
and touch-only users, such as anyone with a modern phone or tablet).
If you give an object a Title, try hovering your mouse over it, It will show a subtext which contains the text you set as title.
"The title attribute allows the author to provide extra information about any element on a page."
Typically, this attribute’s content is rendered as a tooltip that appears when the user hovers the cursor over the element to which the title is applied.
Yeah.. It is mainly intended for tooltip... But also we are using for identification.. Whenever two or more divisions are placed one behind other, to identify each one we can use that.....
The title attribute is a descriptor, like the alt attribute for images. It is not required, but would be good practice to use where it makes sense. An old school example might be if you have a table of information on your page. Adding the title attribute to the table tag with a brief notation of what the table is (e.g. 2014 Daytona 500 Race Results) would make sense.
Once upon a time, search engines treated the contents of title attributes as content. I don't believe they do anymore (though I'm not 100% sure) though.
Hope that helps!
I wanted to know if adding a 'title' attribute is semantic relevant on a 'img' tag. I already always use the 'alt' attribute to respec the W3C spec.
And if yes, is the content on the 'title' attribute have to be different from the 'alt' one ?
The title attribute can be used as semantic, i.e. as relating to meaning. As such, it is defined to be an advisory title, and browsers may make its value optionally available to users, e.g. as a tooltip on mouseover or as a cue spoken by a speech browser. This means that it can be used for a multitude of purposes, semantic or other. It is up to you to decide whether you use it to describe the meaning of the image, or to give authorship information, or e.g. just to show a name for the image (the name may or may not describe the meaning).
Search engines may treat the title text as relating to the image, possibly causing a page to appear in image searches when words appearing in that text are used. The details of such processing have not been disclosed and probably vary from one search engine to another.
There is no reason why the value of the title attribute should not be the same as the value of the alt attribute. They have different purposes, but sometimes the same text can serve both. For example, if the image contains a person’s signature, the alt attribute should probably contain just the name in the signature, and the title attribute could contain the same (e.g., to help people who can see the image but cannot read the name easily), or it could be more explanatory, e.g. title="Joe Q. Public (signature)".
Just to expand a little about what #SLaks said in their answer. The title attribute can also help with SEO and expressing more about what a web page has to offer. Just a tid bit to add is all.
The title attribute can be used to add a tooltip to any HTML element, including <img>.
It can be, but does not need to be, the same as the alt attribute.
its relevant. alt attribute is for useragents which not display images, in this case it will show the alt attribute. alt attribute is required for a responsive webdesign (WCAG). title attribute are optional for tooltips and this must be not the same as alt.
I use font-awesome and display their fonts like that:
<i class="icon-lock"></i>
This will display a nice little lock symbol. For the user to know what exactly that means, I tried adding attributes such as title and alt, but to no avail.
Is there any attribute I can use for the <i> tag that executes the same task as alt for images and title for links?
You can use the title attribute on an i element, like any element, e.g.
<i class="icon-lock" title="This symbolizes your being locked inside"></i>
Whether it helps is a more difficult issue. Browsers usually show the title attribute value as a “tooltip” on mouseover, but why would the user mouse over the icon? And such tooltips are of poor usability; so-called CSS tooltips often work better.
Screen readers may give the user optional access to title attributes, but I’m not sure what they do with elements with empty content.
With the advance of WAI-ARIA, when using font icons, you probably should use a combination of the following to improve accessibility:
The role presentation to remove implicit native role semantics of the element. This is especially important if you (ab)use an element with a native semantic to provide icons, as this is the case in your example using the i element (which, according to the specs, "represents a span of text in an alternate voice or mood [...]").
An aria-label to provide a string value that labels the element -or- a native HTML title attribute if you are OK with the browser displaying a tooltip when hovered.
An aria-hidden attribute to hide generated content from assistive technologies (as you are using an icon font family, there is a generated character :before of :after). According to the specs:
Authors MAY, with caution, use aria-hidden to hide visibly rendered
content from assistive technologies only if the act of hiding this
content is intended to improve the experience for users of assistive
technologies by removing redundant or extraneous content. Authors
using aria-hidden to hide visible content from screen readers MUST
ensure that identical or equivalent meaning and functionality is
exposed to assistive technologies.
I don't know your exact use case, so I take the liberty to use the simpler case of providing a phone number. In decreasing order of preference, I would use:
<span aria-label="Our phone number">
<span class="icon-phone" aria-hidden="true"></span>
+33 7 1234576
</span>
(or any variation implying:
- an `i` element with a `role` presentation attribute
instead of the inner `span` element
- a `title` attribute instead of an `aria-label` attribute)
<span class="icon-phone"
aria-label="Our phone number">+33 7 1234576</span>
(or any variation using `title` instead of `aria-label`)
<i class="icon-phone" role="presentation"
aria-label="Our phone number">+33 7 1234576</i>
(or any variation using `title` instead of `aria-label`)
Please note that aria-label and title attributes should describe the content of the element. Not the next sibling element. So I feel like the following solution is not in accordance with the specs (even if most accessibility tools would actually have the same observable behavior as if the phone number were actually inside the span element) :
<span class="icon-phone"
title="Our phone number"></span>+33 7 1234576
You should use <span> or something along those lines instead. You can use the title="" attribute to give some text on hover, if that's what you're looking for. As far as providing accessability to screen readers, or SEO value, you could add the following CSS:
.icon-lock{
text-indent:-99999px;
}
And then write your markup like so:
<span class="icon-lock">What I want the screen reader to say</span>
I think the role for fonts that act like images should be reserved to role="img". This can then be used with aria-label="alt-text". It works because of the ARIA Accessible Name algorithm. See: Aria Techniques Using Img Role.
<i> tags are for marking up text. You are changing the semantic meaning of this tag to something that has nothing to do using italics (and even the italic tag is a bad idea).
You should be using a SPAN instead.
Italic elements do not support alt attributes, IMG elements do. If you want an ALT attribute, use an image.