Question

我有一个可扩展的"csp": "script-src 'self' 'unsafe-inline'; object-src 'self'"元素，该元素在用户单击时被扩展。如何通过屏幕阅读器访问它。下面是我的代码

HTML

 select case.CaseNumber
           ,case.CaseOwner
           ,casepersons.personid
           ,casepersons.firstname
           ,casepersons.lastname
           ,casedetails.Detail
           ,casedetails.Type
           ,case when casedetails.Type=1 then 'Home'
                 when casedetails.Type=2 then 'Mobile'
                 when casedetails.Type=3 then 'Work'
            end as phone_type 
      from case 
      join casepersons
        on case.CaseNumber=casepersons.CaseNumber
      join (select personid
                   ,max(case when casedetails.Type=1 then details end) as Home_number
                   ,max(case when casedetails.Type=2 then details end) as Work_number
                   ,max(case when casedetails.Type=3 then details end) as Mobile_number
              from casedetails
          group by personid) as cd_1
        on casepersons.personid=cd_1.personid

JS：

div

变量<div class="expandable" (click)="expandItem()" attr.aria-expanded="isCollapsed"> Some content to show on expand </div>最初设置为false。

Answer 1

我可能显示了对JavaScript的无知，但之前从未见过(click)="expandItem()"或attr.aria-expanded="isCollapsed"。我已经看到了onclick="expandeItem()"和aria-expanded="false"。但我现在将忽略该方面。

首先，您的<div>没有语义，因此您需要几个ARIA属性来解决此问题。但是在执行此操作之前，请考虑“ First Rule of ARIA Use”，这实际上是不使用ARIA。尽可能使用本机语义HTML元素作为您的首选。

我需要有关您的情况的更多信息，但可以考虑使用真实的<button>而不是<div>。听起来您可能有一个“ disclosure widget”。

如果没有使用真实的<button>，那么您的<div>将需要：

tabindex="0"（以允许键盘焦点移至该位置）
点击处理程序（适用于鼠标用户）
键盘处理程序（供键盘用户使用 space 和 enter 进行选择）
一个role="button"，因此屏幕阅读器会宣布适当的语义
（我假设您的<div>有标签）

除此之外，您还需要解决aria-expanded问题。在按钮（或div）的onclick中，只需切换aria-expanded的值即可。由于该属性是“ state”（而不是“ property”），因此屏幕阅读器会自动宣布更改其值。

将aria用于可扩展项

1 个答案: