Accessibility in html5 - html

We want to add support for people with disabilities. So I read about it over the internet but did not get too much from there. I am not understanding when to use aria and when to use role attributes.
I have simple HTML with 3 columns. I have used role attributes in that and wanted to know what more can be done on this HTML for accessibility. Like if we want to use aria-labelledby and aria-describedby.
<div class="container">
<div class="partners clearfix">
<h2 role="My Content Heading">My Content Heading</h2>
<div class="row" role="partner type">
<div class="col-xs-12 col-sm-4">
<div class="partner__list text-center">
<div class="center">
<i class="service"></i>
<h2>Partner 1</h2>
<p>Partner 1 Description</p>
<div class="button-pos">
Learn More
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="partner__list text-center">
<div class="center">
<i class="tech"></i>
<h2>Partner 2</h2>
<p>Partner 2 Description</p>
<div class="button-pos">
Learn More
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="partner__list text-center">
<div class="center">
<i class="content"></i>
<h2 class="text-lg text-black text-ellipsis">Partner 3</h2>
<p>Partner 3 Description</p>
<div class="button-pos">
Learn More
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Two things immediately stand out that could be improved:
1) You're using what appears to be a font-icon that seems to have meaning that has no text alternative:
<i class="service"></i>
You can provide this with an aria-label property. In addition, I'd recommend using a span instead if <1>:
<span class="service" aria-label="service"></span>
2) The text in your links is repetitive and has no specific information about the link destination. Screen reader users often scan the links to get a feel for the page content and without the surrounding content this will be less useful that it could be ("learn more", "learn more", "learn more")
Learn More
I'd recommend adding specific information in the linked text rather than the generic "learn more":
Learn More about partner 1
Modified markup for one section:
<div class="container">
<div class="partners clearfix">
<h2 role="My Content Heading">My Content Heading</h2>
<div class="row" role="partner type">
<div class="col-xs-12 col-sm-4">
<div class="partner__list text-center">
<div class="center">
<span class="service" aria-label="service"></span>
<h2>Partner 1</h2>
<p>Partner 1 Description</p>
<div class="button-pos">
Learn More about Partner 1
</div>
</div>
</div>
</div>
</div>
</div>
</div>

This code snippet is already accessible. Most plain HTML doesn't need additional ARIA support. Text-to-speech software will just read through it in order, and keyboards can Tab to the links and press Enter to click them. ARIA is for when you have interactive widgets like tabs or calendars.
Role attributes are part of the ARIA specification. You don't need to make up values to describe your content, they should only be used from this list if they apply to what you're making.
You might also find this introduction to web accessibility article and the other resources on that website useful in learning more about it.

As stringy already pointed out, the code is already accessible. If you aren't using JavaScript to create UI elements, there is usually no need for WAI-ARIA roles or attributes.
I have just two comments about your code:
Why do you use a div around Learn More instead of a p? Screen readers can move between paragraphs, but div elements are meaningless, as far as I know.
If the partner descriptions are meant to look like a table, and especially if there will be regular row or column headers, you should use table markup instead of CSS-styled div elements. Regular table markup makes sense to a screen reader; styling div elements to look like a table results in a meaningless (i.e. from the point of view of a browser or a screen reader) code jumble.

Related

How to make my news card design accessible?

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>
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.

Bootstrap "Container" inside an <article> tag

I have been adding , and elements to my demo portfolio, just to practice what I've learnt so far, but it seems that these tags mess up the "container" class from bootstrap.
initial version without accessibility tags
<!-- <header> -->
<div class="container">
<div class="hl1"></div>
<div class="row">
<div class="col-12 p-3">
<div class="card mx-auto" style="width: 18rem;">
<img src="./portrait2.jpg" class="card-img-top" alt="My Portrait">
<div class="card-body">
<p class="card-text">Hello there! This is me!</p>
</div>
</div>
</div>
<div class="hl1"></div>
</div>
<!-- </header>
As you can see, I've commented out the tag for the moment. After I add the header, article and footer tags, the content swaps out of the container class and the (hr)tag goes across the total width of the page.
The good part is that the content remains at the same location, like only the (hr)tag would be affected by the tags.
My question is there a way to overcome this? Or I should forget the accessibility tags for now, until I become more advanced in knowledge.
Thanks.
It'd be better if you could provide the entire code. Although, you can check if your Bootstrap CDN link is BELOW the link to your external stylesheet. This makes sure that the Bootstrap properties are prevalent over anything you have defined in your stylesheet.

