在一個範圍內處理與鏈接相同的按鈕

Question

我有一塊文本，我想用與顯示錨點相同的方式呈現按鈕。我想使用按鈕的原因是因爲可訪問性和屏幕閱讀器。問題是按鈕換行到了一個新行，錨點沒有。我希望按鈕的行爲像錨。

這會作出反應的應用程序

http://codepen.io/anon/pen/BKedyL

HTML

按鈕

<span> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet fermentum ante, 
    <button id="button" class="buttonLink">a gravida quam. Duis nisi mi, tincidunt facilisis venenatis vitae, pulvinar sed arcu. Ut eu felis dignissim metus dapibus mollis. Curabitur ac sapien scelerisque, vehicula nulla nec, posuere enim. Duis mollis ex nec pulvinar volutpat. Vivamus </button> 
    ornare lorem in leo tincidunt cursus. Quisque ornare elit vel ante porta, ac dignissim massa sagittis. Aenean rutrum nulla nunc, a rhoncus enim sodales sit amet. Integer accumsan justo dolor, sed dapibus erat faucibus et. 
</span> 

<h1>Anchor</h1> 

<span> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet fermentum ante, <a href="#" id="anchor" class="linkButton">a gravida quam. Duis nisi mi, tincidunt facilisis venenatis vitae, pulvinar sed arcu. Ut eu felis dignissim metus dapibus mollis. Curabitur ac sapien scelerisque, vehicula nulla nec, posuere enim. Duis mollis ex nec pulvinar volutpat. Vivamus</a ornare lorem in leo tincidunt cursus. Quisque ornare elit vel ante porta, ac dignissim massa sagittis. Aenean rutrum nulla nunc, a rhoncus enim sodales sit amet. Integer accumsan justo dolor, sed dapibus erat faucibus et. 
</span> 

內部使用

CSS

.buttonLink { 
    background-color: transparent; 
    border: none; 
    cursor: pointer; 
    padding: 0; 
    text-align: left; 
    font: 1em "Lato"; 
    text-decoration: underline; 
    color: blue; 
    display: inline; 
} 

.buttonLink:focus { 
    outline: none; 
} 

.linkButton { 
    color: blue; 
} 

Answer 1

A按鈕基本上是矩形對象。您不能像文本通常在段落中包裹矩形對象一樣。如果它太長而不能放在同一條線上，它必須從一條新線開始，以便圍繞它畫出一個邊界框。

你說你想使用一個按鈕「因爲可訪問性和屏幕閱讀器」。你可以擴展嗎？

按鈕和定位標記都內置了輔助功能。您可以使用鍵盤選項卡（前提是您的<a>有一個href），您可以使用ENTER鍵選擇兩者（除了使用SPACE鍵選擇按鈕）。

你應該考慮你的「大塊文本」的目的是什麼。作爲屏幕閱讀器用戶，如果我在導航到定位標記時聽到「鏈接」，我通常希望如果選擇它，就會被帶到不同的頁面。 （屏幕閱讀器會告訴我它是否是頁內鏈接）。這就是鏈接 - 帶你到另一個頁面。

如果我聽到'按鈕'，那麼我預計會執行一些操作。它可能會添加到購物車或顯示對話框，以便我可以選擇一個文件。

因此，鏈接與按鈕的範例是不同的。你想讓你的「大量文本」做什麼？表現得像鏈接或按鈕？忽略它的顯示方式。這可以用CSS修復。

正如Paulie_D所說，您可以使用role='button'或role='link'結合<span>來獲得可訪問性。只要確保你也有tabindex=0，這樣用戶就可以選擇到<span>並處理點擊，空間和輸入事件。

Answer 2

問題是，HTML button總是一個矩形框，所以如果你有一個多行文本，它不能顯示像一個錨會做。現在

，一個簡單的辦法就是使用span元素與tabindex和role屬性：

<span role="button" tabindex="0">My button</span> 

的tabindex啓用鍵盤導航和role=button將通知輔助技術，這個跨度其實一個按鈕。

當然，你將不得不關心其他WCAG考慮像鏈接：描述控制

C15: Using CSS to change the presentation of a user interface component when it receives focus的目的

• G183: Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them
• 提供了鏈接文本（如您不使用默認組件）

Answer 3

你說你想要一個可訪問性和屏幕閱讀器的按鈕，但這並沒有提到任何關於actio ñ。快速提示，這解決自己的輔助功能：

• 如果用戶要一個新的頁面（或錨在頁面上），使用<a href>。
• 如果用戶正在更改當前頁面的狀態，請使用<button>。
• 如果用戶提交表單，使用<input type="submit">或<button type="submit">

現在，你想要做的，其中這些？

沒有一切必要的背景下，可能試試<label>？它本地可點擊，可以添加到標籤順序，並與屏幕閱讀器一起使用。稍微調整它可以做你想做的事。

我叉你的筆爲例：http://codepen.io/aardrian/pen/QNXobR

我添加了以下樣式（可以類label和/或使用任何你想要的風格，我只是將其匹配到默認的鏈接樣式）：

.buttonLink { 
    width: 0; 
    height: 0; 
    overflow: hidden; 
    visibility: hidden; 
    line-height: 0; 
} 

label { 
    color: blue; 
    text-decoration: underline; 
    cursor: pointer; 
} 

調整你的<button>有一個由<label>（aria-labelledby）覆蓋簡短的文字，並確保標籤進入該選項卡順序（tabindex="0"）：

<button id="button" class="buttonLink" aria-labelledby="buttonLabel">button text</button> 
<label for="button" tabindex="0" id="buttonLabel">very long text</label> 

從視覺上來說，它是做你想做的，當你通過屏幕閱讀器運行時，<button>可用，這要歸功於<label>。

無論如何，我懇求您不要使用<span>或<div>。