맥락을 보존하며 웹페이지 컨트롤 목록 만들기.
컨트롤 목록에는 맥락 속 레이블과 역할을 기록해야 합니다. 아이콘만 있는 버튼은 눈으로 뜻을 알 수 있어 보여도 접근 가능한 이름이 필요할 수 있습니다.
작업에 맞게 절차를 조정하세요.
정한 페이지 영역의 조작 가능한 컨트롤을 나열하고 가능한 경우 보이는 레이블, 접근 가능한 이름, 역할, 상태를 기록하세요. 반복되는 레이블을 해당 컨테이너와 연결하세요. 이름을 알아내려고 컨트롤을 누르지 말고 불확실한 동작은 나중에 검토할 사항으로 적으세요.
- 제공할 내용
- 렌더링된 페이지의 컨트롤.
- 받을 결과
- 버튼의 레이블, 유형, 보이는 상호작용 맥락.
입력과 결과를 확인하세요.
설명용 입력과 출력 · 실제 WebAct 실행이 아닌 학습용 예시
입력 항목 예시개
Supplied DOM: <button>Save draft</button> and <button><svg aria-hidden="true"></svg></button>. Second control visually uses a trash icon; no other naming attributes.
완성된 예시
Control 1: native button, visible and accessible name "Save draft". Control 2: native button, no accessible name in the supplied markup; decorative SVG does not provide one. Review: confirm the second action, then provide an accurate name such as Delete item if that is its actual function.
이 입력을 프롬프트에 넣고 WebAct에 복사해 작업을 실행해 보세요. 결과는 설명용 예시와 다를 수 있습니다.
판단 기준과 문제 해결.
버튼처럼 보이는 링크도 목록에 넣어야 하나요?
인터페이스를 검토할 때 넣되 링크라는 역할과 이동 목적지를 유지해 탐색과 행동을 구분하세요.
여러 ‘삭제’ 컨트롤을 결과에서 구별하기 어려운 이유는 무엇인가요?
주변 기록이나 섹션의 맥락이 빠졌기 때문입니다. 그 맥락을 더하고 접근 가능한 이름으로도 구분되는지 확인하세요.
직접 준비한 자료로 시도하세요.
작업 프롬프트의 예시를 내 자료로 바꾸세요. 필요한 요구 사항은 유지하고 작업을 WebAct에 복사하세요.
작업 맞춤 설정 및 복사 ↑