단일 페이지 애플리케이션의 페이지 제목 및 A11y(특히 React 및 Vue)

(React 구현만 자세히 설명한 이 게시물의 버전은 원래 Up Your A11y: Handling Page Titles in React에 게시되었습니다)

페이지 제목이 접근성에 중요한 이유는 무엇입니까?

이에 대한 짧은 대답은 사용자가 페이지 콘텐츠를 입력하거나 탐색하지 않고도 페이지 제목을 즉시 사용할 수 있다는 것입니다. 접근성이 의미하는 바를 이해하려면 지금 스크린 리더를 켜보십시오(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 고려해주세요🙂