자바스크립트와 접근성

자바스크립트와 접근성

웹 개발자로서, 제가 작업하는 많은 프로젝트들은 정부의 우산에 해당하므로 508 Accessibility 법규 및 때로는 W3C Access 가이드라인의 적용을 받습니다.이러한 요구사항을 충족하면서 어느 정도까지 자바스크립트를 사용할 수 있습니까?

JAJS, Orca 등과 같은 현대적인 접근성 소프트웨어에서 지원하는 디스플레이 모달 대화, 팝업 등을 수행하기 위해 jQuery와 같은 패키지를 사용하는 자바스크립트는 구체적으로 어느 정도입니까?과거에, 그 규칙은 "링스에서 작동하지 않는다면, 스크린 리더에게는 작동하지 않을 것입니다."와 같은 것이었습니다.이것이 여전히 사실입니까, 아니면 이들 분야에서 더 많은 진전이 있었습니까?

편집: 자바스크립트가 아닌 폴백만 있다면 자바스크립트는 괜찮다는 것에 공감대가 형성된 것 같지만, 스크린 리더 소프트웨어에서 AJAX의 지원 여부는 아직 불확실한 것 같습니다.이것에 대한 구체적인 경험이 있는 사람이 있다면 가장 도움이 될 것입니다.

접근성이 주된 관심사인 경우, 항상 표준 호환 HTML을 사용하여 웹 사이트를 시작합니다(문서 유형 정의를 선택하고 계속). 웹 응용 프로그램(양식 제출 등)인 경우 HTTP GET 및 POST만 사용하여 양식이 작동하는지 확인합니다.일단 당신이 완전한 웹사이트/애플리케이션을 가지고 있다면, 당신은 사이트가 여전히 작동하는 한 CSS와 자바스크립트의 비트를 추가할 수 있습니다. 둘 중 하나 또는 둘 다 해제되어 있습니다.

여기서 가장 중요한 개념은 '점진적 향상'gressive Enhancement)입니다.CSS/JavaScript를 사용하여 벨과 호루라기를 추가하지만 웹 사이트/응용 프로그램은 둘 중 하나가 없어도 완벽하게 작동합니다.

파이어폭스용 웹 개발자 플러그인을 사용하여 508, WAI, CSS off, 자바스크립트 오프 테스트를 위한 훌륭한 도구.

제 생각에 답은 물건을 어떻게 설계하느냐에 있는 것 같습니다.JQuery는 눈에 띄지 않고 접근할 수 있는 기능을 가지고 있습니다.그 비결은 당신의 AJAX 호출 주변에 중복성이 있어서 자바스크립트가 없는 브라우저들이 여전히 당신의 서비스를 이용할 수 있도록 하는 것입니다.다시 말해, 자바스크립트 응답, 대화상자 등이 있는 곳이라면 그에 상응하는 성능이 저하되어야 합니다.

접근성을 염두에 두고 있으며 두 사용 사례 모두에 대해 적절하게 테스트하고 있는 경우(JavaScript vs.비자바스크립트) 두 사용자 모두를 만족시키는 애플리케이션을 작성할 수 있어야 합니다.

