tag · 9 posts

#a11y

  • experience
  • design
  • develop
  • frontend
  • a11y
  • chart
  • react
  • d3
  • interactive

인터랙션과 접근성을 모두 고려한 차트 만들기

44개 차트 데모를 한 자리에 모았습니다. 시각 사용자·키보드 사용자·스크린리더 사용자가 모두 자연스럽도록 처음부터 설계했고, 그 과정에서 정착된 패턴들 — HTML overlay, roving tabindex, 호버와 키보드 포커스의 분리, 데이터 표 fallback — 을 함께 정리했습니다.

read →
접근성 자동 검사와 수동 확인 - 사용자 대상 소프트웨어 테스트 가이드 ep.06
  • series
  • develop
  • design
  • frontend
  • testing
  • a11y
  • accessibility
  • wcag
  • axe-core

접근성 자동 검사와 수동 확인 - 사용자 대상 소프트웨어 테스트 가이드 ep.06

접근성은 누구에게 동작하는가의 문제입니다. 키보드만 쓰는 사용자, 스크린리더로 읽는 사용자, 색을 구별하지 못하는 사용자에게도 같은 경험이 가야 합니다. 자동 검사와 수동 확인이 각자 잡아내는 영역이 다르고, 둘을 함께 운영해야 의미가 있습니다.

read →
검증과 운영 — 테스트, 인증, 조직 문화 - 앱·웹 접근성 실무 가이드 ep.06
  • series
  • develop
  • devops
  • a11y
  • wcag
  • testing
  • certification
  • organization

검증과 운영 — 테스트, 인증, 조직 문화 - 앱·웹 접근성 실무 가이드 ep.06

자동화 도구가 발견하는 30~40% 너머의 영역, 한국 WA 인증 절차, 이슈 우선순위 산정 공식, CI/CD 파이프라인 접근성 게이트, 조직의 챔피언 모델, 그리고 5단계 성숙도 모델까지. 검사 통과로 끝나지 않는 운영의 영역을 마지막 편에서 정리하며 시리즈를 마무리합니다.

read →
모바일·프레임워크 — iOS, Android, React, Vue, Flutter - 앱·웹 접근성 실무 가이드 ep.05
  • series
  • develop
  • mobile
  • frontend
  • ios
  • android
  • react
  • a11y

모바일·프레임워크 — iOS, Android, React, Vue, Flutter - 앱·웹 접근성 실무 가이드 ep.05

SwiftUI의 accessibility 수정자와 Compose의 semantics, Flutter의 Semantics 위젯을 비교하고, 네이티브·하이브리드·웹뷰 아키텍처별 접근성 함정을 짚습니다. React Aria·Radix·Headless UI 같은 헤드리스 라이브러리, jsx-a11y 린트 규칙, VoiceOver와 TalkBack 차이까지 한 편에 모았습니다.

read →
개발 단계 — 시맨틱 HTML과 ARIA, 키보드, 스크린리더 - 앱·웹 접근성 실무 가이드 ep.04
  • series
  • develop
  • frontend
  • a11y
  • wcag
  • semantic-html
  • aria
  • keyboard

개발 단계 — 시맨틱 HTML과 ARIA, 키보드, 스크린리더 - 앱·웹 접근성 실무 가이드 ep.04

네이티브 HTML이 ARIA + JavaScript 20줄을 대체하는 이유, W3C ARIA 5대 규칙, 랜드마크와 라이브 리전 설계, 모달 포커스 트랩 구현, 복합 위젯의 표준 키보드 패턴까지. 가장 많은 실수가 발생하는 단계인 만큼 가장 길게 다룹니다.

read →
접근성, 다시 묻기 - 앱·웹 접근성 실무 가이드 ep.00
  • series
  • cover
  • design
  • develop
  • frontend
  • a11y
  • wcag
  • kwcag
  • ux

접근성, 다시 묻기 - 앱·웹 접근성 실무 가이드 ep.00

디지털 접근성의 정의와 장애 스펙트럼, 보조기기의 동작 원리, 한국과 국제 법규 현황, 그리고 비즈니스 지표와의 연결 관계를 다룹니다. 본격적인 WCAG 학습에 들어가기 전 공통 지반을 다지는 개요 편입니다.

read →
디자인 단계 — 색·타이포·모션·시스템 - 앱·웹 접근성 실무 가이드 ep.03
  • series
  • design
  • ux
  • a11y
  • wcag
  • contrast
  • dark-mode
  • design-system

디자인 단계 — 색·타이포·모션·시스템 - 앱·웹 접근성 실무 가이드 ep.03

WCAG 명도 대비 기준의 실전 적용, 색상에만 의존하지 않는 정보 전달, 다크·고대비 모드 동시 대응 전략, 포커스 인디케이터와 터치 타겟 디자인, 그리고 디자인 시스템 컴포넌트에 접근성 명세를 끼워 넣는 패턴을 정리합니다.

read →
기획 단계 — 구조와 콘텐츠 - 앱·웹 접근성 실무 가이드 ep.02
  • series
  • design
  • ux
  • a11y
  • wcag
  • planning
  • forms

기획 단계 — 구조와 콘텐츠 - 앱·웹 접근성 실무 가이드 ep.02

와이어프레임에 헤딩 레벨을 명시하는 법, 내비게이션 패턴별 접근성 트레이드오프, 폼 설계의 핵심 결정 포인트, 대체 텍스트 의사결정, 그리고 유저 스토리에 접근성 인수 조건을 끼워 넣는 패턴까지. 디자이너·개발자에게 넘기기 전에 기획자가 끝내야 할 일들을 정리합니다.

read →
WCAG 2.2 구조 완벽 정리 - 앱·웹 접근성 실무 가이드 ep.01
  • series
  • design
  • develop
  • frontend
  • a11y
  • wcag
  • kwcag
  • ux

WCAG 2.2 구조 완벽 정리 - 앱·웹 접근성 실무 가이드 ep.01

WCAG의 POUR 4원칙이 어떻게 13개 지침과 86개 성공 기준으로 펼쳐지는지, A·AA·AAA 등급의 의미와 실무 선택 기준, 2.1에서 2.2로 넘어오면서 추가된 9가지 신규 기준, 그리고 한국형 KWCAG와의 매핑까지 한 편에 정리합니다.

read →