Anchor points in HTML

I'm fairly basic when it comes to coding websites, but I wanted to incorporate anchor points in to my horizontal scrolling website. I've had a go but it isn't working.
Below is the code I've tried - I'm not sure if it's something to do with my navbar not being the standard <li> instead im using separate divs. I will include an image of how i'm designing the site so that you can understand the concept.
HTML:
<div id="navbar">
<div class="tab1" href="#home">
<div class="text1">Home</div>
</div>
<div class="tab2" href="#work">
<div class="text2">Work</div>
</div>
<div class="tab3" href="#about">
<div class="text3">About</div>
</div>
</div>
<div id="container">
<div id="fullscreen">
<div class="box home" id="home">
<div class="heading">
<h1>Hi,</h1>
<h2>I'm Nathan Wilson</h2>
<h3>a Graphic Designer based in Nottingham, U.K.</h3>
</div>
</div>
<div class="box work" id="work">
</div>
<div class="box about" id="about">
</div>
</div>
</div>
Image: https://imgur.com/fh6hq3O
I want to incorporate smooth scrolling eventually, but that's something I'll look in to once i've fixed this issue.
Anchor points work due to property binding the tag elements as follow
Where You Click!
<a name="anchor-point-1"></a>
So #anchor-point-1 is the property element that binds to the NAME of the anchor tag which you can place anywhere in your markup vertically or horizontally depending on how you are styling your app.
you can do multiple anchor tags as follows for a tabs like template
Where You Click!
<a name="anchor-point-tab-1"></a>
Where You Click!
<a name="anchor-point-tab-2"></a>
It doesn't matter what you name the tags as long as your original link and the anchor have the same binding element HREF = the same NAME property.
You can also bind the elements to divs, spans, and other tags for these types of visual and scrolling effects
For internal anchoring attributes
There are three anchor attributes you need to know to create functional hyperlinks. These attributes are href, target, and download.
These are considered anchors as well but do not bind one tag to another!
Anchor 1: mailto:
<a href="mailto:contact#anchor.com">
Anchor 2: tel:
make call (555)123-9876
Anchor 3: target="_blank"
<a href="https://test.com" target="_blank">
To learn about the dynamics and inner working of all the attributes of A href tags please go to the link below.
https://html.com/anchors-links/
hope this is sufficient!
Your doing it right, except that you have to use <a> balise instead of <div>
<a class="tab1" href="#home">
<div class="text1">Home</div>
</a>
You are close. Instead of wrapping your <div> within a <div class="tab1" href="#home"> you need to use the anchor tag Test. Try this.
<div id="navbar">
<div class="tab1">
Home
</div>
<div class="tab2">
Work
</div>
<div class="tab3">
About
</div>
</div>
<div id="container">
<div id="fullscreen">
<div class="box home" id="home">
<div class="heading">
<h1>Hi,</h1>
<h2>I'm Nathan Wilson</h2>
<h3>a Graphic Designer based in Nottingham, U.K.</h3>
</div>
</div>
<div class="box work" id="work">
Work Content
</div>
<div class="box about" id="about">
About Content
</div>
</div>
</div>

How to position an href element under a p element?

