728x90 300x250 SMALL Front-end/웹접근성11 웹접근성을 고려한 아코디언 코드 - 1 웹접근성을 고려한 아코디언 코드 html Personal Information Name*: Email*: Phone: Extension: Country: City/Province: .. 2025. 7. 12. tabindex와 웹접근성 tabindex란?html 요소에 탭 키로 초점을 이동할 수 있도록 설정하는 속성버튼 tabindex는 크게 세 가지 값으로 나뉜다.0문서의 자연스러운 순서(문서 흐름)에 따라 탭으로 초점 이동가능-1초점은 줄 수 있지만 탭 키로 이동 불가, 자바스크립트로만 초점 이동 가능1이상사용자 정의 순서로 초점 이동. 일반적으로 사용 자제(접근성 권고 위반 가능성 높음) 각 값의 의미와 사용 예시1.tabindex="0" (가장 일반적)의미 : 요소를 키보드 초점 대상에 포함, 문서 흐름 순서에 맞게 촟점이 이동함언제 사용? : , 등 기본적으로 포커스 불가능한 요소에 초점 필요할 때이건 키보드로 접근 가능해요 2. tabindex="-1" (제어 목적)의미 : 초점은 줄 수 있지만 탭 키로는 접근 안 됨,.. 2025. 6. 8. 웹접근성 진단문서 1. 웹접근성 진단 문서란?웹 사이트가 장애인이나 고령자도 사용할 수 있는 구조로 되어 있는지 점검하고, 웹접근성 지침(KWCAG 2.1 기준)에 부함하지 않는 부분을 찾아내고 기록하는 문서 2. 진단 문서의 목적웹 사이트가 웹접근성 기준을 얼마나 잘 준수하고 있는지 평가하기 위해이후 개선 방향을 세우기 위해나중에 실제 인증 심사나 외부 감사에 앞서 사전 점검하는 역할도 있음프로젝트 진행 중 근거 자료 및 커뮤니케이션 문서로도활용 3. 진단 문서에 들어가는 주요 내용 (보통 엑셀이나 문서 양식으로 작성)No페이지/기능지침 항목진단 결과문제 설명1메인 페이지1.1 대체 텍스트 제공미준수로고 이미지에 alt값 없음2게시판 목록2.1 키보드 사용 가능준수tab 이동 순서 적절3팝업창3.2 명확한 지시 제공미.. 2025. 6. 7. Figma 디자인 단계 접근성 체크리스트(퍼블리셔/디자이너 협업용) 체크 항목설명기준 또는 툴텍스트 대비텍스트와 배경의 명도 대비가 충분한가?WCAG AA 기준(4.5:1이상)폰트 크기최소 14px 이상인가?기본 텍스트는 16pc 추천UI 크기버튼, 체크박스 등은 최소 44~48px모바일 기준포커스 순서시각적 구조와 논리적 포커스 순서가 일치하는가?디자인 흐름 확인아이콘 설명의미 있는 아이콘에는 텍스트 라벨 또는 aria-label이 존재하는가?예 : 돋보기 아이콘에 "검색"상태 구분색상 외의 방법으로 상태를 구분하고 있는가?예 : 체크 표시, 밑줄 등모션과도한 모션 없는지, prefers-reduced-motion 대응 고려했는지Web: CSS, App: OS설정 Figma 디자인 검토할 때 디자이너가 자체적으로 체크하거나 퍼블리셔가 검수 시 체크 포인트로 사용할 수 .. 2025. 4. 16. 이전 1 2 3 다음 728x90 반응형 LIST