분류 전체보기33 ARIA role이 도대체 뭐죠? "HTML 요소의 '자아'를 찾아주는 일" ARIA role이 도대체 뭐죠? "HTML 요소의 '자아'를 찾아주는 일"웹 퍼블리싱을 하다 보면 만나게 되는 ARIA role. 디자인만 봐서는 알 수 없는 HTML 요소의 진짜 역할을 스크린 리더 사용자에게 속삭여주는 아주 중요한 속성입니다.1. ARIA role의 정의정의: HTML 요소가 UI 내에서 어떤 역할을 하는지 보조 공학 기기(스크린 리더 등)에 알려주는 속성이에요.시각 장애 사용자 등 보조 기기를 사용하는 분들은 화면의 디자인을 볼 수 없습니다. 이때 role이 "이건 버튼이야!", "이건 탭 메뉴야!"라고 설명해 주는 역할을 합니다.2. 가장 많이 쓰이는 역할 TOP 3"태그는 지만, 마음은 버튼일 때" 꼭 필요합니다.role="button"클릭 가능한 요소임을 알려요. 보통 나 이.. 2026. 3. 20. 롯데카드 웹사이트 웹접근성 개선 분석 롯데카드 웹사이트 웹접근성 개선 분석최근 많은 금융 서비스 웹사이트는 다양한 사용자들이 쉽게 이용할 수 있도록웹접근성(Web Accessibility)을 고려한 설계가 필요합니다.이번 글에서는 롯데카드 웹페이지를 기준으로 웹접근성 관점에서 개선할 수 있는 요소들을 분석해 보겠습니다.1. 이미지 대체 텍스트 문제해당 페이지에는 카드 상품 소개 배너 이미지가 여러 개 포함되어 있습니다.디지로카 카드LOCA365 카드롯데멤버스 카드이미지 중심의 콘텐츠가 많기 때문에 alt 속성 제공 여부가 매우 중요합니다.문제 예시대체 텍스트가 없으면 스크린리더 사용자는 이미지 내용을 이해할 수 없습니다.개선 방법이미지 내용에 맞는 alt 텍스트를 제공하면 시각장애인도 콘텐츠를 이해할 수 있습니다.2. 버튼 접근성 개선페이지.. 2026. 3. 17. 웹접근성 인증마크 받는 방법 총정리 웹접근성 인증마크 받는 방법 총정리웹접근성(Web Accessibility)은 장애인, 고령자 등 모든 사용자가 차별 없이 웹사이트를 이용할 수 있도록 하는 중요한 기준입니다.한국에서는 웹사이트가 접근성 기준을 충족하는지 평가하여 웹접근성 품질인증마크를 부여하는 제도가 운영되고 있습니다.이번 글에서는 웹접근성 인증마크란 무엇인지, 인증을 받는 방법, 그리고 평가 기준까지 한 번에 정리해 보겠습니다.1. 웹접근성 인증마크란?웹접근성 인증마크는 웹사이트가 접근성 기준을 준수하고 있는지 평가하여 공식적으로 인증하는 제도입니다.웹사이트 접근성 수준 평가웹접근성 품질 인증 마크 제공공공기관 및 민간 기업 참여 가능이 인증은 웹사이트가 장애인과 비장애인 모두에게 편리하게 제공되는지 확인하기 위한 제도입니다.2. 웹.. 2026. 3. 14. 웹접근성 인증 / 정책 / 트렌드 정리 웹접근성 인증 / 정책 / 트렌드 정리웹접근성(Web Accessibility)은 단순한 기술 요소가 아니라 법적 기준, 인증 제도, 글로벌 트렌드와 밀접하게 연결되어 있습니다.정부 기관, 공공기관, 기업 웹사이트는 웹접근성 기준을 준수해야 하며 이를 검증하기 위한 다양한 인증 제도와 정책이 운영되고 있습니다.이번 글에서는 웹접근성과 관련된 인증 제도, 정책, 그리고 최신 트렌드를 정리해 보겠습니다.1. 웹접근성 인증 제도웹접근성 인증은 웹사이트가 접근성 기준을 충족하는지 평가하여 공식적으로 인증을 부여하는 제도입니다.웹접근성 품질인증 제도한국지능정보사회진흥원(NIA) 운영웹접근성 지침을 기준으로 평가공공기관 및 민간 기업 참여 가능인증을 받은 웹사이트는 접근성 품질 마크를 사용할 수 있습니다.인증 평가.. 2026. 3. 13. 웹접근성을 고려한 콘텐츠 구조 설계 방법 웹접근성을 고려한 콘텐츠 구조 설계 방법웹접근성(Web Accessibility)을 고려한 웹사이트를 만들기 위해서는 콘텐츠 구조(Content Structure)를 올바르게 설계하는 것이 중요합니다.콘텐츠 구조가 명확하면 스크린리더 사용자, 키보드 사용자, 저시력 사용자 등 다양한 사용자가 웹사이트를 쉽게 이해하고 탐색할 수 있습니다.특히 논리적인 HTML 구조와 콘텐츠 계층은 웹접근성의 핵심 요소 중 하나입니다.1. 명확한 콘텐츠 계층 구조 만들기웹페이지는 제목과 콘텐츠가 논리적인 구조로 구성되어야 합니다.사용자는 제목 구조를 통해 콘텐츠의 흐름을 이해합니다.스크린리더 사용자 역시 제목을 기반으로 페이지를 탐색합니다.권장 구조h1 : 페이지 제목h2 : 주요 섹션h3 : 세부 콘텐츠h4 : 추가 설명.. 2026. 3. 12. 웹접근성을 위한 키보드 네비게이션 구현 방법 웹접근성을 위한 키보드 네비게이션 구현 방법웹접근성(Web Accessibility)을 고려한 웹사이트에서는 키보드만으로도 모든 기능을 사용할 수 있어야 합니다.시각장애 사용자, 손 사용이 어려운 사용자, 스크린리더 사용자는 마우스 대신 키보드 네비게이션을 통해 웹사이트를 탐색합니다.따라서 키보드 접근성을 구현하는 것은 웹접근성에서 매우 중요한 요소입니다.1. 키보드 네비게이션이란?키보드 네비게이션은 마우스를 사용하지 않고 키보드만으로 웹사이트를 탐색하는 방식을 의미합니다.주요 키보드 이동 키Tab : 다음 인터랙션 요소로 이동Shift + Tab : 이전 요소로 이동Enter : 링크 또는 버튼 실행Space : 버튼 동작 실행Arrow Keys : 메뉴 또는 목록 이동2. 모든 인터랙션 요소를 키보드.. 2026. 3. 12. 이전 1 2 3 4 ··· 6 다음
