I am currently developing a project with an emphasis on Web accessibility.
Snippet of Code:
function removeBorder(){
li=document.getElementById("link");
li.classList.add(".remove")
}body{
background:#dddddd;
}
p:focus{
border:1px solid red;
}
li{
list-style-type:none;
font-size:1rem
padding:30px;
}
a{
text-decoration:none;
}
a:focus{
border:1px solid red;
border-radius:2px;
}
a:hover{
background:orange;
}
.remove{
border:none;
}<html>
<head>Borders
</head>
<body>
<p tabindex="0">
Click one the page. Then use TAB to navigate the list items</p>
<ul aria-role="list">
<li aria-role="listitem"><a id="link" onclick="removeBorder()" tabindex="0" href="#">Item One</a></li>
<li aria-role="listitem"><a tabindex="0" onclick="removeBorder()" href="#">Item Two</a></li>
<li aria-role="listitem"><a tabindex="0" onclick="removeBorder()" href="#">Item Three</a></li>
</ul>
</body>
</html>I have two distinct user groups.
1. Regular users:
Upon hovering over elements like 'li', I observe an orange background color.
Issue: Upon clicking on the element, a red border appears.
Is there a way to display borders only when focused by tab and not when clicked? How can I eliminate the borders upon clicking?
2. Keyboard-only Users:
No issues arise while focusing with tab as the borders appear in red as expected.