From 99d9083658c12be9240eb19715990d06de4f8924 Mon Sep 17 00:00:00 2001 From: iyu88 Date: Sun, 17 Mar 2024 23:46:37 +0900 Subject: [PATCH] docs: 0317/aria-hidden-and-role --- _posts/2024-03-17-aria-hidden-and-role.md | 51 ++ .../a11y/2024/03/17/aria-hidden-and-role.html | 717 ++++++++++++++++++ _site/category/a11y/index.html | 2 + _site/feed.xml | 36 +- _site/index.html | 28 + _site/page/2/index.html | 28 + _site/page/3/index.html | 28 + _site/page/4/index.html | 28 + _site/page/5/index.html | 28 + _site/posts/index.html | 7 + _site/sitemap.xml | 16 + _site/tag/a11y/index.html | 2 + _site/tag/accessibility/index.html | 2 + 13 files changed, 955 insertions(+), 18 deletions(-) create mode 100644 _posts/2024-03-17-aria-hidden-and-role.md create mode 100644 _site/a11y/2024/03/17/aria-hidden-and-role.html diff --git a/_posts/2024-03-17-aria-hidden-and-role.md b/_posts/2024-03-17-aria-hidden-and-role.md new file mode 100644 index 0000000..ed16940 --- /dev/null +++ b/_posts/2024-03-17-aria-hidden-and-role.md @@ -0,0 +1,51 @@ +--- +layout: post +title: "[A11y] aria-hidden='true'와 aria-role='none'" +date: 2024-03-17 00:00:00 +author: Hyunbin Lee +categories: A11y +tags: Accessibility A11y +cover: "/assets/instacode.png" +--- + +# aria-hidden='true'와 aria-role='none' + +## 1. aria-hidden='true' + +aria-hidden 속성은 요소를 [접근성 트리](https://developer.mozilla.org/ko/docs/Glossary/Accessibility_tree)에서 제거할 지 여부를 결정합니다. `aria-hidden='true'`로 설정하면 해당 요소가 접근성 트리에 노출되지 않을 뿐만 아니라 자식 요소들도 모두 영향 받아 사라지게 됩니다. 이렇게 접근성 트리에서 사라지면 스크린 리더 등 접근성을 지원하는 보조 기술의 도움을 받을 수 없습니다. + +aria-hidden 속성은 시각적인 렌더와는 직접적인 연관이 없습니다. **다만 정상적으로 렌더링된 요소를 무턱대고 aria-hidden='true'로 설정하는 것은 지양해야 합니다.** 왜냐하면 시각적으로 파악할 수 있는 정보를 스크린 리더의 도움을 받을 수 없게 되어 보조 기술 사용자의 사용성을 저하시킬 수 있기 때문입니다. 따라서 불필요하다고 판단되거나 중복되는 정보에 한해서 설정해야 합니다. + +
+ +## 2. aria-role='none' + +aria-role 속성은 요소에 역할을 명시하여 콘텐츠에 의미(semantic meaning)를 부여합니다. 이렇게 의미가 부여된 요소는 스크린 리더 등 보조 기술 사용자가 해당 요소의 의미를 파악하고 상호작용할 수 있게 도와줍니다. + +[다양한 role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles#aria_role_types)이 존재하지만 이 중에서 `aria-role='none'`(aria-role='presentation'과 동일)은 **요소에 있는 시맨틱 의미를 제거하는 데에 사용합니다.** 일반적으로
,