I've tried searching but can't seem to find a straight answer regarding redundant links and WCAG compliance.
I have a product collection/category page with a list of products. Each product has a product image, name, price, and 'Learn More' button. The product image and 'Learn More' button both go to the same destination.
<div class="product-wrap">
<div class="product-image">
<img src="product-image.jpg">
</div>
<div class="product-name">
Sample Product Name
</div>
<div class="product-price">
$29.99
</div>
<div class="product-learn-more">
Learn More
</div>
</div>
Based off what I've read having adjacent links go to the same location is not compliant.
I can't link the whole product since I don't want everything clickable so I'm not sure what my options are.
Does anything have any idea how to make this compliant?
The guidance from W3C states that you should wrap the image and the text in a single anchor element. They also state that you must not omit the alt attribute, as this would cause failure of SC 1.1.1.
If this isn't an option in your instance, one possible solution that comes to mind is to use the aria-hidden attribute on your div.product-image.
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.
https://www.w3.org/TR/wai-aria-1.2/#aria-hidden
Related
I'm trying to write a site using the most semantically correct HTML I can manage, and my client wants a navigation bar where each link has a title and a description/subtitle inside the clickable area. What's the best way to achieve this?
Here's what my code looks like right now:
<nav role="navigation">
<a href="dashboard.html">
<!-- There's an icon here but don't worry about that -->
<h4>My Dashboard</h4>
<p>Get an overview of your cases.</p>
</a>
<a href="new.html">
<h4>Submit Case</h4>
<p>Get help from the Service Center.</p>
</a>
</nav>
And for reference, here's what it looks like styled:
The accessibility guidelines I'm following specify that heading tags should be used in descending order (as in, <h3> may only appear after an <h2> tag, etc). The answers to this question seem to indicate that it's not a good idea to use headings in the navigation regardless.
I could use <p> tags for both the title and description, but I'd prefer for screen-readers to be able to tell that the title is more important.
I'm inclined to use a description list, but I can't find examples where they're used this way.
I ended up using styled <p> tags, but with a hidden colon between the title and the subtitle to still convey the hierarchy between them to screen-readers. Headings were the wrong way to go from the start, since the nav links aren't part of the page's content.
I would like to improve the accessibility in a blog I'm working on. The blog is bilingual, and by default appears in Hungarian. A click on a flag triggers the language change (JavaScript removes nodisplay class from divs with class=js-en and adds it to divs with class=js-hu).
I would like to separate the two parts of each article. I have considered using <aside>, but it wouldn't be accurate (when viewed in English, it is also primary blog content).
What do you suggest to improve the accessibility, with valid tags and ARIA roles?
Posts look something like this:[Edit: changed <div class="js-en nodisplay"> to <div class="js-en" hidden>]
<article>
<div class="js-hu"> <!-- blog post in Hungarian -->
<p>
magyar szöveg, nem értenéd
</p>
</div>
<div class="js-en" hidden> <!-- blog post in English -->
<p>
same text in English
</p>
</div>
</article>
Isn't that more the role of the lang attribute?
On the plus side you will be able to style the content depending on the language using the :lang pseudo-class.
While the lang attribute is an important part of the communication, it does not represent an answer to your question.
For communicating the change for accessibility, you would use a WAI-ARIA state, not a role. In this case, the state to change on each element is the aria-hidden attribute.
But, using the html hidden attribute does that for you. According to the W3C's ARIA in HTML draft spec, the aria-hidden state automatically reflects the hidden attribute. So as you're already using the hidden attribute, no further changes are necessary.
I'm working on enabling a CMS to presents various parts of an article in different places within a web page.
The CMS provides a grid layout, composed of div elements, into which "boxes" may be placed. Each box may be configured to present a certain part of an article, or anything else for that matter. The authors are allowed to drag-and-drop these boxes around in the grid as they please.
An article may for instance describe a division within an organisation, containing a textual summary of the devision, contact information and upcoming events hosted by the division. One box may be set up to present the summary, another box may present the contact information, and a third box may present the upcoming events in a calendar design format.
As long as all three boxes are placed in that order within the same div in the grid, wrapping them all in an article tag will provide the semantics needed to inform anyone that all three boxes present different aspects of the same article. But what happens when boxes with unrelated content are inserted between the three? Here's a simplified example:
<div id="main">
<div class="box">
... Related division corporate speak ...
</div>
<div class="box">
... Related division contact info ...
</div>
</div>
<div id="ads">
<div class="box">
... Unrelated advertisement ...
</div>
</div>
<div id="right">
<div class="box">
... Unrelated login form ...
</div>
<div class="box">
... Related division events calendar ...
</div>
</div>
As far as I know, there is no way to explicitly specify that each of the three boxes are all related, using a standard HTML attribute.
Is it possible at all to maintain the article's semantic integrity once it has been divided like this? Does schema.org markup offer any help here?
PS: Cheating my way to a visual equivalent presentation using CSS positioning tricks is not an option.
What's the best HTML5 element to represent a preview or summary of another webpage? I was thinking <abbr>, but is there a better one to represent these?
(I can’t think of a case where the use of abbr would be appropriate; well, unless the preview content is an abbreviation.)
Preview as teaser etc.
If you want to display some content that already exists at some other place, you probably want to use the blockquote element. You may only use blockquote if you aren’t changing anything of the content.
As it’s a sectioning root element, any headings/sections won’t affect your outline.
<blockquote>
<!-- the quoted page -->
<h1>Foo bar page</h1>
<nav>…</nav>
<article></article>
<!-- could of course also use 'iframe' if it’s the whole page + CSS -->
</blockquote>
Also use blockquote when you want to display a screenshot of the content:
<blockquote>
<img src="screenshot.png" alt="Article Foo …" />
</blockquote>
If you need more complex alternative content, you might want to use object instead of img.
If you are not quoting (i.e., the content is on the same site resp. your own content, or you are paraphrasing), you could just go with article.
<article>
<h1>Summary of article Foo</h1>
<p>…</p>
</article>
In that case, headings/sections do affect your outline, which makes sense, as it’s your content (you summarized/paraphrased).
If it’s just a teaser/snippet in a sidebar (or a search result, or a list of posts etc.), you might want to use the bookmark link type to link to the actual content.
Preview, when creating/editing content
I guess it depends on your understanding of the content if a dedicated element is needed in the first place. One could argue that the preview is (part of) the actual content of the page, and it only happens to be published at another page in addition. So the most basic variant would be to use a sectioning element that is appropriate for this content, probably article:
<form><!-- the content edit form --></form>
<article><!-- the preview --></article>
resp. with a more useful outline:
<body>
<h1>Create a new foo</h1>
<form><!-- the content edit form --></form>
<section>
<h1>Preview of your foo</h1>
<article><!-- the preview --></article> <!-- depends on your case; would also be possible to have several sectioning content elements here -->
</section>
</body>
It could make sense to use the figure element here; as it’s a sectioning root, possible headings/sections of the preview content wouldn’t affect the current outline:
<form>
<!-- the content edit form -->
</form>
<figure>
<!-- your preview -->
</figure>
This is what I would recommend:
<body>
<h1>Create a new foo</h1>
<form>
<!-- the content edit form -->
</form>
<section>
<h1>Preview of your foo</h1>
<figure>
<article>
<!-- your preview -->
</article>
<!-- might use other, more or no sectioning elements here; depends on your case -->
</figure>
</section>
</body>
Special cases
samp
In some cases it might be appropriate to use the samp element:
The samp element represents (sample) output from a program or computing system.
Note that samp can only have phrasing content, so you can’t use it for complex content.
output
In some cases it might be appropriate to use the output element:
The output element represents the result of a calculation or user action.
You could even use the for attribute to relate the output (= preview) with the form.
Just like samp, it can only have phrasing content, so it’s not appropriate for complex content.
It sounds like you might have many short previews or summaries of these websites in a single page? In that case, I think there are many ways to express these types of blocks in smaller HTML chunks while giving them additional semantic meaning. So I will give you several options I would try using in HTML5.
The DETAILS element
The details element is new interactive element in HTML5 which shows a text summary and additional hidden text details that the user can see by clicking the summary text. This is usually created by the browser as a piece of title text with a dropdown toggle arrow that reveals hidden content when clicked. This element is typically used as a Javascript-free toggle widget to disclose additional information if the user chooses to view it. What is nice about this new HTML5 element is it will create this nice toggle, open-and-close, text block without the need for any Javascript, and which includes a nice clickable summary "bar" that unfolds with more detail text. Ive added some extra CSS to make it look sexy. (Note: IE1-11 does not support this element, but with the styles Ive added it degrades gracefully and shows summary and div content in one stacked block.)
<details>
<summary style="display:block;margin: 0;padding: .2em;width: 25em;background-color: #ccccccff;box-shadow: 2px 2px 3px #aaa;">© Copyright 2021</summary>
<div style="display:block;margin: 0;padding: .2em;width: 25em;background-color: #efefefff;box-shadow: 2px 2px 3px #aaa;">
<p>Owned by Company ABC. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of Company ABC.</p>
</div>
</details>
The DEFINITION element
The dfn element represents a piece of definition text when its term is defined in a paragraph. It represents a piece of text that is going to be defined within a sentence. The definition item is usually styled in plain italics. Not as fancy as the details element but tells search engines you are associating a text title with descriptive text. If you want to just drop page previews in plain paragraphs but give their titles more meaning, wrap the titles with this simple piece of HTML. You could also wrap an anchor tag around the dfn element and link to your page you are previewing. This link then has more semantic meaning.
<p>The <dfn id="sun" title="Our Shining Celestial Body">Sun</dfn> is the name of the local star in our solar system.</p>
The DESCRIPTION LIST element
If your page previews need something more formal, as in a listing, try a description list. The dl element is a description list and contains groups of description terms (dt) and descriptions details (dd). The description list is often used to show a page's glossary, lexicon, or dictionary of terms in key-value pairs. A description list is great if you have many of these previews. It really holds a lot of semantic meaning and allows you to have a description TERM and its DESCRIPTION in separate places. Again, this has more semantic meaning than plain HTML paragraphs. Ive added some CSS to this which you will see when you paste this in an HTML page and view it. Each description is in a white block with a border. You might add your page preview titles as terms, and your text preview in the description element.
<dl>
<div style="margin: .2em;padding: 0 .5em;border: 1px solid #999;">
<dt id="fruit1">Apple</dt>
<dd nowrap="no" role="definition" aria-labelledby="fruit1">A popular fruit that grows on trees</dd>
</div>
<div style="margin: .2em;padding: 0 .5em;border: 1px solid #999;">
<dt id="fruit2">Strawberry</dt>
<dd nowrap="no" role="definition" aria-labelledby="fruit2">A popular berry that grows low to the ground</dd>
</div>
</dl>
I am working on a website on which i show restaurants according to either categories, food, etc. So I have a listing page where I list the restaurants as per the filters applied by the user.
I have a SEO question.
It is said that using heading tags<h1>,<h2>... tags should be used for titles, and important items.
So this is what I did.
...
<div class="item">
<h1>Title of Restaurant</h1>
<h2>Address</h2>
<p>Description</p>
</div>
...
which, for design changes, was later changed to
[EDIT]
As per #Guffa's response, there should be minimum <h1> tags possible on the page.
Since the Title of the restaurant is important and I want it to be recognized as a heading rather than simple text, I'll use <h3> for it.
...
<div class="item">
<h3>Title of Restaurant</h3>
<h4>Address</h4>
<p>Description</p>
</div>
...
The scenario that <h4> tag has no text but rather a child node with a link.
So my question is when my page is indexed (second case), will the <h4> be recognized?
Or will it be completely ignored and thought of as a hyperlink?
Is filling the heading text with a very high text-indent a smart idea?
Or should i use the anchor as it is and apply a title attribute to it?
The h1 tag should be used for important information about the page, so you should really only have one on the page.
Having a listing with h1 tags means that the spiders get conflicting information about what's important on the page, and will likely ignore all of them.
As the h1 should be something like the title for the page, it doesn't make much sense to have a link inside it, as that link would go to the same page.