FontAwesome, Bootstrap 및 screenreader 접근성

트위터 부트 스트랩 프레임 워크 및 FontAwesome 아이콘 글꼴을 사용하여 스크린 리더 접근성에 대해 궁금합니다.FontAwesome, Bootstrap 및 screenreader 접근성

내가이 다른 아이콘 상황에서 찾고 있어요 : 모든 도우미 텍스트없이

<a href="#" class="btn btn-default" role="button"><span class="fa fa-pencil"></span> Edit</a>

2) 그리고 독립 아이콘 : 화면 판독기가 데리러 아이콘은 헬퍼 텍스트가

1) :

<a href="#" class="btn btn-default" role="button" title="Edit"><span class="fa fa-pencil"></span></a>

두 상황 모두에서 화면 판독기는 요소가 '수정'버튼임을 알리는 것이 이상적입니다.

당 FontAwesome 사이트 : 다른 아이콘 글꼴과는 달리 화면 판독기를 여행하지 않습니다 굉장

글꼴.

나는 화면 판독기는 이러한 각각의 상황에 반응하는 방법을 나에게 어떤 speech CSS를 FontAwesome 또는 부트 스트랩 관련 태그 정말 명확하지가 표시되지 않습니다.

나는 또한 aria-hidden과 부트 스트랩의 .sr-only을 알고 있으며 두 가지 상황을 모두 처리 할 수있는 이상적인 방법이 있어야합니다.

편집 : aria-label="Edit" 표준 title="Edit" 이상이 사용 않는 어떤 장점

예 2에 title="Edit을 추가?

편집 2 : 다른 사용 구현의 장단점을 설명하는 this article을 발견했습니다.

출처

2014-01-06 dmathisen

화면 판독기를 지원하려면 내가 테스트 한 하나 또는 여러 개의 스크린 판독기가 있습니까? 그들이 현재 어떻게 반응하는지 보려고 했습니까? – Stijn

나는 이것을 오해하고 있을지 모르지만 두 번째 예제에서 href 태그의 title 속성을 간단하게 사용할 수 있습니까? - 제목 = "편집". 지옥, 당신은 접근성과 함께 모든 돼지를 갈 수 실제로 편집 버튼 관련 정보 - 제목 = "편집 콘텐츠 xyz". 내 주위 구조에 달려 있다고 생각합니다. 편집 버튼이 기사 또는 섹션 내에있는 경우 편집자가 정확히 무엇을 * 편집할지 결정할 수있을 것입니다. 사실, 당신의 질문은 좋은 질문이지만 다른 질문을 던집니다. 기본적으로 편집중인 내용을 설명하십시오! –

@MatthewTrow 당신이 맞습니다. 나는 상황 2에서 title = "Edit"를 잊어 버렸다. 그것이 화면 판독기에 '읽는'것이 전부라면 그것은 완벽하다! 나는 또한 aria-label = "Edit"에 대해서 읽었지만 표준 타이틀 속성에 비해 어떤 이점이 있는지 확신하지 못했습니다. – dmathisen

우선 <a href="#"> 대신 <button>을 사용해야합니다. 빈 링크는 화면 판독기에 혼동을 줄 수 있지만 버튼은 버튼입니다. 즉, 링크는 장소를, 버튼은 작업을 수행합니다. (http://www.karlgroves.com/2013/05/14/links-are-not-buttons-neither-are-divs-and-spans/; https://ux.stackexchange.com/questions/5493/what-are-the-differences-between-buttons-and-links).

첫 번째 코드 샘플을 변형하여 부트 스트랩 .sr-only 클래스를 사용합니다. 우리가 button와 코드를 업데이트하고 클래스에 추가하는 경우, 우리는이 :

<button type="button" class="btn btn-default"><span class="fa fa-pencil"></span> <span class="sr-only">Edit</span></button>

우리는 이제 더 의미 론적으로 올바른 버튼 요소를 가지고; 발견 된 사용자는 연필 아이콘 편집을 봅니다. 스크린 리더 사용자는 "편집"을들을 것입니다. 모두가 이기고.

(주는 button 코드는 Bootstraps CSS Buttons 섹션에서 바로입니다.)

나의 이해에서

출처

2014-01-06 22:03:09 tjameswhite

예. 나에게 이것이 가장 합리적이다. 고맙습니다. – dmathisen

편집 : 내 응용 프로그램을 보면 많은 "버튼"에 href = "..."가 포함되어 있으며 해당 내용의 편집 페이지로 연결됩니다. 그래서 그들은 버튼처럼 보이는 링크입니다. – dmathisen

다행이다. 그리고 단추 대 링크의 경우에는 확실히 절단 및 건조되지 않습니다. 행운을 빕니다! – tjameswhite

나는도에 추가하는 것이 유용 할 수 있습니다 생각 : 연필을 보유하고 스팬 클래스에

aria-hidden="true"

상. 이렇게하면 스크린 리더가이 요소를 읽지 못하게됩니다.

<span class="fa fa-pencil" aria-hidden="true"></span>

출처

2016-09-12 14:01:25

FontAwesome, Bootstrap 및 screenreader 접근성

답변

관련 문제