#accessibility
노트 39개
Frontend
Accessibility장애가 있는 사람도 웹을 인지하고 조작하고 이해할 수 있게 만드는 일. 장애는 능력과 환경의 불일치이고, 브라우저는 시맨틱 HTML로 접근성 트리를 만들어 보조 기술에 넘기며, WCAG가 최소선을 정한다. 표준을 지켜도 쓰기 어려울 수 있어 장애인과의 사용성 테스트와 조직 차원의 우선순위가 필요하다. 사용자 관점과 WCAG, 시맨틱 구조·대체 텍스트·폼·ARIA·키보드·위젯·CSS 기법, 자동·수동 평가와 스크린 리더 테스트를 하위 노트로 잇는다.
Frontend › Accessibility
대체 텍스트, 링크, 쉬운 글대체 텍스트는 이미지가 그 자리에서 하는 일을 글로 바꾼 것이라 같은 사진도 맥락에 따라 alt가 달라진다. 링크는 맥락 없이 목록으로만 들어도 뜻이 통해야 하고, 본문 글은 짧은 문장·익숙한 낱말·논리적 구성으로 인지 부담을 줄인다.
Frontend › Accessibility
디자인 단계의 접근성접근성 문제는 상당수가 디자인 단계에서 막힌다. 포용적 디자인 일곱 원칙, 장애를 담은 페르소나와 시뮬레이터의 한계, 접근성 휴리스틱 리뷰, 핸드오프 전 접근성 주석, 그리고 컴포넌트·패턴·디자인 시스템을 고르는 기준을 정리한다.
Frontend › Accessibility
복합 위젯의 ARIA 패턴: 콤보박스·날짜 선택기·메뉴·상태 알림네이티브 요소가 없는 복합 위젯을 스크린 리더가 이해하고 조작할 수 있게 만드는 패턴. 자동완성 콤보박스, 날짜 선택기(grid)와 날짜 직접 입력, 사이트 메뉴와 menubar의 구분, 수량 조절 버튼, 정렬 표, 페이지 번호, 툴팁, 좌석 배치 같은 2차원 선택, 그리고 로딩·토스트·글자 수·실시간 검증 같은 상태 알림을 정리한다.
Frontend › Accessibility
색과 움직임의 접근성저시력·색각 결핍 사용자는 스크린 리더가 아니라 화면을 본다. 색만으로 정보를 전하지 않고, 텍스트와 필수 그래픽의 대비를 지키고, prefers-color-scheme·prefers-contrast·prefers-reduced-motion으로 사용자 설정을 존중하고, 움직임은 기본을 줄인 상태로 두고 5초 넘는 자동 애니메이션은 멈출 수 있게 한다.
Frontend › Accessibility
스크린 리더로 테스트하기스크린 리더 테스트는 읽는 순서, 대체 텍스트, 제목·랜드마크·폼·표의 의미가 실제로 어떻게 들리는지 확인한다. 데스크톱은 NVDA나 JAWS 하나에 VoiceOver를, 모바일은 iOS VoiceOver와 Android TalkBack을 쓰고, 각 스크린 리더의 최소 단축키(읽기 시작·중지, 제목·랜드마크·폼 이동, 요소 목록)만 익히면 기본 점검이 된다.
Frontend › Accessibility
자막, 대본, 음성 해설동영상과 오디오에는 소리를 글로 바꾼 자막, 소리와 화면을 모두 글로 담은 대본, 화면 정보를 말로 전하는 음성 해설이 필요하다. 자막은 동기화·동등·접근 가능해야 하고, 실시간 콘텐츠는 속기나 사람이 검수한 음성 인식으로 자막을 단다. 웹에서는 <track>과 WebVTT로 붙인다.
Frontend › Accessibility
장애 유형별 웹 사용시각·청각·운동·인지·발작과 전정·말하기 장애 사용자가 어떤 보조 기술로 웹을 쓰고 어디서 막히는지 정리한다. 진단명보다 기능적 어려움으로 보고, 하나의 설계가 사용자의 조정과 보조 기술을 받아들이게 만드는 것이 핵심이다.
Frontend › Accessibility
접근 가능한 위젯: 펼침·탭·캐러셀펼침(디스클로저)·아코디언은 <details>/<summary>와 name 속성으로 먼저 만들고, 직접 만들면 button + aria-expanded + hidden을 쓴다. 탭은 APG 패턴대로 tablist·tab·tabpanel과 로빙 tabindex, 방향키를 갖추고, 캐러셀은 정지 버튼·포커스 시 정지·숨은 슬라이드 차단·라이브 영역을 갖춘다.
Frontend › Accessibility
접근 가능한 페이지 구조스크린 리더·키보드 사용자는 페이지를 위에서부터 읽지 않고 제목·랜드마크·링크 목록으로 건너뛰며 탐색한다. 페이지 제목, 문서 언어, 제목 계층, 영역, 목록, 건너뛰기 링크, 사이트 검색, iframe 제목, 데이터 표의 머리글 연결이 그 탐색 경로를 만든다.
Frontend › Accessibility
접근 가능한 폼과 오류 처리모든 입력 칸에는 코드로 연결된 이름이 있어야 한다. label을 기본으로, 표처럼 일대일이 안 되는 곳은 aria-labelledby, 보조 설명은 aria-describedby로 잇고, 묶음은 fieldset·legend로 준다. 검증은 서버와 클라이언트를 함께 두고, 오류는 알리고·데려가고·다시 제출하게 하는 세 단계로 복구시킨다. WCAG 2.2의 중복 입력 금지와 인지 테스트 없는 인증까지 다룬다.
Frontend › Accessibility
접근성 평가 방법과 도구접근성 감사는 기준선을 잡고 개발 주기 내내 반복하는 자동·수동·보조 기술 테스트의 조합이다. 자동 검사 도구는 명백한 오류와 사람이 볼 곳을 짚어 줄 뿐 접근 가능한지는 판정하지 못하므로, DevTools로 이름을 확인하고 키보드·시각·콘텐츠·확대·스크린 리더 순으로 수동 점검한다. 결과는 ACR(VPAT)로 보고하고, 오버레이 제품은 이 과정을 대신하지 못한다.
Frontend › Accessibility
접근성을 위한 CSS와 타이포그래피CSS는 표현만 맡고 의미는 HTML이 진다. 소스 순서와 화면 순서를 맞추고, 숨김은 모두에게 숨길지(display:none·hidden) 화면에서만 숨길지(visually-hidden) 구분한다. 400% 확대에서도 가로 스크롤 없이 읽히게(1.4.10 Reflow), 사용자가 줄·글자 간격을 넓혀도 깨지지 않게(1.4.12 Text Spacing) 만들고, 글꼴·정렬·글줄 길이로 읽기 부담을 줄인다.
Frontend › Accessibility
키보드 접근성과 포커스 관리모든 기능은 키보드만으로 쓸 수 있어야 한다. 표준 키 조작, :focus-visible로 지키는 포커스 표시와 WCAG 2.2의 Focus Not Obscured, 소스 순서와 tabindex, inert와 <dialog>로 만드는 안전한 모달, 장치 독립 이벤트와 동적 콘텐츠의 포커스 처리를 정리한다.
Frontend › Accessibility
ARIA와 접근 가능한 이름ARIA는 HTML로 표현할 수 없는 role·state·property를 접근성 트리에 더하지만 동작은 더하지 않는다. 다섯 가지 사용 규칙, 접근 가능한 이름과 설명이 계산되는 순서(aria-labelledby > aria-label > 네이티브 label·alt > 내용 > title > placeholder), Label in Name, 라이브 영역을 정리한다.
Frontend › Accessibility
WCAG와 POUR 원칙WCAG는 인지·운용·이해·견고(POUR) 네 원칙 아래 13개 지침과 성공 기준으로 웹 콘텐츠 접근성의 최소선을 정한다. 2026년 기준 권고안은 WCAG 2.2(86개 기준, 4.1.1 삭제)이고 따로 요구되는 기준이 없으면 AA를 목표로 한다. 형제 지침(ATAG·UAAG)과 각국 법, 원칙별 점검 질문, 모든 성공 기준의 체크리스트를 정리했다.
Frontend › CSS
커서와 포인터 입력입력 장치에 맞춰 상호작용을 알리는 CSS. 상태를 알리는 cursor와 caret-color, 마우스·터치를 구분하는 pointer·any-pointer·hover 미디어 쿼리, 브라우저 기본 제스처를 고르는 touch-action, 상호작용을 끄는 pointer-events를 정리한다.
Frontend › CSS
CSS 오버플로와 스크롤: 넘침 처리와 스크롤 스냅내용이 박스보다 클 때 보일지·자를지·스크롤할지를 정하는 overflow, 한 줄 말줄임을 만드는 text-overflow, 스크롤 영역의 키보드 접근성, 스크롤바 스타일, scroll-behavior와 overscroll-behavior, 갤러리처럼 칸마다 멈추는 스크롤 스냅까지 정리한다.
Frontend › Testing
접근성 기반 UI 테스트 자동화UI 테스트가 xpath·CSS 선택자 때문에 쉽게 깨지던 문제를 WAI-ARIA의 role과 접근 가능한 이름(accessible name)으로 요소를 찾는 방식으로 푸는 법. getByRole 쿼리, aria-label·aria-labelledby·aria-current·aria-expanded 활용, 헤드리스 컴포넌트, 인수·회귀 테스트로서의 효과, 접근성 트리를 LLM·AI 에이전트의 입력으로 쓰는 법을 정리한다.
Frontend
UI Design디자인 시스템과 핸드오프, 레이아웃, 전자상거래·제스처 UI 패턴, UX 라이팅까지 화면의 생김새와 쓰임새를 다루는 노트 모음.
Frontend › UI Design
로딩 UI: 스피너, 로딩 애니메이션, 스켈레톤, 프로그레스 바기다림을 줄일 수 없을 때 체감을 다루는 로딩 UI 네 가지를 정리했다. 짧고 부분적인 로딩은 스피너, 핵심 액션은 브랜드 로딩 애니메이션, 페이지 전체는 스켈레톤, 10초 넘는 작업과 단계형 흐름은 프로그레스 바를 쓴다. 1초 미만이면 아무것도 띄우지 않는다.
Frontend › UI Design
인터페이스 심리학: 지각·인지·감정·사회적 반응사용성은 사람의 지각·인지 특성에 맞출 때 생긴다. 순서 있는 값은 밝기로·범주는 색상으로 보여 주는 지각 원리, 청킹, 어포던스, 재인과 회상, 초보자와 숙련자를 위한 여러 경로, 감성 컴퓨팅, 컴퓨터 매개 소통과 시선, 의인화와 불쾌한 골짜기, 그리고 설계가 사람에게 미치는 영향의 윤리를 정리한다.
Frontend › UI Design
제스처 기반 인터페이스터치 기기에서는 스와이프·당기기·드래그 같은 제스처가 버튼과 바를 줄이고 화면을 콘텐츠에 내준다. 대신 제스처는 보이지 않아서 학습 곡선이 생기고, 운영체제 제스처와 충돌하며, 일부 사용자는 쓸 수 없다. 점진적 힌트로 가르치고, 같은 기능을 버튼으로도 제공하고, 시간과 애니메이션까지 프로토타입으로 검증한다.
Frontend › UI Design
제품 언어로서의 디자인 시스템: 토큰, 기능과 형태, 컴포넌트 API디자인 시스템을 범용 UI 라이브러리가 아니라 회사의 디자인 결정을 관리하는 제품 언어로 보는 관점을 정리한다. 결정을 값·의도·맥락으로 인코딩하는 디자인 토큰과 섣부른 시맨틱 토큰의 함정, 아토믹 단위가 하나로 정해지지 않는 이유와 컴포넌트를 기능(구조·상태·상호작용·맥락)과 형태(구조·시각 옵션·상태 옵션·디자인 결정)로 해부하기, 상태 압축, 공통 인터페이스로 디자인-개발의 순환 참조 끊기, 사전 조합 컴포넌트와 조합 가능한 패키지를 나눠 일관성과 유연성을 함께 주는 API를 다룬다.
Frontend › UI Design
SVG 아이콘: 형식, 넣는 방법, 이름 붙이기, 스타일아이콘은 콘텐츠가 아니라 인터페이스의 일부라 글자처럼 커지고 색이 바뀌어야 한다. 그래서 크기마다 파일이 필요한 PNG보다 한 파일로 모든 크기를 그리는 SVG가 맞다. 글과 함께 있는 아이콘은 장식이니 숨기고, 아이콘만 있는 버튼은 뜻을 이름으로 준다. 인라인 SVG는 currentColor로 글자색과 테마를 따라가게 한다. 프레젠테이션 속성의 낮은 우선순위, transform-box: fill-box, 선 그리기 효과, 넣는 방법별로 되는 CSS도 다룬다.
Frontend › Web
더 나은 폼을 만드는 팁폼 사용성은 사용자의 통제권을 지키고 노력을 줄이는 데서 나온다. 묻는 칸 줄이기, 짧은 라벨과 한 열 배치, 브라우저 기본 동작 존중, 모바일 키보드(inputmode), 보이는 검증 메시지, 커서·포커스를 빼앗지 않는 입력 처리, 그리고 기기·사람·데이터로 폼을 시험하고 측정하는 법을 정리한다.
Frontend › Web
링크와 내비게이션 마크업<a href>가 가리킬 수 있는 곳(절대·상대 URL, 프래그먼트, mailto·tel, blob·data), download로 내려받기, target과 rel=noopener·noreferrer, 이름 붙은 브라우징 맥락으로 탭 폭증 막기, rel·hreflang·type·ping, 그리고 링크 목록을 <nav>로 묶는 건너뛰기 링크·목차·브레드크럼·로컬·전역 내비게이션 패턴을 정리한다.
Frontend › Web
목록과 표 마크업ul·ol·dl의 허용 자식과 중첩 규칙, ol·li의 번호 속성, dl을 div로 묶는 법, 그리고 표의 자식 순서(caption → colgroup → thead → tbody → tfoot), th·scope·headers, colspan·rowspan, colgroup·col로 열 꾸미기, 표 CSS를 정리한다. 목록인지·용어 쌍인지·표인지 고르는 기준도 함께 둔다.
Frontend › Web
브라우저 기본 동작을 존중하기스크롤바·스크롤·선택 강조색·글자 크기·고대비·키보드 포커스·클립보드·방문 기록은 OS와 브라우저가 모든 앱에 같은 방식으로 제공하는 기능이다. 사이트가 이를 바꾸면 외부 일관성이 깨져 일부 사용자가 밀려난다. 덮어쓰지 말고, 필요하면 기본 위에 선택지를 더한다.
Frontend › Web
이미지·오디오·비디오 임베드내용인 이미지는 HTML, 장식은 CSS다. <img>의 필수 src·alt, 레이아웃 이동을 막는 width·height, loading·fetchpriority, figure·figcaption, SVG의 role="img"를 정리하고, <video>·<audio>의 source·type·codecs, poster, controls, autoplay와 muted, track의 다섯 kind, 배경 영상과 사용자 정의 컨트롤의 원칙을 다룬다.
Frontend › Web
자동 완성과 autocomplete 토큰브라우저는 name·id·type과 autocomplete 값으로 칸의 정체를 짐작해 저장된 주소·카드·비밀번호를 채운다. 짐작에 맡기지 말고 autocomplete 토큰을 명시하고, section-·shipping/billing·home/work·webauthn 순서 문법, 이름·주소·전화·카드·비밀번호 토큰표, autocomplete="off"가 듣지 않는 경우, :autofill 스타일링, 자동 완성을 깨는 흔한 실수를 정리한다.
Frontend › Web
텍스트 의미 요소와 문자 참조문단·인용·강조·기술 문서·정의·수정 이력·줄 바꿈을 표현하는 HTML 텍스트 요소를 용도별로 고르는 법. blockquote·q·cite의 구분, em·strong·mark·i·b·u·s의 의미 차이, code·kbd·samp·var·data·time, abbr·dfn, br·hr·wbr, 그리고 꼭 이스케이프해야 하는 문자 참조를 정리한다.
Frontend › Web
포커스 속성과 details·dialogHTML만으로 포커스를 다루는 속성(tabindex·contenteditable·autofocus·disabled·inert)과 JavaScript 없이 동작하는 두 인터랙티브 요소를 요소 사전처럼 정리한다. 포커스를 빼는 세 방법의 차이, <details>/<summary>의 open·name·마커·오류 처리, <dialog>의 show·showModal·close, method="dialog"와 returnValue, ::backdrop, 열고 닫을 때의 포커스, commandfor로 스크립트 없이 여는 법까지 다룬다.
Frontend › Web
폼 스타일링폼 컨트롤은 기본 크기가 작고 브라우저마다 모양이 다르다. 글자 1rem 이상(iOS 확대 방지), 보이는 테두리, 48px 탭 영역, 한 열 배치로 기본을 잡고, appearance: none과 배경 화살표로 select를, 접근성 트리를 지키는 숨김 기법으로 체크박스·라디오를 꾸민다. accent-color, field-sizing: content, 실험 단계의 customizable select(appearance: base-select), pointer 미디어 쿼리와 env()까지 정리한다.
Frontend › Web
프론트엔드 출시 전 체크리스트웹 페이지를 배포하기 전에 확인할 항목을 head·HTML·CSS·이미지·폰트·JavaScript·보안·성능·접근성·SEO 열 가지로 나눠, 우선순위와 자세한 설명이 있는 노트로 잇는 점검표. 항목은 사람이 외우지 않고 린터·Lighthouse·CI로 자동화하는 것이 기본이다.
Frontend › Web
HTML 입력 요소 치트시트input의 22가지 type과 label·select·textarea·fieldset·datalist까지, 폼에서 쓰는 입력 요소를 용도별로 정리하고, 값의 성격에 맞는 type·선택 컨트롤 고르기와 inputmode 8가지 값까지 다룬다.
AI & Data
데이터 시각화: 인코딩, 차트 고르기, 디자인 원칙시각화는 데이터의 각 열을 위치·길이·색 같은 시각 채널에 대응시키는 일이다. 그래픽 문법의 일곱 요소로 차트를 분해하고, 데이터 유형과 지각 특성으로 채널을 고르고, 크기·분포·비율·관계·시간 변화라는 질문으로 차트를 고른 뒤, 잉크 비례·겹침 풀기·적고 의미 있는 색·직접 레이블·옅은 맥락 요소로 다듬고 3차원은 피한다.
Tools › Chrome DevTools
DevTools로 기기·환경 에뮬레이션하기기기 모드로 뷰포트·DPR·터치·기기 프리셋을, 네트워크 상태 패널로 사용자 에이전트를, 센서 패널로 위치·방향·유휴 상태를, 렌더링 탭으로 다크 모드·모션 감소·인쇄·색각 이상을 흉내 낸다. 흉내로 부족하면 Android 원격 디버깅·WebView 검사·포트 포워딩으로 실기기에서 확인하고, WebAuthn 패널로 가상 인증기를 만든다.
Tools › Chrome DevTools
DevTools로 DOM과 CSS 다루기Elements 패널에서 DOM을 고르고 고치는 법, 스타일 창의 취소선·흐림·경고 표시로 CSS가 안 먹는 이유를 읽는 법, 상태 강제(:hov)·색상 선택기·Flex/Grid/컨테이너 오버레이·애니메이션 패널로 레이아웃과 움직임을 디버깅하는 법, CSS 개요·자동 완성 패널, 접근성 트리·대비·포커스 검사까지 정리한다.