띄어쓰기를 주의하세요!

몸만들어오세요.

영어를 비롯하여 불어, 스페인어, 독일어 등의 라틴어 계열은 띄어쓰기가 존재하고 띄어쓰기가 없다면 위 문구처럼 전혀 다른 내용의 문구가 된다. 한글도 세종대왕의 한글 창제 시에는 없던 띄어쓰기가 미국의 영향을 받아 띄어쓰기가 생기게 되고 이제 띄어쓰기가 없다면 "몸만들어오세요"라는 문구처럼 전혀 다른 내용의 문구가 된다.

숨김 텍스트도 띄어쓰기가 필요하다.

실제 화면에는 보이지 않지만 스크린리더 사용자에게만 들리는 숨김텍스트를 많이 사용한다. 숨김텍스트는 화면에 보이지 않게 되므로 띄어쓰기가 제대로 입력이 되었는지는 바로 확인이 어렵다.

특히 숨김텍스트는 <span>이라는 인라인태그로 많이 사용하게 되는데 바로 앞의 노드와 띄어쓰기가 없다면 한 단어로 붙여읽게 된다.

다음의 예제를 보자. 새 창 열기가 필요한 <a>는 스크린리더의 호환 이슈로 한국처럼 title 속성을 사용하지 않고 링크명 안에 숨김텍스트로 "open a new browser" 를 삽입한다.

<a href="/Privacy-Policy.html" target="_blank">
    Privacy policy<span class="offscreen">open a new browser</span>
</a>

위와 같이 마크업 후 스크린리더로 읽게 되면 policy와 open을 붙여읽어 policyopen이라고 읽게 되어 스크린리더 사용자는 이해하기 어렵게 된다.

이런 사소한 부분때문에 스크린리더 사용자들이 쉬운 부분을 어렵게 이해하게 되므로 작은 부분이지만 주의하여 사용하는 것이 좋다.