CSS를 사용하여 접근성 목적으로 컨텐츠를 숨기려면 어떻게합니까?-CSS 튜토리얼-php.cn

CSS를 사용하여 접근성 목적으로 컨텐츠를 숨기려면 어떻게합니까?

CSS를 사용하여 접근성 목적으로 컨텐츠를 숨기려면 컨텐츠를 화면에서 보이지 않지만 화면 리더와 같은 보조 기술에 액세스 할 수있는 기술이 포함됩니다. 이를 달성하는 일반적인 방법 중 하나는 다음 CSS 속성을 사용하는 것입니다.

 <code class="css">.hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }</code>

로그인 후 복사

이 CSS 클래스는 종종 .visually-hidden 또는 .sr-only (스크린 리더 만)이라고 불리는이 CSS 클래스는 화면에서 볼 수 없지만 스크린 리더가 사용할 수있는 스타일을 적용합니다. 다음은 각 속성이하는 일에 대한 고장입니다.

position: absolute; : 요소를 일반 문서 흐름에서 꺼냅니다.
width: 1px; height: 1px; : 요소를 가장 작은 크기로 설정합니다.
padding: 0; margin: -1px; : 패딩을 제거하고 화면에서 요소를 이동시킵니다.
overflow: hidden; : 세트 차원을 넘어선 컨텐츠를 숨 깁니다.
clip: rect(0, 0, 0, 0); : 요소를 제로 크기의 사각형으로 클립하여 효과적으로 시각적으로 숨 깁니다.
white-space: nowrap; : 텍스트 포장을 방지합니다.
border: 0; : 국경을 제거합니다.

이 클래스를 요소에 적용하면 화면에서 볼 수 없지만 화면 리더가 여전히 읽을 수 있으므로 접근성을 유지할 수 있습니다.

CSS를 사용하여 숨길 때 컨텐츠에 액세스 할 수 있도록하는 모범 사례는 무엇입니까?

CSS를 사용하여 숨길 때 컨텐츠에 액세스 할 수 있도록하려면 다음과 같은 모범 사례를 따르십시오.

적절한 CSS 기술 사용 : 위에서 설명한 .visually-hidden 클래스를 활용하여 콘텐츠가 시각적으로 숨겨져 있지만 스크린 리더가 여전히 액세스 할 수 있는지 확인하십시오.
스크린 리더와 테스트 : NVDA, Jaws, Voiceover와 같은 다른 스크린 리더와 함께 웹 사이트를 정기적으로 테스트하여 숨겨진 컨텐츠가 올바르게 읽히도록합니다. 이를 통해 Assistive Technologies에 의해 콘텐츠를 해석하는 방법에 대한 문제를 식별하고 해결하는 데 도움이 될 수 있습니다.
display: none; 또는 visibility: hidden; : 이러한 특성은 시각적 및 보조 기술 모두에서 컨텐츠를 숨길 수 있으므로 스크린 리더가 액세스 할 수 없습니다. 컨텐츠에 전혀 액세스 할 수 없다고 확신 할 때만 드물게 사용하십시오.
시맨틱 HTML : 콘텐츠가 시각적으로 숨겨져 있어도 올바른 의미와 구조를 보조 기술에 전달하는 시맨틱 HTML 태그로 싸여 있는지 확인하십시오.
대안 제공 : 숨겨진 컨텐츠가 페이지를 이해하는 데 필수적인 경우 사용자가 콘텐츠를 공개하기위한 토글과 같은이 정보에 액세스 할 수있는 대체 방법을 제공하는 것을 고려하십시오.
키보드 접근성 : 링크 또는 버튼과 같은 상호 작용이 필요한 숨겨진 컨텐츠에 키보드 탐색을 통해 액세스 할 수 있는지 확인하십시오.

이러한 모범 사례를 따르면 콘텐츠를 숨기기 위해 CSS를 사용하면 접근성이 손상되지 않도록 할 수 있습니다.

CSS 숨기기 기술이 스크린 리더에게 영향을 줄 수 있으며,이를 관리 할 수 있습니까?

예, CSS 숨기기 기술은 올바르게 구현되지 않으면 스크린 리더에게 영향을 줄 수 있습니다. 다음은 이런 일이 어떻게 발생하고 어떻게 관리 할 수 있는지에 대한 몇 가지 사항입니다.

