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

Program Tip

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

programtip 2020. 11. 5. 18:53

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

개요

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 사양이 있습니까? 아니면 아직 게임 초반인가요?

파헤친 후, 공식적인 권장 사항을 찾았습니다. 불행히도 현재 대부분은 작동하지 않습니다. 브라우저와 화면 판독기는 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>

제한 / 고려 사항

As of February 2011, IE 9 beta reads all <title> and <desc> tags, which is probably undesirable. However, NVDA, JAWS, and WindowEyes will read the aria-label when the element also contains role="img".
If loading an SVG file (that is, not inline in HTML), the root-level <title> tag will become the browser page's title, which will be read by the screen reader.

References

In general, HTML5 tries to discourage authors from providing content that's hidden from sighted users, because (a) it often contains new information that would be of use to sighted users, (b) it's frequently poorly written because there's little feedback to the (normally) sighted author, and (c) it is not maintained as carefully and therefore can go stale quickly.

So, instead of hiding the information in an attribute, consider placing it normally on the page as a caption in a <p> tag adjacent to the svg or math section, or put the text in a <figcaption> tag and put that and the svg/math section in a <figure> element.

If you really don't want sighted users to see the information, I believe that the standard technique is to absolutely position the caption with a large negative "left" value, at least until such time as screen readers catch up with HTML5.

Regarding SVG, similar but not identical to the above suggestions, it seems the best current approach may be to use aria-labelledby referring to the id of the element that contains the 'alt text' (not the alt text itself).

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

You can also use both the title and desc elements by setting aria-labelledby="svg1title svg1desc".

Source: http://www.sitepoint.com/tips-accessible-svg/

Annoyingly, if you do this you will need to (somehow) ensure that the IDs are unique within the entire page (in other words if you use lots of SVGs they all need to have different IDs for the title). This also applies to other IDs within the SVG and is a general severe annoyance with inline SVG.

(If this is severely problematic, you might want to look into embedding SVGs using the img tag - you can still do this 'inline' without an external file if you use a data URL and base64-encode the SVG.)

In theory an svg image should be more accessible than a raster image with an alt-tag. For one thing text can be kept as text in an svg, whole fragments of text not just a short sentence. It's sad if screenreaders ignore that extra information. However not all text content may be visible at any given time, same as for html. Many svg images are static images, but a growing trend (based on actual use on the open web) seems to be to use more dynamic svgs, e.g for displaying graphs or diagrams that can be edited, or folded out.

Another thing to be aware of is that <title> elements will be shown as tooltips (for sighted users) in all svg-capable browsers AFAIK (at least the latest generation), and that you can put them inside other svg elements too (the title applies to the element to which it is a direct child).

Haven't tested this, but you could try adding alt="whatever" to a container DIV. Yes, it's not a valid attribute for DIV, but I can see older screen readers not caring where alt appears.

For example:

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

Obviously, this is under the assumption that screen readers will read alt attributes (incorrectly) on elements other than IMG. Haven't tested, but it's better than waiting for screen readers to catch up if it works.

참고URL : https://stackoverflow.com/questions/4697100/accessibility-recommended-alt-text-convention-for-svg-and-mathml

'Program Tip' 카테고리의 다른 글

IEnumerable의 폐기를 고려해야합니까? (0)	2020.11.05
프로세스를 X 번 실행하는 더 파이썬적인 방법 (0)	2020.11.05
Spring : 정적 필드에 값을 주입하는 방법은 무엇입니까? (0)	2020.11.05
자식 뷰 컨트롤러의 topLayoutGuide (0)	2020.11.05
Websocket 전송 안정성 (재 연결 중 Socket.io 데이터 손실) (0)	2020.11.05

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

programtip

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

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

MathML

SVG

'Program Tip' 카테고리의 다른 글

'Program Tip'의 다른글

티스토리툴바

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

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

MathML

SVG

'Program Tip' 카테고리의 다른 글

'Program Tip'의 다른글

관련글

티스토리툴바