新組件加載角度后焦點不會改變

Question

我正在嘗試修復 Angular2 Web 應用程序中屏幕閱讀器的可訪問性錯誤。 在 Chrome 中，當加載 componentA（Before 下的代碼）時，焦點是整個瀏覽器窗口，屏幕閱讀器旁白會宣布 componentA 頁面的標題。 但是，在 Edge 中，焦點保持與前一頁相同，導致標題未公布。 目標是無論在哪個瀏覽器中，標題都應該只公布一次。

我通過修改 componentA.html（After 下的代碼）並在 ngOnInit() 中將焦點設置為 componentA-id 來嘗試解決方案。 IE：

document.getElementById('componentA-id').focus();

現在在 Edge 中，敘述者可以正確地關注整個 componentA 並宣布 componentA 的標題。 但是在 Chrome 中，整個窗口都被聚焦，並且 componentA 也被聚焦，這導致標題被宣布兩次。 有什么方法可以禁用 Chrome 焦點，還是有其他方法可以解決此問題以實現我的目標？

之前：componentA.html

<div>
    <div title="ComponentA Title" role="banner">ComponentA Title</div>        
    ...
    ...
</div>

之后：componentA.html

<div aria-label="ComponentA Title" id="componentA-id" tabindex="-1">
    <div title="ComponentA Title">ComponentA Title</div>        
    ...
    ...
</div>

Answer 1

你有單頁應用程序嗎？ 你說：

“...焦點與上一頁保持一致”

這讓我覺得您正在將新內容加載到當前頁面中，例如單頁應用程序。

如果您正在更新頁面標題（這對於單頁應用程序的屏幕閱讀器來說是一件好事），則不一定會宣布新的頁面標題，因為屏幕閱讀器不知道您更新了頁面的某些內容. 如果頁面被重新加載，標題將被讀取。

要讀取頁面標題，您需要更新將aria-live設置為“polite”的元素。 該元素可以在視覺上隱藏，以便只有屏幕閱讀器知道它。

<div class="sr-only" aria-live="polite"></div>

（有關“僅 sr”類的信息，請參閱Bootstrap 3 中的 sr-only 是什么？ ）

更新頁面時，將頁面標題文本插入 <div> 中，如下所示：

<div class="sr-only" aria-live="polite">ComponentA Title</div>

屏幕閱讀器將閱讀新文本，您無需將焦點移到該文本上。