How to make my news card design accessible? - html

Question

I made the following card design to show on a news page:
To make this accessible I want the h2 heading to be in front of the image in HTML like:
<div class='news'>
<h2>Title</h2>
<img alt="temporary placeholder image" src="https://via.placeholder.com/400x300.png">
<small class="news--published">6-3-2020 1:27:20</small>
<div class="body">
<p>Lorem ipsum dolor.</p>
</div>
<a aria-label="Read more about {{node.title}}" href="/url">Read more<span aria-hidden="true" class="icon icon-arrow"></span></a>
</div>
What is the best solution to do this? Is there a way to create this design with css, for example by using flexbox or grid, from the html mentioned above? Or is it possible to change the html for example by wrapping this in an <article> wrapper and change the order like:
front of the image in HTML like:
<article class='news'>
<div class="content image">
<img alt="temporary placeholder image" src="https://via.placeholder.com/400x300.png">
</div>
<div class="content text">
<h2>Title</h2>
<small class="news--published">6-3-2020 1:27:20</small>
<div class="body">
<p>Lorem ipsum dolor.</p>
</div>
<a aria-label="Read more about {{node.title}}" href="/url">Read more<span aria-hidden="true" class="icon icon-arrow"></span></a>
</div>
</article>

Answer 1

The question to ask yourself is "does the image add any useful information at this point". At that point you have two options:
The image does not add anything
The answer is probably no, the image does not add anything of value in a list of articles.
Although you will often see me advocating for as similar an experience as possible for people with disabilities, I also advocate for a great user experience.
It is not a great experience having a load of images read out as part of a list of articles as it just slows down the experience. Additionally article thumbnails are often abstract (offering no useful information) and repeated at the top of the actual page (redundant).
As such my advice is to hide the image entirely. You can do this simply by changing your alt attribute to an empty string. An empty string, not a null string
So <img alt="" src... is fine, <img alt src... is not.
For completeness I would also add aria-hidden="true" to the image, although this is redundant it is useful for people when they are looking through your code for empty alt attributes to see this should be hidden and it is not a mistake / missing alt attribute.
<article class='news'>
<div class="content image">
<img alt="" aria-hidden="true" src="https://via.placeholder.com/400x300.png">
</div>
<div class="content text">
<h2>Title</h2>
<small class="news--published">6-3-2020 1:27:20</small>
<div class="body">
<p>Lorem ipsum dolor.</p>
</div>
<a aria-label="Read more about {{node.title}}" href="/url">Read more<span aria-hidden="true" class="icon icon-arrow"></span></a>
</div>
</article>
The image is really important
No problem, that is all part of making a site accessible. Using your best judgement.
For this we can visually change the order so that the DOM order is correct for screen reader users.
People often think this is a no-no as they have read "logical tab order / focus order" and think all items on the page have to be in DOM order.
They do not, logical focus order applies to controls and interactive elements.
Changing the visual order can be achieved simply using flex and row-reverse as per the example below. Or you could use old-school float left and right.
That decision is down to what browsers you support.
By changing the DOM order screen reader users get the important information first and still have the option of accessing the image.
.news {
display: flex;
flex-direction: row-reverse;
}
.content.text{
flex: 2;
padding: 20px;
}
.content.image{
flex: 1;
}
<article class='news'>
<div class="content text">
<h2>Title</h2>
<small class="news--published">6-3-2020 1:27:20</small>
<div class="body">
<p>Lorem ipsum dolor.</p>
</div>
<a aria-label="Read more about {{node.title}}" href="/url">Read more<span aria-hidden="true" class="icon icon-arrow"></span></a>
</div>
<div class="content image">
<img alt="temporary placeholder image" src="https://via.placeholder.com/400x300.png">
</div>
</article>
Extra based on comments
Obviously there are other improvements that can be made to the HTML.
I wasn't going to go into them but #Shannon Young's comment about associating the article with the heading is a good one to include.
What they were suggesting is to do the following:
<article aria-labelledby="articleHeading1"/>
<h2 id="articleHeading1">Title</h2>
This means if a screen reader user is navigating by sections the section will be read as "article, Title" (or similar depending on screen reader).
They also made a comment about using the <time> element etc. That is something for you to research yourself.