영상이 궁금하다면?

Intro

연사소개 Anuradha Kumari
Mediaocean에서 Developement Sepcialist로 일하고 있다
자바스크립트와 접근성에 대한 관심이 많다

• 접근성의 기본적인 소개, 웹 접근성이 왜 중요한지
• 자바스크립트가 접근성을 어떻게 향상 또는 감소시키는지 확인해보자

1. 접근성

• 접근성은 서비스를 장애 여부와 관계없이 누구나 이용할 수 있는것을 의미
• 왜 접근성이 중요할까?
  • 웹사이트가 or 어플리케이션은 사용자들이 사용할 수 있도록 만든것
  • 그런데 몇가지 기능은 사용자들이 접근할 수 없다면 사용할 수 없다
  • 접근성 === 사용 가능성
  • 사용자가 사용할 수 없다면, 만드는 이유가 없다.
• 웹의 힘은 보편성
• 장애 여부와 관계없이 누구나 접근 가능함은 웹의 필수적인 측면
• 우리는 사용자들이 웹사이트를 어떻게 사용할지, 어떤 상황에 놓여있는지 모름
• 그래서 항상 접근할 수 있도록 하는게 바람직
• WHO는 세계인구의 15%가 장애를 갖고있다고 말한다
  • 영구장애(시각장애인)
  • 일시장애(눈에 염증이 나서 잠깐 앞을 못보는경우)
  • 상황장애(눈에 이상은 없지만 굉장히 밝은 환경에 있어서 화면 못볼경우)
    • 모바일, 태블릿으로 탐색 불가
  • 인지, 신경장애
    • 내용을 이해하는데 어려움이 있거나 애니메이션, 시간에 민감한 콘텐츠를 볼 때 불편이 있을수도 있다
• 기술적제한, 노화로 인한 문제, 공황장애, 등등 이런상황에서도 웹사이트를 쉽게 탐색할 수 있도록 항상 생각해야함
• 그래서 접근성은 어떻게 시작하나요? 다음 조언을 참고하자

2. 첫번째 조언, 늘 사용자에 대해 생각해야 한다

• 사용자가 필요하는게 무엇인지 사용자 관점에서 생각하기
  • W3C Web Accessibility Initiative
  • Accessibility principles
  • MDN Web Accessibility

시맨틱 HTML을 사용하기

• 시맨틱 HTML 태그는 특정 의미가 부여되는 태그
• 웹사이트 표현에 영향을 미치지 않지만,
  보조 기술에 사용 혹은 특정 장애를 갖고있는 사용자들 등이 사용할 수 있는 정보를 담고있다

button vs div

• 키보드 사용자를 생각하기
• 키보드 사용자들은 탭키를 이요해 요소들을 탐색함
  
• div로 만든 버튼에는 탭키로 접근할 수 없음
• 위 문제점을 해결하는 두가지 방법

1. 시맨틱 button태그 사용하기

2. 버튼에 의미를 부여하는 코드 추가하기

• 탭 인덱스를 사용하기
• 이벤트 리스너 사용하기, 키다운 이벤트 리스너 추가하기

  const buttonEle = document.getElementById("acc-button");

  buttonEle.addEventListener("click", () => {
      // 버튼을 클릭할 때 발생해야 하는 작업에 대한 코드
    }
  );

  buttonEle.addEventListener("keydown", (event) => {
    if (event.key === ' ' || event.key === 'Enter') {
      // 버튼을 눌렀을 때 발생해야 하는 작업에 대한 코드

      // 스페이스바 키를 눌러도 콘텐츠가 스크롤되지 않도록 기본값 방지
      event.preventDefault();
    }
  });

• 키보드 접근성에 필요함
• 키보드 사용자는 스페이스 혹은 엔터 키를 동작 트리거로 사용하므로
  사용자가 누른 키가 스페이스인지 엔터인지 확인해야함
• 추가로 클릭 이벤트 기본값 행동을 방지하기
• 이것이 필수적인 이유는 스페이스를 누를때 기본값은 화면이 스크롤 되기 때문
• 그런 디폴트 동작을 방지해야함
• 그래서 preventDefault()를 이용해서 차단함

3. 두번째 조언, 모든 기능이 키보드를 통해 접근 가능해야 한다

• 키보드를 사용해 모든 인터랙션 실행 가능해야한다

1. 첫번째 구성요소를 탐색하기
   • 탭으로 구성요소(버튼)를 탐색가능해야함
   • 그 동작들을 트리거하고 폼 제출 가능해야함
