ARIA 웹 표준 및 HTML 애플리케이션 접근성 살펴보기
진정으로 개방적이고 포괄적 인 웹은 보조 기술에 의존하는 장애인이 동적 인 웹 컨텐츠 및 최신 웹 앱을 즐길 수 있도록하는 기술을 필요로합니다. W3C의 접근성 웹 표준은 장애가있는 사용자가 효율적으로 사용할 수있는 ARIA (Accessible Rich Internet Application)로 웹을 채우려는 것을 목표로합니다..
ARIA는 WAI (Web Accessibility Intitiative)에서 발표 한 수많은 접근성 표준 및 지침 중 하나입니다. HTML 문서에 쉽게 삽입 할 수있는 추가 마크 업을 제공합니다. WAI-ARIA는 오픈 웹 플랫폼을 목표로하는 크로스 플랫폼 크로스 디바이스 솔루션이므로 웹 사이트뿐만 아니라 게임, 디지털 엔터테인먼트, 건강 관리, 모바일 및 기타 종류의 앱에 대해서도 생각하십시오..
이 글에서는 WAI-ARIA 표준을 사용하여 HTML 문서에 접근성을 추가하는 방법을 살펴 보겠습니다..
ARIA 프레임 워크
HTML 구문은 항상 개발자가 요소를 적절히 설명하고, 역할을 식별하고, 요소 간의 관계를 지정하는 것을 허용하지 않습니다. 이 기술은 사용자가 감각을 완전히 소유하고있는 방문자에게는 거의 문제가되지 않지만 보조 기술 사용자가 화면에서 무슨 일이 일어나고 있는지 파악하고 옵션을 탐색하는 것을 방해 할 수 있습니다.
이것은 ARIA가 도움의 손길이 닿는 지점입니다. 다른 요소의 목적을 랜드 마크 역할, 그들과 함께 자연을 기술한다. 아리아 프리픽스 (aria-prefixed) 속성. 아리아 접두사가 붙은 속성에는 두 가지 유형이 있습니다. 속성들 페이지 라이프 사이클 전체에서 변경 될 가능성이 적은 기능을 설명하는 주 사용자 상호 작용으로 인해 자주 변경 될 수있는 정보를 제공합니다..
랜드 마크 역할
랜드 마크 역할 ARIA의 역할 모델 중 가장 잘 알려진 형태입니다 (다른 것은 추상 역할, 위젯 역할 및 문서 구조 역할입니다). 랜드 마크 역할을 통해 개발자는 대규모 지각 가능한 지역 보조 기술 사용자가 신속하게 액세스하고자하는 웹 페이지.
ARIA 랜드 마크 역할에는 8 가지 유형이 있으며 관련 HTML 태그에 속성으로 추가해야합니다.
역할 =”기치”
배너 역할은 주로 개별 페이지뿐만 아니라 전체 사이트와 관련된 콘텐츠에 사용하기위한 것입니다. 일반적으로 로고 및 기타 중요한 사이트 전체 정보에 대한 사이트의 기본 헤더에 속성으로 추가됩니다. HTML 문서 나 앱 내에서 배너 역할을 한 번만 사용할 수 있어야합니다..
역할 =”본관”
주요 랜드 마크 역할은 문서의 주요 내용과 관련이 있습니다. HTML 페이지에서는 두 번 이상 사용할 수 없습니다. 일반적으로 탐색 역할은 사이트의 링크 및 목록과 같은 탐색 요소가 포함 된 영역을 나타내는 데 사용됩니다.. 보완적인 랜드 마크 역할은 사이트의 주요 컨텐츠와 관련된 추가 컨텐츠를 설명합니다. DOM 계층에서 비슷한 수준으로 배치해야합니다. contentinfo 역할은 저작권 정보, 법률 및 개인 정보 보호 정책과 같은 다양한 종류의 메타 데이터가있는 지역의 존재에 대해 사용 도구에 알립니다. 일반적으로 사이트의 바닥 글에 사용됩니다.. 양식 랜드 마크 역할은 사용자 입력을 기다리는 양식을 나타냅니다. 검색 양식의 경우 검색 역할은 아주 자명하며, 보조 기술이 웹 사이트의 검색 기능을 식별하도록 돕기위한 것입니다.. 웹 응용 프로그램이 아닌 웹 응용 프로그램으로 선언하려는 지역에 응용 프로그램 획기적인 역할을 사용할 수 있습니다. 일반적인 웹 브라우징 모드에서 응용 프로그램 탐색 모드로 전환하는 데 도움이되는 기술을 암시하므로 기존 웹 사이트에 포함시키지 않는 것이 좋습니다. 이 획기적인 역할 만주의 깊게 사용해야합니다.. 역할을 통해 HTML 태그의 의미를 정의 할 수 있지만 상태 및 속성은 사용자에게 상호 작용 방법에 대한 추가 정보를 제공합니다. 주 및 속성 모두에으로 표시됩니다. 아리아 프리픽스 (aria-prefixed) 속성 구문과 함께 아리아-*. 가장 잘 알려진 ARIA 속성은 아마도 aria-required 속성과 aria-checked 상태입니다. 아리아 - 필수 재산 aria-checked는 (사용자가 입력해야하는) 입력 요소의 영구 기능이므로 상태 확인란이 사용자 상호 작용으로 인해 자주 변경 될 수 있기 때문에. 상태 및 속성은 때때로 토큰 값 (미리 정의 된 값의 제한된 집합)을 취합니다. 예를 들어 aria-live 속성은 3 가지 값을 가질 수 있습니다. 떨어져서, 공손한, 독단적 인. 이 예제의 구문은 다음과 같습니다. 다른 경우 아리아 프리픽스 (aria-prefixed) 속성의 값은 현, 번호, 정수, ID 참조 또는 허위 사실 가치. 관계 속성을 사용하여 사이트의 다른 요소 (문서 구조에서 달리 결정할 수 없음) 간의 관계를 나타냅니다. 예를 들어, HTML 페이지에서 인식 가능한 영역에 대해 ARIA 랜드 마크 역할을 설정하면 화면에서 발생하는 이벤트에 따라 ARIA 접두어가 붙은 상태 및 자식 요소의 속성을 변경하면 보조 기술을 많이 도움받을 수 있습니다. 사용자가 사이트와 상호 작용해야하는 경우, 예를 들어 양식을 채우거나 검색 쿼리를 실행하는 경우 매우 중요 할 수 있습니다.. 내게 필요한 옵션 디자인의 일반적인 경험 규칙은 사용자 인터페이스의 현재 상태가 보조 기술에 의해 항상 감지 될 필요가 있다는 것입니다. 예를 들어 사용자가 양식에서 옵션을 선택하면 보조 기술에 대해서도 선택해야합니다. 아리아 선택 상태를 다음 구문과 함께 사용하면 쉽게 구현할 수 있습니다. W3C의 WAI-ARIA Authoring Practices 가이드 라인은 사이트의 시각적 인터페이스와 액세스 가능한 인터페이스를 적절하게 조화시키는 방법에 대한 많은 훌륭한 아이디어를 제공 할 수 있습니다. ARIA 역할과 속성을 사용하면 때로는 중복 될 수 있습니다. HTML5의 의미 론적 태그를 사용할 때 예를 들어, 형태 정의 할 획기적인 역할 따라서 이미 숨겨진 HTML 속성을 양식 입력에 추가 할 필요가 없습니다. 아리아 숨겨진 기본적으로 브라우저에 포함되어 있습니다... 후자는 W3C 사양에 추가되었습니다. 본관 의미 론적 HTML 요소에 대한 ARIA 랜드 마크 역할. 역할 =”항해”
역할 =”보완적인”
역할 = "메인". 관련 게시물, 인기있는 기사, 최신 댓글은 자율적 인 보완 콘텐츠의 전형적인 예입니다..역할 =”contentinfo”
역할 =”형태”
역할 = "검색" 대신에.역할 =”수색”
역할 =”신청”
주와 재산
Aria 접두사가 붙은 속성의 구문
ARIA 상태와 속성을 사용하는 방법
1. 관계 속성을 사용하여 요소 간 관계 구축
아리아 - labelledby property는 현재 요소에 레이블을 붙이는 요소를 식별합니다..아리아 - labelledby - 다른 많은 것들 중에서 다음과 같은 방식으로 제목을 ARIA 랜드 마크 영역에 바인딩 할 수 있습니다.이것은 표제이다.
메인 콘텐츠… 2. 요소의 수명주기와 상태 및 특성 동기화
3. 시각적 인터페이스와 접근 가능한 인터페이스를 일치시킵니다.
.ARIA를 과용하지 마십시오.
또는 , 최신 웹 브라우저는 기본적으로 적절한 ARIA 의미를 추가합니다. 이 경우 ARIA 랜드 마크 역할을 별도로 설정하는 것은 의미가 없습니다.. 요소. 대신에 구문을 사용하면 충분합니다. . 적절한 ARIA 속성과 함께 HTML의 기본 속성을 사용하는 것도 불필요합니다..
