혼합 언어 콘텐츠 표시하기

스크린 리더를 위한 올바른 발음 보장

문제

페이지가 영어로 올바르게 식별되었지만, 외국어 인용구, 이름 또는 용어(예: 프랑스어 책 제목)가 포함되어 있습니다. 스크린 리더는 이 텍스트를 잘못 발음하고, 브라우저는 모든 콘텐츠가 영어라고 가정하기 때문에 잘못된 타이포그래피나 맞춤법 검사를 적용할 수 있습니다.

해결책

외국어 텍스트를 <span>과 같은 인라인 HTML 요소로 감싸고, 적절한 언어 코드가 포함된 lang 속성을 추가합니다. 이는 페이지의 주요 언어에 영향을 주지 않으면서 브라우저와 보조 기술에 해당 특정 스니펫에 사용할 언어를 정확히 알려줍니다.

단계

1. 혼합 언어 콘텐츠 식별하기

먼저, 외국어 구문이 포함된 텍스트를 표시하는 컴포넌트를 생성하거나 식별합니다. 이 예시에서는 영어 페이지에 프랑스어 구문이 포함되어 있습니다.

// app/components/ArticleText.tsx

export default function ArticleText() {
  return (
    <article>
      <p>
        The chef looked at the meal and, with a sigh, said, 
        "C'est la vie."
      </p>
    </article>
  );
}

변경 없이는 스크린 리더가 "C'est la vie"를 영어 발음으로 읽으려고 시도하여 잘못된 발음이 됩니다.

2. 외국어 텍스트를 요소로 감싸기

특정 구문을 <span> 요소로 감싸도록 컴포넌트를 수정합니다. 이렇게 하면 텍스트를 분리하여 속성을 적용할 수 있습니다.

// app/components/ArticleText.tsx

export default function ArticleText() {
  return (
    <article>
      <p>
        The chef looked at the meal and, with a sigh, said, 
        <span>"C'est la vie."</span>
      </p>
    </article>
  );
}

3. lang 속성 추가하기

해당 구문에 맞는 올바른 언어 코드로 <span>에 lang 속성을 추가합니다. 이 경우 프랑스어 코드는 fr입니다.

// app/components/ArticleText.tsx

export default function ArticleText() {
  return (
    <article>
      <p>
        The chef looked at the meal and, with a sigh, said, 
        <span lang="fr">"C'est la vie."</span>
      </p>
    </article>
  );
}

4. 페이지에서 컴포넌트 사용하기

이제 페이지에서 이 컴포넌트를 사용할 수 있습니다.

// app/[lang]/page.tsx
import ArticleText from '@/app/components/ArticleText';

export default function Home() {
  return (
    <div>
      <h1>My Blog Post</h1>
      <ArticleText />
    </div>
  );
}

스크린 리더가 lang="fr" 속성을 만나면, 해당 문구를 올바르게 발음하기 위해 프랑스어 음성으로 전환합니다. 브라우저는 이 힌트를 사용하여 프랑스어 특유의 타이포그래피(예: 올바른 인용 부호)를 적용하거나 영어 맞춤법 검사에서 해당 문구를 제외할 수도 있습니다.