[10분 테코톡] 웹 표준과 웹 접근성

흑우·2023년 12월 1일

10분 테코톡

10분 테코톡 - 5기

목록 보기

10/16

웹 표준

웹 표준이란?

어떤 운영체제나 브라우저에서든 동일한 콘텐츠를 볼 수 있도록 웹페이지를 만들 때 지켜야하는 규칙

왜 웹 표준이 필요할까요?

다양한 브라우저의 등장으로 과도한 경쟁이 나타나고 해당 브라우저에서만 사용 가능한 기능이 나타나기 시작했습니다.
이러한 현상은 여러 브라우저를 지원해야 하는 개발자에게 많은 피해를 줬습니다.
이러한 문제를 해결하기 위해 W3C라는 웹 표준 기구가 생겼습니다.

웹 표준을 지킬 때 장점

운영 관리 용이: 소스 코드의 통일화로 개발자의 부담이 줄어들고 유지보수가 쉬워집니다.
검색 엔진 최적회: 올바르게 구조화된 웹페이지는 검색 엔진이 문서 분석하기 쉽게 도와줍니다.
웹 접근성 향상

웹 접근성

웹 접근성이란?

누구나 신체적, 환경적 조건에 관계없이 인터넷을 통해 정보에 접근하고 이용할 수 있는지에 대한 정도

왜 웹 접근성을 준수 해야 할까요?

웹 문서 설계 시 고려해야 할 이용자 유형

시각을 통해 정보를 인지할 수 없는 시각장애가 있는 경우
청각을 통해 음향 정보를 인지하지 못하는 청각장애가 있는 경우
...
시각, 청각 또는 손을 사용하고 있어 필요로 하는 일을 할 수 없는 경우
- 운전 중이거나 소움이 많은 곳에서 일하는 경우 등 웹 사용자가 처한 환경에 따라 제한 받는 경우

어떻게 접근성을 높일 수 있을까요? (시각장애 - 스크린리더)

Accessible Name

스크린 리더가 요소를 포커스 했을 때 읽어주는 내용
- Author: 작성자가 명시적으로 작성한 값 (aria-label, alt, title 등)
- Contents: 요소의 텍스트 값
우선 순위: Author > Contents

<div aria-label="가지마">잘 가</div>

다음과 같은 코드는 스크린 리더는 어떻게 읽을까요? => 가지마

적은 노력으로 스크린리더 UX 개선하기

의미를 알 수 없는 Button

// 개선 전
<div onClick={() => navigate('/register')}>
  <span>+</span>
</div>

// 개선 후
<button aria-label="카드 추가" onClick={() => navigate('/register')}>
  <span aria-label="true">+</span>
</button>

div 태그를 button 태그로 변경 => 스크린리더에서 버튼이라고 읽는다.
알맞은 aria-label 속성 추가
- aria-label이란 html 요소에 대한 간단한 설명을 재공하는 속성
- aria-hidden이란 사용자에게 불필요한 정보를 스크린 리더가 읽지 않게 하는 속성

대체 텍스트가 없는 Image

스크린리더가 alt이 없는 이미지파일을 읽을 경우 해당 파일의 파일명을 읽습니다.

// 개선 전
<img src={categoryToSrc(<Category>this.restaurant.category)} class="category-icon" />

// 개선 후
<img src={categoryToSrc(<Category>this.restaurant.category)} alt=${this.restaurant.category} class="category-icon" />

대체 텍스트는 어떻게 작성해야 할까요?
다음과 같은 이미지의 대체 텍스트를 어떻게 작성해야할까요?
- 우테코 웰컴 키트 => 웰컴 키트에 뭐가 있는 데!
- 우테코 웰컴 키트
  - '쉽고 명확하고 위트있게'라는 문구가 적혀있는 흰색 뚜껑의 플라스틱 물컵
  - 노크식 검정색 볼펜
  - 검정커버의 흰색 포스트잇
  - 우주 비행사 레고 블록
  - 회색 커버의 유/무선 멀티 노트

