🧩 6. 웹 접근성(A11y) 속성 기초 정리 / 나중에 까먹지 않게 기록

예전엔 그냥 div랑 span으로 대충 레이아웃만 맞췄었는데,
프론트엔드 공부를 하면서 웹 접근성(A11y)에 대한 중요성을 알게 됐다.
스크린리더 사용자를 위한 속성들 중 자주 쓰는 것들만 간단하게 정리!

✅ aria-label

요소에 보이지 않는 라벨을 제공

<button aria-label="메시지 보내기">
  <svg>...</svg>
</button>

• 버튼에 텍스트가 없을 때 유용함
• 스크린리더가 해당 라벨을 읽어줌

✅ role

HTML 태그의 의미를 명확히 지정

<div role="dialog">...</div>

• 시멘틱 태그를 안 썼을 경우 의미를 부여할 수 있음
• 예: role="button", role="navigation", role="dialog"

✅ tabindex

요소의 포커스 순서를 제어

<div tabindex="0">포커스 가능한 div</div>

• 0: 기본 순서대로 포커스 가능
• -1: 포커스 가능하지만 Tab 키로는 접근 불가
• 1 이상: 비추천 (순서 꼬일 수 있음)

✅ 실제 예시

<button aria-label="검색">
  <img src="/search.svg" alt="" />
</button>

이미지에 alt=""를 주고, 대신 버튼에 aria-label로 의미를 부여한 것
이런 식으로 시각적으로 안 보이는 요소도 접근성을 가질 수 있다.

📝 내가 느낀 점

접근성을 생각한 마크업을 하려면 단순히 예쁜 화면을 넘어서
누구나 사용할 수 있게 만드는 배려가 필요하다는 걸 깨달았다.
앞으론 기본 속성들부터라도 꼭 신경 써서 작성하려고 한다!

🌍 "접근성은 옵션이 아니라 기본이다."