[웹 접근성 가이드] 1.인식의 용이성 : 대체 텍스트 제공

 

안녕하세요 알씨타운입니다!😃

그동안 웹 접근성이 무엇인지, 웹 접근성을 지켜야 하는 이유 등에 대해 알아보았아요.

 

이제 웹 접근성에 부합하지 않고 잘 준수해 웹 사이트를 제작하려면

어떻게 해야할 지 알아 보아요!

 

웹 접근성 지침은 2015년 3월 31일에

KWCAG2.0에서 KWCAG2.1로 개정 되었습니다.

 

원칙은 크게 4가지로 구분되어 있으며

각 원칙을 준수하기 위해 13개의 지침과

해당 지침을 잘 지키고 있는 지 확인하기 위해 24개의 검사 항목으로 구성 되어 있습니다.

 

 

웹 접근성 지침 준수 4가지 원칙은

1. 인식의 용이성

: 모든 콘텐츠는 사용자가 인식할 수 있어야 한다.

2. 운용의 용이성

: 사용자 인터페이스 구성 요소는 조작 가능하고 내비게이션 할 수 있어야 한다.

3. 이해의 용이성

: 콘텐츠는 이해 할 수 있어야 한다.

4. 견고성

: 웹 콘텐츠는 미래의 기술로도 접근할 수 있도록 견고하게 만들어야 한다.

 

 

이러한 4가지 원칙을 가지고 웹 접근성을 준수해야 하는데요.

오늘은 인식의 용이성에 대해 자세히 알아봅시다!

---

[ 인식의 용이성 ]

1.1 대체 텍스트 제공

1.2 멀티미디어 대체 수단

1.3 명료성

 

 

전맹 시각장애인분들은 눈으로 보는 것이 힘들기 때문에

주로 스크린 리더를 활용해 음성으로 듣고 웹의 정보를 파악합니다.

그래서 마크업할 때 반드시 대체텍스트를 입력해 주어야 하는 데요.

그럼 어떻게 대체 텍스트를 제공해야 할까요?

 

---

 

1.1 대체 텍스트 제공

 

1. 이미지에 alt 대체 텍스트를 입력한다!

웹에서 이미지 또는 배너를 보여줄 때

반드시 alt 속성을 활용해 해당이미지의 정보를 상세히 명시해 주어야 합니다.

alt 속성은 마크업 할 때

<img>,<input type="image">,<input type="button">,이미지맵에 쓰이는 <area>에 사용할 수 있다.

 

 

만약 의미없는, 정보를 제공할 필요가 없는, 단순 디자인적 요소로 넣은 이미지 일때는 alt=""

이렇게 대체텍스트를 공백 형태로 두면 됩니다!

 

---

 

 

2. 다른 링크로 넘어갈 때는 title 속성을 이용해 정보를 미리 제공한다.

<a href="">를 이용해 하이퍼링크로 웹 페이지가 넘어가는 경우

시각 장애인분들이 당황하지 않도록 사전에 정보를 언급해 주어야 합니다.

 

 

---

 

 

3. 대체 텍스트 내용이 길때 IR기법을 활용한다!

IR기법이란 웹 표준을 준수하기 위해 가상 대체 문자 기법을 활용하는 것입니다.

 

즉, 제공하는 정보가 많아 대체 텍스트에 넣을 내용이 너무 많은 경우,

해당 alt속성은 공백으로 둔 채 다른 태그를 만들어 blind라는 class명을 지정해

대체 텍스트를 기입합니다.

그 다음 blind class명을 css속성으로 숨김처리하면 됩니다!

 

이때 blind에 적힌 내용을 숨김 처리 할 때 반드시 유의해야할 사항이 있습니다!!!!

 

대체 텍스트 숨김 처리 시, 반드시 유의해야할 사항

대체 텍스트를 안보이게 하는 방법에는 총 3가지가 있습니다.

 

1. display: none;

요소가 아예 없는 것으로 인식하면서 속성 입력시, 차지하고 있는 공간도 아예 사라집니다.

그래서 스크린 리더기에서 내용을 인식하지 못합니다.

 

2. visibility: hidden;

속성 입력시, 화면에서는 안보이지만 공간은 그대로 차지하고 있습니다.

일부 스크린 리더기에서 내용을 읽을 수 있지만 잘 안 읽히는 경우가 많습니다.

 

3. overflow: hidden;

보통 컨텐츠를 만들때 넘치는 부분들을 숨겨주거나 또는

컨텐츠의 영역을 자식요소의 크기변동에 따라 유동성있게 변화시켜주는 속성으로,

스크린 리더기에서 인식이 모두 가능합니다!

출처 입력

// css .blind{ position: absolute; top: 0; left: 0; overflow: hidden; } // html <img src="image1.png" alt=""> <p class="blind"> 이 이미지는 대체텍스트 내용이 엄~청~엄~청~ 긴 내용의 이미지입니다. </p>

 

 

 

---

 

 

4. 그외 대체 텍스트가 들어가는 이미지에 정보를 제공하는 방법

 

- 의미 있는 아이콘 및 이미지 일때

 

<img src="next_btn.png" alt="다음 콘텐츠 보기">

 

 

- 이미지를 background-image로 넣는 경우

// css .next_img{ background-img: url(이미지파일경로); } // html <a href="#" class="next_img">다음 이미지 보기</a>

 

 

- 이모티콘을 넣는 경우

(대체 텍스트에 단순히 이모티콘 이라고 명시하면

스크린 리더기가 읽을 때 정보가 불분명하게 제공됩니다.)

<img src="img1.png" alt="굴러다니는 토끼와 곰돌이 이모티콘">

 

 

- QR코드 이미지

(시각장애인들은 QR코드를 눈으로 인지하는 것이 어렵기 때문에 반드시

QR코드가 연결되는 링크 주소를 대체 텍스트에 제공하는 것이 좋습니다!)

 

<a href="http://www.notion.so"> <img src="qr_img1.png" alt="http://www.notion.so"> </a>

 

 

- 썸네일 이미지

(이미지와 텍스트를 각각 링크로 구현하는 경우

img태그의 대체 텍스트와 이미지 밑에 있는 하단의 텍스트 정보를

스크린 리더기가 같은 내용을 중복되어 읽을 수 있기 때문에 한 곳에만 정보를 입력하는 것이 좋다.)

 

 

<a href="#"> <img src="1111.png" alt=""> <span> <b>나만 몰랐던 핫템</b><br> 탄산이 끝까지 가! </span> </a>

 

 

 

 

 

---

오늘은 웹 접근성 4가지 원칙 중

'인식의 용이성' 중 "대체 텍스트 제공"에 대해 정리하였습니다.

웹에서 이미지를 제공할 때에는 반드시 alt속성을 이용해

대체 텍스트를 제공해야 하며 필요에 따라

대체 텍스트 제공 방식이 다를 수 있다는 것을 꼭 기억합시다!

 

다음 포스팅에서는

인식의 용이성 중 멀티미디어 대체 수단과 명료성에 대해 정리하도록 할게요!!