2. 화살표 키 이벤트 핸들링 추가하기
   • 웹사이트에 수평 스크롤이 있을때 콘텐츠 탐색 가능하게 해주기
     사용자가 누르는 중요한 키 모음
     

• 이런식으로 이벤트 리스너를 추가할수도 있다

const customBtn = document.getElementById("custom-button");

customBtn.addEventListener('keyup', event =>{
	if (event.key === ' ' || event.key === 'Spacebar' || event.key === 'Enter'){
    // 실행할 코드
    }
});

4. 세번째 조언, 이벤트 리스너들이 디바이스와 독립적이어야 한다

• 자바스크립트는 많은 이벤트 핸들러 존재
• 어떤 동작을 원할때마다 마우스업과 마우스다운 대신 키업 또는 키다운을 사용해야함
  • 마우스업과 마우스다운은 디바이스 의존적인 이벤트 리스너들이기 때문에
    마우스만 통해서 접근할 수있기 때문
  • 만약 다른사용자가 그 동작에 접근하기 원하는경우 키업 또는 키다운 이벤트 핸들러를 추가하기
• 마우스업 마우스다운을 꼭 써야하는경우 보완용 키업 또는 키업 이벤트 리스너를 포함시켜야한다
  • 사용흐름에서 보조기술 사용을 차단하지 않도록하는것이 중요

5. 네번째 조언, 포커스 관리하기

• 포커스는 인터랙티브한 요소들의 윤곽(아웃라인)이다.
  
• 많은 개발자와 디자이너는 예쁘지않다는 이유로 좋아하지 않는다
• 이 윤곽을 숨겼을때 마우스 사용자들은 잘 사용할 수 있음
• 하지만, 키보드에만 의존하는 사용자들에게는 이 버튼이 차단되어버림
• 현재 페이지상 활성요소를 파악할 수 없기 때문
  
• 위 gif와 같이 키보드로 접근할때는 어떤 링크나 버튼에도 접근할 수 없다면 이는 매우 나쁜 UX
  
• 위와같이 키보드로 접근 가능하게 하는게 좋다
• 현재 포커스가 어디에 있는지 제공하자

"아웃라인(윤곽)과 키보드 사용자와의 관계는 커서와 마우스 사용자와의 관계와 같다"

자바스크립트를 이용해 접근성을 높일 수 있는 사례를 알아보자

키보드만 사용해서 모달창에 접근하기

• 
• 위 사진에서는 모달이 켜졌지만 포커스는 밖에 있음
  • 탭 눌렀을때 모달로 바로 이동하지않고, 모달 밖 인터랙션 요소들의 흐름을 모두 거친후 도착한다면?
  • 한번 더 눌러서 실수할경우 포커스가 다시 모달창 밖으로 나가서 매우 귀찮은 상황
  • 포커스는 항상 모달창에 갇혀있어야한다
• 모달의 닫기
  • 사용자는 키보드의 ESC버튼을 이용해서 모달창을 닫을 수 있어야한다
  • ESC로 닫을 수 없다면 탭을 X표시에 포커스된뒤에야 모달 닫기 가능
  • 이는 사용자가 몇단계를 추가로 거쳐서 혼란스러운 단계가 생김
• 포커스 트래핑
  • 사용자가 탭(다음 인터렉션으로 이동)이나 shift탭(이전 인터렉션으로 이동)을 누를때 마다 포커스가 모달 자체에 트래핑 되어야한다.
  • 모달 안에만 포커스가 있어야하고, 절대로 모달 뒤로 가서는 안됨
• 추가로 모달창을 닫았을 때, 사용자가 모달창을 오픈한 시점과 똑같은 버튼으로 되돌온다면?
  • 다시 이어서 원하는것을 진행가능
  • 이는 훌륭한 접근성의 좋은 모달의 예

HTML

  <section class="accessible-modal">
        <button class="open-modal-button">Click here to open modal</button>
        <button class="button-other">Some other button</button>

        <div class="modal" role="dialog" aria-modal="true">
          <div class="modal-content">
            <button class="close-modal-button" aria-label="Close modal">
              <i class="fa fa-close fa-lg" aria-hidden="true"></i>
            </button>
            <h1>Hello, the modal has opened!</h1>
            
            <button class="submit-modal-button">
              Submit
            </button>
          </div>
        </div>
      </section>

