Most of you would have heard that about infinite scrolling or auto scrolling widgets. the common examples could be that all social networking websites like Facebook, twitter, LinkedIn. Basically, what happens here is that Stories or articles within the feed keep on getting added or removed as user navigates in this social networking sites and this would never end and it is an infinite. let us understand how sighted user navigates this widget.
There is a scrolling feature available on this widget. user can scroll by using mouse and view more number of articles. For ex: there are 5 articles or stories, let us say 1 to 5, within the feed container on the page. When user scrolls, it displays next set of 5 articles or stories, let us say 6 to 10. When user scrolls again, it displays another set of 5 articles or stories, let us say 11 to 15.
However, when screen reader user navigates through this widget in the reading mode then he or she encounters only those first five articles or stories. When I say reading cursor or reading mode then navigation is through down arrow only. After navigating the 5th article, he or she navigates to the footer region or navigates to the whichever the content is present after this widget. User does not get the 6th article during arrow key navigation and this is a problem. In a nutshell, auto scrolling feature is not accessible in the reading mode or browse mode for the screen reader users.
In order to address this problem, aria 1.1 introduced the feed role. When feed role is applied then assistive technology and browser interact with each other and provides the best experience to the screen reader users while navigating the auto scrolling widget in reading mode. In other words, it enables the screen reader user to navigate through all the articles within the feed container in the reading mode or arrow key navigation.
Author notes
- Authors should use article role as children in feed
- Authors SHOULD make each article in a feed focusable
- Authors should provide brief label to each article in feed
- Authors should provide more description to the articles in feed by using aria-describedby
- Authors should set aria-busy while adding or removing the articles at either end of the list
- authors MAY specify aria-setsize on article elements if article supply is static
- authors MAY set aria-setsize to -1 if total number of articles is extremely large, indefinite, or changes often
Code snippet
<section role=”feed” id=”test”>
<article>This is article 1</article>
<div role=”article”>This is article 2</div>
</section>
References