웹드루아 - 웹 개발자 드루아

이전에 키보드 접근성을 고려해 tabIndex를 적용하는 방법에 대해 알아봤습니다.

이를 이용해 제가 진행하고 있는 프로젝트에 적용해보면서 알게된 ARIA 속성에 대해 알려드리고 싶어서 다시 적습니다!

tabIndex로 탭 순서에 포함시켜도 포커싱된 요소가 어떤 요소인지 알 수 없으면 tabIndex를 넣은 의미가 없습니다. 이러한 문제를 해결해 주는 속성이 바로 ARIA 속성입니다.

ARIA 속성

스크린 리더를 사용해 프로젝트를 수정하면서 ARIA 속성에 대해 알게 되었습니다. ARIA  속성을 이용해 스크린 리더 사용자가 포커싱 하고 있는 요소에 대해 자세히 설명할 수 있습니다. 저는 ARIA 속서 중 aria-label로 요소를 설명하며 스크린 리더 사용자들이 앱을 더 자세히 알 수 있도록 조치했습니다.

보통은 aria-label은 다른 ARIA 속성과 함께 사용해 스크린 리더 사용자들에게 포커싱 하고 있는 요소에 대해 디테일하게 설명합니다. 

이에 대해 조금 더 자세히 설명하겠습니다.
aria-label을 다른 ARIA (Accessible Rich Internet Applications) 속성과 함께 사용하는 것은 웹 페이지의 접근성을 강화하고, 다양한 접근 요구 사항을 충족하기 위함입니다. 각 ARIA 속성은 특정한 접근성 문제를 해결하도록 설계되었으며, 여러 속성을 조합하여 사용하면 보다 풍부하고 명확한 접근성 지원이 가능해집니다.

1. 복합적인 접근성 요구 충족

• 웹 요소가 단순한 텍스트 레이블 이상의 정보나 상태를 전달해야 하는 경우가 많습니다. 예를 들어, 버튼이 현재 활성화 상태인지, 확장된 상태인지 등의 추가 정보가 필요할 수 있습니다.
• aria-label은 요소의 기본적인 레이블을 제공하지만, 요소의 상태(aria-expanded, aria-selected 등)나 역할(role 속성) 등을 보다 세밀하게 제공해야 할 때 다른 ARIA 속성과 함께 사용됩니다.

2. 명확한 사용자 인터페이스 제공

• 사용자 인터페이스 요소가 복잡하거나 다양한 기능을 갖춘 경우, 사용자에게 명확한 안내가 필요합니다. 예를 들어, 탭 인터페이스는 선택된 탭과 선택 가능한 탭을 명확히 구분해야 합니다.
• aria-label은 각 탭의 기능을 설명하고, aria-controls, aria-selected 등의 속성을 함께 사용하여 탭의 현재 상태와 관리하는 패널을 지정할 수 있습니다.

3. 보다 포괄적인 접근성 지원

• 일부 사용자는 특정한 보조 기술을 사용하여 웹을 탐색합니다. 이러한 기술은 ARIA 속성을 통해 제공된 정보를 사용하여 콘텐츠를 해석하고 사용자에게 전달합니다.
• aria-label만으로는 충분한 정보를 제공하지 못하는 경우가 많기 때문에, aria-describedby (요소에 대한 추가 설명 제공), aria-live (동적 콘텐츠 변경 알림) 등과 같은 속성을 함께 사용하여 보다 포괄적인 접근성을 제공할 수 있습니다.

4. 일관된 사용자 경험 유지

• 웹 접근성은 모든 사용자가 일관되고 동등하게 콘텐츠를 이용할 수 있도록 보장하는 것을 목표로 합니다. 다양한 ARIA 속성을 적절히 조합하여 사용하면, 다양한 요구를 가진 사용자들에게 일관된 경험을 제공할 수 있습니다.

결론

aria-label과 다른 ARIA 속성을 함께 사용하는 것은, 웹 요소의 기능과 상태를 보다 정확하고 효과적으로 전달하기 위해 필요합니다. 이는 웹 접근성을 강화하고, 모든 사용자가 웹 사이트의 기능을 최대한 활용할 수 있도록 지원하는 데 중요한 역할을 합니다.

일단 저의 프로젝트에서 대부분의 요소들을 aria-label로 설명이 가능하기 때문에  aria-label만 사용한 경우가 많습니다.

그리고 aria-label을 사용하면 요소 내부의 정보를 스크린 리더가 읽지 못하기 때문에 주의해서 사용해야합니다.

