👀

WCAG 2.1에 웹 콘텐츠의 접근성을 향상시키기 위해 텍스트 아닌 콘텐츠에 대해 대체 텍스트를 제공해주어야 한다는 지침이 있다. 이미지 역시 텍스트가 아닌 콘텐츠이기 때문에 대체 텍스트를 제공해주어야 하는데, 이는 접근성의 향상 뿐만 아니라 SEO(검색 엔진 최적화)와도 관련이 있어 중요하다.

이렇게 사용자에게 대체 텍스트를 제공하는 것을 IR(Image Replacement)이라고 하는데, HTML의 요소를 사용할 경우 alt 속성을 통해 대체 텍스트를 제공하는것이 일반적이다.

하지만 CSS를 이용해 background-image를 넣는 경우도 많기에 어떻게 대체 텍스트를 제공하는지 정리해보자.

😒 visibility: hidden, display: none

먼저 IR기법으로 잘못 사용되고 있는 대표적인 예가 있는데 visibility: hidden과 display: none이다.

이 두 방법은 모두 적용된 요소가 화면에서 보이지 않게 하기 때문에 스크린리더 사용자를 위한 텍스트를 제공하기 위해 사용되는 경우를 발견할 수 있다. 하지만 이 두 방법은 스크린리더에서도 읽지 않는것을 원칙으로 한다.

IR기법의 목표는 대체 텍스트를 시각적으는 숨기지만 스크린 리더 사용자는 읽을 수 있어야 하기 때문에 이 두가지 방법은 옳지 않다.

😊 올바른 IR 기법

Phark Method

• 가장 널리 사용되는 방법으로 이미지로 대체할 엘리먼트에 배경이미지를 설정하고 글자는 text-indent를 이용하여 화면 바깥으로 빼내어 보이지 않게 하는 방법이다.

• 의미있는 이미지의 대체 텍스트를 제공하는 경우에 사용한다.

• Text-indent 속성은 사용하기 간편하지만 단점 또한 존재한다. 만약 이미지가 제대로 로드되지 않으면 텍스트가 보이지 않기 때문에 스크린리더 사용자가 아닌 경우 이미지를 설명하는 텍스트를 보고 콘텐츠의 내용을 확인 할 수 없다. 또한, 웹페이지에 text-indent 스타일 속성이 적용된 요소가 많으면 성능 저하를 불러올 수 있다.

1
2
3
4
5
6

.ir_pm {
	width: 995px;
	height: 1441px;
	text-indent: -9999px;
	background: url('rocketgril_poster.jpg') no-repeat;
}

Dwyer Method

• 이미지로 대체할 엘리먼트에 배경이미지를 설정하고 글자는 span태그로 감싼 후 width와 height를 각각 0으로 하여 넘치는 글자를 숨기는 방법이다.

• 추가적인 tag를 사용하고, Phark Method와 마찬가지로 이미지가 제대로 로드되지 않으면 텍스트가 보이지 않아 콘텐츠 내용 확인이 어렵다는 단점이 존재한다.

1
2
3
4
5
6
7
8
9
10
11
12

.ir_dm {
	width: 995px;
	height: 1441px;
	background: url('rocketgril_poster.jpg') no-repeat;
}

.ir_dm span {
	display: block;
	overflow: hidden;
	width: 0px;
	height: 0px;
}

WA IR

• 접근성 및 UX(User Experience) 향상을 위한 화면읽기프로그램 활용 기법으로 권장되는 방법이다.

• 의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고자 할 때 사용한다.

• 이미지로 대체할 엘리먼트에 배경이미지를 설정하고 글자는 span 태그로 감싼 후 z-index:-1을 이용하여 배치순서를 뒤로 보내어 화면에 안보이게 처리한다.

• 만약 브라우저에서 CSS를 끄거나, 웹 페이지에 적용된 CSS가 정상적으로 로드되지 않을 때 숨겨진 텍스트가 화면에 출력된다. 또한, position 속성을 사용하기 때문에 성능에 영향을 줄 수 있다.

1
2
3
4
5
6
7
8
9
10
11

.ir_wa {
	width: 995px;
	height: 1441px;
	background: url('rockegril_poster.jpg') no-repeat;
}

