Iostope
Isotope is a Javascript library for creating and filtering masonry and grid layouts.
We can hook into Isotope's filtering function so that it gives appropriate feedback to non sighted users. Once the filter is complete, we append the number of found items to a #results
div and give it focus. This div can be hidden from sighted users with .screen-reader-text
.
Visible items are given a tabindex
attribute so that the user can navigate the results.
Instructions for using the filter tool can be provided in a div.screen-reader-text
.
$container.on( 'arrangeComplete', function( event, filteredItems ) { $('#results').html(filteredItems.length + ' items found.'); $('#results').attr('tabindex','-1').focus(); $('.element-item').removeAttr('tabindex'); for (var i=0; i<filteredItems.length;i++) { $(filteredItems[i].element).attr('tabindex',0); } });
Filtering Demo
Use tab and enter to select a filter. Then use tab to navigate between results.