다가갈 수 없는 Button Sheet (Modal)

Modal이 열렸음에도 사용자는 스크린리더는 Modal의 코드에 접근하지 못합니다.

// 개선 전
<div className="modal" id="add-restaurant-modal">
  <div className="modal-container">
    <h2 className="modal-title text-title">새로운 음식점</h2>
    <form id="restaurant-add-form" novalidate></form>
  </div>
</div>

// 개선 후
<dialog className="modal" id="add-restaurant-modal">
  <div className="modal-container">
    <h2 className="modal-title text-title">새로운 음식점</h2>
    <form id="restaurant-add-form" novalidate></form>
  </div>
</dialog>

div태그를 dialog태그로 변경해주면 됩니다.
dialog 태그는 2022년부터 모든 브라우저에서 지원합니다.
dialog 태그가 제공하는 접근성 기능
- 포커스 관리: 모달이 열리면 포커스 자동 이동
- 접근성 트랩: 포커스를 모달 안에 가두기
- 모바일 네이티브 이벤트 구현: 두 손가락 문지르기를 통한 모달 닫기
dialog 사용 시 알아두어야 할 것
- Show(): 비모달식 대화상자 오픈 => 외부요소와 상호작용 O
- ShowModal(): 모달식 대화상자 오픈 => 외부요소와 상호작용 X
- 일반적으로 showModal()을 사용하는 것을 권장

addRestaurantAddButtonClickEvent() {
	this.addButton.addEventListener('click', () => {
    	this.addRestaurantModal.showModal();
    })
}

눈에만 보이는 Error Message

카드 소유자를 입력할 때 영문만을 입력해야 하는 데 다른 문자를 입력한다면?
- 에러 메세지가 나타나지만 스크린 리더에서는 나타나지 않습니다.

// 개선 전
<div>
  <input
    id="ownerName"
    maxLength={MAX_NAME_SIZE}
    placeholder="카드에 표시된 이름과 동일하게 입력해주세요."
    onChange={handleInputChange}
    onKeyDown={handleEnterPress}
   />
</div>
<p id="ownerNameCaption">{ownerNameError}</p>

// 개선 후
<div>
  <input
    id="ownerName"
    maxLength={MAX_NAME_SIZE}
    placeholder="카드에 표시된 이름과 동일하게 입력해주세요."
    onChange={handleInputChange}
    onKeyDown={handleEnterPress}
   />
</div>
<p id="ownerNameCaption" aria-live="assertive">{ownerNameError}</p>

에러 메세지가 출력되는 p태그에 aria-live 속성을 넣어주면 됩니다.
- aria-live란? => 웹 페이지에서 실시간으로 변화하는 콘텐츠를 사용자에게 즉시 전달하기 위해 사용하는 속성
- off: 기본값으로 콘텐츠가 변화해도 사용자에게 알려주지 않습니다.
- polite: 콘텐츠가 변화했을 때 바로 알려주는 것이 아니라 스크린리더의 작업이 끝난 후에 알려줍니다.
- assertive: 스크린리더의 작업을 중단하고 즉시 변화한 내용을 읽어줍니다.

페이지 언어 표시

만약 한국어로 되어있는 페이지의 언어가 en으로 설정되어 있다면 스크린 리더기는 해동 언어를 정상적으로 읽지 못합니다.

// 개선 전
<html lang="en">

// 개선 후
<html lang="ko">

마무리

이번 글에서는 웹표준과 웹접근성에 대해서 다뤘는데요. 지금까지 봤던 영상 중에서 가장 많은 생각이 드는 영상이네요. 사실 저는 웹 페이지를 개발하면서 웹 접근성을 고려해본 적이 없습니다. 제가 개발한 웹이 시각 장애인에게는 어떻게 보일지 생각해보고 어떻게 개선해야할지 생각할 수 있는 좋은 기회였습니다. 정말 적은 노력으로도 웹 접근성을 개선할 수 있는데요. 기존 코드를 웹 접근성에 맞게 리팩토링 해봐야겠네요.