대화상자를 여는 동작부터 살펴보세요
저장된 프로젝트의 이름을 바꾸는 대화상자를 생각해 보세요. 키보드로 실행 버튼에 도달해 활성화하세요. 레이블이 동작을 설명하는지, 대화상자에 목적을 알려 주는 접근 가능한 이름이 있는지 확인하세요. 패널이 눈에 잘 보여도 이런 관계가 없으면 이해하기 어려울 수 있습니다.
초기 포커스는 콘텐츠에 맞춰야 합니다. 이름만 바꾸는 짧은 대화상자는 입력란에 포커스를 둘 수 있지만, 긴 대화상자는 먼저 읽기 맥락을 파악하게 해야 할 수 있습니다. 모든 디자인에서 첫 번째 버튼에 포커스를 두는 것이 적절하다고 가정하지 마세요.
대화상자 안에서 포커스를 따라가세요
모달 대화상자가 활성화된 동안 배경 콘텐츠는 계속 상호작용할 수 없어야 합니다. 포커스를 앞뒤로 이동해 보고, 가려진 페이지로 빠져나가지 않고 모달 안에 머무는지 확인하세요.
스크린샷만으로는 이런 동작을 확인할 수 없습니다. 대화상자를 명확하게 닫는 방법을 포함해 실제 상호작용을 살펴보세요. 구현 지침으로 W3C 대화상자 패턴을 참고하고, 전체 페이지 맥락에서 관련 접근성 요구사항을 평가하세요.
제출에 실패하는 경우를 시도하세요
프로젝트 이름을 비워 둔 채 제출해 보세요. 사용자가 설명을 찾고 다른 유효한 작업을 잃지 않으면서 해당 입력란으로 돌아갈 수 있나요? 오류는 무엇을 수정해야 하는지 설명해야 합니다. 빨간 테두리만으로는 안내가 되지 않습니다.
삭제처럼 되돌리기 어려운 동작은 맥락 속에서 레이블을 읽어 보세요. “프로젝트 삭제”는 “확인”보다 더 많은 정보를 전달합니다. 경고 색상에만 의존하지 말고 문구, 포커스 위치, 취소 방법이 모두 신중한 결정을 돕도록 하세요.
합리적인 위치로 돌아오게 하세요
이름 변경 대화상자를 닫은 뒤에는 보통 대화상자를 연 컨트롤로 포커스가 돌아가야 합니다. 동작으로 그 컨트롤이나 프로젝트 자체가 삭제됐다면 사용자가 계속 진행할 수 있는 논리적인 위치를 선택하세요. 페이지 맨 앞으로 포커스를 보내면 완료된 동작 직후 사용자가 방향을 잃을 수 있습니다.
검토한 순서를 기록하세요. 열기, 탐색, 잘못된 내용 제출, 복구, 완료, 돌아오기를 포함합니다. 이렇게 하면 기본 화면이 올바르게 보인다는 이유만으로 대화상자가 접근 가능하다고 두루뭉술하게 주장하는 대신 구체적인 상호작용 결과를 남길 수 있습니다.