bootstrap模式關閉按鈕aria-hidden = true

根據the bootstrap document，添加aria-hidden="true"告訴輔助技術跳過模態的DOM元素，這說明主modal div中存在aria-hidden=true。bootstrap模式關閉按鈕aria-hidden = true

爲modal-header div中的模式關閉按鈕添加aria-hidden=true的目的是什麼？

<!-- Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     **<*div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;  </button> 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
     </div>*** 
     <div class="modal-body"> 
     ... 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
</div><!-- /.modal -->

來源

2014-01-18 Reshma

隱藏在關閉按鈕上的詠歎調的目的是在該標記中，「X」或「times」 - 符號不會告訴屏幕閱讀器很多。

，使之獲得的關閉按鈕，應該是這個樣子：

<button type="button" title="Close"> 
    <span aria-hidden="true">&times;</span> 
    <span class="hide">Close</span> 
</button>

而且在視覺上隱藏.hide內容與CSS。

來源

2014-02-05 09:08:26

hallo @Daniel，我只是想問你爲什麼要使用詠歎調隱藏？如果我刪除它的工作，因爲它是。 – Virbhadrasinh

我們使用'aria-hidden'來隱藏X /'×'，因此屏幕閱讀器將不會宣佈「x」或「times」，並添加隱藏的可視文本「Close」，以便屏幕閱讀器擁有適當的按鈕標籤。 –

不知道這是回答，但我最近有這個問題，這是我的答案，希望它有幫助。

關閉按鈕看起來是這樣的

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times; </button>

或

<button type="button" class="close" data-dismiss="modal">&times;</button>

來源

2014-06-02 03:42:17 Britnet

ARIA屬性被用來使網頁更容易被那些殘疾兒童，特別是那些使用屏幕閱讀器。看到的好處是，我們可以看到×（x）符號被用作'X'，表示如果點擊它，模式將關閉。對於使用屏幕閱讀器，如果該模式設置適當的人：

<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

當屏幕閱讀器越過這個代碼，它會讀簡單的寫着「關閉」。

<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span>&times;</span></button> 

<button type="button" class="close" data-dismiss="modal" aria-label="Close">&times;</button>

當由屏幕閱讀器讀取這兩種會導致同樣的結果，它說：「關閉乘法符號按鈕」或諸如此類的話。

<button type="button" class="close" data-dismiss="modal" aria-label="Close" aria-hidden="true">&times;</button>

在最後這種情況下，加入ARIA隱藏=「真」的按鈕本身就會使屏幕閱讀器忽略整個關閉按鈕，迫使用戶繼續閱讀到頁腳找到之前關閉按鈕（如果頁腳中有一個關閉按鈕，如果沒有關閉按鈕，他們將很難關閉它）

典型Web用戶的功能在所有這些示例中都是相同的，但對於一部分人羣來說，在設計，佈局和標籤佈局方面需要注意和考慮可能是經常訪問的網站和網站之間的差異網站再也沒有訪問過。

我知道我在這裏談論了一些話題，但是當使用aria-attributes時，只是假裝你正在運行屏幕閱讀器並且直觀地看到內容，只能通過視覺理解的內容應該在其上具有詠歎調隱藏標籤，並且ARIA標籤系統提供了更多類型的標籤，以向需要它的人提供附加信息，包括僅對屏幕閱讀器可見的元素。

來源

2015-03-27 15:29:40

@丹尼爾孫子的答案應該是公認的答案。

只是加了一點東西：引導還提供了SR-只類隱藏「無障礙」的元素。

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 

<button type="button" class="sr-only" data-dismiss="modal">Dismiss</button>

@戈德Agarunov - 感謝您非常翔實的答案和ARIA標籤。我認爲爲可訪問性添加元素比將新元素嵌套到現有元素更有意義。

來源

2017-01-13 10:29:03 TomerBu

bootstrap模式關閉按鈕aria-hidden = true

回答

相關問題