2016-05-23 50 views
3

在我的情況下,在react-routerLink之後添加類似className: "btn btn-default"的內容。難以設置一個按鈕樣式的鏈接嗎?

像這樣:<Link className="btn btn-default" to={linkUrl}>Go!</Link>

塔會絆倒誰使用輔助技術來查看網站的人嗎?

回答

7

何時使用<a href>與一個<button><input type="submit">的一般提示:

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

我告誡不要更改與role屬性的元素的默認角色,因爲這最終會導致一些輔助技術一些混亂和潛在的衝突。這些也違反了ARIA使用規則的firstsecond規則。

請考慮鍵盤體驗。超級鏈接(<a href>)可以通過按回車鍵啓動。但是按下回車鍵或空格鍵可以觸發真實的<button>。當超鏈接具有焦點並且用戶按下空格鍵時,頁面將滾動一個屏幕。一些輔助技術的用戶會期望基於使用的元素的行爲。

我認爲值得一提的是,當釋放按鍵時,由空格鍵觸發的事件只會觸發,而使用Enter鍵會在您按下按鍵(釋放按鍵之前)時立即觸發事件。

因此,與使用上述列表中的任務權元素開始,那麼它的樣式但是你想看看。

+1

我同意所有這些,也許除了最後一句話。正如你所指出的那樣,推動按鈕的預期行爲通常不是頁面導航,所以通過錨點和樣式將其設計爲一個按鈕,最終可能會讓不依賴輔助技術的用戶感到困惑(取決於哪些用戶按鈕是)。 – ivarni

+0

屏幕閱讀器的用戶不會被混淆,因爲視覺風格不會被傳送。一個可以看到但是行動不便的用戶一般不會感到困惑,因爲狀態欄顯示它是什麼時候出現的。雖然我同意你的觀點,並且不喜歡造型鏈接看起來像按鈕,反之亦然,但它比使用錯誤的元素更好。 – aardrian

+0

對於不使用點擊設備的有視力的用戶可能會造成問題。如果他們徘徊在他們*可能*期望它像一個按鈕,雖然我無法想象他們會困惑。 –

2

TL;博士最好的做法是讓事情看起來像他們的行爲,但你可能不擁有的奢侈品,所以現在應該元素有什麼作用?

您應該設計風格並扮演您的鏈接和按鈕,以便將其傳達給用戶。這是一個很好的可用性實踐。

但是,這隻適用於品牌和營銷人員沒有發言權的世界。你有沒有聽過這樣的論點:「我們需要讓這個鏈接更加突出,讓訪問者更多地點擊它......」這就是鏈接開始變成這些怪物的地方,這些怪物已經不再被它們的外觀和行爲所識別。

所以,現在你無意中發現了無障礙的大辯論的一個:應該有一些符合它的行爲,還是應該有一個與之匹配的外觀的角色的角色?

的鏈接是指導瀏覽器到另一個位置(或者其他網頁,或在同一頁上的另一個位置)的元件。這是它的設計。

另一方面,按鈕被設計爲與頁面交互或提交數據。

複雜性是,當你有一個看起來像一個按鈕和盲人用戶手機支持的鏈接,並且支持人員說「單擊X按鈕」並且屏幕閱讀器宣佈Y鏈接(因爲按鈕的文本替代方案是錯誤的),那麼盲人用戶會非常沮喪,因爲他們既找不到按鈕,也找不到與X匹配的東西。

但是,如果您嘗試以正確的方式執行輔助功能,並且您的鏈接文本與元素,那麼國際海事組織,你應該始終在與它的行爲方式相匹配的元素上扮演角色。

在你的具體的例子,一個人在使用語音識別系統,如龍恐難點擊該鏈接,因爲它們可能會使用如下命令「按鈕」,列出所有的按鈕,而不是看到他們期待的元素。然後這個用戶必須猜測它實際上是一個鏈接,或者使用鼠標定位與元素進行交互。上述

0

通過aadrian和unobf提出的點是準確和良好說明。還有另一個無法避免的現實迫使開發者的手。

設計師經常deemphasize one or more actionable element in a group,例如刪除按鈕,因爲它是用來較不頻繁或災難性如果在錯誤使用。使用這種策略可以減少災難性錯誤。

由於許多經驗豐富的專業人士要求的markup for the control matches the presentation,開發商的第一反應可能是標記刪除控制爲紐帶。

爲視障如頜輔助技術依賴於單一類型的控制列表。 Surveys表明該策略被視覺障礙者相當頻繁地利用。

考慮到這些現實的可訪問性,這是一個非常不好的做法來標記的行動爲一些按鈕與一個或多個環節的操作,如刪除列表。視力受損的用戶可能不會將鏈接與按鈕相關聯,並可能完全錯過鏈接。

這個現實基本上迫使開發者手中。如果設計需要在按鈕列表中調用刪除鏈接,則開發人員必須將該鏈接標記爲按鈕,即使鍵盤導航不能完美地針對有視力的用戶進行對齊。

相關問題