피드 예제

참고: feed 역학(role) WAI-ARIA 1.1에서 도입 된 새로운 WAI-ARIA 기능입니다. 이 페이지는 피드 컴포넌트의 제안된 구현을 제공합니다. 이 제안은 아직 ARIA Practices Task Force의 합의가 없습니다. issue 565로 피드백을 환영합니다.

아래 예제는 음식점 리뷰 사이트에 대한 피드 설계 패턴을 구현합니다. 무한 스크롤 데이터 세트를 모방하기 위해, 사용자가 피드를 읽을 때 열 개 음식점에 대한 정보가 반복해서 로드됩니다. 피드 외부에서, 게시글 로드 시간 선택기를 사용하여 데이터 가져오기 지연 시간을 시뮬레이션 할 수 있습니다.

WAI-ARIA 작성 방법의 다른 예제와 달리, 예제 체험은 이 문서 페이지와 분리된 자체 페이지에 있습니다.

예제

예제 피드 체험은 별도의 피드 진열 페이지에 표시됩니다.

키보드 지원

키 기능
Page Down 초점을 다음 게시글로 이동시킵니다.
Page Up 초점을 이전 게시글로 이동시킵니다.
Control + End 피드 이후 첫 번째 초점을 얻을 수 있는(focusable) 엘리먼트로 초점을 이동시킵니다.
Control + Home 패드 이전 첫 번째 초점을 얻을 수 있는(focusable) 엘리먼트로 초점을 이동시킵니다.

Role, Property, State, Tabindex 어트리뷰트

역할(role) 어트리뷰트 엘리먼트 사용법
feed div
  • 피드 게시글 세트를 포함하는 엘리먼트를 식별시킵니다.
  • 피드 엘리먼트는 초점을 얻을 수(focusable) 없는 구조적 컨테이너 입니다.
aria-labelledby="IDREF" div 피드 엘리먼트에 대한 접근 가능한 이름을 제공합니다.
aria-busy="true" div
  • 추가 게시글을 로딩하는 프로세스 동안 설정됩니다.
  • 게시글 로딩 프로세스가 완료될 때 제거됩니다.
  • 보조기술이 로드 프로세스가 진행되는 동안 DOM 변경을 무시하고 DOM이 안정될 때 렌더링할 수 있게 합니다.
article div
  • 피드 게시글에 대한 콘텐트를 포함하는 엘리먼트를 식별시킵니다.
  • 피드 게시글과 콘텐트는 JavaScript로 동적으로 생성됩니다.
tabindex="0" div
  • 게시글 엘리먼트를 초점을 얻을 수 있게(focusable) 만들고 페이지 Tab 시퀀스에 포함시킵니다.
  • 사용자가 읽을 때, 피드는 각 초점 위치나 스크롤 위치를 기준으로 추가 게시글을 로드합니다.
  • 보조 기술은 게시글이 보조 기술 읽기 커서가 DOM 초점을 가지거나 포함하는지 확인하여 새 게시글이 로드되고 시각적으로 올바르게 배치되게 할 수 있습니다.
aria-labelledby="IDREF_LIST" div
  • 게시글 내의 구별되는 레이블을 제공하는 하나 이상의 엘리먼트를 식별시킵니다.
  • 이 예제에서, 음식점 이름이 각 게시글을 식별시킵니다.
  • 참고:피드의 특성으로 인해, 레이블이 고유하지 않은 경우가 있습니다.
aria-describedby="IDREF_LIST" div
  • 게시글의 주요 콘텐츠를 제공하는 에리먼트 목록을 참조합니다.
  • 모든 게시글에 똑같이 반복되는 엘리먼트를 포함시키지 마세요, 예를 들어, "북마크" 버튼을 포함시키지 마세요.
  • 보조 기술 사용자가 피드를 훓어볼 수 있게 합니다.
aria-posinset="INTEGER" div
  • 피드 내 게시글 위치를 나타냅니다.
  • 번호 매기기는 1부터 시작합니다.
  • 참고: 게시글이 피드의 시작부분에 추가된다면, 모든 게시글은 번호가 다시 매겨집니다.
aria-setsize="INTEGER" div 피드 엘리먼트에 포함 된 현재 총 게시글 수로 설정하세요.

Javascript와 CSS 소스 코드

다음 Javascript와 CSS는 feedDisplay.html 페이지에 사용됩니다:

HTML Source Code

feedDisplay.html를 열고 소스를 보세요.