`aria-labelledby` 및`aria-hidden` 속성은 무엇입니까?
부트 스트랩 모달을 사용하여 이러한 aria속성을 많이 보았지만 사용 방법을 몰랐습니다.
누구든지 이러한 속성을 사용하는 경우를 알고 있습니까? 나는 봤다 – 간단한 답변을 찾지 못했습니다.
HTML5 ARIA 속성은 당신이 찾고있는 것입니다. 부트 스트랩 없이도 코드에서 사용할 수 있습니다.
AIA (Accessible Rich Internet Application) 는 웹 컨텐츠 및 웹 애플리케이션 (특히 Ajax 및 JavaScript로 개발 된 애플리케이션)을 장애가있는 사용자가보다 쉽게 액세스 할 수있는 방법을 정의합니다.
귀하의 질문에 정확하게하기 위해 귀하의 속성을 ARIA 속성 상태 및 모델이라고합니다.
aria-labelledby: 현재 요소를 레이블링하는 요소를 식별합니다.
aria-hidden (state): 작성자가 구현 한대로 요소 및 모든 하위 항목이 사용자에게 표시되거나 인식 될 수 없음을 나타냅니다.
이러한 속성의 주요 소비자는 시각 장애인을위한 화면 판독기와 같은 사용자 에이전트입니다. 따라서 부트 스트랩 모달의 경우 모달의 div는 role="dialog"입니다. 스크린 리더 div가이 역할 을하는 표시가 보이면 해당 레이블을 말합니다 div.
사물에 레이블을 지정하는 방법은 많지만 ARIA를 사용하여 몇 가지 새로운 요소를 레이블 지정하는 경우도 있지만 <label>HTML 태그 를 사용하지 않고 기존 요소를 레이블 (의미 적)로 사용하는 것이 적절한 경우도 있습니다 . HTML 모달의 경우 레이블은 일반적으로 <h>헤더입니다. 따라서 부트 스트랩 모달의 경우을 추가 aria-labelledby=[IDofModalHeader]하면 모달이 나타날 때 화면 판독기가 해당 헤더를 말합니다.
일반적으로 스크린 리더는 DOM 요소가 표시되거나 보이지 않게 될 때마다 알림을 받으므로 aria-hidden속성이 자주 중복되므로 대부분의 경우 건너 뛸 수 있습니다.
aria-hidden="true"화면 판독기에서 글리프 콘 아이콘과 같은 장식 항목을 숨길 수 있습니다. 혼동을 일으키지 않도록 의미있는 발음이 없습니다. 좋은 연습 문제로하는 것이 좋습니다.
ARIA는 기능을 변경하지 않으며 표시된 역할 / 속성을 화면 판독기 사용자로만 변경합니다. WebAIM의 WAVE 도구 모음 은 페이지에서 ARIA 역할을 식별합니다.
Aria는 시각 장애인의 사용자 경험을 향상시키는 데 사용됩니다. 시각 장애가있는 사용자는 JAWS, NVDA와 같은 화면 판독기 소프트웨어를 사용하여 응용 프로그램을 탐색합니다. 응용 프로그램을 탐색하는 동안 화면 판독기 소프트웨어는 사용자에게 컨텐츠를 알려줍니다. Aria는 스크린 리더 사용자가 컨트롤의 역할, 상태, 레이블 및 목적을 이해하는 데 도움이되는 코드에 컨텐츠를 추가하는 데 사용할 수 있습니다.
아리아는 시각적으로 아무것도 바꾸지 않습니다. (Aria는 디자이너들도 무서워합니다).
아리아-숨겨진 :
aria-hidden 특성은 화면 판독기 (JAWS, NVDA 등)를 사용하여 응용 프로그램을 탐색하는 시각 장애인 사용자를 위해 컨텐츠를 숨기는 데 사용됩니다.
aria-hidden 속성은 true, false 값과 함께 사용됩니다.
사용하는 방법:
<i class = "fa fa-books" aria-hidden = "true"></i>
aria-hidden = "true"를 사용 <i>하면 응용 프로그램을 시각적으로 변경하지 않고 내용을 화면 판독기 사용자에게 숨 깁니다.
아리아 라벨
aria-label 속성은 레이블을 화면 판독기 사용자에게 전달하는 데 사용됩니다. 일반적으로 검색 입력 필드에는 시각적 레이블이 없습니다 (디자이너에게 감사). aria-label을 사용하여 화면 판독기 사용자에게 제어 레이블을 전달할 수 있습니다.
사용하는 방법:
<input type = "edit" aria-label = "search" placeholder = "search">
응용 프로그램에는 시각적 인 변화가 없습니다. 그러나 스크린 리더는 제어의 목적을 이해할 수 있습니다
aria-labelledby
aria-label 및 aria-labelledby는 레이블을 전달하는 데 사용됩니다. 그러나 aria-labelledby는 페이지에 이미 존재하는 모든 레이블을 참조하는 데 사용할 수 있지만 aria-label은 시각적으로 표시되지 않은 레이블을 전달하는 데 사용됩니다
접근법 1 :
<span id = "sd"> Search </span>
<input type = "text" aria-labelledby = "sd">
aria-labelledby를 사용하여 화면 판독기 사용자를 위해 두 개의 레이블을 결합 할 수도 있습니다
접근법 2 :
<span id = "de"> Billing Address </span>
<span id = "sd"> First Name </span>
<input type = "text" aria-labelledby = "de sd">
'Programing' 카테고리의 다른 글
| Python3에 xrange 함수가없는 이유는 무엇입니까? (0) | 2020.04.03 |
|---|---|
| jQuery SVG 대 라파엘 (0) | 2020.04.03 |
| 파이썬 'with'문을 사용하는 동안 예외 잡기 (0) | 2020.04.03 |
| 큰 HTML 테이블을 인쇄 할 때 페이지 나누기를 처리하는 방법 (0) | 2020.04.03 |
| 인터페이스 변수가 기본적으로 정적 및 최종적인 이유는 무엇입니까? (0) | 2020.04.03 |