I'm reading through the docs of Foundation's Card component and I see that they are using <h4> tags in the cards. For my purpose, I don't need to have my text as a heading and I don't have <h3> on my page so I don't want to be skipping heading levels.
So I'm wondering if it would be good practice from an accessibility point of view to have my text in a <p> tag instead of what they have as <h4> tags in the docs?
Example from Foundation:
<div class="card" style="width: 300px;">
<div class="card-divider">
<h4>I'm featured</h4>
</div>
<img src="assets/img/generic/rectangle-1.jpg">
<div class="card-section">
<p>This card makes use of the card-divider element.</p>
</div>
</div>
What I want to do:
<div class="card" style="width: 300px;">
<div class="card-divider">
<p>I'm featured</p>
</div>
<img src="assets/img/generic/rectangle-1.jpg">
<div class="card-section">
<p>This card makes use of the card-divider element.</p>
</div>
</div>
It's not an automatic accessibility problem if you skip heading levels. There are valid cases where it makes sense but it should only happen rarely.
If you remove the heading from the cards, that will make it harder for screen reader users to find the cards. Screen reading software has shortcut keys to make finding different types of elements on the page easier. In this case, I can navigate to all the headings by using the H key (or on iOS, with VoiceOver, I can set my rotor to "headings" and swipe down to move to the next heading).
I would recommend keeping the headings, even if they skip levels. It's a worse problem not having headings than it is to skip levels.
However, if you have control over generating a <p> instead of an <h4>, do you not have control of changing the <h4> to an <h3>?
Related
Suppose I have a list of article previews on my homepage with the following design:
where there's an image to the left with all of the content to the right (region, date, title, abstract, and a Read More button that isn't in the image). How would you go about writing this semantically and accessible to screen readers?
Typically I would do something like this:
<article>
<img class="image" src="path/to/image" alt="appropriate alt text">
<div class="content">
<div class=""info>
<span class="region">Europe</span>
<time class="date" pubdate>Date</time>
</div>
<h2 class="title">Article Title</h2>
<p class="abstract">Abstract of article...</p>
Read More
</div>
</article>
But, I feel like this could be more semantic and accessible for screen readers. One thought I had was doing something like this:
<article>
<img class="image" src="path/to/image" alt="appropriate alt text">
<div class="content">
<h2 class="title">Article Title</h2>
<div class=""info>
<span class="region">Europe</span>
<time class="date" pubdate>Date</time>
</div>
<p class="abstract">Abstract of article...</p>
Read More
</div>
</article>
and since I have .content as a flex container, I can change the visual order of the children like so:
.content {
display: flex;
}
.info {
order: -1;
}
This way a screen reader will read the title of the article before reading the region and date. Does this make sense? I'm trying to become more familiar with semantic and accessibility best practices.
Similarly, would it make sense to change the DOM order of the image and the rest of the content. Like so:
<article>
<div class="content">
<h2 class="title">Article Title</h2>
<div class=""info>
<span class="region">Europe</span>
<time class="date" pubdate>Date</time>
</div>
<p class="abstract">Abstract of article...</p>
Read More
</div>
<img class="image" src="path/to/image" alt="appropriate alt text">
</article>
And then change the visual order:
article {
display: flex;
}
.image {
order: -1;
}
Or would this cause too much confusion? My thought process is that I would like to deliver the most important information of the article to the screen reader first. Are there any reasons to not use this approach? Maybe users are accustomed to image first, content second?
Semantically speaking, is this how you would organize this code? Any improvements that could be made? Maybe wrapping the image in a figure tag?
Any help would be appreciated!
What's the best way to make an heading appear after a related content?
You can use the aria-labelledby attribute to indicate the label of the region
<article aria-labelledby="title1">
<img class="image" src="path/to/image" alt="appropriate alt text">
<div class="content">
<div class="info">
<span class="region">Europe</span>
<time class="date" pubdate>Date</time>
</div>
<h2 class="title" id="title1">Article Title</h2>
<p class="abstract">Abstract of article...</p>
Read More
</div>
</article>
Note that, as the article tag is not announced by NVDA, you may replace the article tag with div[role=region]
I would definitely go with your latest suggestion (the image is last in the DOM and you change the order with FlexBox). This approach is exactly what I do in those situations.
And I don't think you should wrap the image in a figure tag. It would be more confusing.
If you haven't come across it already it might be worth visiting the "Designing for Screen Reader Compatibility" page of the WebAIM website. From that page...
Audio interfaces present content linearly to users, one item at a time. This contrasts with the way in which most people use visual interfaces. Sighted users can scan an entire screen almost instantaneously, comprehending the overall layout, the artistic style, and other macro-level aspects of the content. Screen reader users cannot comprehend these macro-level aspects as quickly.
At the very least the WebAIM "Introduction to Web Accessibility" article should be an obligatory read for every self-respecting web-content creator.
I need to make a website accessible for assistive technology. One issue I have is with a block level anchor tag. The code is similar to this:
<a href="/page">
<div class="text">
<h2>Mammals</h2>
<p>We have a large selection of dogs, cats, and hamsters.</p>
<p class="link-description">Explore Mammals</p>
</div>
<div class="image">
<img src="/cat.jpg" alt="Black cat in a tree" />
</div>
</a>
My goal is to have the entire block (The image, heading, paragraph text, and both div's) clickable but for screen readers to read the link as "Explore Mammals" instead of "Mammals We have a large selection of dogs, cats, and hamsters. Explore Mammals Black cat in a tree." In addition, this is a responsive site so the div's are side by side on desktop but stacked on mobile and the two div's animate in when the page is scrolled.
Does anyone have ideas on how to overcome the accessibility issue described?
That is not an accessibility issue, that is a usability issue. Screen readers just happen to be the audience most affected by it.
In this case you can use aria-label on the <a> to override the content within. Depending on your screen reader it may read the image separately but still use the aria-label text.
<a href="/page" aria-label="Explore Mammals">
<div class="text">
<h2>Mammals</h2>
<p>We have a large selection of dogs, cats, and hamsters.</p>
<p class="link-description">Explore Mammals</p>
</div>
<div class="image">
<img src="/cat.jpg" alt="Black cat in a tree" />
</div>
</a>
I'm building a template for listings in which 90% of the text is the same, and just the item title and description is different. I don't want to have to mess with or edit the text that is the same in each one but at some point it references in the title which is different.
Is there anyway in just HTML5 or CSS3 that I could pull the title used previously to dynamically fill the content out? Almost as if it was a variable?
Eg...
Title Here (to be used again)
Unique description here
Content Thats Always The Same
You are looking at Title Here etc etc etc.
No Javascript or other languages please - at if can't be done in a hacky way with CSS3 or HTML5 at worst the most basic javascript available, but mostly javascript is blocked on the site i'm coding for.
If we're to do it with very simple Javascript here is example code from project...
<div class="content-inner block4 s-text" style="margin-top:-25px">
<h3>Title of Item.</h3>
<p style="text-align: justify;">This is all about the item etc etc etc</p>
<div id="WhatsIncludedBlock">
<div class="content-inner block4 s-text">
<h3>What's Included?</h3>
<p class="para">
<ul><a style="text-decoration: none; cursor: default;"><img style="padding-right: 7px; vertical-align:-1%;" src="http://images.com/bullet2.png" width="10px" height="10px" float="left" alt="bullet point" class="hover"></a>Brand new "Title of Item" direct from supplier.</ul>
Where "Title of Item" in the second block should be automatically pulled in from the H3 tag (which is unique, not all H3 tags will be the same obviously, we'd need to add whatever variable tags required here to make it copy later on)
As others have said, not possible with HTML5 or CSS3 unfortunately, so I ended up using limited javascript which should pass.
<script language="javascript">
var title1
title1 = 'Title of Item';
</script>
Called with
<p><script>document.write (title1);</script></p>
Where needed.
In modern browsers you can. But there will be drawback: it would be impossible to seclect or copy substituted text. See browser support of css variable on caniuse. Currently it is supported in FF 31+, Chrome 49+, Safari 9.1+/9.3+. No any support in IE, Edge 13- and Opera 12.
Anyway, I see no reasons to refuse using some templating engine like doT.
h3::after {
content: var(--title);
}
<section style="--title: 'First title'">
<!-- This following content is equal for all sections -->
<h3></h3>
<p>Anything here</p>
</section>
<section style="--title: 'The second one'">
<!-- This following content is equal for all sections -->
<h3></h3>
<p>Anything here</p>
</section>
<section style="--title: 'And the last'">
<!-- This following content is equal for all sections -->
<h3></h3>
<p>Anything here</p>
</section>
I just started out using BEM and SMACCS for my stylesheets but have run into some trouble as far as naming deeply nested elements in the DOM. Say for instance I have a div called .main-container. Nested inside the first level of the main-container is an additional div which by convention would be named .main-container__article.
<div class="main-container>
<div class="main-container__article></div>
</div>
This is where things get confusing. Inside that article div let's say I have a header followed by a paragraph that has a nested span tags. Do I continue prepending classes with main-container__article as so?
<div class="main-container>
<div class="main-container__article>
<h1 class="main-container__article__header">Heading</h1>
<p class="main-container__article__copy">
<span class="main-container__article__copy__intro-text>Example text.</span>
</p>
</div>
</div>
How far down does the rabbit hole go when it comes to naming parent/child elements? Is there a point where you reset at the second-level element and go from there?
<div class="main-container>
<div class="article>
<h1 class="article__header">Heading</h1>
<p class="article__text">
<span class="article__text__intro-text>This is example text.</span> for a paragraph
</p>
</div>
</div>
BEM naming shouldn't resemble DOM structure because otherwise you won't be able to change markup without changes in CSS.
So for your example I'd make it like this:
<div class="main-container">
<div class="article">
<h1 class="article__header">Heading</h1>
<p class="article__copy">
<span class="article__intro-text">Example text.</span>
</p>
</div>
</div>
There's also a quite powerful thing called mixes, which gives possibility to mix different BEM entities on the same DOM node:
Heading
Example text.
So now you may apply CSS to article block and main-container__article element separately which is very useful when you need to reuse article outside main-container.
.main-container__article__copy__intro-text
definitely doesn't help the readability and maintainability of your stylesheets.
I suggest to break such giant blocks into several smaller blocks. If you do this, you can reuse your styles - in your example you couldn't use the article-block somewhere else.
I would "reset" everytime you can encapsulate a block which can potentially be used in several places in your app/website.
With HTML5, there were many additional elements added for structuring documents like blog posts or long texts. But what I have problems coming up with is a semantic way of structuring UI components.
On a typical webapp, you have many different components such as modals, button elements, interacitve forms, containers, and so on. Often, I see those things being constructed using div and span only or by misusing header, footerand nav elements and I get the feeling I missed something out.
Is it really semantic to create all structural, not content-related elements using the div element only? Will there be a more diverse element choice in the future?
EDIT: Here's a short example of what I mean:
<div class="modal foo">
<div class="inner wrapper">
<div class="upper bar">
<div class="inner">
<div class="window-name">
<span class="upper heading">
<h1>Foo</h1>
</span>
<span class="lower heading">
<h3>Extra Baz</h3>
</span>
</div>
<div class="buttons">
<div class="button close"><span class="icon"><i>×<i></span></div>
<div class="button maximize"><span class="icon"><i class="fa fa-maximize"><i></span></div>
</div>
</div>
</div>
<div class="content well">
<!--
Whatever happens inside the modal window named foo.
Pretty sure it needs many divs as well, though.
-->
</div>
<div class="lower bar">
<div class="buttons">
<div class="button help"><span class="icon"><i>?<i></span></div>
</div>
<span class="info">
<p>Enter your barbaz.</p>
</span>
</div>
</div>
</div>
The last W3C working draft for HTML 5.1 was released two days ago, on April, 13, and it is "semantic-centered": see
http://www.w3.org/TR/html51/Overview.html
It is an interesting reading, while waiting to have all those fancy things implemented by the most common browsers.
Is it really semantic to create all structural, not content-related elements using the div element only?
Not in my opinion. Even without to cite "the media is the message", everything has something to do with the content, even "open" and "close" buttons allowing users to see the content.
Will there be a more diverse element choice in the future?
Of course! And with a lot of proprietary prefixes, as usual, just to keep our life busier.
Ignoring div and span elements (which are meaningless, except for the case of specifying some meaningful attributes), your snippet consists of this:
<h1>Foo</h1>
<h3>Extra Baz</h3>
<i>×</i>
<i></i>
<!-- content -->
<i>?</i>
<p>Enter your barbaz.</p>
This is what your content looks like from the semantic perspective. Not very clear what gets represented here.
Using a heading element for a subtitle (h3 in your case) is not appropriate. (Or, if it’s not a subheading but really a new/own section, don’t skip a heading level; but I’m assuming the former.) Use one heading element, and use p for the subheading, and group them in header.
Using i elements for adding icons via CSS is not appropriate. Either use CSS only (with the help of existing elements), or, if you have to add an empty element, use span.
Using span/div elements for buttons is not appropriate. Use button instead.
As you are already using a heading element, it’s recommended to explicitly specify a sectioning content element. Depending on the context of this content, it may be article or aside (or nav if it’s for navigation), but in all other cases section.
Following this, you’d get:
<section>
<header>
<h1>Foo</h1>
<p>Extra Baz</p>
</header>
<button>Close</button>
<button>Maximize</button>
<!-- content -->
<button>Help</button>
<p>Enter your barbaz.</p>
</section>
Now you may add header/footer elements for those parts that are not part of this section’s (not this document’s, it’s only about this section!) main content.
You may, for example, enclose the maximize/close buttons in a header (however, opinions if this would be appropriate differ).
HTML 5.1 will probably have a menu element and a dialog element, which might be useful in this case.