David Dias

좁은 화면이나 브라우저 확대 시 생기는 가로 스크롤을 CSS 너비와 줄바꿈 설정에서 점검합니다. 원인이 되는 요소를 찾아 본문과 이미지가 화면 안에 들어오도록 수정을 돕습니다.

• 스마트폰 화면의 가로 스크롤을 수정할 때
• 400% 확대 시 화면 배치를 확인할 때
• 긴 URL과 이미지의 넘침을 점검할 때

화면 문구와 조작 안내에서 장애, 성별, 문화에 대한 고정관념이나 사용자를 탓하는 표현을 찾아 중립적이고 건설적인 대안을 제안합니다.

• 화면 문구의 배제적 표현을 점검합니다
• 사용자를 탓하는 오류 문구를 고칩니다
• 성별을 전제하지 않는 표현을 고릅니다

페이지 로딩 중 발생하는 HTTP 요청을 세고 실측으로 지연 원인을 확인합니다. 줄일 수 있는 요청을 찾아 파일 통합과 초기 표시 자원 삽입 등의 개선안을 제시합니다.

• 페이지 초기 표시 지연 원인 조사
• 이미지와 CSS의 불필요한 요청 확인
• 파일 통합과 아이콘 묶기 검토

웹페이지의 iframe과 frame에 내용을 설명하는 제목이 있는지 점검합니다. 누락되거나 설명이 부족한 제목을 찾아 화면 읽기 프로그램 사용자가 삽입된 내용을 쉽게 식별하도록 수정을 돕습니다.

• 삽입된 광고와 소셜 미디어 위젯의 제목을 확인할 때
• iframe의 title 누락이나 빈 값을 찾을 때
• 화면 읽기 프로그램으로 프레임 식별을 확인할 때

이미지 대체 텍스트의 ‘이미지’, ‘사진’ 같은 불필요한 표현과 주변 문장과의 중복을 점검합니다. 스크린 리더에서 의미가 전달되도록 간결한 설명으로 수정합니다.

• 이미지 대체 텍스트 점검
• 캡션과 중복되는 설명 줄이기
• 수정 후 낭독 결과 확인

로그인 없이 열리는 공개 폼의 봇 방어를 점검합니다. CAPTCHA와 숨김 입력란, 제출 횟수 제한을 확인하고 CAPTCHA 도입과 서버 측 토큰 검증 추가를 지원합니다.

• 문의 폼의 스팸 제출 방지
• 회원 가입과 로그인 폼의 봇 방어 점검
• CAPTCHA의 서버 측 토큰 검증 확인

드래그 앤 드롭을 키보드와 스크린 리더로도 사용할 수 있는지 점검합니다. 실제 출력된 HTML을 바탕으로 대체 조작과 상태 안내를 보완합니다.

• 드래그 조작의 키보드 지원 확인
• 스크린 리더의 상태 안내 확인
• 실제 출력된 HTML 점검

프로젝트 외부 패키지의 알려진 취약점을 조사하고 업데이트, 수정, 교체를 돕습니다. 지속적인 검사를 위한 CI 설정과 의존성 버전 고정도 지원합니다.

• 운영 배포 전 의존성 점검
• 패키지 취약점 보고에 대응
• CI에 의존성 자동 검사 추가

JavaScript의 코드 불러오기와 내보내기를 점검하고 CommonJS에서 import/export로 전환하도록 돕습니다. 브라우저 실행 경로와 수정 후 검증 방법도 확인합니다.

• require()를 import로 변환
• module.exports에서 전환
• 브라우저의 모듈 로딩 점검

텍스트가 없는 링크, 이름 없는 아이콘 링크, 끊어진 링크를 점검합니다. 설명과 화면 낭독용 이름을 보완하고 링크를 수정해 이동할 곳을 알 수 있게 합니다.

• 페이지의 빈 링크를 찾을 때
• 아이콘 링크에 이동 위치 설명을 추가할 때
• 끊어진 링크를 점검하고 수정할 때

폼, API 요청, 브라우저 저장 데이터를 점검해 기능에서 사용하지 않는 개인정보를 찾습니다. 불필요한 수집의 삭제와 익명화, 로그 유입 방지, 보관 기간 검토를 돕습니다.

• 폼에서 수집하는 개인정보 검토
• 분석 데이터와 로그의 개인정보 점검
• 브라우저 저장 정보와 보관 기간 확인

Flexbox의 가로·세로 배치에서 글자 넘침과 항목 너비 불일치를 확인하고 간격 및 늘어남·줄어듦 설정을 수정합니다. 화면 너비와 조작 상태별 표시도 점검합니다.

• 가로 배치의 글자 넘침 수정
• 항목을 같은 너비로 맞추기
• 항목 간격을 gap으로 통일

