211025_웹 접근성 (semetic ,WAI-ARIA)

웹 접근성(web Accessibility)

• 웹 사이트에서 제공하는 정보를 차별 및 제한없이 동등하게 이용할 수 있도록 보장

• 장애/비장애를 넘어 비단 사람만이 존재하는 것이아니라 환경을 포함한 모든것들을 접근 가능하게 하는 모두를 위한 서비스이다

웹 표준 기술

• 웹에서 표준적으로 사용되는 기술이나 규칙

(1) HTML: 콘텐츠의 구조를 설계하고 의미를 부여하는 기술

(2) CSS : 콘텐츠의 배치 및 스타일 , 디자인의 역할

(3) Javascript : 기능을 구현하는 기술, 역동적으로 적용하게 하는 것

(4) WAI-ARIA : RIA를 위한 웹접근성 관련 기술

이 메인 메뉴를 구성할 수 있는 방법을 수업 시간에 들은 내용을 바탕으로 두가지 기능을 정리해보려 한다!

1) semetic element 을 사용하여 생성하기

semectic elemnet(의미요소)

• 웹을 의미있게 만드는 역할
• 말 그대로 의미를 가진다는 것
• 의미에 맞는 적절한 태그를 사용하여 마크업 하는 것을 말한다

👍사용하는 이유

1) 검색엔진 최적화

• 검색엔진 자체에 알고리즘에 따라 주요 키워드를 추출한다 이때 의미가 없는 <div>, <span> 태그를 사용한다면 어떤 부분이 중요한 영역인지 구분이 어렵다

2) 웹 접근성

• 웹 사이트에서 제공하는 정보를 차별 및 제한없이 동등하게 이용할 수 있도록 보장하는 모두를 위한 서비스이다
• 이러한 서비스를 구현하기 위해서는 semetic mark up이 반드시 필요하다
• 가장 대표적인 예로 음성으로 콘텐츠를 알려주는 스크린 리더, 마우스를 사용할 수 없는 사용자를 위한 키보드 접근등이 있다.

3) 가독성

• 다른 개발자와의 협업에서도 매우 중요!!📌
• 적절한 태그의 사용은 주석을 달아 설명하는 것 보다 확실한 이해를 가져온다

<nav> 을 사용하여 구현 해보기

• HTML 에는 100개가 넘는 시멘틱 태그가 존재하기에 어떤 부분에서 어떤 태그를 사용해야하는지 훈련하기 위해 강사님이 말씀해주신 <nav> 를 사용하여 구성해보기로 했다

<nav> 의대한 간략한 정의

• 사이트에서 주요한 네비게이션 역할을 하는 링크 그룹들을 담을 때 사용
• nav를 사용하면 스크린 리더 사용자가 네비게이션을 쉽고 빠르게 찾을 수 있고 필요하지 않은 경우엔
  건너뛰기를 할 수도 있다

 <nav class="navbar">
      <h2>메인메뉴</h2>
      <ul class="navar-menu">
        <li>
          <button>HTML에 대해</button>
          <ul>
            <li><a href="#"></a> HTML5 소개 </li>
            <li><a href="#"></a> 레퍼런스 소개 </li>
            <li><a href="#"></a> 활용예제 </li>
          </ul>
        </li>
      </ul>
    </nav>

결과 화면

2) WAI-ARIA 의 역할을 정의하여 사용하기

WAI-ARIA 이란?

• WAI(Web Accessibility Initiative): W3C에서 웹 접근성을 담당하는 조직

• ARIA(Aceccible Rich Internet Application)의 약자자로 모든 사용자들이 웹 콘텐츠와 웹 어플리케이션에 더 쉽게 접근할 수 있는 방법을 정의하는 특성

• 마우스와 같은 포인팅 장비를 사용하기 힘든 , 스크린 리더를 사용하는 사용자들에게

• 동적컨텐츠 javascript, ajax, vue, react 등과 같이 페이지를 새로고침 하지 않고도 페이지의 내용과 데이터가 바뀌는 영역의 역할, 속성, 상태 정보를 추가하여 동적인 컨텐츠에 원활하게 접근 하도록 해주는것

• 기존의 HTML에 부족한 부분을 보완하고 웹 접근성을 준수할 수 있게 속성이나 상태 정보등을 추가할수 있다

WAI-ARIA 가 필요한 이유

