답변:
ARIA (Accessible Rich Internet Applications)는 장애인이 웹 컨텐츠 및 웹 애플리케이션에보다 쉽게 액세스 할 수 있도록하는 방법을 정의합니다.
이 hidden
속성은 HTML5의 새로운 기능 이며 브라우저 에 요소를 표시하지 않도록 지시 합니다 . 이 aria-hidden
속성은 스크린 리더에게 요소를 무시해야하는지 알려줍니다 . 자세한 내용은 w3 문서를 살펴보십시오.
https://www.w3.org/WAI/PF/aria/states_and_properties#aria-hidden
이러한 표준을 사용하면 장애인이 웹을보다 쉽게 사용할 수 있습니다.
hidden
모두에게 숨겨져 있습니다. aria-hidden
스크린 리더 및 유사한 도구에 숨겨져 있음을 의미합니다. 예를 들어 형식에 순수하게 사용되며 실제 내용이 포함되지 않은 구성 요소에 유용합니다.
hidden
스크린 리더가 태그의 내용에 액세스하지 못하게해야합니다.
aria-hidden
은 정확합니다. 그러나, 당신은 hidden
그것을 구별하려는 것에 대해 아무 말도하지 않았습니다 aria-hidden
. 불행히도 가장 좋은 대답입니다. 답을 더 철저히 작성하십시오.
숨겨진 속성은 부울 속성 (True / False)입니다. 이 속성을 요소에 사용하면 해당 요소와의 모든 관련성이 제거됩니다. 사용자가 html 페이지를 볼 때 숨겨진 속성을 가진 요소가 표시되지 않아야합니다.
예:
<p hidden>You can't see this</p>
Aria-hidden 속성은 요소와 모든 하위 요소가 여전히 브라우저에 표시되지만 화면 판독기와 같은 접근성 도구에는 보이지 않음을 나타냅니다.
예:
<p aria-hidden="true">You can't see this</p>
이것 좀 봐 . 모든 질문에 답해야합니다.
참고 : ARIA는 액세스 가능한 풍부한 인터넷 응용 프로그램을 나타냅니다
출처 : Paciello Group
aria-hidden="true"
는 브라우저에 여전히 표시되지만 화면 판독기와 같은 접근성 도구에는 표시되지 않습니다.
aria-hidden
는 접근성 도구로 웹 사이트를 사용하는 사람들로부터 요소를 숨기는 데 사용됩니다.
HTML 5.2 에 따르면 :
요소에 지정된 경우 [
hidden
속성]은 요소가 아직 페이지의 현재 상태와 직접 관련이 없거나 더 이상 관련이 없거나 페이지의 다른 부분에서 재사용 할 컨텐츠를 선언하는 데 사용됨을 나타냅니다. 사용자가 직접 액세스하는 것과 반대입니다.
예를 들어 일부 패널이 노출되지 않은 탭 목록 또는 사용자가 로그인 한 후 사라지는 로그인 화면이 있습니다. 이러한 사항을 "일시적으로 관련"이라고 부르는 것이 좋습니다. 즉, 타이밍에 따라 관련이 있습니다.
반면 ARIA 1.1 은 다음과 같이 말합니다.
[
aria-hidden
상태]는 요소가 접근성 API에 노출되는지 여부를 나타냅니다.
다시 말해, 접근성 트리aria-hidden="true"
에서가 포함 된 요소 는 대부분 보조 기술이 존중하는 요소로 제거 되며 가 포함 된 요소 는 확실히 트리에 노출됩니다. 속성이 없는 요소 는 "정의되지 않은 (기본값)"상태에 있습니다. 즉, 사용자 에이전트는 렌더링에 따라 트리에 노출해야합니다. 예를 들어, 사용자 에이전트는 텍스트 색상이 배경 색상과 일치하면이를 제거하기로 결정할 수 있습니다.aria-hidden="false"
aria-hidden
이제 의미론을 비교해 봅시다. 그것의 사용에 적합 hidden
하지만, 하지 aria-hidden
, 아직 "일시적으로 관련"이 아닌 요소에 대한,하지만 미래 (이 경우는 제거 동적 스크립트를 사용하는 것이에 관련 될 수있는 hidden
속성). 반대로 항상 관련성이 있지만 접근성 API를 어지럽히고 싶지 않은 요소 aria-hidden
에는 을 사용 hidden
하는 것이 좋지만. 그러한 요소는 사용자가 소비하지 않는 아이콘 및 / 또는 이미지와 같은 "시각적 감각"을 포함 할 수있다.
의미는 예측이 효과 브라우저 / 사용자 에이전트에 있습니다. 내가 구별하는 이유는 사용자 에이전트 동작이 권장 되지만 사양 에는 필요 하지 않기 때문 입니다.
이 hidden
속성은 프린터 및 스크린 리더를 포함한 모든 프리젠 테이션 에서 요소를 숨겨야합니다 (이러한 장치가 HTML 사양을 준수한다고 가정). 비주얼 미디어 뿐만 아니라 접근성 트리에서 요소를 제거 hidden
하려면 트릭을 수행하십시오. 그러나이 효과를 원 hidden
하기 때문에 사용하지 마십시오 . hidden
의미 상 먼저 올바른지 자문 해보십시오 (위 참조). 경우 hidden
의미 정확하지 않습니다,하지만 당신은 여전히 시각적 요소를 숨길, 당신은 CSS와 같은 다른 기술을 사용할 수 있습니다.
aria-hidden="true"
예를 들어 화면 판독기는 해당 요소를 액세서 빌 러티 트리에 노출하지 않습니다. 액세스 가능한 사용자 에이전트는이를 알리거나 렌더링하지 않지만 여전히 시각적 에이전트에서 렌더링됩니다. 올바르게 수행하면 좋은 결과가 될 수 있지만 악용 될 가능성이 있습니다.
마지막으로 두 속성간에 구문에 차이가 있습니다.
hidden
는 부울 속성입니다 . 즉, 속성이 있으면 값이 무엇이든 관계없이 true이고 속성이 없으면 false입니다. 실제 경우 가장 좋은 방법은 값을 전혀 사용하지 <div hidden>...</div>
않거나 ( ) 빈 문자열 값 ( <div hidden="">...</div>
)을 사용하는 것입니다. 나는 것 없습니다 추천 hidden="true"
사람의 읽기 / 코드를 업데이트하는 것을 추론 할 수 있기 때문에 hidden="false"
단순히 잘못 반대의 효과를 가질 것이다.
aria-hidden
대조적으로, 열거 된 속성 은 유한 값 목록 중 하나를 허용합니다. 경우 aria-hidden
속성이 존재하고, 그 값이어야합니다 "true"
또는 "false"
. "정의되지 않은 (기본값)"상태를 원하는 경우 속성을 모두 제거하십시오.
추가 읽기 : https://github.com/chharvey/chharvey.github.io/wiki/Hidden-Content