[웹접근성 지침-일반기술 G169] 텍스트는 한쪽 방향으로 정렬시키자.

원문: https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G169.html

---

 '화이트 러버'를 방지하기 위해서는 '양측정렬'을 주지 않도록 합니다. 

---

기술설명

인지 장애가 있는 사람들의 경우 '양측정렬(justified)'된 텍스트를 보는데 큰 어려움이 있을 수 있습니다.

'양측정렬'을 사용하면 단어와 단어사이의 공백들이 크게 생기면서 '화이트 리버(rivers of white)'가 만들어집니다.

'화이트 리버'인해 사용자가 혼란을 느끼는 것입니다. 이런 레이아웃을 나오지 않게 하는 가장 좋은 방법은 '양측정렬'을 사용하지 않는 것입니다.

 

 

예시 

[예시1] 웹 페이지의 텍스트에 정렬(align)을 선언하지 않습니다.

예를 들어 왼쪽에서 오른쪽으로 읽는 언어가 적용된 페이지라면 HTML에서는 기본적으로 왼쪽 정렬을 줍니다.

 

[예시2] 여러 정렬이 혼합된 웹 페이지가 있습니다. 페이지 본문의 문단은 왼쪽 여백으로 정렬되어 있습니다.

텍스트는 오른쪽 여백으로 정렬되어 있습니다.

 

 

 

관련기술

C22: CSS를 사용하여 텍스트의 시각적 표현 제어

F88: 정렬된 텍스트(왼쪽 및 오른쪽 여백에 모두 맞춤)를 사용하여 성공 기준 1.4.8을 충족하지 못함

 

 

 

점검절차

1 일반 브라우저에서 페이지를 실행시킵니다.

2. 콘텐츠에 정렬이 적용되지 않았는지 확인합니다.

 

 

---

 

나의 정리

'화이트 리버(rivers of white)'는 문장 내에서 '글자와 글자 간의 공백' 또는 '단어와 단어 간의 공백'들이 합해져서 만들어진 공백을 말합니다. 이 공백이 까만 글씨 사이에서 흰색 강처럼 보인다고 해서 '화이트 러버(rivers of white)'라고 부릅니다.

인지 장애를 가진 사용자의 경우 '화이트 러버'가 있는 문장을 보는 것이 힘들다고 합니다. (글보다는 공백을 더 많이 보기 때문입니다.)

'화이트 러버'는 문장을 '양측정렬(justified)'로 설정할 경우 많이 생겨나는 문제입니다.

'양측정렬(justified)'로 인해 글자간의 간격 또는 단어 간의 간격이 상황에 따라 넓어지면서 '화이트 러버(rivers of white)' 크게 나타납니다.  '화이트 러버'를 방지하기 위해서는 '양측정렬'을 주지 않도록 합니다.

---

 

G169: Aligning text on only one side

https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G169.html

G169: Aligning text on only one side | Techniques for WCAG 2.0