본문 바로가기

웹접근성지침(WCAG2.0)

[웹접근성 지침-일반기술 G172] 모든 텍스트의 '양쪽 정렬'을 제거하는 기술을 제공하자.

728x90

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


화이트 리버가 생기지 않도록 '양쪽 정렬'을 해지하는 버튼을 페이지 가장 상단에 배치하자. 


기술설명

이 기술의 목적은 '양쪽 정렬(justified both left and right)'이 적용되지 않은 버전을 제공하는 것입니다.

제작자는 레이아웃 때문에 '양쪽 정렬'을 주는 경우가 있습니다. 이런 경우에는 '양쪽 정렬'을 제거하는 기능을 제공해 주어야 합니다. '양쪽 정렬'을 제거 하게 해주는 제어기는 쉽고 빠르게 찾을 수 잇도록 페이지 시작 위치에 두어야 합니다.

 

자세한 내용은 경로의 내용들을 참고해주세요.

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

https://www.w3.org/TR/UNDERSTANDING-WCAG20/conformance.html#uc-conforming-alt-versions-head

 

예시

고전 소설을 '출판되었을 때의 모습'으로 복원해서 제공하는 홈페이지가 있습니다.

이 홈페이지에서는 '양쪽 정렬'이 적용도어 있습니다. 페이지의 상단 근처에는 [정렬 제거]라는 버튼이 있습니다.

이 버튼을 누르면 새로운 CSS가 적용되면서 모든 텍스트 들이 '왼쪽 정렬'이 됩니다.

 

 

관련기술

C19: CSS에서 왼쪽 또는 오른쪽 정렬 지정

 

 

점검절차

1. 텍스트가 많은 페이지를 열어봅니다.

2. 텍스트의 '양쪽 정렬'을 제거하는 기능이 있는지 확인합니다.

3. 해당 기능으로 '양쪽 정렬'이 제거되는지 확인합니다.

 

 


 

나의 정리

'화이트 리버(rivers of white)'는 일부 사용자들에게 불편함을 줍니다. 이런 '화이트 리버'를 생기지 않게 하는 방법은 글자에 정렬을 주지 않거나 한쪽 방향으로 정렬을 주는 것입니다.

그런데 홈페이지를 제작하다 보면 디자인을 위해 '양쪽 정렬(justified)'을 사용해야 할 때가 있습니다.

이럴 때에는 웹 페이지 내에 [양쪽 정렬 해지] 또는 [정렬 제거]라는 버튼을 제공해야 합니다. 이 버튼을 누르면 모든 텍스트의 정렬을 '왼쪽 정렬' 또는 '오른쪽 정렬'로 바뀌게 해야 합니다.

이런 버튼은 사용자가 빠르고 쉽게 찾을 수 있도록 페이지 가장 상단에 배치하는 것이 좋습니다


 

G172: Providing a mechanism to remove full justification of text

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

 

G172: Providing a mechanism to remove full justification of text | Techniques for WCAG 2.0

The objective of this technique is to provide a version of the page that does not have full justification (justified both left and right). There may be circumstances when for layout purposes an author may want to have the text fully justified. In these cas

www.w3.org




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

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

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

 

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

 

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

웹디자이너, 웹퍼블리셔, 웹프로그램을 준비하시는 분들이라면, 다른 건 몰라도 HTML+CSS 입문과정...

blog.naver.com

 

728x90