(▼ 사용 예시 1)

aria-label로 포커싱된 요소에 대해 설명합니다.

(▼ 사용 예시 2)

날씨에 맞는 코디를 보여주는 프로젝트이기에 스크린 리더 사용자는 코디의 정보를 알기 어렵습니다. 그렇기에 aria-label을 이용해 어떤 코디를 입었는지 사용자에게 알려줍니다.

시맨틱 태그란 무엇일까?

시맨틱(semantic)이라는 것은 '의미의', '의미론적인'이라는 뜻을 까진 형용사입니다.
즉, div 태그에 의미를 부여하여 문서의 가독성을 높이기 위해 만들어진 태그입니다.

HTML5에서 처음 등장 했으며 <header>, <nav>, <article>, <section>, <footer>, <main> 등으로 직관적인 문서 설계가 가능합니다.

시맨틱 태그를 사용해 얻을 수 있는 이점

• 유지 보수성이 증가합니다. : HTML 문서의 가독성과 유지 보수가 쉬워집니다.
• 웹 접근성이 높아집니다. : 웹 브라우저가 HTML만 보고도 상단(header), 본문(main), 하단(footer), 사이드(aside) 등 어느 영역인지 쉽게 알 수 있습니다. 이를 통해 시각 장애인들이 사이트를 사용할 때 이용하는 스크린 리더기에서 유용하게 사용될 수 있습니다.
• SEO 측면에서 유리합니다. : 검색 엔진은 웹페이지의 여러 정보들을 수집해서 검색 키워드에 알맞게 노출시킵니다. 이 때 시맨틱 태그로 작성할 경우 검색 엔진에 노출되기 좋아집니다.

시맨틱 태그에 대해 알아봅시다!

다양한 방식으로 구현 될 수 있습니다. 우선 레이아웃 예시들을 보고 각 태그들에 대해 설명하겠습니다.

main에 포함과 분리 뿐만 아니라

article로 콘텐츠를 분리하고 section을 나누기도 하고,

section으로 콘텐츠를 분리하고 article로 나누기도 하는데

이는 각 태그에 대해 알면 어떻게 사용할지 감을 잡을 수 있습니다. 

header

• hearder는 웹 사이트의 상단에 위치하는 태그이며, 로고나 검색 로그인 등의 글로벌 링크가 위치합니다.

nav

• nav는 페이지의 특정 콘텐츠나 다른 페이지로 이동할 수 있는 버튼 등을 모아둔 메뉴 영역입니다.
• 네비게이션의 약자이며, 본문의 위치에 영향을 받지 않고 어디서든지 독립적으로 사용가능합니다,

main

• 본문 내용을 나타내는 태그이며 IE ( Internet Explorer ) 환경에서는 지원하지 않습니다.
• 웹 페이지에서 단 한 번만 사용해야 합니다.
• 내부에서 article과 section을 이용헤 구조적인 웹사이트를 구성하는 것이 좋습니다.

aside

• 전체 내용과 연관성이 있지만, 주 콘텐츠와 분리되어 직접적인 상관이 없는 부가적인 내용을 담습니다.
• 주로 사이드바에 적용되며 세로로 따로 배치됩니다.

(저는 main 태그와 분리하는게 더 적절하다고 생각합니다.)

article

• 독립적인 내용을 나타낼 때 사용합니다.
• 즉, <main>안에 있는 다른 내용들과 전혀 상관없이 독립적으로 고유한 정보를 나타낼때 사용합니다.
• 일반적으로 제목 태그를 포함시켜 사용합니다.
• article이나 section을 자식으로 포함해도 문제되지 않습니다.

section

• 주 내용에서 흐름을 나눠주는 태그입니다. 책에서의 챕터 역할이라고 생각하면 편합니다.
• 연관있는 내용들을 묶어주고 싶을 때 사용합니다.
• 일반적으로 제목 태그를 포함시켜 사용합니다.
• main 안에서 연관있는 내용들을 묶어주기 위해 사용되기도하고,
  article 안에서 연관있는 내용들을 묶어주기 위해 사용되기도 합니다.

※ aeticle과 section

둘은 약간 헷갈릴 수 있는 내용이라고 생각되어 사용 예시를 들어 정리하고자 합니다.

<main>
   <article>
    	독립적인 내용이며 다른 내용과 연관이 없음
    	<secttion>
        	연관 있는 내용들끼리 묶어줌
    	</secttion>
    </article>
    
    <secttion>
    	연관 있는 내용들
        <article></article>
    </secttion>
    
    <secttion>
    	연관있는 내용들
    </secttion>
