단일 페이지 애플리케이션의 페이지 제목 및 A11y(특히 React 및 Vue)
페이지 제목이 접근성에 중요한 이유는 무엇입니까?
이에 대한 짧은 대답은 사용자가 페이지 콘텐츠를 입력하거나 탐색하지 않고도 페이지 제목을 즉시 사용할 수 있다는 것입니다. 접근성이 의미하는 바를 이해하려면 지금 스크린 리더를 켜보십시오(Mac을 사용하는 경우 Cmd + F5를 누르면 VoiceOver가 켜짐 및 꺼짐으로 전환됨).
이 페이지의 제목은 다른 관련 브라우저 정보와 함께 즉시 귀하에게 공지됩니다. 다른 탭이 열려 있는 경우 탭을 이동하거나 클릭하여 해당 탭에 찾고 있는 콘텐츠가 포함되어 있는지 여부를 이해하는 데 제목이 얼마나 유용한지 확인합니다.
간결하고 설명이 포함된 페이지 제목은 콘텐츠를 스크린 리더 사용자에게 표시하는 데 중요할 수 있습니다.
페이지 제목을 지정하는 방법
W3C에는 이에 대한 몇 가지 우수한simple tips이 있으며 아래에 요약되어 있습니다.
각 웹페이지의 제목은 다음과 같아야 합니다.
제목이 다음과 같은 경우에도 도움이 될 수 있습니다.
또한 일반적으로 가장 중요하고 구체적인 정보가 먼저 오는 것이 좋습니다.
Page Titles in Single Page Applications: DEV Community
대신:
DEV Community: Page Titles in Single Page Applications
페이지 제목 및 단일 페이지 애플리케이션
단일 페이지 애플리케이션(예: React 및 클라이언트 측 렌더링 Vue 앱)에서 페이지 제목은 특별히 관리되지 않는 한 변경되지 않습니다. 이렇게 하면 사용자가 콘텐츠를 입력하거나 읽지 않고도 현재 보고 있는 페이지에 대한 단서가 거의 없습니다. 하지만 좋은 소식은 제목을 쉽게 관리할 수 있는 간단한 방법이 있다는 것입니다.
React에서 페이지 제목 관리
React 앱의 경우 React Document Title 구성 요소를 간단히 구현할 수 있습니다.
앱의 각 페이지에 대해 렌더링된 구성 요소를 DocumentTitle 구성 요소에 래핑하고 페이지 제목을 전달하기만 하면 됩니다.
class ExamplePage extends React.Component {
render() {
return (
<DocumentTitle title="Example Title: Example Website Name">
<main>
...
</main>
</DocumentTitle>
);
}
}
필요한 경우 구성 요소 상태의 속성에 페이지 제목을 연결할 수도 있습니다. 구성 요소가 마운트될 때 API 또는 다른 곳에서 페이지 제목을 로드해야 하는 경우.
class ExamplePage extends React.Component {
constructor(props) {
super(props);
this.state = {
pageTitle: 'Loading Topics: Example Website Name',
}
}
componentDidMount() {
// Complete any tasks you need to complete before
// establishing page title
this.setState({ pageTitle: 'Topics: Example Website Name' });
}
render() {
const { pageTitle } = this.state;
return (
<DocumentTitle title={pageTitle}>
<main>
...
</main>
</DocumentTitle>
);
}
}
Vue에서 페이지 제목 관리
Vue-Router를 사용하면 라우터 위치가 변경될 때마다 페이지 제목을 관리하는 간단한 후크를 추가할 수 있습니다. 먼저 메타 데이터의 각 경로에 대한 페이지 제목을 구성해야 합니다. 예를 들면 다음과 같습니다.
{
path: '/',
name: 'Home',
meta: {
title: 'Home: MyApp',
},
}
페이지 제목이 경로 자체의 일부 정보에 따라 달라지는 경우 다음과 같이 수정할 수 있습니다.
{
path: '/',
name: 'Home',
meta: {
title: route => {
/* return custom title based on route/store/whatever */
},
},
}
이제 페이지 제목이 구성되었으므로 경로가 변경된 후 제목이 업데이트되도록 vue-router에 몇 가지 코드를 추가하기만 하면 됩니다.
이것은 라우터에 대한 afterEach 작업을 다음과 같이 정의하여 수행할 수 있습니다.
router.afterEach((to, from) => {
Vue.nextTick(() => {
document.title = to.meta.title(to)
})
})
AfterEach 콜백에서 직접 페이지 제목을 설정하는 대신
Vue.nextTick()
가 사용됩니다. 이는 라우터 탐색이 완료된 후에만 페이지 제목이 업데이트되도록(브라우저 기록 업데이트 포함)하여 브라우저 기록이 페이지 제목과 일치하도록 유지하기 위한 것입니다.간단하고 효과적인
여기에서 두 가지 인기 있는 프레임워크에 대한 몇 가지 기본 구현을 자세히 설명했지만 다른 단일 페이지 앱 프레임워크에 대한 구현이 있는 경우 아래에 자유롭게 의견을 말하십시오!
위에서 볼 수 있듯이 페이지 제목 관리를 구현하는 단계는 매우 간단할 수 있지만 그렇게 하면 영향이 상당합니다. 이름이 잘 지정된 페이지 제목은 전체 범위의 사용자가 앱을 탐색하는 데 도움이 될 뿐만 아니라 페이지에 전문적인 모양과 느낌을 제공합니다.
이 게시물이 유용하셨나요? 계속해서 콘텐츠를 만들 수 있도록 buying me a coffee 고려해주세요🙂
Reference
이 문제에 관하여(단일 페이지 애플리케이션의 페이지 제목 및 A11y(특히 React 및 Vue)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/s_aitchison/page-titles-and-a11y-in-single-page-applications-esp-react-vue-4ok8텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)