[wp-trac] [WordPress Trac] #40330: Reconsider the usage of infinite scrolling across the admin

[WordPress Trac]

#40330: Reconsider the usage of infinite scrolling across the admin
-------------------------------------------+-----------------------------
 Reporter:  afercia                        |      Owner:
     Type:  defect (bug)                   |     Status:  new
 Priority:  normal                         |  Milestone:  Awaiting Review
Component:  Administration                 |    Version:
 Severity:  normal                         |   Keywords:  a11y-task
  Focuses:  ui, accessibility, javascript  |
-------------------------------------------+-----------------------------
 As accessibility team, we've often discussed and we're aware of some a11y
 issues in the WordPress admin but haven't formalized them in a Trac ticket
 yet. That's because they're general, broad, issues and they probably can't
 be solved soon, as they have a big impact on the way some relevant parts
 of the user interface are built. They would require some extensive
 discussion and research. Nevertheless, if we're not going to at least open
 a discussion, the solution is not going to happen 🙂 . During the last
 accessibility weekly meeting we've decided to open a series of tickets and
 use a special keyword to group them, something like `a11y-task`. This is
 the first ticket of the series.

 Infinite scrolling (sometimes known as "endless scrolling") can be a
 serious accessibility barrier. It's used in the admin in a few places, for
 example:

 - Media Grid
 - Add Themes screens
 - Customizer > Add menu items
 - Editor > Insert/Edit link > Search
 - any other places?

 For a comprehensive view of all the potential issues, I'd refer to the
 list of resources below. I'd recommend everyone to have a look at those
 posts.

 I'd say the issues can be grouped in three different categories:
 accessibility, usability, and performance. Just to mention some of the
 most relevant ones:

 - a11y: it's impossible or very hard for keyboard users to reach content
 placed after an infinite scrolling region: think for example at the Media
 Grid, where tabbing through attachments loads more and more attachments
 (potentially hundreds or thousands of them) forcing users to keep tabbing
 indefinitely
 - a11y: no audible feedback or instructions about how infinite scrolling
 works, the current and total number of items, or when new items get loaded
 - usability: infinite scrolling often breaks the browser's history
 - usability: there's no JS fallback
 - performance: memory footprint can be huge, especially when loading
 hundreds of big images, see the Theme install screens


 Resources mostly focused on accessibility:

 http://adrianroselli.com/2014/05/so-you-think-you-built-good-infinite.html
 http://simplyaccessible.com/article/infinite-scrolling/
 http://www.webaxe.org/infinite-scrolling-and-accessibility/
 http://www.ssbbartgroup.com/blog/infinite-scrolling-impact-on-assistive-
 technologies-series-1/

 Resources mostly focused on usability:

 https://webmasters.googleblog.com/2014/02/infinite-scroll-search-
 friendly.html
 https://www.nngroup.com/articles/infinite-scrolling/
 https://www.sitepoint.com/ux-infinite-scroll-good-bad-maybe/
 http://www.webdesignerdepot.com/2015/11/how-infinite-scrolling-breaks-ux/
 https://www.smashingmagazine.com/2016/03/pagination-infinite-scrolling-
 load-more-buttons/
 https://www.smashingmagazine.com/2013/05/infinite-scrolling-lets-get-to-
 the-bottom-of-this/

 Resources focused on memory footprint:

 http://engineering.linkedin.com/linkedin-ipad-5-techniques-smooth-
 infinite-scrolling-html5
 https://www.sencha.com/blog/the-making-of-fastbook-an-html5-love-story/
 http://dannysu.com/2012/07/07/infinite-scroll-memory-optimization/

 Maybe for the future: the ARIA role `feed`
 https://www.w3.org/TR/wai-aria-1.1/#feed
 (at the time of writing, ARIA 1.1 is still a Candidate Recommendation, and
 as far as I know, no assistive technologies support the role `feed`)
 See also: http://www.ssbbartgroup.com/blog/differences-aria-1-0-1-1
 -additions-role/

 See #19815, #28927, #28998.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/40330>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform