페이지에 새 콘텐츠가 추가될 때마다 사용자가 해당 콘텐츠에 작업을 수행할 수 있도록 사용자의 포커스가 콘텐츠로 이동하도록 합니다.
수동으로 테스트하는 방법
단일 페이지 앱은 특히 사용자의 새로운 콘텐츠에 대한 관심을 관리하는 데 있어서 테스트가 중요합니다.
일반적으로 단일 페이지 앱에서는 링크를 클릭해도 하드 새로고침이 발생하지 않습니다.
대신 경로 변경 시 <main> 콘텐츠 영역의 새 데이터가 가져옵니다.
스크린 리더 또는 기타 보조 기술을 사용하여 탐색하는 사용자는 새 콘텐츠가 페이지에 추가되었는지 모를 수 있습니다.
<main> 영역으로 다시 이동해야 한다는 표시가 없습니다.
이 경우 사용자가 인식하는 컨텍스트를 사이트의 시각적 콘텐츠와 동기화된 상태로 유지하는 것이 좋습니다.
해결 방법
페이지의 최신 콘텐츠에 사용자의 포커스를 관리하려면 새로 로드된 콘텐츠에서 적절한 제목을 찾아 포커스를 그쪽으로 유도합니다.
이를 실행하는 가장 쉬운 방법은 제목에 tabindex -1를 지정하고 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>
보조 기술은 새 제목과 제목이 포함된 주요 랜드마크 영역을 알려줍니다.