Mac Voiceover读取selectWoo下拉框内容重复两次问题咨询

selectWoo是select2的可访问性增强版本，用于美化HTML下拉框，但在Mac VoiceOver辅助工具下，Tab聚焦到下拉框时会出现默认值重复读取的问题——VoiceOver会读出：“Select Something, Select something, menu pop up, menu pop-up combo box”。

原始示例代码 #

<html>
     <head>
          <link href="selectWoo.min.css" rel="stylesheet" />
          <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script type="text/javascript" src="selectWoo.min.js"></script>
     </head>
     <body>
          <form id="test-form" method="post" action="" name="accessible">
               <select id="select-something" class="form-control">
                    <option value="blah" selected="" disabled="" hidden="">Select Something</option>
               </select>
          </form>
          <script type="text/javascript">
               $("#select-something").selectWoo();
          </script>
     </body>
</html>

SelectWoo生成的最终DOM结构 #

<html>
     <head>
          <link href="selectWoo.min.css" rel="stylesheet">
          <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script type="text/javascript" src="selectWoo.min.js"></script>
     </head>
     <body>
          <form id="test-form" method="post" action="" name="accessible">
               <select id="select-something" class="form-control select2-hidden-accessible" tabindex="-1" aria-hidden="true">
                    <option value="blah" selected="" disabled="" hidden="">Select Something</option>
               </select>
               <span class="select2 select2-container select2-container--default" dir="ltr" style="width: 128px;">
                    <span class="selection">
                         <span class="select2-selection select2-selection--single" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-select-something-container" role="combobox">
                              <span class="select2-selection__rendered" id="select2-select-something-container" role="textbox" aria-readonly="true" title="Select Something">
                                   Select Something
                              </span>
                              <span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span>
                         </span>
                    </span>
                    <span class="dropdown-wrapper" aria-hidden="true"></span>
               </span>
          </form>
          <script type="text/javascript">
               $("#select-something").selectWoo();
          </script>
     </body>
</html>

重复读取的原因解析 #

从生成的DOM结构可以看出两个核心触发点：

• ARIA标签关联重复读取：作为焦点元素的.select2-selection--single（role="combobox"）设置了aria-labelledby="select2-select-something-container"，VoiceOver会读取该ID对应元素的文本内容——也就是"Select Something"。
• 内部textbox角色重复播报：被关联的.select2-selection__rendered元素额外设置了role="textbox"，且自身包含可见文本"Select Something"，VoiceOver在解析焦点元素的内部可访问节点时，会再次读取这段文本。

两者叠加就导致了默认值被重复读取的现象。

内容的提问来源于stack exchange，提问作者Zero Paskan