스크린 리더 사용자에게 HTML로 액세스 가능한 텍스트를 제공하는 방법은 무엇입니까?

Question

예를 들어 내부에 숫자 2가 있는 빨간색 블록과 같이 숫자가 있는 색칠된 div가 있는 웹사이트가 있습니다. 색상은 이해하는 데 중요합니다. 시각 장애가 있는 사용자가 나에게 이메일을 보내 스크린 리더에서 "2 red"를 읽을 수 있는지 물었습니다.

alt="2 red"로 추가하려고 했는데 아무런 효과가 없다고 하더군요. 그는 이것이 단지 이미지의 alt 태그를 읽는 것일 수도 있다고 생각했습니다.

div 요소와 함께 작동하는 좋은 방법이 있나요?

Answer 1

2020년 편집: 현재 display:none 或 visibility:hidden 일반적으로 콘텐츠가 시각적으로나 화면 판독기 모두에서 보이지 않게 만드는 것으로 보이므로(Firefox 및 Chrome에서 NVDA로 테스트) 아래 설명은 유효하지 않습니다. 현재 콘텐츠를 화면 밖으로 옮기는 것이 화면 리더 사용자에게 콘텐츠를 제공하는 유일한 방법인 것으로 보입니다. 다음 표도 참조하세요. http://stevefaulkner.github.io/HTML5accessibility/tests/hidden-2016.html

---

허용된 답변에 달리 명시되지 않는 한, aria-hidden=false가 설정된 경우 적어도 Chromevox¹ 및 NVDA²는 display:none 或 visibility:hidden CSS 属性的元素，如果设置了 aria-hidden=false CSS 속성이 있는 요소도 읽습니다. 그러나 이는 현재 Chrome(65)에서만 가능하며 Firefox나 Edge에서는 불가능합니다(내 테스트에 따르면).

따라서(현재 Chrome에서만 가능) 다음과 같이 할 수도 있습니다.

으아악

Chromevox와 NVDA가 첫 번째와 두 번째 헤더를 읽는 곳입니다. 참고: https://jsfiddle.net/4y3g6zr8/6/

모든 브라우저가 이 동작에 동의한다면 다른 솔루션에서 제안된 모든 CSS 트릭보다 더 깔끔한 솔루션이 될 것입니다.

^{1_{Chromevox https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn} 2_{NVDA https://www.nvaccess.org/}}

Answer 2

대체 텍스트에 관해서는 당신 말이 맞습니다. 이미지에서만 작동합니다. 하지만 aria-label을 사용하면 이미지가 아닌 요소의 alt 속성을 다음과 같이 바꿀 수 있습니다.

효과적인 솔루션

ARIA 태그 ★★★★★★

aria-label（不要与aria-labelledby混淆，后者从另一个元素的文本中提取可访问名称）用于为元素添加屏幕外描述性内容，类似于alt= 속성은 이미지에 오프스크린 설명 콘텐츠를 추가하고 이미지를 표시할 수 없을 때 사용됩니다.

와의 차이점은 aria-label를 이미지가 아닌 요소에 사용할 수 있다는 것입니다.

으아아아

내부 텍스트를 숨기려면 aria-hidden 속성을 추가하세요.

위치 + 자르기 + 접기 ★ ★ ★ ★

으아아아

자르기는 화면에 계속 표시되는 1px x 1px 요소를 완전히 숨기는 데 사용됩니다.

포지셔닝 ★★★

으아아아

들여쓰기 ★

으아아아

실제 들여쓰기 값은 페이지 레이아웃 범위를 벗어나는 한 중요하지 않습니다. 예시에서는 콘텐츠를 왼쪽으로 5,000픽셀 이동합니다.

이 솔루션은 전체 텍스트 블록에만 작동합니다. 앵커, 양식, 오른쪽에서 왼쪽으로 쓰는 언어 또는 다른 텍스트와 혼합된 특정 인라인 텍스트에서는 제대로 작동하지 않습니다.

일하지 않습니다

가시성: 숨김 및/또는 표시: 없음;

이러한 스타일은 텍스트를 숨겨 모든 사용자에게 보이지 않게 만듭니다. 텍스트는 페이지의 시각적 흐름에서 제거되고 화면 판독기에서는 무시됩니다. 스크린 리더로 콘텐츠를 읽으려면 이 CSS를 사용하지 마세요. 그러나 화면 판독기에서 내용을 읽을 수 없도록 하려면 이 방법을 사용하십시오.

너비:0px;높이:0px

위와 동일합니다. 높이나 너비가 없는 요소는 페이지 흐름에서 제거되므로 대부분의 스크린 리더는 이 내용을 무시합니다. HTML 너비와 높이가 동일한 결과를 생성할 수 있습니다. 화면 판독기에서 콘텐츠를 읽으려면 콘텐츠 크기를 0픽셀로 설정하지 마세요.

추가 정보:

• WebAIM 장애인 센터
• Fangs Mozilla 스크린 리더 에뮬레이터