基本上我有一個需要我們添加一些信息到他們的網站，將主要在無障礙閱讀器可以說的代碼添加備註客戶端是這樣的：添加備註屏幕閱讀器告訴顧客

如果您在查看本網站時需要幫助，請致電（在此輸入電話號碼）。

如果沒有輔助功能閱讀器，他們只是正常瀏覽而不需要在網站的前端顯示。

這可能嗎？有沒有像我們可以添加到網站的元標記？

2016-07-07 Dusten Lee Harward

請考慮鍵盤用戶也可以從中受益。爲此，有大量的「跳過導航」或「跳轉到內容」模式，可以做你想做的事情，包括對鍵盤用戶友好的模式。

鍵盤友好跳過導航的我made a CodePen example，但這裏是代碼...

HTML

<a href="#Skip">Skip Navigation</a> 

<main id="Skip"> 
    <h1>The Page Is About This</h1> 
    <p> 
    This is some page content 
    </p> 
</main>

CSS

a[href="#Skip"] { 
    display: block; 
    color: #fff; 
    background: #000; 
    margin: 0; 
    padding: .5em 1em; 
    font-weight: bold; 
} 

a[href="#Skip"]:link, 
a[href="#Skip"]:visited { 
    color: #fff; 
    text-decoration: none; 
} 

@media screen and (min-width: 62em) { 
    a[href="#Skip"] { 
    position: absolute; 
    left: -1000px; 
    z-index: 2; 
    } 
    a[href="#Skip"]:active, 
    a[href="#Skip"]:focus, 
    a[href="#Skip"]:hover { 
    display: block; 
    top: 0; 
    left: 0; 
    } 
}

你的情況，你可以只改變鏈接到電話號碼：

<a href="tel:888-888-8888" id="a11yCall">Call us if you...</a>

和關鍵你的CSS關閉該href或class或id屬性：

a#a11yCall { ... }

來源

2016-07-07 18:54:33 aardrian

只需將位於頂部的文本隱藏起來：固定並保留：-9000px。它應該被讀取但不可見。

隻言片語。輔助功能不僅適用於盲人！

來源

2016-07-07 17:35:41

有作爲「無障礙閱讀」沒有這樣的平常的事。

您可能正在考慮使用「屏幕閱讀器」，但使用這些工具的人羣中有一小部分人，並且他們對低視力人羣沒有任何益處，例如使用屏幕放大鏡或其他特定功能工具（增強對比度......），也沒有給聽力，認知或肌肉骨骼疾病患者帶來任何益處。

假設只有使用屏幕閱讀器的盲人需要幫助是設計可訪問網站的第一個問題。

讓非盲人無法訪問的內容也是歧視。

現在，如果您確實仍然想要爲屏幕閱讀器用戶專門設計的筆記，請使用aria-label。不要使用任何CSS技巧。

來源

2016-07-12 10:33:44 Adam

添加備註屏幕閱讀器告訴顧客

回答

HTML

CSS

相關問題