문서

구조 외에도 디지털 접근성을 위해 빌드하고 설계할 때 고려해야 할 많은 지원 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 범위를 넓히기 위해 2자리 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>

iFrames

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 속성을 추가해야 합니다.