So I am trying to add some web links but I want them positioned underneath my p element. As of right now I currently have my href elements in line with my p element. So here is my current code:
<div class="container-fluid">
<div class="row">
<div class="col-xs-9">
<p>Here are a few links which may provide some insight to Lisa:
Hold My Hand
Lean on Me
</p>
</div>
</div>
</div>
You have your anchor tags wrapped inside a p tag. Either place it outside the p tag or add a span to the text and make it 100% wide (using bootstrap class) .
Wrap your p tag text with span tag
Since you are using bootstrap you can use the class col-xs-12
<span class='col-xs-12'>Here are a few links which may provide some insight to Lisa: </span>
if you want to position your links under the text that you write you have many ways to do it...
you can use this tags '<div>', '<br>', '<ul>' like below
Solution one (using div tag) :
<div class="container-fluid">
<div class="row">
<div class="col-xs-9">
<p>Here are a few links which may provide some insight to Lisa:
<div>Hold My Hand</div>
<div>Lean on Me</div></p>
</div>
</div>
</div>
Solution two (using ul and li tag) :
<div class="container-fluid">
<div class="row">
<div class="col-xs-9">
<p>Here are a few links which may provide some insight to Lisa:
<ul>
<li>
Hold My Hand
</li>
<li>
Lean on Me
</li>
<ul>
</p>
</ul>
</div>
</div>
</div>
Solution three (using br tag) :
<div class="container-fluid">
<div class="row">
<div class="col-xs-9">
<p>Here are a few links which may provide some insight to Lisa:
</br>
Hold My Hand
</br>
Lean on Me
</p>
</ul>
</div>
</div>
</div>
Move the closing tag, </p>
<div class="container-fluid">
<div class="row">
<div class="col-xs-9">
<p>Here are a few links which may provide some insight to Lisa: </p>
Hold My Hand
Lean on Me
</div>
</div>
</div>

Bootstrap, how to align the caption to the right of the image within the thumbnail in a right way and align the button to the bottom of the caption?

As asked in the title, I am creating a website by using bootstrap v3.3.2.
The first question is that I am using the grid system to align the caption to the right of the thumbnail as shown below:
<div class="container">
<div class="thumbnail">
<div class="row">
<div class="col-md-6">
<a href="#">
<img class="img-responsive" src="images/pic.jpg">
</a>
</div>
<div class="col-md-6">
<div class="caption">
<h2>Title</h2>
<hr>
<p>A design specification provides explicit information about the requirements for a product and how the product is to be put together. It is the most traditional kind of specification, having been used historically in public contracting for buildings, highways, and other public works, and represents the kind of thinking in which architects and engineers have been trained.</p>
<hr>
<p class="caption-footer">
<span class="glyphicon glyphicon-heart"></span> Like it
<span class="glyphicon glyphicon-share"></span> Share it
</p>
</div>
</div>
</div>
</div>
</div>
Which turns out to be something like this:
As noticed, there is a large margin to the left of the image, which is not ideal. And when I resize the screen, it became more undesirable, with large margin to both side as shown below:
I think this may caused by the grid system since the col-md-6 has a fixed width. However I do not know how to fixe this.
The second question is that I try to align the two buttons to the bottom of the caption by adding a new class called caption-footer. However, this does not work.
Below is my CSS file for class caption-footer and how it turns out to be:
caption-footer{
position: absolute;
bottom:0;
left: 0;
}
I have checked quite a few links here (like: link1 link2). But none of them seems to work for my case.
Thanks in advance for any help!
One thing you can do simply place caption under col-md-12 div and buttons under another col-md-12 div.
<div class="container">
<div class="row">
<div class="col-md-6">
<a href="pulpitrock.jpg" class="thumbnail">
<p>Pulpit Rock: A famous tourist attraction in Forsand, Ryfylke, Norway.</p>
<img src="pulpitrock.jpg" alt="Pulpit Rock" width="284" height="213">
</a>
</div>
<div class="col-md-6">
<div class="col-md-12">
A design specification provides explicit information about the requirements for a product and how the product is to be put together. It is the most traditional kind of specification, having been used historically in public contracting for buildings, highways, and other public works, and represents the kind of thinking in which architects and engineers have been trained.
</div>
<div class="col-md-12">
Download
Images
</div>
</div>
</div>
</div>