키보드 조작 시 현재 선택 위치를 보여 주는 포커스 표시를 점검합니다. 윤곽선이 사라지거나 잘리거나 어긋난 부분을 찾아 잘 보이는 CSS로 수정하도록 돕습니다.

• 키보드 조작 중 선택 위치 확인
• 윤곽선을 제거한 CSS 검토
• 포커스 테두리 잘림과 위치 오류 수정

광고 차단기가 알림이나 동의 화면을 숨기는 원인을 조사합니다. 오탐지되기 쉬운 HTML 클래스명과 ID를 검토하여 레이아웃과 조작 문제를 개선합니다.

• 광고 차단기로 사라지는 알림 조사
• 쿠키 동의 화면의 숨김 여부 확인
• HTML 클래스명과 ID 점검

렌더링된 HTML에서 ARIA 속성이 참조하는 ID의 중복을 확인합니다. 잘못 읽히는 레이블과 설명의 원인을 찾아 ID와 참조 수정 및 검증 방법을 안내합니다.

• 화면 읽기 프로그램의 레이블 오류를 조사합니다
• 반복 배치한 구성 요소의 ID 중복을 점검합니다
• 디자인 시스템의 ARIA 참조를 확인합니다

고정 헤더와 배너가 키보드로 선택한 컨트롤을 가리는지 점검합니다. 확대 화면과 모바일 배치도 확인하고, 컨트롤이 보이도록 여백과 스크롤 수정을 지원합니다.

• 고정 헤더 주변의 키보드 조작 확인
• 배너와 채팅 창을 연 상태에서 동작 점검
• 확대 화면과 모바일 배치의 겹침 확인

링크, 버튼, 입력란의 ID 중복을 찾아 수정할 위치와 확인 방법을 안내합니다. 키보드 조작, 스크린 리더 탐색, 포커스에 미치는 영향도 점검합니다.

• 폼의 ID 중복을 확인합니다
• 예상하지 못한 포커스 이동을 조사합니다
• 공통 조작 컴포넌트를 검토합니다

웹 페이지에서 내용이 없거나 공백만 있는 제목을 찾아 설명 문구 추가 또는 불필요한 태그 삭제를 안내하고, 스크린 리더로 탐색할 수 있는 문서 구조를 정리하는 스킬입니다.

• 웹 페이지의 빈 제목 찾기
• 꾸밈 목적으로 제목을 쓰는 컴포넌트 점검
• 스크린 리더의 제목 탐색 확인

프런트엔드 점검 항목에 맞는 npm 패키지를 찾고 다운로드 수와 최근 배포 시점 등의 조건을 확인해, 적합한 패키지 이름을 규칙 파일의 메타데이터에 추가합니다.

• 점검 항목에 npm 패키지 참조 추가
• 다운로드 수와 배포 시점으로 후보 선별
• 문제 탐지·수정·테스트용 도구 검색

Audit how quickly a page shows its first text or image. Use performance measurements to identify blocking resources, slow server responses, and rendering delays, then recommend changes tied to the confirmed bottlenecks.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Investigating slow initial page display
• Finding CSS and JavaScript that delay rendering
• Reviewing loading performance with measurements

아랍어처럼 오른쪽에서 왼쪽으로 읽는 언어와 문자 방향이 섞인 게시물을 점검하고 HTML 방향 설정, 표시 및 읽기 순서와 화면 배치 수정을 돕습니다.

• 아랍어와 히브리어 페이지 점검
• 문자 방향이 섞인 이름과 게시물 처리
• 탐색 메뉴와 아이콘의 좌우 반전 확인

용어와 설명을 나타내는 HTML 구조를 점검하고 단독으로 쓰인 dt와 dd를 dl로 묶도록 돕습니다. 보조 기술이 두 요소의 관계를 인식하는지 확인하는 방법도 안내합니다.

• 용어집의 HTML 구조 점검
• 항목 이름과 값을 나열하는 표시 검토
• dl 밖에 있는 dt와 dd 수정

장식용 이미지와 아이콘이 스크린 리더에서 불필요하게 읽히는지 점검합니다. 빈 alt와 aria-hidden을 확인하고 실제 문제가 있는 요소의 수정을 돕습니다.

• 장식 이미지의 불필요한 낭독 점검
• SVG와 아이콘의 낭독 확인
• 공통 장식 컴포넌트 점검

웹 글꼴의 로딩을 점검해 글자가 보이지 않는 시간과 레이아웃 이동을 조사합니다. 측정 결과에 따라 대체 글꼴 표시, 중요 글꼴 미리 로드, 글꼴 형식 검토를 돕습니다.

• 로딩 중 글자가 보이지 않는 원인 조사
• 글꼴 전환에 따른 레이아웃 이동 점검
• 대체 글꼴 표시와 미리 로드 설정