angularjs와 같은 프레임워크를 사용할 경우 접근성에 미치는 영향은 무엇입니까?

angularjs와 같은 프레임워크를 사용할 경우 접근성에 미치는 영향은 무엇입니까?

델의 입장

우리는 공공/교육 기관을 지배하는 특정 법률을 준수하기 위해 웹 접근성을 추진하고 있습니다.지금까지는 다음 사항을 확인하는 것만으로 해결했습니다.

1. 레이아웃은 논리적으로 정리되어 있습니다.
2. 에는 「」가 있습니다.alt=""하지만 우리가 기어를 넣고 이것에 대해 정말로 생각해야 한다는 것을 빠르게 깨닫고 있다.

델이 검토하고 있는 것

쭉 살펴봤는데요.AngularJS동적 웹 애플리케이션을 위한 프레임워크로 사용되지만 접근성 수준에 어떤 영향을 미칠지 우려됩니다.

앱 JavaScript 등의 을 망가뜨릴 수 .{{ item.something }}, 「」를 ng-repeat를 <li>는 빈 「빈 태그」, 「빈 태그」.

질문.

이러한 프레임워크에 대해 잘 알려진 베스트 프랙티스나 정보 리소스가 있는지 궁금합니다.동적인 마크업이나 인라인 태그 부착에 크게 의존하고 있기 때문에, 스크린 리더나 JavaScript나 CSS가 꺼진 브라우저에서는 횡설수설로 인식될 수 있습니다.

이미지에 alt 텍스트 사용, 제목 사용, 컨텐츠에 적절한 HTML(5) 구조 사용 등 모든 동일한 원칙이 적용됩니다.

JavaScript를 사용하여 작성할 수도 있지만 지난 5년간 화면 리더는 이를 이해하고 브라우저의 접근성 API를 사용하여 DOM에 액세스합니다.자바스크립트 이외의 측면은 단순히 접근성 문제가 아닙니다.JavaScript를 사용하지 않는 화면 리더 사용자 수는 일반 사용자 수와 같기 때문에 개발 중에 볼 수 있는 원시 마크업이 아닌 완전한 형식의 HTML로 나타납니다.

NB: 저는 점진적인 강화가 좋은 방법이라고 생각합니다만, Angular.js에서는 사전에 그 방법을 사용하지 않기로 결정했습니다.퍼포먼스와 진보적인 향상에 대해 알고 싶다면, 이것이 답이라고 생각합니다.

물론 표준 콘텐츠페이지 작성에만 Angular.js를 사용하는 것은 아니기 때문에 WAI-ARIA의 사양과 HTML에서의 ARIA의 사용방법을 파악해야 합니다.는 탭, 트리, 그리드 등 기존의 HTML 프랙티스에 포함되지 않는 것을 동적으로 마크하는 방법을 지정합니다.

WAI ARIA 기술의 실제적인 예로서 Whatsock 기술 스타일 가이드를 살펴보겠습니다.

기존 웹 사이트와 비교한 한 가지 차이점은 페이지를 새로 고치지 않고 키보드 포커스를 관리할 수 있다는 것입니다.하지만 그것과는 별도로 WAI-ARIA는 읽어야 할 부분이다.

방법즉, 할 수 없는 디렉티브( a "Angular" 등를하는 것은 매우 . ngCrick on ngCrick on ngCrick on ngCrick on ngCrick on ngCrick on ngCrick ati).div접근성 지원은 제공되지 않았습니다.각도 1.3배 ngAria입니다.이제 응용 프로그램에 ngAria를 포함시킴으로써 특정 ARIA 속성이 자동으로 적용되므로 관리할 필요가 없습니다.

를 들면, 「」는,ngClick 디렉티브가 적용됩니다.tabIndex="0" ★★★★★★★★★★★★★★★★★」ngKeypress도 곧 ngAria를 추가할 입니다.role="button"클릭 가능한 요소의 목적을 전달하기 위해: 이것은 다른 역할에서 덮어쓸 수 있습니다.상세한 것에 대하여는, 다음의 풀 요구를 참조해 주세요.https://github.com/angular/angular.js/pull/10318

이 되는 또 다른 방법은 ngAria를 입니다.aria-disabled ng-disabled이를 통해 프레임워크에 의해 비활성화되어 있는 커스텀컨트롤에 디폴트로 액세스 할 수 있습니다.예를 들어 다음과 같습니다.

<md-button ng-disabled="true">

ngAria를 사용하면 다음과 같이 됩니다.

<md-button ng-disabled="true" aria-disabled="true">

지원되는 Atribute의 전체 목록은 ngAria API 문서를 참조하십시오.https://docs.angularjs.org/api/ngAria

ngAria는 계속 진화할 것입니다(모듈이 아닌 베이킹으로 만들어졌으면 좋겠다고 생각합니다).그러나 핵심 프레임워크에 의해 최종적으로 지원되는 접근성을 볼 수 있는 것은 매우 좋은 일입니다.

접근성을 염두에 두고 책임 있는 코드를 작성하는 것은 여전히 우리 각자에게 달려 있습니다. 하지만 Angular는 더 이상 당신을 방해하지 않을 것입니다.이 질문에 대한 Alistair의 답변에는 다음과 같은 훌륭한 자원이 있습니다.키보드 포커스 관리, HTML에서의 ARIA 사용 등의 힌트는 반드시 참고하겠습니다.ngAria의 새로운 Angular.js 개발자 가이드도 참조할 수 있습니다.https://docs.angularjs.org/guide/accessibility

그리고 한 가지 더: ngAria에 대한 아이디어가 있다면, 반드시 Github 문제를 만들거나 풀 요청을 제출하세요!지역 주도의 노력입니다.

Angular의 가장 큰 문제JS 및 접근성은 다음과 같습니다.

1. 포커스 관리 - 경로로 콘텐츠 섹션이 업데이트되고 해당 섹션이 포커스를 포함하면 브라우저가 문서 맨 위로 포커스를 전송하여 화면 리더와 키보드만 사용하는 사용자가 손실됩니다.당신은 적극적으로 당신의 초점을 관리해야 합니다.
2. 동적 업데이트 알림 - 데이터 바인딩을 통해 JavaScript와 상호 작용하지 않고 DOM에 업데이트를 수행할 수 있습니다.이러한 업데이트가 중요한 경우 화면 판독기 사용자에게 아리아 라이브 영역을 사용하여 이러한 업데이트에 대해 알려야 합니다.특히 iOS에서 제대로 작동시키는 것은 어려울 것입니다.
3. 폼 검증 - 각도JS 예제에서는 모두 폼 검증에 실패했을 때 표시되는 오류 메시지에 요소를 사용합니다.입력 필드와의 관련성은 모두 올바르지 않습니다.입력 필드를 자동으로 표시하는 경우(특히 블러 사용 완료 시) #2에서 설명한 것과 같은 문제에 대처해야 합니다.
4. 제목 속성 업데이트 - 라우터가 URL을 변경할 때 문서 제목을 업데이트해야 합니다.

그 외에는 HTML 어플리케이션일 뿐입니다.

이 Github repo에는 이러한 문제에 대처하기 위한 Angular.js 지침과 서비스가 있습니다.https://github.com/dequelabs/ngA11y

언급URL : https://stackoverflow.com/questions/18853183/what-are-the-accessibility-implications-of-using-a-framework-like-angularjs