접근성 : SVG 및 MathML에 권장되는 대체 텍스트 규칙?

Question 1

개요

HTML5는 이제 외부 네임 스페이스에 의존하지 않고 HTML 문서를 허용<svg> 하고 <math>마크 업합니다 ( 여기에서 괜찮은 개요 ). 둘 다 alt오늘날의 화면 판독기 소프트웨어에서 효과적으로 무시되는 고유 속성 아날로그 (아래 참조)를 가지고 있습니다. 따라서 시각 장애인은 이러한 요소에 액세스 할 수 없습니다.

이러한 새 요소에 대한 표준 대체 텍스트 규칙을 구현할 계획이 있습니까? 나는 문서를 샅샅이 뒤져서 말랐습니다!

추가 세부 정보

SVG와 관련 하여 SVG의 대체 텍스트는 루트 title또는 desc태그 의 내용으로 간주 될 수 있습니다 .

<svg>
  <title>An image title</title>
  <desc>This is the longer image description</desc>
  ...
</svg>

나는 그것을 읽는 스크린 리더를 하나 찾았 지만 이것이 표준입니까? SVG를 삽입하는 이전 방법 은 <object>태그가 화면 판독기에 의해 일관성없이 취급 되기 때문에 접근성 문제 가있었습니다.

MathML 관련 : MathML의 대체 텍스트는 alttext속성에 저장되어야 합니다 .

<math alttext="A squared plus B squared equals C squared">
  ...
</math>

스크린 리더가이를 인식하지 못하는 것 같기 때문에 수학 렌더링 라이브러리 인 MathJaxaria-label 는 런타임에 텍스트를 속성에 삽입합니다 .

<span aria-label="[alttext contents]">...</span>

안타깝게도 NVDA, JAWS 등은 아직 이러한 레이블을 안정적으로 읽지 못합니다. ( WAI-ARIA 에 대한 추가 정보 )

두 가지 모두 지원되지 않는 ARIA 속성으로 성공하지 못한 경우 속성을 사용해 보았습니다 title. 이러한 "외부"HTML 요소에서도 무시되는 것 같습니다.

요약

빠른 해킹 이상 으로 이러한 새로운 HTML 요소에 대체 텍스트를 배치 하는 권장 방법 을 찾고 있습니다. 내가 간과하고있는 W3C 사양이 있습니까? 아니면 아직 게임 초반인가요?

Question 2

파헤친 후, 공식적인 권장 사항을 찾았습니다. 안타깝게도 현재 대부분은 작동하지 않습니다. 브라우저와 화면 판독기는 Math 및 SVG가 액세스 가능한 것으로 간주되기 전에 구현해야 할 많은 사항 이 있지만 상황 이 조회되기 시작했습니다.

면책 조항 : 아래 권장 사항은 지난 몇 달 동안 코딩하면서 얻은 것입니다. 뭔가 잘못 되었다면 알려주세요. 나는 브라우저와 AT 소프트웨어가 진행됨에 따라 이것을 최신 상태로 유지하려고 노력할 것입니다.

MathML

SVG

추천

최상위 <title>및 <desc>태그를 루트 SVG 태그 role="img"와 함께 사용 aria-label합니다.

<svg role="img" aria-label="[title + description]">
  <title>[title]</title>
  <desc>[long description]</desc>
  ...
</svg>

제한 / 고려 사항

2011 년 2 월 현재 IE 9 베타는 모든 <title> 및 <desc>태그를 읽으 므로 바람직하지 않을 수 있습니다. 그러나 NVDA, JAWS 및 WindowEyes는 aria-label요소에 role="img".
(하지 인라인 HTML에서, 그) SVG 파일을로드 할 경우, 루트 수준 <title>태그는 브라우저 페이지의 제목이 될 것이다 것 스크린 리더로 읽을 수.

참고 문헌

Question 3

