티스토리 정보 저장소

본문 바로가기접근성 기본 세팅 스타터팩｜대체텍스트·키보드 포커스·ARIA 힌트 요약: 접근성은 선택이 아니라 기본 세팅입니다. 본문 이미지는 ALT 템플릿으로, 링크·폼·토글 등 상호작용 요소는 키보드 포커스 스타일로, 보조 안내는 ARIA-label 패턴으로 표준화합니다. 이 글은 즉시 복붙 가능한 코드와 점검표를 함께 제공합니다.📑 목차본문1｜ALT(대체텍스트) 템플릿본문2｜키보드 포커스 스타일본문3｜ARIA-label/role 힌트 패턴실무 스니펫 모음(복붙용)점검표｜합격 기준과 흔한 실수실천 요약ALT(대체텍스트) 템플릿ALT는 이미지가 전달하는 의미를 텍스트로 요약해 화면낭독기 사용자에게 정보를 제공합니다. 또한 이미지 검색·콘텐츠 이해의 단서로 활용됩니다. 핵심은 “무엇 + 맥락 + 핵심 수..

본문 바로가기링크 스타일 표준화｜색 대비· 밑줄· 호버 인터랙션 실전요약: 링크는 블로그 탐색의 최소 단위입니다. 색 대비, 밑줄, 호버/포커스, 방문 상태, 외부 링크 구분까지 표준화하면 독자는 길을 잃지 않고, 검색·접근성 신호가 함께 좋아집니다. 이 글은 실무 규칙과 코드, 점검표까지 포함해 즉시 적용 가능한 형태로 구성했습니다.📑 목차본문1｜색 대비 수치와 기준본문2｜밑줄·호버·포커스 규칙본문3｜방문 링크 차별화 & 외부 링크 아이콘실무 패턴 세트(복붙용)점검표｜합격 기준과 흔한 실수실천 요약색 대비 수치와 기준링크는 문장 속에서 본문 텍스트와 공존합니다. 따라서 링크 색은 배경과의 대비뿐 아니라 주변 텍스트와의 구분까지 고려해야 합니다. 가장 안전한 기준은 WCAG AA입니다. 일반 텍스트 크..