[웹접근성 지침-일반기술 G179] 텍스트 영역의 너비가 변경되지 않고 텍스트의 크기만 조정된 경우, 콘텐츠나 기능에는 손실이 없어야 합니다.

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

---

텍스트 크기가 늘어나서 콘텐츠가 밀리면, '줄 바꿈'을 주어 밑으로 계속 볼 수 있게 만들어야 합니다.

---

기술설명

일부 브라우저(user agents)는 텍스트 영역의 너비를 변경하지 않고 텍스트의 크기만 변경하는 기술을 지원합니다.

지정된 텍스트의 역역을 벗어나면 콘텐츠가 기능이 손실 될 수도 있습니다.

하지만 레이아웃 속성을 이용하여 콘텐츠를 효과적으로 계속 보이게 할 수 있습니다.

블록크기를 200% 늘려도 텍스트가 넘치지 않게 정의하면 됩니다.

텍스트가 영역을 벗어나면 줄 바꿈을 주면 됩니다. 모든 텍스트가 들어갈 수 있을 만큼 높이를 제공하면 됩니다.

크기가 조정된 텍스트가 주어진 영역을 벗어나면 스크롤을 제공하면 됩니다.

 

 

예시

[예제1] 2열 레이아웃을 만들기 위해 CSS의 'white-space'를 사용합니다.

속성의 기본 값을 사용하면 텍스트가 '줄 바꿈'합니다. 따라서 텍스트가 200%로 늘어나 영역을 벗어나게 되어도 '줄 바꿈'으로 열이 길어지게 됩니다.

CSS를 이용하여 overflow:scroll 또는 overflow:auto를 주면 열이 길어져도 스크롤이 생깁니다.

 

[예제2] 열에 텍스트 블록이 있는 신문 레이아웃입니다. 블록은 고정된 너비가 있지만 높이는 지정되어 있지 않습니다.

브라우저에서 텍스트 크기를 조절하면 줄 바꿈이 되면서 블록이 길어집니다.

 

 

관련기술

G146: 액체 레이아웃 사용

C28: em 단위를 사용하여 텍스트 컨테이너의 크기 지정  

SCR34: 텍스트 크기에 맞춰 크기 및 위치 계산 

 

 

점검절차

1. 텍스트 크기를 200%로 늘립니다.

2. 모든 콘텐츠와 기능을 사용할 수 있는지 확인합니다.

 

 

---

 

나의 정리

브라우저에서 글자 크기를 200%키우면 커진 글자로 인해 콘텐츠들이 밀려나게 됩니다.

일부는 밀려난 콘텐츠가 화면 밖이나 지정된 요소의 영역 밖으로 나가게 되어 안보이게 되는 경우가 있습니다.

예를 들어 화면에 "오른쪽 경로를 클릭해주세요. [링크]"라고 되어 있습니다.

그런데 브라우저에서 글자 크기를 200%로 키우는 바람에 화면에는 "오른쪽 경로를" 밖에 보이지 않습니다.

커진 글자로 인해 콘텐츠의 내용 일부와 링크가 잘렸습니다. 이런 현상을 '콘텐츠 및 기능 손실'이라고 하는 것입니다.

이런 현상을 방지하기 위해 텍스트가 주어진 영역을 벗어나면 '줄 바꿈'을 주어 밑으로 계속 내용을 볼 수 있게 만들어야 합니다.

만약 해당 영역에 높이 제한이 있다면 영역에 스크롤 기능을 주어 모든 콘텐츠와 기능을 불수 있게 해야 합니다.

 

 

---

 

G179: Ensuring that there is no loss of content or functionality when the text resizes and text containers do not change their width

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

G179: Ensuring that there is no loss of content or functionality when the text resizes and text containers do not change their w

 

---

공짜로 혼자서도 할 수 있는 웹퍼블리싱 공부 방법을 알려드립니다.

홈페이지 만들기, 혼자하기 힘들다면 무로 스터디에 들어오세요.

공부 방향을 모르겠다면 무료 과외를 신청하세요.

 

https://blog.naver.com/redoxup/223134941372

혼자서 웹퍼블리싱(HTML+CSS)입문과정 마스터 할 수 있다! + 도움을 받으면 더 잘 할 수 있다!!