[웹접근성] 브라우저 웹접근성/반응형

 

BrowserStack 브라우저스택	LT Browser (LambdaTest)	Responsively App (현재내컴퓨터에 있음)	Can I use
유로 (무료 체험가능 사용제)	무료+유료	무료 + 오픈소스 + 빠름	https://caniuse.com/
여러 브라우저 테스트	모바일 반응형 확인	모바일 반응형 확인	접근성 + 호환성 체크 용도로 보조적으로 사용
진짜 기기 기반 테스트 → 정확함	모바일/태블릿/데스크탑 여러 화면 동시 확인 가능	무료 + 빠르게 모바일 반응형 확인	WebP 지원 여부 CSS 지원 여부 등 한눈에 보기 좋음
PC, 모바일, 다양한 브라우저 버전 실시간 테스트	웹접근성 체크 기능 포함	여러 화면 사이즈 동시에 확인 가능 브라우저 종류별은 아니지만 반응형 확인에 최적

---

크롬 기준 사용법

웹사이트 열기
키보드 F12 또는 마우스 오른쪽 → “검사(Inspect)” 클릭

→ 화면 우측에 개발자 도구 창 열림

탭이름	기능설명
Elements	HTML구조 확인 + CSS 실시간 수정 가능
Console	오류 메시지 확인 /  JavaScript실행
Network	페이지 로딩 속도 /  이미지 용량 확인
Sources	자바스크립트 파일 구조 확인
Lighthouse	웹접근성, SEO, 성능 점수 자동 검사
Performance	로딩 속도 자세히 측정
개발자 도구(F12) → 휴대폰 아이콘 클릭	모바일 반응형 확인

 

여러 브라우저 테스트

→ 한 번에 여러 브라우저에서 사이트 테스트하고 싶다면?

BrowserStack	여러 브라우저에서 실시간 테스트 가능 (유로)
LambdaTest	무료 체험 가능
Responsively App	무료 반응형 테스트 도구

 

접속한 사용자의 브라우저 정보 확인

→ 내 웹사이트에 접속한 사용자 브라우저 종류 확인

js

console.log(navigator.userAgent);

 

→ 개발자 도구 Console 탭에 붙여넣으면 사용자 브라우저 정보 출력됨.

반응형(모바일) 확인

→ 개발자 도구(F12) → 상단 휴대폰 아이콘 클릭 → 모바일 화면 미리보기 가능

---

웹접근성

axe DevTools	https://www.deque.com/axe/	크롬 확장 프로그램 / 정확하고 개발자용 강추	개발자 도구(F12) → axe → 분석 → 코드 위치, 해결 방법 제공
WAVE	https://wave.webaim.org/	시각적으로 오류 표시 / 매우 쉬움	사이트 주소 입력 → 클릭 한 번으로 문제 확인 오류 부분 빨간색으로 표시됨
Lighthouse	크롬 개발자도구 → "Lighthouse" 탭	크롬 내장 → 성능 + 접근성 + SEO 점수까지 제공	추가 성능/SEO 점수까지 보기
K-WAH (한국형)	https://www.wah.or.kr/AIS/main.jsp	국내 웹접근성 표준에 맞춘 도구 (한국지능정보사회진흥원)	한국 웹접근성 품질인증 준비 시 필수 자동 검사 + 수동 체크 항목 제공
Accessibility Insights	https://accessibilityinsights.io/	Microsoft 제작 / 화면 흐름도 검사 지원