(已解決）無障礙網頁的 aria-haspopup 下了後 aria-lable 的中文語音就變成聽不懂的英文男聲語音 (附錄音）

無障礙 aria-label aria-haspopup

peace&love 2021-03-17 10:32:56 ‧ 957 瀏覽

分享至

如題本來 aria-label="選擇帳戶" 裡的字都能被唸出來
但加了 aria-haspopup="true" 後
**aria-label="選擇帳戶"**這段的語音就變成好像英文的一段聽不懂的男性聲音
如下
https://drive.google.com/file/d/1KP8lcHPQabnManrqDtlVDvrtIOyXgM3-/view?usp=sharing

使用
Mac pro
Visual studio
Google browser

<form class="subcategory-form">
          <div>選擇帳戶
            <button mat-button 
            class="selectFormButton" 
            aria-label="選擇帳戶" 
            aria-haspopup="true" 
            (click)="this.showAcountList()">
            <img src="../../assets/img/Vector.png" alt="">
          </button>
        </div>

ccutmis iT邦高手 2 級 ‧ 2021-03-17 10:43:35 檢舉

https://developer.mozilla.org/zh-TW/docs/Learn/Accessibility/What_is_accessibility

peace&love iT邦新手 4 級 ‧ 2021-03-17 11:00:02 檢舉

感謝但後來想想這可能跟中英文轉換有關係, 那外國網站可能就不會有這個問題（？

peace&love iT邦新手 4 級 ‧ 2021-03-18 17:28:08 檢舉

聽同事的用硬幹解決

拿掉 aria-haspopup = "true" 標籤
直接加在 aria -lable ="選擇帳戶, 彈出選單按鈕"

然後在<p> <span> 上也會有語音亂碼的部分,
加 role = "heading" 就會當作標題來念,
但是他會加念一段 “標題層級二” , 感覺有點多餘ＸＤ

登入發表討論