2022년 마지막 프로젝트의 회고 4 — Lighthouse, 웹 접근성 이야기

Google Lighthouse

Lighthouse란, 구글에서 제공하는 오픈 소스 툴로, 웹 페이지의 질적 향상을 위한 자동화 도구이다. 성능, 접근성, 권장사항, SEO(검색 엔진 최적화), PWA(Progressive Web App) 등의 항목을 측정하며, 어떤 웹 페이지던, 검사하고자 하는 페이지의 개발자 도구 내 Lighthouse 탭에서 쉽고 빠르게 측정을 할 수 있다. 참고로, 가능하면 시크릿 탭에서 검사를 하는 것이 좋다. 각종 브라우저 익스텐션이 영향을 끼쳐 실제 성능과 괴리가 있는 결과를 얻을 수 있기 때문이다.

나는 이 테스트 도구를 이번 프로젝트에서 처음 알게 되었고, 첫 검사 결과 치고는 나쁘지 않았다고 생각했고, 이 Lighthouse 테스트로 웹 페이지의 모든 부분을 대변할 순 없지만, 기왕이면 클라이언트의 사용자 경험을 중요시 생각하기도 하고, 실제 내 개발 실력이 발전 내지는 결점을 보완할 수 있는 여지를 여기서 찾을 수 있다고도 여겼다.

대규모 리팩터링 과정에서, 84점에서 100점으로 약 12%의 성능 향상을 시켰다. 당장 필요하지 않은 코드는 이후 필요할 때 로드하는 dynamic import의 적용으로 인한 FCP(First Contentful Paint) 향상, next/images를 활용한 이미지 사이즈와 퀄리티 조정을 통한 LCP(Largest Contentful Paint) 향상, 아토믹 디자인 시스템을 적용하며 컴포넌트를 분리하는 과정 속에서의 React hooks 등의 비효율적인 로직과 마크업 구조 개선 등이 성능 상승의 비결이었다.

아마 Lighthouse 검사를 도입하지 않았다면, 모르고 지나쳤을 것이다. 이외에도 시맨틱 마크업과 메타 태그를 이용해 SEO 부분도 향상시킬 수 있었다.

그리고 아래의 웹 접근성 요소들을 이용해 접근성 부분 또한 대폭 상승시킬 수 있었다.

<div role=“dialog” />

마크업을 리팩토링하면서, Lighthouse 검사를 통해 더 나은 웹사이트 환경을 위한 개선 방법을 찾다가 알게 된 속성으로, 이는 웹 접근성을 위한 속성이다. 이 속성들을 이야기하기 전에 먼저 WAR-ARIA에 대해서 알 필요가 있다.

WAI-ARIA는, ‘Web Accessibility Initiative-Accessible Rich Internet Application’의 약자로, W3C에서 만든 기술이며, ARIA라고도 불린다.

마우스와 같은 직관적인 포인팅 장비를 사용하는 것이 쉽지 않은, 스크린 리더를 사용하는 사용자들에게 자바스크립트를 이용한 동적 컴포넌트에 역할, 속성, 상태 등의 정보를 기술하여 보다 나은 접근성을 제공할 수 있게 한다. 또한 WAI-ARIA는 단순히 HTML 태그로 표현하기 어려운 의미들을 태그에 부여함으로써 시각적인 불편함이 있는 사용자들에게 원활하고 온전한 사용자 경험을 제공해 줄 수 있다.

role 속성은 HTML 태그에 role="role type"의 방식으로 사용한다. 이것은 콘텐츠에 시맨틱한 의미를 부여하여 스크린 리더 혹은 이와 같은 도구들을 사용하는 사용자들에게, 사용자가 예상하는 해당 콘텐츠와의 상호 작용을 제공하고 지원할 수 있도록 한다.

HTML에 기본적으로 존재하지 않거나, 존재하지 않지만 브라우저의 온전한 지원이 이루어지지 않는 요소를 설명하는 데 사용할 수 있다.

<button aria-label=“Close” />

aria-label 속성은 요소의 기본 접근 가능한 이름이 없거나 부정확한 경우, 해당 콘텐츠의 설명이 부족한 경우, 그리고 DOM 내에 해당 요소와 관련된 의미를 부여할 수 있는 콘텐츠가 없는 경우에 사용할 수 있으며, 상호 작용이 가능한 요소에 문자열을 할당해 정의할 수 있다.

이를테면 <button /> 태그 내에 문자열로써 요소를 정의하지 않고 <svg />를 사용해 모달을 닫는 버튼을 만든 경우, 접근 가능한 이름이 없으므로, 스크린 리더를 사용하는 경우, 해당 컴포넌트와 상호 작용하기란 쉽지 않다. 이럴 때 <button /> 내에 aria-label="Close" 속성을 정의함으로써, 접근 가능한 이름을 제공해 줄 수 있다.

References

Lighthouse overview - Chrome Developers

WAI-ARIA Roles - Accessibility | MDN

WAI-ARIA Pattern Library 제작하기 1부 - 버튼(Button)

aria-label - 접근성 | MDN

Accessible Rich Internet Applications (WAI-ARIA) 1.1

원문: Medium