.ir_wa span {
	display: block;
	position: relative;
	z-index: -1;
}

이 외에도 CSS의 위치 속성과 overflow: hidden을 사용하는 방법, 자바스크립트를 이용하여 이미지로 대체할 엘리먼트의 텍스트를 img태그로 교체하는 방법등 다양한 방법이 존재한다.

참고

• https://m.blog.naver.com/eirene100999/221686480420
• https://nuli.navercorp.com/community/article/1132804?email=true
• https://alonehistory.tistory.com/14

👀 WCAG?

• WCAG는 Web Content Accessibility Guideline의 줄임말로 웹 콘텐츠를 접근성 있게 만들기 위한 권장 표준

• 이 표준을 준수함을 통해 시각, 청각, 운동장애 등 광범위한 장애에 대한 접근성 있는 콘텐츠를 만들 수 있음
• 웹 접근성의 기초를 제공하는 4가지 원칙인 인식의 용이성(Perceivable), 운용의 용이성(Operable), 이해의 용이성(Understandable), 견고성(Robust)에 기반을 두고 있음
• 원칙을 기반으로 접근성을 위해 어떠한 목표를 달성해야 하는지에 대한 지침과 또 그 지침에 대한 검증가능한 성공기준을 제시하고 있음
• 성공기준은 최저수준인 level A 부터 최고수준인 level AAA까지 3단계로 나누어짐

WCAG 2.0 VS WCAG 2.1

WCAG 2.0 이 만들어졌을때는 주로 데스크탑 환경만을 고려했지만 그 후 모바일 산업의 폭발적인 확장으로 모바일 환경을 필수적으로 고려해야하는 상황이 찾아왔다.

WCAG 2.1은 WCAG 2.0의 요구사항들을 상속하면서 추가적으로 인지나 학습장애가 있는 사용자, 저시력자, 모바일 기기를 사용하는데 장애가 있는 사용자의 접근성 지침을 개선하는 데 목표를 두고있다.

즉 WCAG 2.1은 새로운 성공기준, 이를 지원하기 위한 정의, 추가사항을 조직하기 위한 지침, 그리고 준수 절(section)에 대한 몇 가지 사항을 추가하여 WCAG 2.0을 확장한 것이다.

1. 인식의 용이성(Perceivable)

• 정보와 사용자 인터페이스 요소는 사용자가 인식할 수 있는 방법으로 제시되어야 한다.
• 4가지 지침과 그에 대한 29가지 성공기준을 가지고 있다.

지침 1.1 대체텍스트

• 텍스트가 아닌 콘텐츠의 경우 목적에 상응하는 대체 텍스트를 제공해야 한다. (ex - img alt속성)

• 단 시력검사, 받아쓰기와 같은 Test나 특정 감각을 위한 악기연주 등 텍스트만으로 그 내용을 설명하기에 애매한 경우 콘텐츠의 용도만을 기술하는 것도 괜찮다.

• 텍스트 아닌 콘텐츠가 순수한 장식이거나, 보이지 않는경우 대체텍스트를 제공하지 않는 편이 합리적이다

지침 1.2 시간기반 미디어

• 시간기반 미디어에 대한 대체수단을 제공해야 한다

• 달성하기 비교적 쉬운 level A 부터 어려운 level AAA 까지 총 9개의 기준을 가지고 있다.

• level이 올라갈수록 더 자세하고 많은 정보를 실시간으로 제공하는 것을 기준으로 삼고 있다.

지침 1.3 적응가능

• 콘텐츠가 정보나 구조의 손실 없이 다른 방법들로 표시될 수 있도록 제작되어야 한다.

• 콘텐츠의 정보, 구조, 관계는 프로그래밍 방식으로 결정되어야 하고 또 콘텐츠가 표시되는 순서가 의미에 영향을 주는 경우 올바른 읽기 순서 역시 프로그래밍 방식으로 결정되어야 한다.

  프로그래밍 방식으로 결정된다는 것은 확대기, 음성 인식 소프트웨어와 같은 보조공학을 포함한 user agent(웹 브라우저)가 개발자 제공 데이터로부터 정보를 추출해 사용자에게 다른 형식으로 제공할 수 있음을 뜻한다 - 대체텍스트의 img alt 속성 처럼