JavaScript

  const modal = document.querySelector(".accessible-modal .modal");
  const openModalButton = document.querySelector(
    ".accessible-modal .open-modal-button"
  );
  const closeModalButton = document.querySelector(
    ".accessible-modal .close-modal-button"
  );
  const submitButton = document.querySelector(
    ".accessible-modal .submit-modal-button"
  );
  let previousActiveElement;

  const toggleModal = () => {
    modal.classList.toggle("show-modal");
  };

  const toggleModelWithFocusRestored = () => {
    toggleModal();
    previousActiveElement.focus();
  };

  const getAllFocusableElements = context =>
    Array.from(context.querySelectorAll("button"));

  const getFocusableElement = (context = "document") => {
    let focusable = getAllFocusableElements(context);
    return focusable[0];
  };

//모달 클릭시 일어나는 일
  openModalButton.addEventListener("click", () => {
    previousActiveElement = document.activeElement;
    toggleModal();
    getFocusableElement(modal).focus();
  });

모달을 열 때

• 기존 액티브 앨린먼트를 저장하는 변수
  • 문서의 현재 액티브 앨리먼트 를 저장함 (지금은 버튼)
  • previousActiveElement = document.activeElement;
• 토글하기
  • 이제 모달을 화면 앞쪽에 두겠다는 의미이며, 가시성을 확보
  • 모달에 포커스가 잡힐 수 있는 엘리먼트를 모두 살피기
  • 모달이 얼마나 많은 버튼을 가졌는지 확인하고, 첫번째 버튼에 포커스 두기

모달을 닫을 때

• toggleModelWithFocusRestored로 모달을 토글링 하기
• 포커스 리스토어한 모달을 토글링하여 사라지게 하기 - toggleModal()
• 모달을 열때 저장했던 변수에 포커스를 두기 - previousActiveElement.focus()

위의것과 별개로, 다운키를 하더라도 모달 내부에 포커스가 트래핑되게 하기

6. 다섯번째 조언, 사용자의 디바이스 세팅을 존중하기

• 애니메이션은 매력적이지만 불편을 느끼는 사용자들이 있다.
• 그렇기 때문에, 모든 운영체제에서 애니메이션은 보고싶지않으면 on/of 를 할 수있는 설정이 있다
• 어떤 영향을 끼치는지 예를 확인해보자
• 운영체제에서 애니메이션 off 했음에도 작동하는 오른쪽 애니메이션
  
• 해결하는 두가지방법

1. CSS - 미디어쿼리

  @media (prefers-reduced-motion: no-preference) {
    .animate-balls {
      animation: jump infinite 2s linear;
      animation-iteration-count: infinite;
    }
  }

2. 자바스크립트 - matchMedia api 사용하기

  const animationClassName = matchMedia("(prefers-reduced-motion)").matches
    ? ""
    : "animate-balls";

• 웹사이트가 얼마나 접근가능한지 확인할수있는 확장도구들
  • Lighthouse audit
  • Accessibility pane(개발자도구 접근성 창)
    • 화면클릭하고 보기
    • 이걸로 접근성관련 이슈 확인가능
  • aXe extension
  • Wave evaluation tool
  • Accessibility Insights for web
  • Web Accessibility (VS Code Extensions에 있음)
  • webhint (VS Code Extensions에 있음)
• 위 도구를 활용해서 웹사이트가 접근성측면에서 어떻게 실행되는지 확인하고 가능하다면 고치기를 권장함
• 개발 첫단계부터 접근성을 고려해야한다고 생각함

Outro

결론

• 웹사이트 또는 애플리케이션을 만들 때는 다양한 장애를가진, 다양한 기술을 사용하는 사용자들을 항상 고려해야한다
• 항상 적합한 시맨틱 HTML을 사용하고, 추가적인 코드를 통해 누구나 접근 가능할 수 있도록 만들어야 한다
• 웹페이지나 애플리케이션에서 구성요소들의 포커스와 키보드 인터랙션 잘 관리하기
• 항상 접근성에 신경쓰고, 접근성을 염두하며 코드 작성하기
• 세미나에서 무언가 배웠다면, 배운점을 동료, 팀원, 친구들과 공유하고 접근성에 관해서 대화해보기를 권장한다

후기

웹 개발자는 항상 웹 접근성에 대해 고민해야한다.
하지만 정작 나는 웹 접근성에 대해 깊이 고민해본적이 없다. 기껏 적용한것은 '시맨틱 태그를 지키자' 정도?
하지만 이번 컨퍼런스를 보며 접근성에 대해 보다 정확한 의미를 알게되었다.
내가 만드는 서비스에 접근성 문제때문에 사용하지 못하는 유저가 생기지 않도록 노력해야겠다.