JAWS 正在使用向上和向下按钮遍历时读取禁用按钮内的内容一种更好的 HTML 结构方式

问题描述

JAWS 正在使用向上和向下按钮遍历时读取禁用的按钮内容。当我通过非禁用按钮时，它会读取按钮的 aria 标签并移动到下一个按钮，但是当我转到禁用按钮时，它正在读取其中的内容它就像 svg 和其他。

<div class="ms-Stack button-container css-391"><button class="viewandsignbutton"
        aria-label="View and sign Non-disclosure Agreement" tabindex="0"><svg class="filter-white" width="14"
            height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
                d="M4.375 4.375C4.375 4.45703 4.37272 4.55046 4.36816 4.65527C4.36816 4.75553 4.37956 4.85124 4.40234 4.94238C4.42513 5.02897 4.46615 5.10189 4.52539 5.16113C4.58919 5.22038 4.6849 5.25 4.8125 5.25H7V6.125H4.8125C4.63021 6.125 4.45931 6.09082 4.2998 6.02246C4.1403 5.9541 4.0013 5.86068 3.88281 5.74219C3.76432 5.6237 3.6709 5.4847 3.60254 5.3252C3.53418 5.16569 3.5 4.99479 3.5 4.8125V4.375H4.375ZM11.375 7V3.5H2.625V7H6.01562L6.89062 7.875H1.75V2.625H12.25V7.875H10.6094L9.73438 7H11.375ZM7.74512 6.25488L14 12.5029L13.3779 13.125L7.12988 6.87012L7 6.125L7.74512 6.25488ZM14 0.875V11.2656L13.125 10.3906V1.75H0.875V11.293C1.86849 11.612 2.87565 11.8512 3.89648 12.0107C4.92188 12.1702 5.95638 12.25 7 12.25C7.57878 12.25 8.15072 12.2249 8.71582 12.1748C9.28548 12.1247 9.85514 12.0518 10.4248 11.9561L10.459 12.168L10.4248 11.9561L10.8828 11.8604L11.6143 12.5986C10.8441 12.7673 10.0785 12.8971 9.31738 12.9883C8.56087 13.0794 7.78841 13.125 7 13.125C5.79232 13.125 4.60742 13.0225 3.44531 12.8174C2.28776 12.6123 1.13932 12.3138 0 11.9219V0.875H3.5V0H10.5V0.875H14Z"
                fill="#171717"></path>
        </svg>View and sign</button></div>
<div class="ms-Stack button-container css-391"><button class="viewandsignbutton" aria-label="xyz" tabindex="0" disabled=""><svg class="filter-white-hidden" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.375 4.375C4.375 4.45703 4.37272 4.55046 4.36816 4.65527C4.36816 4.75553 4.37956 4.85124 4.40234 4.94238C4.42513 5.02897 4.46615 5.10189 4.52539 5.16113C4.58919 5.22038 4.6849 5.25 4.8125 5.25H7V6.125H4.8125C4.63021 6.125 4.45931 6.09082 4.2998 6.02246C4.1403 5.9541 4.0013 5.86068 3.88281 5.74219C3.76432 5.6237 3.6709 5.4847 3.60254 5.3252C3.53418 5.16569 3.5 4.99479 3.5 4.8125V4.375H4.375ZM11.375 7V3.5H2.625V7H6.01562L6.89062 7.875H1.75V2.625H12.25V7.875H10.6094L9.73438 7H11.375ZM7.74512 6.25488L14 12.5029L13.3779 13.125L7.12988 6.87012L7 6.125L7.74512 6.25488ZM14 0.875V11.2656L13.125 10.3906V1.75H0.875V11.293C1.86849 11.612 2.87565 11.8512 3.89648 12.0107C4.92188 12.1702 5.95638 12.25 7 12.25C7.57878 12.25 8.15072 12.2249 8.71582 12.1748C9.28548 12.1247 9.85514 12.0518 10.4248 11.9561L10.459 12.168L10.4248 11.9561L10.8828 11.8604L11.6143 12.5986C10.8441 12.7673 10.0785 12.8971 9.31738 12.9883C8.56087 13.0794 7.78841 13.125 7 13.125C5.79232 13.125 4.60742 13.0225 3.44531 12.8174C2.28776 12.6123 1.13932 12.3138 0 11.9219V0.875H3.5V0H10.5V0.875H14Z" fill="#171717"></path></svg>xyz and abc</button></div>

顶部按钮是非禁用按钮，它可以一次性专注于在下巴中的遍历，而底部按钮是禁用的按钮，可以获得多个焦点，其中的内容也获得焦点。

解决方法

发生了什么？

禁用的按钮并不意味着接收焦点，添加 tabindex="0" 可能会在某些屏幕阅读器/浏览器组合中覆盖此行为。

另一个可能的问题是可访问性树正在获取您的 SVG（如果您使用 IE 进行测试）。

我该如何解决？

删除 tabindex="0"，它不应该真的需要存在于 <button> 上，然后该站点将在所有 HTML 5 浏览器中按预期运行。然后确保您阻止 SVG 接收焦点。

一种更好的 HTML 结构方式

aria-label 在很多情况下都很棒，但仍然没有 100% 的覆盖率！所以我们可以用 visually hidden text 代替它。这意味着没有兼容性问题，因为它可以在任何浏览器/屏幕阅读器组合中一直运行到 IE6！

另一个问题是 IE 中的 SVG，因此我们需要确保如果它们用于演示，我们将它们隐藏起来，让屏幕阅读器不可见。

role="presentation" 不一致，所以我推荐 focusable="false"（对于 IE 行为不端）和 aria-hidden="true"，因为这只是从可访问性树中完全删除了 SVG。

将这些放在一起，我建议使用类似于以下的结构：

.visually-hidden { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6,IE7 - a 0 height clip,off to the bottom right of the visible 1px box */
    clip: rect(1px,1px,1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers,clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}

<div class="ms-Stack button-container css-391">
    <!-- remove the aria-label -->
    <button class="viewandsignbutton">
        <!-- focusable="false" is to stop the SVG getting focus in IE,aria-hidden is to ensure the SVG is not read as it adds no value -->
        <svg focusable="false" aria-hidden="true"></svg>
        <!-- in this example we are adding **ADDITIONAL** text for screen reader users so we just add visually hidden text at the end of the visible text -->
        View and sign <span class="visually-hidden"> Non-Disclosure Agreement</span>
     </button>
</div>
<div class="ms-Stack button-container css-391">
    <!-- remove the aria-label -->
    <button class="viewandsignbutton" disabled="">
        
        <svg focusable="false" aria-hidden="true"></svg>
        <!-- in this example we are adding **DIFFERENT** text for screen reader users so we hide the original text from screen readers and add visually hidden text for the screen reader -->
        <span aria-hidden="true">xyz and abc</span> <span class="visually-hidden">xyz</span>
    </button>
</div>

在 svg 中添加 role="presentation" 将解决这个问题。

accessibility accessibility jaws-screen-reader