DDODDO LAB

웹 접근성 체크리스트 10가지

퍼블리셔 실무 기준 정리웹 접근성(A11Y)은 장애가 있는 사용자뿐만 아니라모든 사용자가 웹을 편하게 이용할 수 있도록 만드는 중요한 요소다. 특히 공공기관이나 서비스 사이트에서는 웹 접근성 준수 여부가 매우 중요한 기준이 된다. 이번 글에서는 퍼블리싱 실무에서 꼭 확인해야 할 웹 접근성 체크리스트 10가지를 정리해보자. 1. 이미지에는 대체 텍스트 제공하기이미지에는 반드시 alt 속성을 제공해야 한다. 스크린리더 사용자는 이미지를 직접 볼 수 없기 때문에 대체 텍스트가 중요하다.✔ 의미 있는 이미지 → alt 작성✔ 장식 이미지 → alt="" 2. 키보드로 모든 기능 사용 가능해야 한다마우스를 사용하지 못하는 사용자를 위해키보드만으로도 모든 기능을 사용할 수 있어야 한다. TAB 이동 가능버튼 포..

aria-label vs sr-only 차이

웹 접근성에서 언제 사용해야 할까?웹 접근성을 고려한 퍼블리싱을 하다 보면 자주 등장하는 두 가지 방법이 있다.aria-labelsr-only둘 다 스크린리더 사용자에게 정보를 전달하기 위한 방법이지만사용 목적과 상황은 조금 다르다.실무에서 헷갈리기 쉬운 aria-label vs sr-only 차이를 정리해보자. aria-label이란?aria-label은 ARIA 속성 중 하나로요소의 이름(라벨)을 스크린리더에게 제공하는 역할을 한다.예를 들어 아이콘 버튼이 있다고 가정해보자. 화면에는 아이콘만 보이지만스크린리더는 다음처럼 읽는다."검색 버튼" 즉 aria-label은✔ 화면에 텍스트가 없어도✔ 스크린리더에 설명을 제공한다.sr-only란?sr-only는 CSS 패턴으로화면에서는 보이지 않지만 ..

sr-only 클래스 사용법

웹 접근성을 위한 숨김 텍스트 처리 방법웹 퍼블리싱을 하다 보면 화면에는 보이지 않지만 스크린리더에는 읽히도록 해야 하는 텍스트가 필요할 때가 있다.대표적인 예가 바로 다음과 같은 경우다.아이콘 버튼 설명추가 설명 텍스트접근성 보조 문구스킵 네비게이션이럴 때 사용하는 것이 바로 sr-only 클래스다. sr-only란 무엇인가?sr-only는 screen reader only의 약자다.즉, 화면에서는 보이지 않지만스크린리더에서는 읽히는 텍스트 를 만들기 위한 CSS 패턴이다.예를 들어 이런 버튼이 있다고 하자. 이 경우 스크린리더는 버튼의 의미를 알 수 없다.그래서 보조 텍스트를 추가해야 한다. 검색 이렇게 하면화면에는 아이콘만 보이고스크린리더는 검색 버튼으로 읽는다.sr-only CSS 코드..