Part 6 – Web Accessibility: Focusing on Visual Representation of navigation links
This is the last example for the web aria accessibility implementation, where we will look at how we can visually represent the links on keyboard navigation.
If you take an example of navigation links, here on anchor tags, we have a href attribute, which makes the anchor tag focusable by default where this black border/outline comes while navigating through the keyboard TAB key.
But here, we have to manage CSS styling in such a way that it looks presentable and clearly visible; look at the code solution given below.
⇒ Code SNIPPET 4 –
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #ccc;
list-style-type: none;
padding: 0;
margin: 0;
}
.topnav a {
float: left;
color: #000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
border: 2px solid transparent;
border-bottom-width: 4px;
}
.topnav a:hover {
color: #fff;
}
.topnav a:focus-visible {
outline: none;
color: #fff;
border-color: #017ea4;
border-width: 2px;
border-bottom-width: 4px;
border-style: solid;
}
.topnav a.active {
color: white;
}
</style>
</head>
<body>
<ul class="topnav" role="list" aria-label="top navigation">
<li class="item" role="listitem">
<a class="active" href="#home" target="_self" aria-label="Home">Home</a>
</li>
<li class="item" role="listitem">
<a href="#news" target="_self" aria-label="News">News</a>
</li>
<li class="item" role="listitem">
<a href="#contact" target="_self" aria-label="Contact">Contact</a>
</li>
<li class="item" role="listitem">
<a href="#about" target="_self" aria-label="About">About</a>
</li>
</ul>
<div>
<h2>Top Navigation Example</h2>
</div>
</body>
</html>
Here, as you can see, the navigation links are focusable on keyboard navigation by blue color border/outline, which you can customize as per the website’s theme.
I hope these 6 blogs written on web aria accessibility give you an idea about the accessibility from overview to testing and implementation.
