접근성 준수
개발자를 위한 UI 및 UX 도구를 제공하는 선도적인 글로벌 제공업체인 Infragistics의 Angular 팀은 가능한 최상의 사용자 경험을 보다 쉽게 만들 수 있는 구성 요소와 도구를 제공하기 위해 최선을 다하고 있습니다. 우리의 목표는 귀하가 모든 사용자를 위한 최고의 애플리케이션과 최고의 사용자 경험을 만드는 데 집중할 수 있도록 하는 것입니다.
여기에서는 Ignite UI for Angular 내의 Angular 그리드, 차트, UI 구성 요소 및 컨트롤에 대한 접근성 지원 및 규정 준수에 관한 특정 정보를 찾을 수 있습니다.
Section 508 Compliance
재활법(Rehabilitation Act) 제 508조는 1998년 의회에서 모든 연방 기관이 전자 및 정보 기술에 장애인이 접근할 수 있도록 하도록 개정되었습니다. 그 이후로 섹션 508 준수는 정부 기관의 요구 사항일 뿐만 아니라 소프트웨어 솔루션을 제공하고 웹 페이지를 디자인할 때도 중요합니다.
508조 법률의 1194.22조는 특히 웹 기반 인트라넷과 인터넷 정보 및 시스템을 대상으로 하며 따라야 할 16가지 규칙 세트를 포함합니다. 최소한의 노력으로 웹 응용 프로그램 및 웹 사이트가 이러한 규칙과 호환되도록 하기 위해 Infragistics Ignite UI for Angular 관련 접근성 규칙을 준수하는지 확인하는 조치를 취했습니다.
아래 매트릭스는 시각적 컨트롤(및 관련 구성 요소)이 제공하는 접근성 지원에 대한 높은 수준의 개요를 제공합니다. 개별 컨트롤/구성 요소의 접근성 준수에 대해 자세히 알아보려면 해당 컨트롤/구성 요소의 이름을 클릭하세요.
Ignite UI for Angular Compliance with Section 508
| 구성요소/원리 | (ㅏ) |
(비) |
(씨) |
(디) |
(이자형) |
(에프) |
(g) |
(시간) |
(나) |
(제이) |
(케이) |
(엘) |
(중) |
(N) |
(영형) |
(피) |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 그리드 | ||||||||||||||||
| - 그리드 | ||||||||||||||||
| - 계층적 그리드 | ||||||||||||||||
| - 트리그리드 | ||||||||||||||||
| 다른 | ||||||||||||||||
| - 아바타 | ||||||||||||||||
| - 뱃지 | ||||||||||||||||
| - 배너 | ||||||||||||||||
| - 하단 탐색 | ||||||||||||||||
| - 버튼 | ||||||||||||||||
| - 버튼 그룹 | ||||||||||||||||
| - 달력 | ||||||||||||||||
| - 카드 | ||||||||||||||||
| - 회전목마 | ||||||||||||||||
| - 체크박스 | ||||||||||||||||
| - 칩 | ||||||||||||||||
| - 순환 진행 | ||||||||||||||||
| - 콤보 | ||||||||||||||||
| - 날짜 시간 편집기 | ||||||||||||||||
| - 날짜 선택기 | ||||||||||||||||
| - 분배기 | ||||||||||||||||
| - 대화 | ||||||||||||||||
| - 쓰러지 다 | ||||||||||||||||
| - 확장 패널 | ||||||||||||||||
| - 아이콘 | ||||||||||||||||
| - 입력 | ||||||||||||||||
| - 입력 그룹 | ||||||||||||||||
| - 라벨 | ||||||||||||||||
| - 선형 진행 | ||||||||||||||||
| - 목록 | ||||||||||||||||
| - 월 선택기 | ||||||||||||||||
| - 탐색바 | ||||||||||||||||
| - 네비게이션 서랍 | ||||||||||||||||
| - 라디오 그룹 | ||||||||||||||||
| - 라디오 | ||||||||||||||||
| - 선택하다 | ||||||||||||||||
| - 슬라이더 | ||||||||||||||||
| - 스낵바 | ||||||||||||||||
| - 스위치 | ||||||||||||||||
| - 탭 | ||||||||||||||||
| - 시간 선택기 | ||||||||||||||||
| - 토스트 | ||||||||||||||||
| - 툴팁 |
전설
| 컨트롤/구성요소는 이 특정 영역에서 완전히 접근 가능합니다. | ||
| 특정 구성을 구현한 후 이 특정 영역에서 컨트롤/구성 요소에 액세스할 수 있습니다. | 예: NoopAnimationsModule 유틸리티 모듈을 사용하여 애니메이션 비활성화 허용 | |
| 어떤 종류의 작업을 수행하지 않으면 컨트롤/구성 요소에 완전히 액세스할 수 없습니다. | ||
| '여백' | 이 특정 규칙은 컨트롤에 적용되지 않습니다. |
Warning
위 표는 Ignite UI for Angular 테마 라이브러리의 기본 테마 에만 해당됩니다. 사용자 정의 테마, 타이포그래피, 애니메이션 및 색상과 관련된 시각적 변경 사항의 경우 체크리스트 준수 여부가 다를 수 있습니다.
Compliance Information
- a- 텍스트가 아닌 모든 요소에 해당하는 텍스트가 제공되어야 합니다(예: "alt", "longdesc" 또는 요소 콘텐츠를 통해).
- b- 모든 멀티미디어 프리젠테이션에 대한 동등한 대안은 프리젠테이션과 동기화되어야 합니다.
- c- 웹 페이지는 색상으로 전달되는 모든 정보를 색상 없이도 사용할 수 있도록 디자인해야 합니다(예: 컨텍스트 또는 마크업).
- d- 문서는 관련 스타일 시트 없이도 읽을 수 있도록 구성되어야 합니다.
- e- 서버 측 이미지 맵의 각 활성 영역에 대해 중복 텍스트 링크가 제공되어야 합니다.
- f- 사용 가능한 기하학적 형태로 영역을 정의할 수 없는 경우를 제외하고는 서버측 이미지 맵 대신 클라이언트측 이미지 맵이 제공되어야 합니다.
- g- 데이터 테이블에 대해 행 및 열 헤더가 식별되어야 합니다.
- h- 행 또는 열 머리글의 논리적 수준이 두 개 이상인 데이터 테이블의 데이터 셀과 머리글 셀을 연결하는 데 마크업을 사용해야 합니다.
- i- 프레임 식별 및 탐색을 용이하게 하는 텍스트로 프레임 제목을 지정해야 합니다.
- j- 페이지는 2Hz보다 크고 55Hz보다 낮은 주파수에서 화면이 깜박이는 현상을 방지하도록 설계되어야 합니다.
- k- 다른 방법으로는 규정을 준수할 수 없는 경우 웹사이트에서 이 부분의 규정을 준수할 수 있도록 동등한 정보나 기능이 포함된 텍스트 전용 페이지를 제공해야 합니다. 텍스트 전용 페이지의 내용은 기본 페이지가 변경될 때마다 업데이트됩니다.
- l- 페이지에서 콘텐츠를 표시하거나 인터페이스 요소를 생성하기 위해 스크립트 언어를 사용하는 경우 스크립트에서 제공하는 정보는 보조 기술로 읽을 수 있는 기능적 텍스트로 식별되어야 합니다.
- m- 웹 페이지에서 페이지 콘텐츠를 해석하기 위해 클라이언트 시스템에 애플릿, 플러그인 또는 기타 애플리케이션이 있어야 하는 경우 페이지는 §1194.21(a)를 준수하는 플러그인 또는 애플릿에 대한 링크를 제공해야 합니다. 엘.
- n- 전자 양식이 온라인으로 작성되도록 설계된 경우, 양식은 보조 기술을 사용하는 사람들이 모든 지침과 신호를 포함하여 양식 작성 및 제출에 필요한 정보, 필드 요소 및 기능에 접근할 수 있도록 허용해야 합니다.
- o- 사용자가 반복적인 탐색 링크를 건너뛸 수 있는 방법이 제공되어야 합니다.
- p- 시간 제한이 있는 응답이 필요한 경우 사용자에게 경고하고 더 많은 시간이 필요함을 나타낼 수 있는 충분한 시간을 제공해야 합니다.
WCAG compliance
WCAG는 단순히 접근 가능한 웹 콘텐츠를 개발하는 방법에 대한 공식적인 지침 집합입니다. 이러한 표준은 동일하거나 매우 유사하지만 508 표준보다 더 높은 수준의 접근성을 나타냅니다. WCAG는 주로 HTML 접근성에 중점을 둡니다.
| 구성요소/가이드라인 | 1.1 |
1.2 |
1.3 |
1.4 |
2.1 |
2.2 |
2.3 |
2.4 |
2.5 |
3.1 |
3.2 |
3.3 |
4.1 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 그리드 | |||||||||||||
| - 그리드 | |||||||||||||
| - 계층적 그리드 | |||||||||||||
| - 트리그리드 | |||||||||||||
| 다른 | |||||||||||||
| - 아바타 | |||||||||||||
| - 뱃지 | |||||||||||||
| - 배너 | |||||||||||||
| - 하단 탐색 | |||||||||||||
| - 버튼 | |||||||||||||
| - 버튼 그룹 | |||||||||||||
| - 달력 | |||||||||||||
| - 카드 | |||||||||||||
| - 회전목마 | |||||||||||||
| - 체크박스 | |||||||||||||
| - 칩 | |||||||||||||
| - 순환 진행 | |||||||||||||
| - 콤보 | |||||||||||||
| - 날짜 시간 편집기 | |||||||||||||
| - 날짜 선택기 | |||||||||||||
| - 분배기 | |||||||||||||
| - 대화 | |||||||||||||
| - 쓰러지 다 | |||||||||||||
| - 확장 패널 | |||||||||||||
| - 아이콘 | |||||||||||||
| - 입력 | |||||||||||||
| - 입력 그룹 | |||||||||||||
| - 라벨 | |||||||||||||
| - 선형 진행 | |||||||||||||
| - 목록 | |||||||||||||
| - 월 선택기 | |||||||||||||
| - 탐색바 | |||||||||||||
| - 네비게이션 서랍 | |||||||||||||
| - 라디오 그룹 | |||||||||||||
| - 라디오 | |||||||||||||
| - 선택하다 | |||||||||||||
| - 슬라이더 | |||||||||||||
| - 스낵바 | |||||||||||||
| - 스위치 | |||||||||||||
| - 탭 | |||||||||||||
| - 시간 선택기 | |||||||||||||
| - 토스트 | |||||||||||||
| - 툴팁 |
전설
| 컨트롤/구성요소는 이 특정 영역에서 완전히 접근 가능합니다. | ||
| 특정 구성을 구현한 후 이 특정 영역에서 컨트롤/구성 요소에 액세스할 수 있습니다. | 예 1: 지침 2.2. 특정 구성요소의 경우 추가 작업 및 시간 매개변수를 설정해야 합니다. 예 2: 지침 2.3. NoopAnimationsModule 유틸리티 모듈을 사용하여 애니메이션을 비활성화할 수 있습니다. | |
| 어떤 종류의 작업을 수행하지 않으면 컨트롤/구성 요소에 완전히 액세스할 수 없습니다. | ||
| '여백' | 이 특정 규칙은 컨트롤에 적용되지 않습니다. |
Warning
위 표는 Ignite UI for Angular 테마 라이브러리의 기본 테마 에만 해당됩니다. 사용자 정의 테마, 타이포그래피, 애니메이션 및 색상과 관련된 시각적 변경 사항의 경우 체크리스트 준수 여부가 다를 수 있습니다.
Compliance Information
- 원칙 1 - 인지 가능- 정보 및 사용자 인터페이스 구성 요소는 사용자가 인지할 수 있는 방식으로 표시되어야 합니다.
- 지침 1.1 -텍스트 대안- 텍스트가 아닌 콘텐츠에 대해 큰 활자체, 점자, 음성, 기호 또는 간단한 언어 등 사람들이 필요로 하는 다른 형식으로 변경할 수 있도록 텍스트 대안을 제공합니다.
- 지침 1.2 -시간 기반 미디어- 시간 기반 미디어에 대한 대안을 제공합니다.
- 지침 1.3 –적응성- 정보나 구조를 잃지 않고 다양한 방식(예: 단순한 레이아웃)으로 표시할 수 있는 콘텐츠를 만듭니다.
- 지침 1.4 -구별 가능- 전경과 배경을 분리하는 등 사용자가 콘텐츠를 더 쉽게 보고 들을 수 있도록 합니다.
- 원칙 2 - 작동 가능- 사용자 인터페이스 구성 요소와 탐색이 작동 가능해야 합니다.
- 지침 2.1 -키보드 접근 가능- 키보드에서 모든 기능을 사용할 수 있도록 합니다.
- 지침 2.2 –충분한 시간- 사용자가 콘텐츠를 읽고 사용할 수 있는 충분한 시간을 제공합니다.
- 지침 2.3 –발작 및 신체적 반응- 발작이나 신체적 반응을 일으키는 것으로 알려진 방식으로 콘텐츠를 디자인하지 마십시오.
- 지침 2.4 –탐색 가능- 사용자가 탐색하고, 콘텐츠를 찾고, 위치를 파악하는 데 도움이 되는 방법을 제공합니다.
- 지침 2.5 –입력 방식- 사용자가 키보드 이외의 다양한 입력을 통해 기능을 더 쉽게 조작할 수 있도록 합니다.
- 원칙 3 - 이해 가능- 사용자 인터페이스의 정보와 작동은 이해 가능해야 합니다.
- 지침 3.1 -읽기 가능- 텍스트 내용을 읽고 이해할 수 있게 만듭니다.
- 지침 3.2 -예측 가능- 웹 페이지가 예측 가능한 방식으로 나타나고 작동하도록 합니다.
- 지침 3.3 -입력 지원- 사용자가 실수를 방지하고 수정하도록 돕습니다.
- 원칙 4 - 견고함- 콘텐츠는 보조 기술을 포함한 다양한 사용자 에이전트로 해석될 수 있을 만큼 충분히 견고해야 합니다.
- 지침 4.1 -호환 가능- 보조 기술을 포함하여 현재 및 미래의 사용자 에이전트와의 호환성을 최대화합니다.
WAI-ARIA Support
2014년에 W3C는 장애가 있는 사용자가 더 쉽게 접근할 수 있도록 웹 콘텐츠와 웹 애플리케이션을 디자인하는 방법을 정의한 WAI-ARIA 사양을 마무리했습니다.
이 섹션에서는 프레임워크의 접근성(ARIA) 지원과 구성 요소의 directionality 얼마나 쉽게 관리할 수 있는지 보여줍니다.
Enabling right-to-left direction (RTL)
Ignite UI for Angular html 또는 body 태그에 dir 속성을 설정할 때만 directionality 조작에 취약합니다.
그렇다면 다음 예제로 넘어가겠습니다.
<html dir="rtl">
...
<body dir="ltr">
</body>
</html>
Note
위의 경우 body 태그의 속성인 내부 태그가 우선적으로 적용됩니다.
RTL 지원
기본적으로 모든 Ignite UI 테마에서는 오른쪽에서 왼쪽(RTL) 방향이 완벽하게 지원됩니다.
Note
현재 Igx-Grid 구성 요소는 부분적인 RTL만 지원합니다.
GitHub