[간단 정리] 스크린 리더과 시멘틱 웹

 스크린 리더(Screen Reader)

스크린 리더(Screen Reader)는 시각적으로 표시되는 컴퓨터 화면의 내용을 읽어주는 소프트웨어입니다. 주로 시각 장애가 있는 사용자들이 컴퓨터를 사용할 수 있도록 도와주는 보조 기술 중 하나입니다. 스크린 리더는 텍스트, 이미지, 버튼, 폼 등의 웹 페이지 내용을 읽어주고, 사용자들이 해당 컨텐츠와 상호작용할 수 있도록 지원합니다. 

 

사용자들은 스크린 리더를 통해 화면의 내용을 듣고, 키보드 또는 다른 입력 장치를 통해 컨텐츠에 접근하고 조작할 수 있습니다. 보통 html 로 작업하다보면 onclick 이벤트를 button 태그가 아닌 span 이나 div와 같은 의미 없는 요소에 적용하는 경우가 많은데, 스크린 리더는 그럼에도 불구하고, 각 태그에 어떤 이벤트가 걸려 있는지 인식 가능하지만, 해당 태그가 button 이라는 역할을 수행함을 인식하지 못하기 때문에 사용자에게 명확한 설명을 제공하기에 제한이 따릅니다.

 

보통 button 과 같은 시멘틱 태그 요소의 내부에는 보이지 않게 role 속성으로 각 태그의 역할맞는 즉, button 태그를 기준으로는 'button' 이라는 값이 role의 값으로 지정되어 있습니다. 따라서 스크린 리더는 이러한 role 속성을 인식하고, 사용자에게 보다 더 명확하고 의미 있는 설명을 제공해줄 수 있습니다.

 

따라서 위 예시를 포함해서 정말 필요로 하는 경우가 아니라면 보다 역할과 기능 관점에서 스크린 리더가 명확히 읽고 사용자에게 설명해줄 수 있도록 시멘틱 태그를 필수적으로 활용하는 것이 좋습니다.

 

 시멘틱 웹

시멘틱 웹은 웹 페이지의 구조와 의미를 명확하게 표현하여 웹 페이지를 이해하기 쉽고 의미있게 만드는 웹 디자인 접근 방법입니다. 이는 스크린 리더 사용자뿐만 아니라 모든 사용자에게 웹 페이지의 이해와 접근성을 향상시킵니다. 

시멘틱 웹을 구성하는 주요 요소들은 다음과 같습니다:

ㅁ제목 (Heading): <h1>, <h2>, <h3>과 같은 제목 태그를 사용하여 컨텐츠의 제목을 나타냅니다. 제목 태그는 문서의 구조를 정의하고 중요한 정보를 전달하는 역할을 합니다. 스크린 리더는 제목 태그를 인식하여 사용자에게 컨텐츠의 구조를 전달합니다.

ㅁ링크 (Link): <a> 태그를 사용하여 하이퍼링크를 정의합니다. 스크린 리더는 링크의 목적지를 설명하고 해당 링크가 새 창에서 열리는지 여부 등을 알려줍니다.

ㅁ목록 (List): 순서 없는 목록(<ul>)과 순서 있는 목록(<ol>)을 사용하여 컨텐츠를 구조화합니다. 이러한 목록 태그를 사용하면 스크린 리더 사용자는 목록의 항목과 구조를 파악할 수 있습니다. 즉, 스크린 리더는 해당 태그로 작성되어 있는 목록을 사용자에게 구조적으로 설명해줄 수 있고, 명확한 순서에 따라 사용자의 접근성을 높일 수 있도록 지원합니다.

ㅁ이미지 (Image): <img> 태그를 사용하여 이미지를 삽입합니다. 스크린 리더는 이미지의 대체 텍스트(alternative text)를 제공하면 이를 통해 이미지를 설명하고, 시각적인 정보를 읽어줍니다(alt 속성을 꼭 지정해줘야 하는 이유라고 할 수 있습니다.).

ㅁ테이블 (Table): <table> 태그를 사용하여 테이블을 생성합니다. 스크린 리더는 테이블의 구조와 데이터를 이해하고 사용자에게 테이블의 내용을 제공합니다.

ㅁ폼 (Form): <form> 태그를 사용하여 사용자 입력을 받는 폼을 만듭니다. 스크린 리더는 폼 요소들과 그 역할을 설명하고, 오류 메시지를 전달하여 사용자가 폼을 올바르게 작성할 수 있도록 도와줍니다.

ㅁ랜드마크 요소 (Landmark Elements): <header>, <nav>, <main>, <footer> 등의 랜드마크 요소를 사용하여 웹 페이지의 주요 영역을 표시합니다. 스크린 리더는 이러한 랜드마크 요소를 활용하여 사용자가 웹 페이지의 내비게이션과 구조를 파악할 수 있습니다.

 

시멘틱 웹을 구성하는 요소들은 스크린 리더 사용자에게 웹 페이지의 내용과 구조를 명확하게 전달하며, 접근성과 사용자 경험을 향상시킵니다. 따라서 웹 페이지를 개발할 때 시멘틱 태그를 적절하게 활용하는 것이 중요해 보입니다.