</main>

위와 같이 

- artcle로 콘텐츠를 나눈 후 section으로 묶어둬도 되고, (그 안에 또 article을 사용하는 것도 가능)

- section으로 관련 내용끼리 분할한 후 article로 나누어도 됩니다. (article 안에서 또 section으로 내용을 나누어줘도 됨)

위의 두개를 모두 합쳐서 사용해도 되지만 ,

헷갈리지 않기 위해선 자신만의 기준을 잘 잡아놓고 나누는 것이 좋을 것 같습니다.

figure, figcaption

• figure는 이미지 영역을 나타내는 태그입니다. img와 figcaption을 자식으로 포함시켜 사용합니다.
• figcaption은 이미지에 대한 설명을 나타매고 반드시 figure을 부모로 두어야합니다.
• 여기서 중요한 점은 figcaption 태그의 내용은 alt와는 구별되어야 합니다.
• 동일한 내용이 들어가면 스크린 리더기는 중복된 내용을 출력할 것이기 때문입니다. 이미지에 대한 설명, 또는 사진과 관련 있는 설명은 figcaption에 포함시키고, alt에는 이미지 자체를 표현할 수 있는 단어나 문장을 포함시키면 됩니다.

footer

• 최하단에 위치합니다. 저작권, 사업자정보, 전화번호, 주소 등
  웹사이트나 기업의 정보를 표시하는 공간으로 활용합니다.

details, summary

• details은 사용자가 보거나 숨실 수 있는 추가 세부 정보를 정의하는 태그입니다.
• 사용자는 버튼을 통해 열고 닫을 수 있습니다.
• 기본적으로 닫은 상태에 있고 클리하면 내용이 보이며 확장되는 성질을 가집니다.
• 여기서 summary 태그가 사용되는데 details에서 보이는 부분을 담당합니다.
• summary 태그는 details태그의 첫번째 하위 항복이어야합니다.

스크린 리더 읽힐 때 차이가 나는 태그들도 몇개 알아보고 가면 좋을 것 같습니다.

<i> VS <em>

<i> : 이탤릭체를 시각적으로만 사용하고 싶을 때 사용

<em> : 이탤릭체를 강조하고 싶을 때 사용

<b> VS <strong>

<b> : 시각적으로만 볼드체를 사용하고 싶을 때

<strong> : 강조하는 볼드테에 사용

이상입니다. 읽어주셔서 감사합니당 :)

웹 표준이란?

웹 표준은 웹에서 사용되는 기술들의 표준화를 의미합니다.
즉, 웹사이트를 구성할 때 사용하는 HTML, CSS, JavaScript등을 표준화된 방식으로 작성되어야 한다는 것입니다.
이러한 웹표준을 지켜 웹사이트를 만든다면 어떤 브라우저나 기기를 사용하더라도
홈페이지 화면을 동일하게 볼 수 있습니다. 그렇기에 우리는 개발을 할 때 웹 표준을 고려해야 하는 것입니다.

웹 표준을 준수할 경우 얻을 수 있는 이점

1. 웹 페이지가 모든 브라우저에서 일관적으로 표시되며, 모든 사용자에게 동일한 사용자 경험을 제공할 수 있습니다.
2. 검색 엔진 최적화에 유리합니다.
3. 유지 보수 밒 확작성이 좋아지고 보장됩니다.
4. 웹 접근성 또한 향상됩니다.

웹 표준을 준수하는 방법!

1. DOCTYPE 선언 :
   웹 페이지의 최상단에 DOCTYPE을 선언하여  웹 페이지가 어떤 버전의 HTML, XHTML을 사용하는지 명시합니다.
   
   
2. 시맨틱 태그 사용 :
   <header>,<nav>,<section>,<footer> 등 웹 페이지의 구조를 명확하게 표한하는 시맨틱 태그를 사용합니다.
   
   
3. css 스타일 시트 사용 :
   css 스타일 시트를 사용해 디자인과 레이아웃을 분리하고 웹 페이지의 내용과 디자인을 분리하여 유지보수와 확장성을 높일 수 있습니다.
   
   
4. 웹 접근성 고려 :
   모든 사용자가 쉽게 접근할 수 있도록 웹을 제작하여야 한다. 예를 들어 시각 장애인이 스크린 리더를 사용하여 웹 페이지를 읽을 수 있도록 alt 속성을 사용한다거나 키보드만으로 모든 기능을 사용할 수 있도록 tabindex 속성을 사용하는 등이 있습니다.

