새 콘텐츠가 페이지에 추가될 때마다 사용자가 작업을 실행할 수 있도록 사용자의 포커스가 해당 콘텐츠로 이동하도록 하세요.
수동 테스트 방법
단일 페이지 앱은 특히 새 콘텐츠에 대한 사용자의 집중력을 관리하는 경우 테스트하는 것이 중요합니다.
일반적으로 단일 페이지 앱에서는 링크를 클릭해도 강제로 새로고침되지 않습니다.
대신 경로 변경은 <main> 콘텐츠 영역의 새 데이터를 가져옵니다.
일반 사용자에게는
이 방법이 적합합니다.
하지만 스크린 리더나 기타 보조 기술을 사용해 탐색하는 사용자는 새 콘텐츠가 페이지에 추가되었는지 알지 못할 수 있습니다.
<main> 영역으로 다시 이동해야 한다는 징후는 없습니다.
이 경우 사용자의 포커스를 관리하여 사용자가 인지한 컨텍스트가 사이트의 시각적 콘텐츠와 동기화된 상태를 유지하는 것이 좋습니다.
해결 방법
페이지의 새로운 콘텐츠에 대한 사용자의 포커스를 관리하려면 새로 로드된 콘텐츠에서 적절한 제목을 찾아 포커스를 맞춥니다.
이를 실행하는 가장 쉬운 방법은 제목에 -1의 tabindex를 지정하고 focus() 메서드를 호출하는 것입니다.
<main>
<h2 tabindex="-1">Welcome to your shopping cart</h2>
</main>
<script>
// Assuming this gets called every time new content loads...
function onNewPage() {
var heading = document.querySelector('h2');
heading.focus();
// You can also update the page title :)
document.title = heading.textContent;
}
</script>
보조 기술은 새로운 제목과 여기에 포함되는 주요 랜드마크 영역을 발표합니다.
접근성을 위한 포커스 관리도 참고하세요.