문서

구조와 함께 디지털 접근성을 위해 빌드하고 설계할 때 고려해야 할 지원 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가 확장 언어 코드를 지원하지 않으므로 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>

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>
이전
콘텐츠 구조
다음
키보드 포커스