时间戳

首页 > 解决方案 > 我们可以在点击时删除 HTML 元素的边框吗？但保持边界为焦点

javascript - 我们可以在点击时删除 HTML 元素的边框吗？但保持边界为焦点

问题描述

我正在做一个项目，考虑到 Web 可访问性。

代码：

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>

我有两组用户。

1.普通用户

当我将鼠标悬停在元素上时，在这种情况下，“li”我看到了橙色的背景颜色。

问题：当我点击元素时，有一个红色边框。

有没有一种方法可以让我们只在使用选项卡而不是在单击时设置边框？单击时如何删除边框？

2.仅限键盘用户

当我们用标签聚焦时没问题，边框按预期显示为红色。

标签： javascripthtmlcss

解决方案

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:hover{
  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>

您应该同时添加焦点和悬停，它可以工作。

推荐阅读