일반적으로 HTML5는 (a) 시력이있는 사용자에게 유용 할 새로운 정보를 포함하는 경우가 많고, (b) (일반적으로) 사용자에 대한 피드백이 거의 없기 때문에 잘못 작성되는 경우가 많기 때문에 작성자가 시력이있는 사용자에게 숨겨진 콘텐츠를 제공하지 못하도록합니다. ) 눈에 보이는 저자, (c) 조심스럽게 관리되지 않아서 빨리 부실 할 수 있습니다.

따라서 속성에서 정보를 숨기는 대신 일반적으로 페이지 <p>에서 svg 또는 수학 섹션에 인접한 태그 의 캡션으로 배치 하거나 텍스트를 <figcaption>태그에 넣고 해당 정보와 svg / math 섹션을 <figure>요소.

눈에 보이는 사용자가 정보를 보지 못하도록하려면 최소한 화면 판독기가 HTML5를 따라 잡을 때까지 큰 음의 "왼쪽"값으로 캡션을 절대적으로 배치하는 것이 표준 기술이라고 생각합니다.

Question 4

SVG와 관련하여 위의 제안과 유사하지만 동일하지는 않지만 현재 가장 좋은 방법은 '대체 텍스트'(대체 텍스트 자체가 아님)를 포함하는 요소의 ID를 참조하여 aria-labelled를 사용하는 것 같습니다.

<svg aria-labelledby="svg1title">
<title id="svg1title">A wide rectangle</title>
<rect width="70" height="10" fill="black" />
</svg>

aria-labelledby = "svg1title svg1desc"를 설정하여 title 및 desc 요소를 모두 사용할 수도 있습니다.

출처 : http://www.sitepoint.com/tips-accessible-svg/

귀찮게도 이렇게하면 ID가 전체 페이지 내에서 고유한지 확인해야합니다 (즉, SVG를 많이 사용하는 경우 모두 제목에 대해 다른 ID를 가져야 함). 이것은 SVG 내의 다른 ID에도 적용되며 인라인 SVG에서 일반적으로 심각한 성가심입니다.

(심각하게 문제가있는 경우 img 태그를 사용하여 SVG를 포함하는 방법을 살펴볼 수 있습니다. 데이터 URL을 사용하고 SVG를 base64로 인코딩하는 경우 외부 파일 없이도이 '인라인'을 수행 할 수 있습니다.)

Question 5

이론적으로 svg 이미지는 alt 태그가있는 래스터 이미지보다 더 쉽게 액세스 할 수 있어야합니다. 한 가지 예를 들어 텍스트는 짧은 문장이 아닌 전체 텍스트 조각 인 svg의 텍스트로 유지 될 수 있습니다. 스크린 리더가 추가 정보를 무시하면 안타깝습니다. 그러나 html과 마찬가지로 모든 텍스트 콘텐츠가 항상 표시되는 것은 아닙니다. 많은 svg 이미지는 정적 인 이미지이지만 (개방형 웹에서 실제 사용을 기반으로) 점점 더 동적 인 SVG를 사용하는 경향이 있습니다 (예 : 편집 또는 접을 수있는 그래프 또는 다이어그램 표시).

주의해야 할 또 다른 사항은 <title>요소가 모든 svg 지원 브라우저 AFAIK (최소한 최신 세대)에서 도구 설명으로 표시되며 다른 svg 요소에도 넣을 수 있다는 것입니다 (제목은 직계 하위 요소).

Question 6

이것을 테스트하지는 않았지만 컨테이너 DIV에 alt = "whatever"를 추가 할 수 있습니다. 예, DIV의 유효한 속성은 아니지만 이전 스크린 리더는 alt가 표시되는 위치를 신경 쓰지 않는 것을 볼 수 있습니다.

예를 들면 :

<div aria-label="Whatever" alt="Whatever" role="math">
    <math>...</math>
</div>

분명히 이것은 스크린 리더가 IMG 이외의 요소에서 alt 속성을 (잘못) 읽을 것이라는 가정하에 있습니다. 테스트하지 않았지만 화면 판독기가 작동하는지 기다리는 것보다 낫습니다.