여기서 웹 접근성이란 무엇인지 알아봅시다.

웹 접근성

장애를 가진 사람들도 신체적 환경적 조건에 관계 없이 인터넷을 통해 정보에 접근하고 이용할 수 있도록 하는 것을 말합니다. 이를 통해 인터넷을 인종, 성별, 연령, 장애 유무와 상관 없이 모두가 이용할 수 있는 공간으로 만듭니다.

예를 들자면, 위에서 언급했듯이 시각 장애인이 웹을 사용하기 위해 이용하는 스크린 리더를 고려해 이미지만 쓰는 것이 아닌 이미지를 설명하는 alt를 사용하는 것이 있습니다.

웹 접근성을 준수하기 방법

1. 시각적 요소 처리 :
   시각 장애인은 이미지, 비디오, 그래픽, 등을 시각적 요소를 인식할 수 없다는 것을 인지해야합니다.
   따라서 대체 텍스트, 색상 대비, 텍스트 크기 등을 고려해 시각적 요소를 처리해야합니다.
   
   
2. 청각적 요소 처리 :
   청각 장애인은 오디오 콘텐츠를 이해할 수 없습니다.
   때문에 자막, 수화, 오디오 설명 등을 제공하여 청각적 요소를 처리해야합니다.
   
   
3. 키보드 접근성 :
   지체 장애인은 마우스를 사용하지 못하는 경우가 많습니다.
   그렇기에 키보드만으로 웹사이트를 이용할 수 있도록 고려해야합니다.
   
   
4. 웹 접근성 검사 :
   WCAG 준수 여부를 검사하여 웹 접근성을 확보해 봅시다.

WCAG란?

웹 콘텐츠 접근성 지침(WCAG)이란 웹 접근성을 확보하기 위한 국제 표준입니다.
4가지 원칙, 13가지 지침, 78가지 성공 기능으로 구성되어 있습니다.

1. 인식의 용이성

정보와 사용자 인터페이스 요소는 그들이 인지할 수 있도록 사용자에게 표시되어야 한다.
즉 다수의 감각을 사용해 어떤 방식으로든 인지할 수 있어야한다.

a. 텍스트가 아닌 콘텐츠에 대체 텍스트를 제공해야한다. (인쇄, 점자, 음성, 기호 등)

b. 정보와 구조의 손실 없이 콘텐츠를 표현할 수 있어야 한다.(콘텐츠에 대한 간단한 소개)

c. 전경(선택된 정보)과 배경(그 이외의 정보)을 분리하는 등 사용자가 콘텐츠를 보다 쉽게 보고 들을 수 있도록 한다.

2. 운용의 용이성 

사용자 인터페이스 요소와 탐색은 운용 가능해야한다. 쉽게 말하면 모든 사용자가 UI 요소들을 컨트롤 할 수 있어야한다. (마우스 → 키보드 || 음성 명령 등)

a. 키보드로 모든 기능을 사용할 수 있어야한다.

b. 읽기 및 콘텐츠를 사용하는 사용자에게 충분한 시간을 제공해야한다.

c. 사용자가 콘텐츠를 탐색하는 방법과 그들이 어디에 위치하고 있는지를 알 수 있는 방법을 제공해야한다.

3. 이해의 용이성 

정보와 사용자 인터페이스 운용은 이해할 수 있어야한다.

a. 텍스트 콘텐츠를 판독하고 이해할 수 있도록 만들어야 한다.

b. 웹 페이지의 탑재와 운용을 예측 가능한 방법으로 제작해야한다.

c. 사용자의 실수을 방지하고 수정할 수 있도록 도와야한다

4. 내구성

콘텐츠는 각기 다른 브라우저에서 현재와 미래에 모두 동작할 수 있도록 웹 표준을 준수해 개발하여야 한다. 즉 호환성을 최대로 높여야한다.

위의 내용은 WCAG 2.0 기준입니다.

현재는 WCAG 2.1을 채택해 사용하고 있다고 합니다.

먼저 WCAG 2.0을 충족하고 단계적으로 2.1을 적용할 예정입니다.

WCAG 2.1

• 시각 (Visual)
• 청각 (Auditory)
• 지체 (Physical)
• 음성 (Speech)
• 인지 (Cognitive): WCAG 2.1 추가 항목
• 언어 (Language)
• 학습 (learning): WCAG 2.1 추가 항목
• 신경 (Neurological)

참고 블로그