• 콘텐츠를 이해하고 작동하기 위해 제공된 지시문은 모양, 색상, 크기, 시각적 위치 등 구성요소의 감각적 특성에 전적으로 의존해서는 안 된다.

지침 1.4 식별 가능

• 색상은 시각적 요소 구별을 위한 유일한 시각적 수단으로만 사용되어서는 안된다.

• 웹 페이지에 있는 오디오를 컨트롤 할수 있어야 하고, 배경음이 낮거나 없어야한다 - 스크린리더 사용자를 위한 항목으로, 스크린리더 사용자는 청각을 통해 정보를 받아들이기 때문에 다른 오디오나 배경음이 지속된다면 콘텐츠를 이용하는데 불편함을 겪을 수 있음.

• 텍스트 이미지 보다는 텍스트를 사용해야 하고, 텍스트의 명도대비, 크기 조정등을 통해 가시성을 높여야한다.

추가중…

참고

• https://www.w3.org/TR/WCAG21/
• http://www.kwacc.or.kr/WAI/wcag21/
• http://www.websoul.co.kr/accessibility/WA_guide21.asp

어제에 이어 position에 대해 공부하면서 position이 absolute인 경우 containing block은 가장 가까운 position이 static이 아닌 부모요소 외에도 다른 조건들이 있다고 해 MDN을 통해 공부를 하던 중 이상하다고 생각되는 점이 생겼다.

👀

컨테이닝 블록의 모든것이라는 MDN 문서에서 컨테이닝 블록 식별 항목을 읽어보면 다음과 같이 설명하고 있다.

position 속성이 absolute나 fixed인 경우, 다음 조건 중 하나를 만족하는 가장 가까운 조상의 내부 여백 영역이 컨테이닝 블록이 될 수도 있습니다.

• transform이나 perspective (en-US) 속성이 none이 아님.
• will-change 속성이 transform이나 perspective임.
• filter 속성이 none임. (Firefox에선 will-change가 filter일 때도 적용)
• contain 속성이 paint임.

각 속성들이 어떤 역할을 하는지 찾아보던 중 filter 속성을 검색해 보았는데 default value가 none임을 알았다. 그러자 다음과 같은 의문이 생겼다.

🤔

음 이상한데? filter 속성이 none이면 containing block이 될 수 있고 filter 속성의 default value가 none이면 거의 모든것이 containing block이 될 수 있다는 소리인가? 그건 아닌것 같은데…
아 된다가 아니라 될 수도 있다네? 그러면 될 수 있는 조건과 안되는 조건은 무엇이지?

그러다 [position] (https://developer.mozilla.org/ko/docs/Web/CSS/position) MDN을 들어가 보니 fixed 항목이 이렇게 나와 있었다.

요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않습니다. 대신 뷰포트의 초기 컨테이닝 블록을 기준으로 삼아 배치합니다. 단, 요소의 조상 중 하나가 transform, perspective, filter 속성 중 어느 하나라도 none이 아니라면 (CSS Transforms 명세 참조) 뷰포트 대신 그 조상을 컨테이닝 블록으로 삼습니다. (perspective와 filter의 경우 브라우저별로 결과가 다름에 유의) 최종 위치는 top, right, bottom, left 값이 지정합니다.

앗 여기에는 filter 속성이 none이 아니라고 되어있네 뭐가 맞는거지? transform이나 perspective가 none이 아니여야 했으니 filter도 none이 아닌게 맞는것 같은데.. 라며 계속 고민하다 같이 공부하시는 분들의 도움을 받아 궁금증을 해결했다.

✔

바로 영문 MDN 사이트에는 filter 속성이 none이 아니라고 나와있던것! 사이트 번역과정에서 오류가 있었던것이다.

• A filter value other than none or a will-change value of filter (only works on Firefox).

MDN이 거의 공식문서 혹은 표준처럼 여겨지기는 하지만 번역문서 그리고 원문 역시도 contributor분들에 의해 쓰여지는 것이기 때문에 확신을 하지는 말고 여러 레퍼런스들을 통해 교차검증해야되겠다고 깨달았다.