[STUDY] 접근성

1. 접근성

접근성이란?

접근성 ( 별칭 a11y ) 은 쉽게 말해 모두( 몸이 불편한 사람 포함) 가 사용할 수 도록 웹사이트를 디자인, 개발 하는 것을 의미합니다. ios에서는 한글 해석을 손쉬운 사용 이라고 정의했습니다.

 

* A11Y 란 ? Accessibility를 뜻하며 단어가 너무 길기 때문에 처음과 마지막의 알파멧을 남겨두고, 가운데의 열한 글자를 숫자로 대치 한 것이다.

 

참고자료

• https://brunch.co.kr/@gokeshi/1

---

장애인들이 쓰는 기능인가?

NO 이자 YES 라고 할 수 있습니다. 접근성은 '모든 유형의 인간'이 포함되어 있습니다. 스마트폰, 스마트 워치, 태블랫 등의 portable devices 를 사용 할 수 있는 모든 사람이 target이 되는 것입니다. 그들의 인종과 국가, 신체 자유도의 차이에 관계 없이 동등한 device experience가 제공 되어야 합니다.

 

* 비장애인들도 시간이 지남에 따라 신체와 인지능력에 퇴화를 격습니다.

---

React에서의 접근성

React는 접근성을 갖춘 웹사이트를 만들 수 있도록 지원을 하며 대부분은 표준 HTML 기술이 사용됩니다.

---

표준 및 지침

• WAI - ARIA (Web Accessbility Initiative - Accessible Rich Internet Applications )

JavaScript 위젯을 만드는 데 필요한 기술들이 담겨있습니다.

React에서 대부분의 DOM 프로퍼티와 어트리뷰트에 대한 값은 캐멀케이스로 지원되지만 aria-*와 같은 어트리뷰트는 일반적인 HTML과 마찬가지로 hypen-case로 작성해야 합니다.

<input
  type="text"
  aria-label={labelText}
  aria-required="true"
  onChange={onchangeHandler}
  value={inputValue}
  name="name"
/>

 

* ARIA에 대한 보조 설명

ARIA란 장애를 가진 사용자가 웹 콘텐츠와 웹 어플리케이션에 더 쉽게 접근 할 수 있는 방법을 정의하는 여러 특성을 말합니다.

 

ARIA의 탄생 이유 :

예시 1. Ajax등을 활용하여 특정 컴포넌트를 구현할 때 스크린리더 등 보조기기에서 해당 컴포넌트의 기능을 명확하게 파학하기 어려움.

 

예시2 주식 시세 같은 시간에 따라 정보가 자동으로 업데이트 되는 경우 스크린디러 등 보조 기기에서 업데이트 된 정보를 파악하기 어려움.

때문에 ARIA는 스크린리더 및 보조기기 등에서 접근성 및 상호 운용성을 향상시키기 위한 목적으로 탄생했으며 웹 애플리케이션의 역할(Role), 속성(Property), 상태(State) 정보를 추가하여 이를 개선 할 수 있도록 제공하고 있다.

 

참고자료

• https://www.biew.co.kr/entry/WAI-ARIA-웹퍼블리싱

---

시맨틱 HTML

React Fragment를 사용하여 여러 엘리먼트를 하나로 묶어 줄 수 있습니다.

function ListItem({ item }) {
  return (
    <Fragment>
      <dt>{item.term}</dt>
      <dd>{item.description}</dd>
    </Fragment>
  );
}

 

혹은 배열의 각 항목을 매핑 할 때에도 사용할 수 있습니다.

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // 항목을 매핑할 때 Fragment는 반드시 `key` 프로퍼티가 있어야 합니다.
        <Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </Fragment>
      ))}
    </dl>
  );
}

 

Fragment 태그에 어떤 props도 필요하지 않다면 짧게 줄여 쓸 수 도 있습니다.

function ListItem({ item }) {
  return (
    <>
      <dt>{item.term}</dt>
      <dd>{item.description}</dd>
    </>
  );
}

 

---

접근성 있는 폼

• 라벨링

  스크린 리더를 사용하는 사용자를 위해 자세한 설명이 담긴 라벨을 제공해야 합니다.

• 사용자들에게 오류 안내하기

  • h1 이나 h2 태그같은 main heading을 사용하여 feedback 하기 ( 유저에게 아직 웹 페이지를 사용하고 있다는점을 인식 시켜주기 위해서)
  • <title> 태그를 사용해서 feedback 하기 ( 스크린리더 사용자가 페이지가 로드 되자마자 정보를 받을 수 있다 )
  • Dialog 사용하기. ( 자바스크립트는 alert dialog box 를 제공한다.)

포커스 컨트롤

웹 애플리케이션은 키보드만을 사용하여 모든 동작을 할 수 있어야 합니다.

키보드 포커스를 사용하여 DOM내의 현재 엘리먼트를 나타내야 합니다.

 

React에서 포커스를 지정하려면 DOM 엘리먼트에 ref를 사용할 수 있습니다.

• React-area-modal 는 모달창의 첫 포커스를 취소 버튼에 맞출 ㅜㄴ만 아니라 키보드 포커스를 모달 안으로 한정해주며, 모달이 닫힐 때 모달을 열게 했던 엘리먼트에 포커스를 잡아줍니다.

마우스와 포인터 이벤트

마우스 혹은 포인터 이벤트로 노출된 모든 기능을 키보드 만으로 사용할 수 있도록 보장해야 합니다.

항상 키보드로 테스트하면 바로 문제가 되는 영역을 확인하고 키보드 핸들러를 추가하여 수정 할 수 있습니다.

언어 설정

스크린 리더 소프프트웨어들이 올바른 음성을 선택할 수 있도록, 페이지 텍스트에 human language를 나타내야 합니다.

문서 제목 설정

문서의 <title>이 현재 페이지에 대한 올바른 설명을 담아야합니다. 이를 통해 사용자들이 현재 페이지의 맥락을 놓치지 않도록 할 수 있습니다.

ARIA HTML 에 대한 좋은 영상

https://www.youtube.com/watch?v=0hqhAIjE_8I