`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-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">