A11Y 연구 사례: 특정 단어의 텍스트 깨짐 및 스크린 리더의 영향

전략적 단어에서 문장을 여러 줄로 시각적으로 나누도록 요청하는 것은 특히 랜딩 페이지에서 디자인 팀의 일반적인 요청입니다. 예: "안녕하세요/n 인간". 그러나 이는 예기치 않은 방식으로 스크린 리더 피치 흐름에 영향을 미칠 수 있습니다...

시나리오 문제

예를 들어, "Hello human being"이라는 제목이 있고 "hello"단어 다음에 제목을 끊으라는 요청을 받았다고 가정해 보겠습니다.

Hello   
human being

다음은 내가 본 주변에서 사용되는 몇 가지 일반적인(나쁜) 접근 방식입니다.

각 줄 사이에 <br />를 추가합니다. Don't do this! 매우 일반적임에도 불구하고 사용하기 쉽기 때문에 의미상 올바르지 않습니다! <br>는 줄 구분이 중요한 경우에 사용하기 위한 것입니다. 예를 들어 스트레스 주소, 시 등...

각 줄 사이에 <span />가 있는 display:block를 추가합니다. 이는 <br />와 동일한 효과를 생성하지만 의미 체계가 없어 좋습니다.

flexbox 사용: 각 줄을 <span>로 감싸고 flex-direction: column를 사용하여 문장 자체에 flexbox를 추가하는 것도 트릭을 수행합니다.

그러나 이 세 가지 접근 방식 모두 VoiceOver 스크린 리더 피치 흐름에서 예상치 못한 동일한 결과가 나타납니다.

예상 피치: "안녕 인간"

실제 피치: "Hello"[일시 중지] 인간."

또 다른 일반적인 방법은 max-width 를 설정하는 것이지만 해당 솔루션은 텍스트 콘텐츠에 크게 의존합니다. 이 시나리오에서는 접근 방식이 작동하지 않습니다.



대신 방탄 솔루션을 계속 찾자.

가능한 해결책

다른 실험 중에서 write-space: pre-line;를 사용하는 것이 가장 좋은 해결책인 것 같습니다! 리터럴 개행을 만들거나 
 제어 문자를 사용하여 텍스트를 구분할 수 있습니다.

<h2 style="white-space:pre-line;">Hello       
human being</h2>

<h2 style="white-space:pre-line;">Hello &NewLine;human being</h2>

이는 HTML 의미론과 CSS 사용이 예상하지 못한 방식으로 텍스트를 크게 읽는 방식에 어떤 영향을 미칠 수 있는지를 보여주는 예일 뿐입니다.

설명된 접근 방식과 다른 솔루션 시도를 시도할 수 있는 Codepen은 다음과 같습니다.