웹 접근성 개선하기

지난 글에서 Lighthouse SEO 점수를 82점에서 100점으로 개선한 후,
이번에는 각 페이지 별로 Accessibility 웹 접근성 점수를 향상시켜보려고 한다.

📌 Accessibility (웹 접근성)

장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것이다.

🌐 온라인 웹접근성 체험해보기 : https://nax.naver.com/index

위의 사이트에 접속하면 온라인으로 웹 접근성 체험을 해 볼 수 있다.

저시력 시각장애, 전맹 시각장애, 손 운동장애, 중증 운동장애 모든 체험을 해보았는데 내가 생각했던것보다 훨씬 더 답답하고 불편했다.

이 경험을 통해 웹 개발 시에 웹 접근성을 더 중요하게 고려해야 한다는 것을 더욱 명확하게 느꼈다.

Soccer Market을 구현하면서 내가 놓쳤던 웹 접근성 위주로 정리해보려고한다.

🔷 Button의 접근성 이름 추가

Button에는 해당 버튼의 기능을 설명하는 텍스트로 접근성 이름을 설정해 주는 것이 좋다.

1. 텍스트 내용 사용

흔히 우리가 사용하는 방법으로 버튼의 텍스트 내용을 버튼의 기능을 설명하는 텍스트로 설정한다.

<button>전송</button>

2. arial-label 속성 사용

aria-label 속성을 사용하여 버튼의 기능을 설명하는 텍스트를 제공할 수 있다.

<button aria-label="전송">전송</button>

3. aria-labelledby 속성 사용

버튼의 라벨로 사용할 다른 요소의 ID를 지정하면 이 요소의 텍스트 내용이 버튼의 접근성 이름으로 사용된다.

<button aria-labelledby="button-label">전송</button>
<span id="button-label">전송 버튼</span>

위의 예시 코드로 설명해보자면
버튼의 접근성 이름은 전송이 아닌 aria-labelledby 속성의 값인 button-label을 ID값으로 사용하는 전송버튼이 된다.

🔷 텍스트와 배경 사이의 최소 비율 유지하기

처음의 Soccer Market의 Footer는 이렇게 디자인하고 구현했다.

하지만 WCAG(W3C의 웹 콘텐츠 접근성 지침)에서는 일반 텍스트와 배경 간의 최소 대비를 4.5:1로 권장한다.
최소 대비가 저 비율일 뿐 더 큰 대비 비율이 더 좋은 사용자 경험을 제공할 수 있다.

확실히 동일한 배율에서도 고대비 일 때 콘텐츠가 더 잘 들어온다는 것을 확인할 수 있다.
고대비 모드도 리팩토링에 추가할 수 있도록 해야겠다.

우선 Footer를 수정하는게 목적이기 때문에 텍스트 색을 블랙으로 바꿔 수정해주었다.

🔷 input 사용시 label 사용하기

웹 접근성을 고려해서 구현할 때에는 input 사용 시 label도 같이 사용해주는게 좋다.
이를 통해서 스크린 리더 및 다른 보조 기술을 사용하는 사용자들이 폼을 올바르게 이해하고 사용할 수 있기 때문이다.

예를 들어 휴대폰번호의 경우 1개의 select과 2개의 input으로 이루어져 있다.
그럼 각각의 폼 컨트롤에 label을 지정해야한다.
하지만 이렇게 하면 불필요하게 많은 레이블이 보이게 된다.

그런 문제를 해결하고 싶으면 아래 코드를 활용하면 된다.

  .a11y-hidden {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
  }

이 코드는 웹페이지에서 시각적으로 텍스트를 숨겨주는 역할을 한다.
숨기고 싶은 label이 있다면 class에 ally-hidden을 추가해 주면된다.
그러면 화면에는 label이 보이지 않지만 스크린 리더에서는 여전히 확인할 수 있어 웹 접근성을 높일 수 있다.

🔷 최종 점수

• Main Page
  

• Login Page
  

• Signup Page
  

• Product Detail Page
  

• Cart Page
  

• Order Page
  

• Seller Center Page
  

• Product Upload Page
  

모든 페이지의 Lighthouse Accessibility 점수를 100점으로 개선했다.
초기에 Soccer Market을 구현할 때는 기능 구현을 빠르게 완료하려는 마음이 컸다.
그러나 기능 구현이 끝나고 나니 아쉬운 부분이 몇 가지 있었다.

처음으로는 SEO를 고려하는 것이었고, 그 다음은 웹 접근성을 높이는 것이었다.
이번에 해당 부분을 수정하면서 코드 구현에 있어 세세하고 꼼꼼한 접근이 필요하다는 것을 느꼈다.
앞으로 다른 프로젝트를 진행하게 되면, 초기부터 웹 접근성을 고려하여 구현해야겠다는 결심을 하게 되었다.

이제 다음 챕터로는 성능 최적화에 집중해보려고 한다.

참고
http://www.websoul.co.kr/accessibility/define.asp
https://velog.io/@tnrud4685/aria-labelledby