单选按钮/复选框的可访问性问题

Question

在我们的应用程序中，我们将 Trinidad JSF 用于 UI。 当用户登录到应用程序时，会显示一个带有记录表的页面。为每条记录显示单选按钮以选择记录。 当用户选择一组单选按钮时，默认虚线出现在单选按钮周围。而且，当用户使用向上和向下箭头键在单选按钮组中导航时，默认虚线仍保留在所选单选按钮上。这个场景很好

现在，用户登录到应用程序，将显示一个带有记录表的页面，并且用户使用鼠标按钮选择了一个单选按钮。用户观察到单选按钮周围没有出现默认虚线。这意味着，单选按钮上的焦点未激活。

为什么用鼠标选择单选按钮时没有出现虚线？

浏览器：IE 8。

请写下您宝贵的cmets。

呈现如下的 html 表单

<table>  
<tr>  
<td class="x7f xbd">  
<input name="cardholderList:selected" id="cardholderList:0" title="Select" type="radio" value="0">  
</td>  
...  
</tr>  
<tr>  
<td class="x7f xbd">  
<input name="cardholderList:selected" id="cardholderList:1" title="Select" type="radio" value="1">  
</td>  
...  
</tr>  
<tr>  
<td class="x7f xbd">  
<input name="cardholderList:selected" id="cardholderList:2" title="Select" type="radio" value="2">  
</td>  
...  
</tr>  
</table>  

Answer 1

如果鼠标单击无法启用轮廓，则需要自己设置样式。

a:active{outline:none;} 
a:focus {outline: 2px solid green;}