✅ 압박면접 대응 시리즈 16편: 웹 접근성(Accessibility, A11y)과 Lighthouse 개선 전략

✅ 압박면접 대응 시리즈 16편: 웹 접근성(Accessibility, A11y)과 Lighthouse 개선 전략

압박면접에서 "웹 접근성도 고려하셨나요?"라는 질문이 나오면 많은 지원자가 순간 멈춥니다.
면접관은 단순히 시각장애인 대응 여부만 묻는 게 아닙니다.
“ARIA 속성, 키보드 내비게이션, 명도 대비, Lighthouse 접근성 점수까지 관리할 줄 아는가”
— 즉, 기술 + 윤리 + 품질 관리 능력을 함께 확인하려는 겁니다.

이번 글에서는 웹 접근성의 핵심 개념부터 Lighthouse 점수 개선 전략, 그리고 실제 실무 개선 사례까지 다뤄보겠습니다.

---

📌 1. 웹 접근성(Accessibility, A11y)이란?

장애 유무나 환경에 관계없이 모든 사용자가 동등하게 웹 서비스를 이용할 수 있도록 만드는 것

대표 표준은 WCAG(Web Content Accessibility Guidelines)

• 인식 가능(Perceivable)
• 운용 가능(Operable)
• 이해 가능(Understandable)
• 견고함(Robust)

---

📌 2. Lighthouse 접근성(A11y) 점수 항목

Google Lighthouse는 접근성을 자동 점검합니다. 주요 항목은 다음과 같습니다:

항목 설명

alt 속성	이미지 대체 텍스트 제공 여부
명도 대비(Contrast Ratio)	텍스트와 배경 간 색상 대비
ARIA 역할(role)	보조기기(Screen Reader) 인식 정보 제공
Label 연결	입력폼(label, aria-label 등) 연결 여부
키보드 접근성	탭(Tab) 키로 모든 UI 조작 가능 여부

---

📌 3. 접근성 개선 실무 전략

✅ ① 대체 텍스트 (alt)

<img src="/profile.jpg" alt="사용자 프로필 이미지" />

• 이미지 의미를 설명하는 텍스트 제공
• 단순 장식용 이미지는 alt=""로 명시

📌 면접 포인트:

“SEO에도 직접적으로 도움이 되며, 시각장애인용 스크린 리더 지원의 기본입니다.”

---

✅ ② 명도 대비 개선

반응형

• 텍스트와 배경의 최소 대비 비율: 4.5:1 이상 (WCAG 2.1 기준)
• Chrome DevTools → Accessibility 탭에서 실시간 측정 가능

📌 실무 예시:

브랜드 컬러(#4A90E2 → #3366CC) 조정으로 명도 대비 확보 후 Lighthouse 접근성 점수 78 → 96점 상승

---

✅ ③ ARIA 속성 활용

<button aria-label="장바구니에 추가">🛒</button>

• 스크린 리더가 버튼 기능을 정확히 읽어줌
• aria-live, aria-expanded, role 속성 활용

---

✅ ④ 키보드 접근성 확보

document.addEventListener("keydown", (e) => {
  if (e.key === "Tab") document.body.classList.add("user-tabbing");
});

• 탭(Tab)으로 모든 인터랙션이 가능해야 함
• 포커스(Outline) 제거는 UX 장애 요소가 될 수 있음

---

✅ ⑤ 폼 요소 Label 연결

<label for="email">이메일</label>
<input id="email" type="email" aria-required="true" />

• Label 연결 시 스크린 리더가 정확히 읽음
• 단순 placeholder로 대체 금지

---

📌 4. 실무 적용 사례

상황: 금융 서비스 프론트엔드 접근성 점수 68점 (Lighthouse)
문제: 시각장애인용 스크린 리더 미지원, 색상 대비 부족
해결 과정:

1. 모든 주요 버튼에 aria-label 추가
2. 배경 대비 명도 조정 (4.5:1 이상)
3. 폼 요소에 label for 일괄 연결
4. 키보드 포커스 시각적 표시 강화

📈 결과: 접근성 점수 68 → 97점 상승, Lighthouse 종합 점수도 15점 향상

---

📌 5. 압박면접 예상 질문 & 답변 포인트

• ❓ Q. 접근성을 고려하면 디자인 제약이 커지지 않나요?
  → “디자인 제약보다는 접근성 표준에 맞춘 UX 개선이라 생각합니다.
  시각장애 사용자만이 아니라 일반 사용자도 명확한 UI 구조 덕분에 더 편리해집니다.”
• ❓ Q. 접근성 점수를 DevOps에 반영할 수 있나요?
  → “Lighthouse CI를 통해 접근성 90점 미만 시 배포 경고를 발생시키는 자동화를 적용했습니다.”

---

📌 6. 면접에서 활용할 한 줄 정리

“웹 접근성은 단순한 윤리적 기준이 아니라 품질 관리의 핵심입니다.
Lighthouse 접근성 점수를 68에서 97로 개선하면서,
UX와 SEO 모두 개선된 경험이 있습니다.”

---

압박면접,웹접근성,Accessibility,A11y,WCAG,ARIA,명도대비,스크린리더,SEO,Lighthouse

---