Angular Material로 작업하는 동안 aria 속성이 온통 보였습니다. aria 접두사가 무엇을 의미하는지 누군가가 설명 할 수 있습니까? 그러나 가장 중요한 것은 이해하려고하는 aria-hidden것과 hidden속성 의 차이점 입니다.

ARIA (Accessible Rich Internet Applications)는 장애인이 웹 컨텐츠 및 웹 애플리케이션에보다 쉽게 ​​액세스 할 수 있도록하는 방법을 정의합니다.

이 hidden속성은 HTML5의 새로운 기능 이며 브라우저 에 요소를 표시하지 않도록 지시 합니다 . 이 aria-hidden속성은 스크린 리더에게 요소를 무시해야하는지 알려줍니다 . 자세한 내용은 w3 문서를 살펴보십시오.

https://www.w3.org/WAI/PF/aria/states_and_properties#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

시맨틱 차이

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

aria-hidden을 false로 설정하고 element.show ()에서 전환하면 나에게 도움이되었습니다.

예 :

<span aria-hidden="true">aria text</span>

$(span).attr('aria-hidden', 'false');
$(span).show();

다시 숨길 때

$(span).attr('aria-hidden', 'true');
$(span).hide();