문서

구조와 함께 디지털 접근성을 고려하여 빌드하고 설계할 때 고려해야 할 많은 지원 HTML 요소가 있습니다. 접근성 학습 과정에서는 많은 요소를 다룹니다.

이 모듈은 다른 모듈에 잘 맞지 않지만 이해하는 데 유용한 매우 구체적인 요소에 중점을 둡니다.

페이지 제목

HTML <title> 요소는 사용자가 경험하게 될 페이지 또는 화면의 콘텐츠를 정의합니다. HTML 문서의 <head> 섹션에 있으며 페이지의 <h1> 또는 주요 주제와 같습니다. 제목 콘텐츠는 브라우저 탭에 표시되며 사용자가 방문 중인 페이지를 파악하는 데 도움이 되지만 웹사이트 또는 앱 자체에는 표시되지 않습니다.

단일 페이지 앱 (SPA)에서는 사용자가 여러 페이지 웹사이트에서와 같이 페이지 간에 탐색하지 않으므로 <title>가 약간 다른 방식으로 처리됩니다. SPA의 경우 document.title 속성의 값은 JavaScript 프레임워크에 따라 수동으로 추가하거나 도우미 패키지로 추가할 수 있습니다. 스크린 리더 사용자에게 업데이트된 페이지 제목을 알리려면 추가 작업이 필요할 수 있습니다.

설명이 포함된 페이지 제목은 사용자와 검색엔진 최적화 (SEO) 모두에 좋습니다. 하지만 과도하게 키워드를 추가하지는 마세요. 제목은 AT 사용자가 페이지를 방문할 때 가장 먼저 발표되는 항목이므로 정확하고 고유하며 설명적이면서도 간결해야 합니다.

페이지 제목을 작성할 때는 내부 페이지 또는 중요한 콘텐츠를 먼저 '앞에 로드'한 다음 앞에 오는 페이지나 정보를 추가하는 것이 좋습니다. 이렇게 하면 AT 사용자가 이미 들은 정보를 들을 필요가 없습니다.

금지사항
<title>The Food Channel | Outrageous Pumpkins | Season 3 </title>
권장사항
<title>Season 3 | Outrageous Pumpkins | The Food Channel</title>

언어

페이지 언어

페이지 언어 속성 (lang)은 전체 페이지의 기본 언어를 설정합니다. 이 속성은 <html> 태그에 추가됩니다. 유효한 언어 속성은 모든 페이지에 추가해야 합니다. 이 속성은 사용할 언어를 AT에 신호하기 때문입니다.

확장된 언어 코드를 지원하지 않는 경우가 많으므로 더 많은 AT 적용 범위를 위해 두 글자 ISO 언어 코드를 사용하는 것이 좋습니다.

언어 속성이 완전히 누락된 경우 AT는 기본적으로 사용자의 프로그래밍된 언어로 설정됩니다. 예를 들어 AT가 스페인어로 설정되어 있지만 사용자가 영어 웹사이트 또는 앱을 방문하면 AT는 스페인어 악센트와 리듬으로 영어 텍스트를 읽으려고 시도합니다. 이 조합으로 인해 사용할 수 없는 디지털 제품과 불만족스러운 사용자가 발생합니다.

금지사항
<html>...</html>
권장사항
<html lang="en">...</html>

lang 속성에는 하나의 언어만 연결할 수 있습니다. 즉, 페이지에 여러 언어가 있더라도 <html> 속성은 한 언어만 가질 수 있습니다. lang를 페이지의 기본 언어로 설정합니다.

금지사항
<html lang="ar,en,fr,pt">...</html>
 여러 언어는 지원되지 않습니다.
권장사항
<html lang="ar">...</html>
 페이지의 기본 언어만 설정합니다. 이 경우 언어는 아랍어입니다.

섹션 언어

콘텐츠 자체의 언어 전환에 언어 속성 (lang)을 사용할 수도 있습니다. <html> 태그가 아닌 적절한 페이지 내 요소에 추가한다는 점을 제외하고 전체 페이지 언어 속성과 동일한 기본 규칙이 적용됩니다.

<html> 요소에 추가하는 언어는 포함된 모든 요소로 계층식으로 적용되므로 항상 페이지 최상위 lang 속성의 기본 언어를 먼저 설정하세요.

다른 언어로 작성된 페이지 내 요소의 경우 해당 lang 속성을 적절한 래퍼 요소에 추가합니다. 이렇게 하면 해당 요소가 닫힐 때까지 최상위 언어 설정이 재정의됩니다.

금지사항
<html lang="en">
  <body>...
    <div>
      <p>While traveling in Estonia this summer, I often asked,
        "Kas sa räägid inglise keelt?" when I met someone new.</p>
    </div>
  </body>
</html>
권장사항
<html lang="en">
  <body>...
    <div>
      <p>While traveling in Estonia this summer, I often asked,
        <span lang="et">"Kas sa räägid inglise keelt?"</span>
        when I met someone new.</p>
    </div>
  </body>
</html>

iframe

iframe 요소(<iframe>)는 페이지 내에서 다른 HTML 페이지 또는 서드 파티 콘텐츠를 호스팅하는 데 사용됩니다. 기본적으로 상위 페이지 내에 다른 웹페이지를 배치합니다. iFrame은 일반적으로 광고, 삽입된 동영상, 웹 분석, 양방향 콘텐츠에 사용됩니다.

<iframe>에 액세스할 수 있도록 하려면 몇 가지 사항을 고려해야 합니다. 먼저 고유한 콘텐츠가 있는 각 <iframe>에는 상위 태그 내에 제목 요소가 포함되어야 합니다. 이 제목은 AT 사용자에게 <iframe> 내의 콘텐츠에 관한 자세한 정보를 제공합니다.

둘째, <iframe> 태그 설정에서 스크롤을 '자동' 또는 '예'로 설정하는 것이 좋습니다. 이렇게 하면 시력이 좋지 않은 사용자가 <iframe> 내에서 다른 방법으로는 볼 수 없는 콘텐츠로 스크롤할 수 있습니다. <iframe> 컨테이너의 높이와 너비도 유연할 수 있으면 좋습니다.

금지사항
<iframe src="https://www.youtube.com/embed/3obixhGZ5ds"></iframe>
권장사항
<iframe title="Google Pixel - Lizzo in Real Tone"
  src="https://www.youtube.com/embed/3obixhGZ5ds"
  scrolling="auto">
</iframe>

이해도 확인

문서 접근성에 대한 지식을 테스트하세요.

사이트가 한 페이지에 여러 언어가 표시되는 다국어 온라인 교과서입니다. 보조 기술에 문구의 언어를 알리는 가장 좋은 방법은 무엇인가요?

걱정하지 마세요. AT는 각 언어를 자동으로 읽을 수 있습니다.
일부 AT에는 언어 감지 기능이 있지만 AT가 올바르게 추측한다고 보장할 수는 없습니다.
<html> 요소에 모든 언어를 포함합니다. 예를 들면 <html lang="en,lt,pl,pt">입니다.
lang 속성에는 하나의 언어만 연결할 수 있습니다.
<html>의 기본 lang를 설정하고 다른 언어로 된 콘텐츠가 있는 요소에 추가 언어를 설정합니다.
AT는 주로 <html> 언어 속성을 사용하여 문서를 읽습니다. 다국어 텍스트가 있는 경우 해당 요소 (예: 섹션 또는 단락)에 올바른 두 글자 ISO 코드와 함께 lang 속성을 추가해야 합니다.