[마크업] <br>을 사용한 문장 줄바꿈

문장 줄바꿈의 문제

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

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

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

예를 들면

화면

이미 가입된

이메일 입니다.

코드

<p>

이미 가입된<br>

이메일 입니다.

</p>

스크린리더기 음성지원

'이미 가입된' 

까지만 읽고 멈춘다.

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

'이메일 입니다.'

를 마저 읽어준다.

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

사실

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

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

해결방법

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

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

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

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

참고

MDN( white-space )

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