답변:
WAI-ARIA 는 액세스 가능한 웹 앱에 대한 지원을 정의하는 사양입니다. 웹 애플리케이션 개발자가 다양한 요소의 의미에 대한 추가 정보를 화면 판독기와 같은 보조 기술에 제공하기 위해 웹 앱 개발자가 사용할 수있는 마크 업 확장 (대부분 HTML5 요소의 속성)을 정의합니다. 물론 ARIA가 작동하려면 마크 업을 해석하는 HTTP 사용자 에이전트가 ARIA를 지원해야하지만, 하위 레벨 사용자 에이전트가 ARIA 특정 마크 업을 영향을주지 않고 안전하게 무시할 수있는 방식으로 스펙이 작성됩니다. 웹앱 기능.
다음은 ARIA 사양의 예입니다.
<ul role="menubar">
<!-- Rule 2A: "File" label via aria-labelledby -->
<li role="menuitem" aria-haspopup="true" aria-labelledby="fileLabel"><span id="fileLabel">File</span>
<ul role="menu">
<!-- Rule 2C: "New" label via Namefrom:contents -->
<li role="menuitem" aria-haspopup="false">New</li>
<li role="menuitem" aria-haspopup="false">Open…</li>
...
</ul>
</li>
...
</ul>
role외부 <ul>요소 의 속성에 유의하십시오 . 이 속성은 브라우저에서 마크 업을 화면에 렌더링하는 방법에 영향을주지 않습니다. 그러나 ARIA를 지원하는 브라우저는 렌더링 된 UI 요소에 OS 별 접근성 정보를 추가하여 화면 판독기가이를 메뉴로 해석하고 최종 사용자가 이해할 수있는 충분한 컨텍스트를 가지고이를 크게 읽을 수 있도록합니다 (예 : 명시 적 "메뉴"오디오 힌트)와 상호 작용할 수 있습니다 (예 : 음성 탐색).
aria특히 접근성을위한 것이며 임의의 데이터를 저장하는 데 사용해서는 안됩니다. data응용 프로그램이 노드와 연결해야하는 임의의 데이터입니다.
role="menu"그리고 "menuitem"APPS (= File > Open또는 메뉴가있는 소프트웨어)에 맞습니다 Edit > Copy to clipboard. 고전적인 웹 사이트의 경우 <ul>다른 웹 페이지에 대한 링크 만 제공하고 다음과 같은 기능을 제공하지 않기 때문에 일반적인 (= 기본적으로 역할 목록) 을 유지하는 것이 좋습니다 "저장"또는 "복사 / 붙여 넣기" role="menu"를 사용하는 경우 일반적인 소프트웨어 / 응용 프로그램 메뉴와 같이 키보드의 화살표 키
ARIA는 Accessible Rich Internet Applications의 약어입니다.
WAI-ARIA는 개발자가 보조 기술로 이해할 수있는 방식으로 시각적으로 풍부한 사용자 인터페이스의 목적, 상태 및 기타 기능을 쉽게 설명 할 수있는 매우 강력한 기술입니다. WAI-ARIA는 마침내 HTML 5 사양의 현재 작업 초안에 통합되었습니다.
WAI-ARIA가 무엇인지 궁금하다면 같은 것입니다.
WAI-ARIA와 ARIA라는 용어는 같은 것을 의미합니다. 그러나 WAI-ARIA를 사용하여 WAI의 출처를 확인하는 것이 더 정확합니다.
WAI = 웹 접근성 이니셔티브
외관상 ARIA는 보조 기술 및 주로 화면 판독에 사용됩니다.
이 기사를 읽으면 대부분의 의심이 사라질 것입니다
무엇입니까?
WAI-ARIA는 “Web Accessibility Initiative – Accessible Rich Internet Applications”의 약자입니다 . 이는 시각 장애인 용 화면 판독기와 같은 보조 기술이 HTML에 고유하지 않은 특정 사항을 이해할 수 있도록 웹 사이트 또는 웹 응용 프로그램의 의미를 향상시키는 데 도움이되는 특성 집합입니다. 노출 된 정보는 링크 나 버튼을 활성화하면 더 많은 항목을 표시하거나 숨겼다는 스크린 리더에게 알려주는 것처럼 단순한 메뉴에서부터 전체 메뉴 시스템이나 계층 적 트리 뷰처럼 복잡한 위젯에 이르기까지 다양합니다.
이는 레이아웃 또는 브라우저 기능과 관련이 없지만 보조 기술에 대한 추가 정보를 제공하는 HTML 4.01 이상 마크 업에 역할 및 상태 속성을 적용하여 수행됩니다.
WAI-ARIA의 하나의 모퉁잇돌이 역할 속성입니다. 사용되는 HTML 요소가 실제로 요소 이름이 제안하는 것이 아니라 다른 것임을 보조 기술에 알리도록 브라우저에 지시합니다. 원래 div 요소 일 뿐이지 만이 div 요소는 자동 완성 항목 목록의 컨테이너 일 수 있으며,이 경우 "listbox"역할이 적합합니다. 마찬가지로 해당 컨테이너 div의 자식이고 단일 옵션 항목을 포함하는 다른 div는 "option"역할을 가져야합니다. 두 div이지만 역할을 통해 완전히 다른 의미입니다. 역할은 일반적으로 사용되는 데스크톱 응용 프로그램에 따라 모델링됩니다.
이에 대한 예외는 문서 랜드 마크 역할로, 해당 요소의 실제 의미는 변경하지 않지만 문서에서이 특정 위치에 대한 정보를 제공합니다.
두 번째 모퉁이 돌은 WAI-ARIA 주와 재산입니다. 그것들은 무언가가 접히거나 펼쳐지거나, 양식 요소가 필요하거나, 무언가에 팝업 메뉴가 붙어있는 것과 같은 특정 네이티브 또는 WAI-ARIA 요소의 상태를 정의합니다. 이들은 종종 동적이며 웹 응용 프로그램의 수명주기 동안 값을 변경하며 일반적으로 JavaScript를 통해 조작됩니다.
무엇입니까?
WAI-ARIA는 브라우저 동작에 영향을 미치지 않습니다. 예를 들어, 실제 버튼 요소와 달리 "버튼"의 역할을 수행하는 div는 키보드 포커스 기능, 스페이스 또는 Enter 키를 누를 때 자동 클릭 처리기 및 기타 속성을 표시하지 않습니다. 단추. 브라우저 자체는 "버튼"역할을 가진 div가 버튼이라는 것을 알지 못하며 접근성 API 부분 만 있습니다.
결과적으로 이것은 키보드 탐색, 초점 및 데스크톱 응용 프로그램에서 알려진 기타 행동 패턴을 반드시 구현해야 함을 의미합니다. 고급 ARIA 기술은 여기에서 찾을 수 있습니다 .
언제 사용해서는 안됩니까?
예, 맞습니다.이 섹션이 먼저옵니다! WAI-ARIA를 사용하는 첫 번째 규칙은 다음과 같습니다. 절대적으로 필요한 경우가 아니면 사용하지 마십시오! WAI-ARIA가 적을수록 기본 HTML 위젯을 사용할수록 더 좋습니다! 따라야 할 규칙이 더 있으며 여기에서 확인할 수 있습니다 .
ARIA 란 무엇입니까?
ARIA는 문서 HTML을위한 마크 업 언어를 사용하여 UI (사용자 인터페이스)를 구축하는 데 필요한 접근성 문제를 해결하는 방법으로 등장했습니다. HTML에는 문서 (P, h3, UL, TABLE)를 처리 할 수있는 많은 기능이 포함되어 있지만 A, INPUT 및 BUTTON과 같은 기본 UI 요소 만 있습니다. Windows 및 기타 운영 체제는 (Assistive Technology) AT가 UI 컨트롤의 기능에 액세스 할 수 있도록하는 API를 지원합니다. Internet Explorer 및 기타 브라우저는 기본 HTML 요소를 접근성 API에 매핑하지만 html 컨트롤은 데스크톱 운영 체제에서 일반적으로 사용되는 컨트롤만큼 풍부하지 않으며 최신 웹 응용 프로그램에는 충분하지 않습니다. 최신 웹 애플리케이션에 필요한 UI. ARIA 이전에는 브라우저가 이러한 추가 기능을 내게 필요한 옵션 API 또는 AT에 노출시킬 수 없었습니다. 이 문제의 전형적인 예는 이미지에 클릭 핸들러를 추가하는 것입니다. 마우스 사용자에게는 클릭 가능한 버튼 인 것처럼 보이지만 키보드 나 AT 사용자에게는 이미지 일뿐입니다.
해결책은 개발자가 UI 의미를 사용하여 HTML을 확장 할 수있는 일련의 속성을 만드는 것이 었습니다. 사용자 정의 기능이 있고 ARIA 속성을 사용하여 이러한 기능을 내게 필요한 옵션 API에 맵핑하는 HTML 요소 그룹에 대한 ARIA 용어는“위젯. 또한 ARIA는 작성자가 컨텐츠 자체의 역할을 문서화 할 수있는 수단을 제공하므로, AT는 전체 텍스트를 읽거나 링크 목록을 반복하는 것보다 훨씬 사용하기 쉬운 컨텐츠에 대한 대체 탐색 메커니즘을 구성 할 수 있습니다.
간단한 경우에는 ARIA를 사용하지 않고 네이티브 HTML 컨트롤을 사용하고 스타일을 지정하는 것이 훨씬 바람직합니다. 필요하지 않은 경우 바퀴 나 확인란을 다시 만들지 않아도됩니다.
다행히도 주류 사용자의 동작을 변경하지 않고도 ARIA 마크 업을 기존 사이트에 추가 할 수 있습니다. 이를 통해 웹 사이트 또는 응용 프로그램 수정 및 테스트 비용이 크게 줄어 듭니다.
ARIA에 관한 다른 질문을했습니다. 그러나이 질문에 대한 내용은 더 유망한 것으로 보입니다. 공유하고 싶습니다
ARIA 란 무엇입니까?
다양한 브라우징 습관과 신체 장애가있는 사용자가 웹 사이트에 액세스 할 수 있도록 노력하면 역할과 aria- * 특성을 인식하게 될 것입니다. WAI-ARIA (액세스 가능한 리치 인터넷 응용 프로그램)는 장애가있는 사용자가이를 식별하고 상호 작용할 수 있도록 동적 웹 컨텐트 및 응용 프로그램을 정의하는 방법을 제공하는 방법입니다. 이는 문서 또는 애플리케이션의 구조를 정의하는 역할 또는 위젯 역할, 관계, 상태 또는 특성을 정의하는 aria- * 속성을 통해 수행됩니다.
사양에서 ARIA를 사용하여 HTML5 응용 프로그램의 접근성을 높이는 것이 좋습니다. 시맨틱 HTML5 요소를 사용하는 경우 해당 역할을 설정해야합니다.
그리고 ARIA live의 튜브 비디오 를보십시오.