David Dias

접이식 아코디언을 키보드와 화면 읽기 프로그램으로 이용할 수 있도록 버튼, 펼침 상태 속성, 제목 구조와 최종 출력된 HTML을 점검하고 수정합니다.

• 접이식 영역의 키보드 조작 확인
• 화면 읽기로 펼침 상태 전달
• 공통 아코디언 컴포넌트 검토

HTML에서 더 이상 권장되지 않는 ARIA 역할과 직접 쓰면 안 되는 추상 역할을 찾고, 권장 역할이나 기본 HTML 요소로 바꾸는 방안을 검토합니다.

• 기존 코드의 사용 중단 권고 역할을 찾습니다
• 기본 HTML로 대체할 방안을 검토합니다
• 공통 UI 구성 요소의 역할을 점검합니다

JavaScript에서 문자열을 코드로 실행하는 부분을 찾습니다. eval()과 문자열을 전달한 타이머 등을 점검하고 용도에 맞는 대체 방법으로 수정을 돕습니다.

• eval() 등 문자열 실행 부분 찾기
• JSON 분석에 쓰는 eval() 대체
• 문자열 타이머를 함수 참조로 변경

이미지의 alt 속성 누락과 모호한 설명을 점검합니다. 장식 이미지, 링크 이미지, 글자가 있는 이미지와 도표에 맞게 대체 텍스트를 다듬어 화면 낭독으로도 의미를 전달합니다.

• 누락되거나 모호한 대체 텍스트를 찾습니다
• 장식 이미지와 정보 이미지를 구분합니다
• 링크 이미지의 연결 대상을 설명합니다

글과 블로그의 작성자 이름, 직책, 프로필 링크를 점검합니다. 실제 페이지와 HTML을 바탕으로 작성자 정보를 다듬어 누가 쓴 내용인지 알 수 있도록 돕습니다.

• 블로그의 작성자 정보 점검
• 작성자 이름·직책·프로필 링크 추가
• 생성된 HTML의 작성자 정보 검토

폼 오류, 완료 알림, 실시간 업데이트가 스크린 리더로도 전달되도록 실제 표시되는 HTML 속성, 표시 시간, 알림을 닫는 조작을 점검합니다.

• 폼 오류가 읽히는지 확인합니다
• 완료 알림의 표시 시간을 검토합니다
• 실시간 알림을 점검합니다

사이트의 목적과 운영자를 소개하는 페이지를 점검하거나 작성합니다. 조직의 역사, 사명, 전문성, 연락처를 확인하고 실제 페이지 출력에서 정보 누락을 찾습니다.

• 기존 사이트 소개 페이지 점검
• 조직과 사명을 소개하는 페이지 작성
• 페이지 출력의 운영자 정보 확인

버튼, 링크, 메뉴 항목의 낭독 이름이 조작 목적을 전달하는지 점검합니다. 접근 가능한 이름이 없는 요소를 찾아 수정 방법과 브라우저 검증 절차를 제시합니다.

• 버튼과 링크의 레이블 점검
• 디자인 시스템의 접근성 검토
• 레이블 수정 후 화면 읽기 프로그램 출력 확인

글 페이지의 구조화 데이터를 점검하고 제목, 이미지, 게시일, 작성자 등을 확인합니다. Article 형식의 JSON-LD 추가와 실제 제공되는 페이지의 검증을 돕습니다.

• 블로그 글의 구조화 데이터 점검
• Article 형식의 JSON-LD 추가
• 제목·이미지·게시일·작성자 누락 확인

화면의 HTML에서 role="text" 안에 있는 링크와 버튼을 찾습니다. 화면 읽기 프로그램이 조작 요소를 인식하지 못하는 문제의 수정과 키보드 조작 확인을 지원합니다.

• 텍스트 안의 링크와 버튼 점검
• 화면 읽기에서 누락되는 조작 요소 조사
• 디자인 시스템의 접근성 확인

메뉴 항목과 탭 등의 ARIA 역할이 필요한 부모 역할 안에 있는지 점검합니다. 화면 읽기 프로그램의 그룹 인식과 조작 문제를 조사하고 수정안을 제시합니다.

• 메뉴 항목에 필요한 부모 역할 확인
• 탭과 목록 구조 점검
• 디자인 시스템 구성 요소 검토

웹사이트 이미지를 점검하고 압축 효율이 높은 AVIF 도입을 돕습니다. 크기와 로딩 방식도 확인하며 미지원 브라우저에 WebP나 JPEG를 제공하는 구성을 검토합니다.

• 사이트 사진에 AVIF를 도입할 때
• 미지원 브라우저에 WebP와 JPEG를 제공할 때
• 첫 화면 이미지의 크기와 로딩 방식을 점검할 때

Use when implementing product display cards for e-commerce.

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

Use when you need to display structured data in rows and columns.

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

Use when implementing enter and format tags.

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

Use when implementing enter and edit text content.

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

Use when you need to display key metrics and statistics.

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

Use when implementing multi-line text input for longer content.

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

Use when you need to inform users about important updates.

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

Use when implementing select a single option from a group.

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

Use when implementing show users that content is being loaded.

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

Use when you need to switch between different views.

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

Use when you need to display chronological events and activities.

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

Use when implementing enter time in a structured format.

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