문서

구조와 함께 콘텐츠를 생성할 때 고려해야 할 지원 HTML 요소가 많이 있습니다. 디지털 접근성을 위한 구축 및 설계입니다 학습 과정 접근성 과정에서는 많은 요소를 다룹니다.

이 모듈에서는 어떤 시스템에도 적합하지 않은 매우 구체적인 요소를 중점적으로 다룹니다. 이해하는 데 도움이 됩니다

페이지 제목

HTML <title> 요소는 사용자가 시청하려는 페이지 또는 화면의 콘텐츠를 정의합니다. 경험해 볼 수 있습니다 이 파일은 <head> 섹션 HTML 문서이며 <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에 사용해야 하는 언어를 나타내므로 모든 페이지에 추가해야 합니다.

2자리 문자, ISO 언어 코드 많은 AT 커버리지를 지원하지 않기 때문에 확장 언어 코드.

언어 속성이 완전히 누락된 경우, AT는 기본적으로 프로그래밍 언어를 사용합니다. 예를 들어 AT가 스페인어로 설정되어 있지만 사용자가 영어 웹사이트나 앱을 방문했을 때 AT는 영어를 읽으려고 할 것입니다. 스페인어 억양과 억양으로 텍스트를 만드세요 이 조합으로 인해 짜증이 난 사용자로 인해 말이죠.

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

lang 속성에는 언어를 하나만 연결할 수 있습니다. 다시 말해 <html> 속성은 언어가 여러 개인 경우에도 하나만 사용할 수 있습니다. 표시됩니다. lang를 페이지의 기본 언어로 설정합니다.

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

섹션 언어

콘텐츠 자체에서 언어 전환에 언어 속성 (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 속성을 추가해야 합니다.