부적절한 숨기기 기술 : display: none; 또는 visibility: hidden; 시각적 디스플레이 및 스크린 리더의 컨텐츠를 숨 깁니다. 이것이 의도 된 행동이 아닌 경우, .visually-hidden 클래스를 대신 사용하십시오.
겹치는 콘텐츠 : 숨겨진 컨텐츠가 DOM 구조의 다른 가시 콘텐츠와 겹치는 경우 화면 리더에게 혼란을 일으킬 수 있습니다. 숨겨진 컨텐츠가 DOM에 올바르게 배치되어 있으며 읽기 흐름을 방해하지 않도록하십시오.
복잡한 레이아웃 : 경우에 따라 복잡한 CSS 레이아웃은 특히 숨겨진 요소가 문서의 흐름에 영향을 미치는 경우 화면 리더를 혼동 할 수 있습니다. 가능한 경우 레이아웃을 단순화하고 화면 리더로 철저히 테스트하십시오.

이러한 효과를 관리하려면 :

테스트 : 숨겨진 콘텐츠가 올바르게 해석되도록 다양한 화면 독자와 웹 사이트를 정기적으로 테스트하십시오.
올바른 CSS 사용법 : .visually-hidden 클래스를 고수하고 접근성 트리에서 컨텐츠를 완전히 제거하는 CSS 속성을 사용하지 마십시오.
시맨틱 구조 : HTML 구조가 시맨틱이고 논리적으로 구성되어 있는지 확인하여 스크린 리더가 콘텐츠를보다 쉽게 탐색하는 데 도움이됩니다.

이러한 요소를 염두에두고 올바른 기술을 구현함으로써 CSS가 화면 리더에 숨겨져있는 영향을 최소화 할 수 있습니다.

CSS 외에 다른 방법은 컨텐츠 접근성을 향상시키는 데 사용할 수 있습니까?

CSS 외에도 콘텐츠 접근성을 향상시키는 데 사용할 수있는 몇 가지 다른 방법이 있습니다.

Semantic HTML : <header></header> , <nav></nav> , <main></main> , <article></article> , <section></section> <aside></aside> , 및 <footer></footer> 와 같은 시맨틱 HTML 태그 사용은 보조 기술이 콘텐츠의 구조와 계층을 이해하는 데 도움이되므로 사용자가 쉽게 탐색 할 수 있습니다.
ARIA (액세스 가능한 리치 인터넷 응용 프로그램) : ARIA 속성은 동적 컨텐츠 및 대화식 제어의 접근성을 향상시킵니다. aria-label , aria-labelledby , aria-describedby 및 aria-hidden 같은 속성은 추가 컨텍스트와 보조 기술에 대한 컨텐츠가 어떻게 제시되는지에 대한 제어를 제공 할 수 있습니다.
키보드 내비게이션 : 키보드 탐색을 통해 사이트의 모든 대화식 요소에 액세스하고 사용할 수 있는지 확인하십시오. 여기에는 적절한 초점 관리 및 마우스없이 모든 기능을 수행 할 수 있도록하는 것이 포함됩니다.
이미지에 대한 대체 텍스트 : 모든 이미지에 설명적인 alt 텍스트를 제공합니다. 이를 통해 스크린 리더는 이미지의 목적과 내용을 볼 수없는 사용자에게 전달할 수 있습니다.
캡션 및 성적표 : 비디오 및 오디오와 같은 멀티미디어 컨텐츠의 경우 캡션 및 전사를 제공하십시오. 이것은 청각 장애가있는 사용자뿐만 아니라 듣기를 읽는 것을 선호하는 사용자에게도 도움이됩니다.
색상 대비 : 시각 장애가있는 사용자가 콘텐츠를 읽을 수 있도록 텍스트와 배경색 사이에 충분한 대비가 있는지 확인하십시오. WebAim Color Contrast Checker와 같은 도구를 사용하면 WCAG (Web Content Accessibility Guidelines) 표준을 충족 할 수 있습니다.
반응 형 디자인 : 반응 형 디자인을 구현하면 다양한 장치 및 화면 크기에서 웹 사이트를 사용할 수 있으며, 이는 다양한 유형의 보조 기술을 가진 사용자에게 특히 중요합니다.
명확하고 단순한 언어 : 명확하고 간단한 언어를 사용하여인지 장애가있는 사용자를 포함하여 모든 사용자가 콘텐츠를보다 이해할 수 있도록합니다.