sunmermi's blog

문장 줄바꿈의 문제

디자인때문에 줄바꿈을 하려고 <br>요소를 사용하는 경우가 많다.

이때 생기는 문제점이 하나 있다.

<br>을 사용해 줄바꿈을 하게 되면 스크린리더기에서 문장을 이어서 읽어주지 않는다.

이미 가입된

이메일 입니다.

'이미 가입된' 

까지만 읽고 멈춘다.

사용자가 다음 문장을 읽을라면 사용자가 직접 다음으로 넘기는 행동을 취해야지만 

'이메일 입니다.'

를 마저 읽어준다.

위와같은 상황을 보면 단순히 눈에 보이는 혹은 디자인 때문에 <br>요소를 사용해서 줄바꿈을 하는것은 옳지않다.

사실

줄바꿈을 위해 사용하는 <br>요소는 웹접근성에 위배되는 사항은 아니지만

실제로 스크린리더기를 사용하는 사용자의 접근성을 높이려면 <br>을 사용해서 줄바꿈의 하는 형태는 좋지 않다고 판단된다.

해결방법

CSS를 속성인 white-space 사용하면 문제를 해결할수 있다.

상황에 따라 아래 2가지의 값을 사용하면 될것으로 판단된다.

• white-space: pre-wrap;
• white-space: pre-line;

( + 줄바꿈할 문장을 다른요소로 묶어서 display: block;을 한다던가 <p>요소를 사용해 묶어도 문장을 이어서 읽어주지 않는다. )

참고

MDN( white-space )

<br>사용 스크린리더  | 웹접근성연구소

Empty elements Closing

area, base, br, col, embed, hr, img, input, link, meta, param, source, track, wbr  이러한 요소들을

빈요소라고도 불리며 Empty element === Void element 라고도 부른다.

나는 HTML을 처음 교육받을 때 부터 HTML5를 배워서 그런지

빈요소를 사용할 경우 클로징할때 슬래시( / )를 사용하지 않았다.

하지만 어느날 내가 작성하고 수정한 코드를 검토하던 팀장님께서 

개발팀장님

: 저는 가급적이면 빈요소를 사용할때 슬래시(/)를 사용해서 닫는 주의자입니다. 

빼도 되는거면 그에 대한 설명한 문서 자료를 남겨주면 좋겠습니다.

라는 요청을 받았다.

처음엔 당혹스러웠다.  당연히 이전엔 사용했다고 했지만 HTML5에선 빠져도 된다고 배워왔으니까...  

문제였다. 그렇게 배워 사용은 했지만 '왜?' 에 대해 전혀 생각하지 않았다. 

나는 구글링을 시작했다.....

W3C Reference

2017.10.3

https://www.w3.org/TR/html51/syntax.html#writing-html-documents-elements

2017.10.24

http://w3c.github.io/html/syntax.html#elements-0

SYNTAX

http://w3c.github.io/html-reference/syntax.html#syntax-elements

슬래시(/)로 클로징 하는것은 XHTML에서는 필수사항이지만, 

HTML5 권고안에선 슬래시 기호를 사용해서 클로징하는것은 옵션이다.

그리고 사람들의 의견은 분분했다.

사용해야 한다 의견  :  옵션이니까 이전에 사용하던대로 사용하는것이 편하다. (명시적이기도 하니까..)

하지 않아도 된다 의견  :  굳이 왜 사용하냐? 슬래시(/)가 허용은되지만 의미가 없다. 그러니 사용하지 않아도 된다.

참고

• http://www.colorglare.com/2014/02/03/to-close-or-not-to-close.html
• https://www.codecademy.com/ko/forum_questions/51ffd01c80ff33d5ba007c7c
• http://xahlee.info/js/html5_non-closing_tag.html
• https://stackoverflow.com/questions/4693939/self-closing-tags-void-elements-in-html5
• https://stackoverflow.com/questions/3558119/are-non-void-self-closing-tags-valid-in-html5
• https://teamtreehouse.com/community/closing-image-tag-img-or-img
• https://www.w3schools.com/html/html_elements.asp  : Empty HTML Elements 참고

자... 난 모르겠다. 

일단 사용하고 안하는것에 대해선 기능적 오류적 문제가 없는것으로 보인다... (있다면 알려주세요..)

이런 저런글을 보고 판단이 든것은 

일단, 클로징을 슬래시(/)를 사용하든 안하든 코드를 작성할 때 일관성을 유지하면 될것 같다.