This is part 4 of the Grid Series. We have a grid which has data loaded from an api, and is enabled with pagination, search and sort. We will now make changes so that these functionalities are accessible for everyone.

There are no excuses for omiting accessibility (a11y) in web apps in this day and age. The grid that we have built should be no different. Use the right semantic elements as much as possible and use CSS to make them look the way you want - e.g., do not use a div for a button. Our grid already has search functionality which is accessible. Now let's make the sorting and pagination accessible as well. The code for this is available here . Let me now begin with the breakdown.

... (rest omitted for brevity)