웹 사이트는 어떤 사용자가 어떤 환경에서든 항상 동일한 정보를 얻을 수 있도록 작성을 해야 하며, 그것이 웹 사이트의 기본이다.
디자인적으로 아름답게 보이는 것도 중요하지만 가장 중요한 것은 어떤 사용자든 간에 동일한 웹 사이트를 제공하고 또 그 안에서 동일한 정보를 얻을 수 있어야 한다는 점이다.
이렇게 차별 없이 누구나 동등한 경험을 할 수 있도록 작성된 웹 사이트를 '접근성을 고려한 웹 사이트다'라고 말할 수 있다.
그렇다면 웹 접근성을 고려할 수 있는 요소들에는 무엇이 있을까?
1️⃣ img의 alt 속성
<img> 태그를 통해 이미지를 넣을 때 alt 속성을 통해 이미지에 대한 설명을 기입할 수 있다. 이 alt속성은 웹 사이트가 정상적으로 동작할 때는 눈에 보이지 않지만 만약 특정 오류로 인해 이미지가 깨져 보이지 않을 때 이미지 대신 나타나는 문구의 역할을 한다.
또한, 스크린리더기가 인식하는 부분이기 때문에 시각장애를 가진 사용자의 경우에는 해당 alt 텍스트를 통해 요소를 파악할 수 있다.
평소에는 눈에 잘 보이지 않는 부분이지만, 스크린리더기가 인식하는 속성 중 하나이기 때문에 웹 접근성을 고려했을 때 선택이 아닌 필수적으로 포함되어야 하는 속성이다.
<img src="이미지 주소" alt="이미지를 태표하는 문구" />2️⃣ aria-ladel
aria-label은 특정 태그가 가진 의미를 적어주는 이름표와 같은 역할을 한다.
alt는 img의 속성이라면 aria-label은 다른 태그들에도 의미를 만들어주는 WAI-ARIA의 속성 중 하나다.
만약 <button>이나 특정 <div>에도 alt와 같이 스크린리더기가 인식해 줄 수 있는 의미를 담고 싶다면 aria-label을 사용하면 된다.
<a href="/" aria-label="아래로 펼치기"></a>다만, aria-label을 아무 상황에서 사용할 수 있는 것은 아니다.
시맨틱 태그나 role 속성 값을 지정해야 하는 등의 조건이 있기 때문에 만약 aria-label을 사용해야 하는 상황이라면 해당 태그를 시맨틱 태그로 작성을 하거나 그렇지 못한다면 role 속성값을 할당해 줘야 한다.
✅ 더 자세한 내용은 아래 웹사이트 참고!
aditus - aria label
3️⃣ aria-hidden:true;
aria-hidden은 위에서 설명한 aria-label 와 반대 개념이라고 생각하면 된다.
즉, 단순히 미적 표현을 위해 사용하는 콘텐츠의 경우 화면상으로는 사용자 눈에 보여야 하지만 큰 의미를 담고 있지 않아 스크린리더기가 인식하지 않았으면 할 때 사용하는 WAI-ARIA의 속성이다.
hidden이나 display:none;는 요소 자체를 숨기는 것이라면, aria-hidden은 스크린리더기(보조 기기)의 접근을 제한하는 역할을 한다.
true : 스크린리더기의 접근을 제한
false : 스크린리더기와 같은 보조 기기에 해당 요소를 그대로 노출
4️⃣ 언어 설정 lang
해당 문서가 어떤 언어를 사용했는지, 혹은 특정 요소가 어떤 언어인지 설정을 해주고 이를 웹 브라우저에게 알리는 것은 여러 가지 큰 장점을 가지고 있다.
시맨틱 태그와 같은 SEO에도 좋을뿐더러, 스크린리더기와 같은 보조 기기의 적절한 음성 선택에도 도움이 된다.
보통 html 작성하기 시작할 때 <head> 태그 안에 있는 매타 태그로 언어를 설정하지만, 개별적으로 태그마다 다른 언어 설정을 해줄 수도 있다.
예를 들어, 기사의 한 문장을 가지고 왔을 때 그 안에 프랑스어가 있다면 해당 문장 혹은 단어만 선택하여 프랑스어로 설정이 가능하다.
<p>문서에 특정 언어가 들어갔을 경우 <i lang="fe">여기는 프랑스어<i> 따로 설정을 해준다.</p>