• 앞서 정의한 semetic element를 사용하면 되는것이 아닌가?

👌 HTML로는 제어할수없는 접근성 이슈들(Ajax 와 Javascript를 사용하여 개발한 것들) 을 WAI-ARIA를 통해 관리할 수 있다.
-> ARIA로 element 의 외형, 동작 등은 바뀌지않는다
👌 웹에서 ARIA 가 접근성을 더욱 높여줄 수는 있으나 가장 기본은 semetic markup !!!
-> 태그를 쓸수 있는데 거기에 ARIA 의 role 속성을 혼용해서 쓰는 경우는 좋지 않다

WAI-ARIA의 역할

🙆‍♀️현재 web-cafe에서 적용할 수 있을만한 애들만 정리해보았다

📌nav 태그를 사용하면서 WAI-ARIA 를 혼용하는 것은 좋지 않다고 하셨기 때문에 nav가 아닌 의미 없는 div를 사용하여 실습을 해본 것

(1) Role : UI에 포함된 특정 elment의 기능을 정의하는 것

• 특정 element 의 기능을 정의하는것으로 페이지의 검색 영역인지, 내비게이션 요소인지, 특정 section 의 제목인지 등의 명확한 기능을 부여

  ex) role = button nav에 구현된 메인 메뉴들을 보통 <a> 태그로 정의되기 때문에 해당 요소를 버튼 으로 입력하여 사용자가 클릭할 수 있게 정보를 제공할 수 있을 것 같다

<div class="menu" role="menu">
      <h2>메인메뉴</h2>
      <ul class="menu-bar">
        <li>
          <button type="button" aria-label="HTML 상제정보 열기">HTML에 대해</button>
          <ul>
            <li><a href="#" role="button"></a> HTML5 소개 </li>
            <li><a href="#" role="button"></a> 레퍼런스 소개 </li>
            <li><a href="#" role="button"></a> 활용예제 </li>
          </ul>
        </li>
      </ul>
  </div>

스크린 리더의 해석으로는 <a> 버튼의 용도로 이해하지만 우리가 웹 페이지에서 확인하면 그냥 a 태그의 형태로 보여지는 것을 확인했다

(2) Property : 해당 컴포넌트의 특징이나 상황을 정의하며 속성명으로 'aria-*'라는 접두사를 사용한다

• label: 간단한 설명 제공
• labelledby: 설명할 텍스트가 있을 경우 텍스트 영역과 현재 요소 연결
• read only :읽기전용
• has popup : 팝업
• Require : 필수항목
• live : 업데이트
• auto complete: 자동 완성 기능 지원여부
• Drag : 드래그

ex) label 사용 사용자가 어떤 버튼을 눌러야지 상세 페이지로 넘어갈 것인지에 대한 설명을 도울 수 있을거같다

 <div class="menu" role="menu">
      <h2>메인메뉴</h2>
      <ul class="menu-bar">
        <li>
          <button type="button" aria-label="HTML 상제정보 열기">HTML에 대해</button>
          <ul>
            <li><a href="#" role="button"></a> HTML5 소개 </li>
            <li><a href="#" role="button"></a> 레퍼런스 소개 </li>
            <li><a href="#" role="button"></a> 활용예제 </li>
          </ul>
        </li>
      </ul>
  </div>

(3) State : 해당 컴포넌트의 상태 정보를 정의

• expended : 메뉴가 펼쳐진 상태 인지
• invalid : 유효값이 입력되었는지
• hidden : 콘텐츠 숨김

ex) li 메뉴 하나를 숨긴다면

📌 aria-hidden의 경우, 시각적으로 숨겨지는 것이 아니라, 의미적으로 숨겨지기 때문에 사용자에게 시각적으로만 보이지 않게 할 경우에는 이걸 사용하면 안된다

<div class="menu" role="menu">
      <h2>메인메뉴</h2>
      <ul class="menu-bar">
        <li>
           <button type="button" aria-label="HTML 상제정보 열기">HTML에 대해</button>
          <ul>
            <li><a href="#" role="button"></a> HTML5 소개 </li>
            <li><a href="#" role="button"></a> 레퍼런스 소개 </li>
            <li><a href="#" role="button"></a> 활용예제 </li>
          </ul>
        </li>
      </ul>
 </div>

Reference

ARIA -접근성 (MDN)

ARIA - W3C