Feed

Feed Pattern

Feed is a section of a page that automatically loads new sections of content as the user scrolls

• 여기서 정의된 피드는 article 엘리먼트로 구성이 된 동적인 리스트

• 주로 무한 스크롤로 나오는 경우가 흔한 케이스

• 특이점은 피드는 유저 스크롤 시 데이터 로딩을 하는 유저 스크롤도 대응함

  • 기본적으로 보조기술은 피드 컨텐츠를 읽기 모드로 접근
  • 보통 보조기술 관점에서 버튼을 클릭하여 새로운 데이터를 로드 하는 UX가 기본
  • 하지만, 피드 같은 경우는 웹과 보조기술 간의 상호 운용성을 체결하기에 스크롤 인터렉션에 따라 보조기술이 피드 컨텐츠를 읽거나 새로운 컨텐츠를 로드하는 부분도 읽기 모드에서 가능하게끔 함

• 또한, 피드 패턴은 보조기술 사용자에게도 내용을 훓어 보는 것을 가능하게 함

• role=”feed”를 활용하여 무한 스크롤과 같은 스크롤 액션이나 다른 방법으로 동적으로 컨텐츠를 들고오는 경우에 웹 접근성 준수

• 추가적으로 아래에는 포함되어 있지 않지만 피드 같은 경우에는 키보드 인터렉션이 추가 되는 것을 공식 문서에서는 추천함

  • Page Down - 다음 아티클로 포커스 이동
  • Page Up - 이전 아티클로 포커스 이동
  • Control + End - 피드 다음으로 가장 첫번째 포커스가 가능한 엘리먼트로 이동
  • Control + Home - 피드 가장 직전으로 포커스가 가능한 엘리먼트로 이동