접근성(Accessibility)은 종종 개발자에게 '지켜야 할 규제'처럼 무겁게 다가온다. 하지만 접근성의 본질은 단순히 특정 계층을 지원하는 데 그치지 않는다. 모든 사용자의 경험(UX)을 개선하고, 개발 효율(DX)을 높이며, 브라우저(MX)가 코드를 더 정확하게 해석하도록 돕는 기술적 투자다.

Lighthouse 점수를 확보함과 동시에 서비스의 기초 체력을 다질 수 있는 5가지 전략을 정리했다.

---

🏗️ 시맨틱 마크업: 브라우저와 대화하는 가장 효율적인 방법

상호작용 요소에는 의미 있는 태그 사용하기

스타일링의 편의를 위해 div나 span에 onClick을 부여하는 것은 브라우저에게 요소의 역할을 판단하도록 방치하는 것과 같다.

• 현실적인 타협: button 태그의 기본 스타일(배경, 테두리)을 초기화하는 것이 번거로워 div에 cursor: pointer만 주고 마무리하는 경우가 많다.
• 코드로 보는 대비:

  <div onClick={handleSearch} style={{ cursor: 'pointer' }}>검색</div>
   
  <button type="button" onClick={handleSearch} className="btn-reset">검색</