css) 텍스트가 화면에는 안 보이고 스크린리더만 읽게 하는 방법 / 안 보이고 스크린리더도 읽을 수 없게/ 보이고읽을수없게 + 이미지 텍스트 겹칠때 /웹접근성

웹접근성

1-1. 텍스트가 화면에는 안 보이고 스크린리더기만 읽게 하는 방법

CSS에 설정  class이름은 "sr-only"로!!

display: none;

이걸 쓰면 폭망. 화면에도 안 보이고 스크린 리더기도 못 읽는다. 아예 정보가 존재하지 않게 돼서 레이아웃도 틀어진다.

 

보통 클래스 이름을 '스크린리더기만'이라는 의미의 sr(screen reader)-only

sr-only를 많이 쓴다.

[css]
.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: polygon(0 0, 0 0, 0 0);
  white-space: nowrap; /* 줄바꿈 강제 금지 */
}

• 보조기가 가상커서를 쓰는데 가상커서는 최소 1px이 필요하다.
• 그래서  [ width: 1px; height: 1px; ]를 줌.  (밝은 하늘색이 1px)

 

•   넘치는 건 [ overflow: hidden; ]으로 처리. 

• 그래도 보이는 건 clip 속성 rect함수로 잘라냄
• [ clip: rect(top, right, bottom, left); ] 
  • clip:rect() 속성은 absolute, fixed속성이 없으면 clip이 적용되지 않는다. 
• [ clip-path: polygon(0 0, 0 0, 0 0); ] 함수로 잘라냄 
  • clip-path: polygon(x좌표 y좌표, x좌표 y좌표, x좌표 y좌표);

이렇게 하면 화면에는 안보이고 스크린 리더에서 읽을 수 있다. 

 

 

---

 

 

role="text" 속성

 <span class="sr-only">주소</span>서울 종로구 세종대로 172

위 코드는 스크린리더기가 초점을 분리해 읽는 문제가 발생할수 있다.

role="text" 속성을 추가하면 초점이 분리되는 현상을 막을 수 있다.

 

aria-hidden="true"  화면엔 보이고 스크린리더엔 읽히지 않게 하는 속성

aria-hidden="true"로 : 콜론을 감춘 <!-- 이메일 --> 코드 또한 콜론으로 인해 스크린리더가 앞의 텍스트와 뒤의 텍스트를 끊어서 읽는 현상이 발생한다.

전체를 span이나 div로 묶고

role="text" 속성을 이용하면 초점이 분리되는 현상을 막을 수 있다.

          <!-- 주소 -->

          <div class="address" role="text">

            <span class="sr-only">주소</span>서울 종로구 세종대로 172

          </div>

          <!-- 전화번호 -->

          <div class="tel">

            <span class="sr-only">대표 전화번호</span>

            <a href="tel:1577-7011">1234-5678</a>

          </div>

          <!-- 이메일 -->

          <div>

            이메일 정보 <span aria-hidden="true"> : </span>

            <a href="mailto:abc@abc.com?subject=문의사항" target="_blank" rel="noopener">email : abc@abc.com</a>

          </div>

 

 

 

 

 

1-2. 텍스트가 화면에는 안 보이고 스크린리더기만 읽게 하는 방법

aria-label 속성!!

 aria-label 속성으로 화면에 텍스트 보이지 않으면서 스크린리더기만 읽히게 처리.
<select name="search" id="search" class="formSelect" aria-label="검색 카테고리 선택">
  이렇게 마크업 하면 스크린 리더기가 '검색 카테고리 선택' 을 읽는다.

 

 

 

 

2-1. 텍스트가 화면에 안보이고 스크린리더도 읽을 필요가 없을땐?

CSS - display { none; }

위에 언급했듯이 display: none; 스타일을 적용한 HTML 요소는 render tree에서 삭제되기 때문에,
화면상에서도 보이지가 않고, 스크린리더가 읽을 수도 없다.

인라인으로 css를 추가해도 동일하다.

<span style="display: 'none';">

 

 

3. 텍스트가 화면에 보이지만 스크린리더가 읽을 수 없게 하려면?

HTML : aria-hidden

aria-hidden 속성은 HTML Tag 요소의 속성으로 사용된다.
aria-hidden 속성이 입력된 HTML Tag가 접근성 API에 노출되었는지 여부를 나타낸다.

접근성 API에 노출이 되었다면, 스크린리더가 음성으로 표현할 수 있고,
반대로 접근성 API에 노출이 되지 않았다면, 스크린리더가 음성으로 표현할 수 없다.

aria-hidden="true"

 

 

• true: 스크린 리더와 같은 보조기술 사용자의 콘텐츠 탐색을 제한한다.
  • 콘텐츠가 스크린 리더의 가상 커서에서 탐색되지 않는다.
  • ul, table과 같이 하위 요소를 포함할 수 있는 요소에 aria-hidden을 "true"로 설정하면 하위 요소까지 숨길 수 있다.
• false: 접근성 API가 스크린 리더와 같은 보조기술 사용자에게 숨겨진 콘텐츠를 노출하여 콘텐츠를 탐색할 수 있다.

 

❗❗주의❗❗

다음과 같은 경우 aria-hidden="true"를 추가해서는 안 됩니다.
HTML 속성에 hidden 특성이 있는 경우
CSS : display: none;
CSS : visibilty: hidden;
위의 3가지의 경우에는 이미 접근성 트리에서 제거되었기때문에, HTML Tag에 aria-hidden 속성을 부여할 필요가 없다.

 

• aria-hidden은 키보드 및 마우스 사용자 등과 같은 모든 사용자를 대상으로 콘텐츠를 숨기는 방법이 아니므로, 사용에 주의해야 한다.
• 링크, 버튼과 같이 초점을 받을 수 있는 요소를 aria-hidden으로 숨긴 경우 키보드 또는 마우스 사용자가 해당 컨트롤에 초점이 제공되어 탐색에 혼란이 있을 수 있으므로 컨트롤에 대한 초점을 제거해야 한다.

 

 

 

---

1. height: 100%; 은 부모의 height 그대로 적용하겠다는 뜻

(부모 높이대로 렌더링 되는 방법)

 

 

2. 이미지와 텍스트가 겹칠 때 padding

이미지를 백그라운드로 줬을때 텍스트와 겹쳤다.

[html]
<h2 class="offer__title">오늘의 쇼핑 제안</h2>
 
 [css]
 h2 {
  background: url(/assets/icon/shopping.svg) no-repeat 0 50%;
 }

css 추가 코드

padding-left: 3rem;

 [css]
 h2 {
  background: url(/assets/icon/shopping.svg) no-repeat 0 50%;
  padding-left: 3rem;
 }

 

 

 

 

 

 

 

 

 

참고

https://2mojurmoyang.tistory.com/246

https://yceffort.kr/2021/03/hiding-contents-with-html-and-css