예제 ($(문서).명확성과 간결성을 위해 ready call 생략:

<script>
  $("#hello").click(function(){
    alert("Hi");
  });
</script>
<a href="/say_hello.htm" id="hello">Say Hello</a>

사소한 예이지만 기본적으로 이것은 자바스크립트가 지원되는 경우에만 클릭 자바스크립트 이벤트를 평가합니다.그렇지 않으면 일반 링크처럼 작동하고 _hello.htm으로 이동합니다. - 개발자로서 귀하의 임무는 두 결과가 적절하게 처리되었는지 확인하는 것입니다.

도움이 되기를 바랍니다!

점진적인 향상은 확실히 하나의 경로이지만 화면 판독기가 브라우저를 작업의 기초로 사용하는 경향이 있기 때문에 비침투성이 자바스크립트 접근성의 전부와 끝이 되는 것은 아닙니다.이 브라우저들은 자바스크립트를 지원하기 때문에 페이지의 스크립트는 계속 실행됩니다.페이지의 한 부분을 클릭하면 화면 판독기가 인식하지 못하는 다른 부분이 변경될 수 있기 때문에 AJAX의 특히 문제입니다.

그러나 AJAX가 성숙해감에 따라 접근성을 높이는 방법들이 등장하고 있습니다.AJAX에 접근할 수 있도록 하는 현대적인 방법은 WAI-ARIA를, 구현하기 위한 좋은 방법은 Google의 AxsJAX를 살펴보십시오.

---

봐

• http://juicystudio.com/article/making-ajax-work-with-screen-readers.php
• http://juicystudio.com/article/improving-ajax-applications-for-jaws-users.php
• http://www.paciellogroup.com/blog/ ?p=15
• http://www-03.ibm.com/able/resources/ajaxaccessibility.html

FlashAid가 완벽한 솔루션과는 거리가 멀지만 점진적인 향상 기능을 사용하고 Flash가 있는 경우 사용자가 Accessibility API를 사용하지 않는 경우에만 AJAX를 사용했다면 합리적인 솔루션을 제공할 수 있습니다.(Windows의 경우).

장기적으로는 WAI-ARIA가 해결책입니다.JAWS 10(베타)과 파이어박스에서 어느 정도 지원되지만, 현재 모든 사용자에게 충분하지는 않습니다.

JQuery는 눈에 띄지 않고 접근할 수 있는 기능을 가지고 있습니다.그 비결은 당신의 AJAX 호출 주변에 중복성이 있어서 자바스크립트가 없는 브라우저들이 여전히 당신의 서비스를 이용할 수 있도록 하는 것입니다.다시 말해, 자바스크립트 응답, 대화상자 등이 있는 곳이라면 그에 상응하는 성능이 저하되어야 합니다.

코드를 재사용하기 위한 한 가지 방법은 JSON이나 XML을 반환하면서 스스로 호출할 수 있는 "함수"(또는 서버측 논리에 사용하는 모든 것)를 호출하는 "단순한" 페이지를 설정하는 것입니다.

예를 들어 /static/myform.asp(서버 측에서는 /ajax/myform.asp와 동일한 논리를 '포함'합니다)를 사용하여 django의 템플릿으로 사용합니다.

물론, 완전한 기능을 갖춘 벨과 호루라기 프레임워크를 사용하면 훨씬 쉽게 만들 수 있지만(html과 xml '템플릿'을 장고에서 동일한 뷰로 사용하는 것을 생각해 보십시오), 같은 아이디어가 적용됩니다.

이렇게 하면 jQuery를 사용하여 준비된 문서의 모든 앵커를 반복하고 앵커 자체 링크를 사용하여 클릭 시 이벤트를 추가하여 /static/ajax/를 교체하면 생활이 편리해질 수 있습니다.

이것이 너무 큰 부담이 되는 이유를 생각해 낼 수 있는 사람이 있습니까?이 '디자인 아이디어'에 심각한 결함이 있는지 알고 싶습니다.

인정된 답변은 시기상으로는 괜찮지만, 지금은 구식이라고 생각합니다.(말 그대로 이 답변을 작성할 당시 10년 전의 일입니다.WCAG 2.1은 몇 주 전에 완성되었습니다...)

W3C WAI-Authoring Design Patterns Practices 문서에는 올바른 의미론, 상태 및 역할을 보조 기술에 전달하기 위해 자바스크립트가 필요한 다양한 공통 위젯 예가 포함되어 있습니다.

사용자가 페이지 내 업데이트를 활성화하기 전에 화면 판독기에 페이지 내 업데이트가 무엇인지에 대한 의미적 단서를 제공하는 데 주의를 기울여야만 AJAX에 액세스할 수 있습니다.또한 아리아 라이브 영역에서 "20개의 새로운 항목이 로드되었습니다" 등을 발표할 수 있는 경우 화면 판독기에 실제로 변경된 내용을 알려야 할 수도 있습니다.이것은 자바스크립트로 이루어집니다.

접근성에 대한 지식이 '진보적 향상'에 그치고, 위에서 인정한 답변이 그러한 입장에 대한 근거라고 생각한다면, 업데이트가 필요할 수도 있습니다.요즘은 일이 빨리 진행되고 있습니다.

언급URL : https://stackoverflow.com/questions/266777/javascript-and-accessibility