Eojin Han

문서 접근성 고려 페이지 제목 (title tag)title in SPA assist SEO 작성 팁 언어 (lang attribute)페이지 언어 섹션언어 iframe

문서 접근성 고려

접근성을 지원하는 많은 HTML 태그들이 있다.

콘텐츠 구조 등에서 다루는 유용한 랜드마크 태그들을 제외하고,

문서 측면에서 다루면 좋을 접근성 관련 태그들에 대해 살펴보자.

페이지 제목 (title tag)

title

HTML <title> 요소는 사용자가 경험하게 될 페이지 또는 화면의 콘텐츠를 정의한다.

문서의 <head> 섹션에 위치

브라우저 탭에 표시되어 사용자가 방문 중인 페이지를 이해하는 데 도움이 됨.

페이지 콘텐츠 내에는 표시되지 않음.

AT 사용자가 페이지 방문 시 첫번째로 들리는 내용이므로 정확하고 설명적이면서도 간결해야 한다.

title in SPA

SPA에서는 페이지간 이동을 하지 않으므로 title에 대해 별도 작업이 필요하다.

document.title 값을 코드로 수동으로 변경한다.

또는 유용한 도우미 패키지를 통해 관리한다.

스크린 리더 사용자에게 업데이트된 페이지 제목을 알리려면 추가 작업이 필요할 수 있다.

assist SEO

title은 SEO 에도 도움이 된다.

설명적인 페이지 제목 작성

키워드 남발은 자제

작성 팁

내부 페이지나 중요한 콘텐츠를 먼저 작성하고,

그 다음에 이전 페이지나 정보를 추가하는 것이 좋습니다.

이렇게 하면 AT 사용자가 이미 들은 정보를 반복해서 듣지 않도록 할 수 있습니다.


// bad
// 현재 페이지 관련 내용이 맨 뒤에 배치되어 이해하는 것이 지연된다.
<title>The Food Channel | Outrageous Pumpkins | Season 3 </title>

// good
// 주요 콘텐츠인 시즌 3이 강조되며, 사용자가 더 빨리 이해할 수 있도록 돕는다.
// 검색 엔진도 페이지 제목의 앞부분을 중요하게 여기므로 더 유리할 수 있다.
<title>Season 3 | Outrageous Pumpkins | The Food Channel</title>

언어 (lang attribute)

페이지 언어

lang속성은 <html> 태그에 추가되며, 전체 페이지의 기본 언어를 설정한다.

언어 속성은 모든 페이지에 추가되어야 하며, 이는 AT에도 어떤 언어를 써야하는 지 알려준다.

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

언어 속성이 완전히 빠져 있으면, AT는 유저가 설정한 기본 언어로 읽으려고 시도한다.

예를 들어, AT를 스페인어로 설정해뒀으면 영문 페이지에 접속하더라도 스페인어로 읽으려고 하며, 이런 상황은 디지털 제품을 사용할 수 없게 만들고 사용자에게 불편을 초래할 수 있다.


// bad
<html>...</html> // 아무것도 지정하지 않은 경우.
<html lang="ar,en,fr,pt">...</html> // 언어 속성은 하나만 설정 가능.

// good
<html lang="en">...</html> // 페이지 내의 주 언어 하나를 명시함.

섹션언어

콘텐츠 자체의 언어 전환에 언어 속성 (lang)을 사용할 수도 있다.

기본 언어와 다른 언어가 쓰인다면 다른 언어라는 것도 표시해줘야 한다.

적절한 래퍼 요소에 lang 속성을 지정하면 해당 부분에 대해서는 언어 설정이 바뀐다.


<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> // <-- Good!
        when I met someone new.</p>
    </div>
  </body>
</html>

iframe

<iframe> 요소는 페이지 내에 다른 HTML 페이지 또는 서드 파티 콘텐츠를 호스팅하는 데 사용된다. 다른 웹 페이지를 안으로 삽입하는 역할이다.

광고, 임베디드 비디오, 웹 분석, 인터랙티브 콘텐츠 등에서 자주 사용된다.

iframe>을 접근 가능하게 만들기 위해 고려해야 할 몇 가지 사항이 있다.

각 <iframe>에는 고유한 콘텐츠가 있을 때 부모 태그 안에 title 요소를 포함한다. 이 제목은 보조 기술(AT) 사용자에게 <iframe> 내의 콘텐츠에 대한 추가 정보를 제공한다.

<iframe> 태그 설정에서 스크롤을 "auto" 또는 "yes"로 설정하는 것이 좋다. 이렇게 하면 시각 장애가 있는 사람들이 <iframe> 내의 콘텐츠를 스크롤하여 볼 수 있게 된다.

이상적으로는 <iframe> 컨테이너의 높이와 너비가 유연하게 설정되어야 한다.


// bad
<iframe src="https://www.youtube.com/embed/3obixhGZ5ds"></iframe>

// good
<iframe title="Google Pixel - Lizzo in Real Tone"
  src="https://www.youtube.com/embed/3obixhGZ5ds"
  scrolling="auto">
</iframe>

문서 접근성 (title, lang, iframe)