You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
'If you are going to use this in a new webpage, please review our <a href="table.php#sticky-header-example">Sticky Table Header Example</a> and decide which solution is better for your use-case.',
6
5
]); ?>
7
6
<?phpincludeStats([
8
-
"isNPM" => true,
9
-
"comment" =>
10
-
'There are NPM modules for both the <a href="sortable-table.php#npm-instructions">Sortable Table</a> and the <a href="pagination-table.php#npm-instructions">Pagination Table</a> Enable Scripts used in this demo.',
7
+
"isForNewBuilds" => false,
11
8
]); ?>
9
+
<?phpincludeStats(["isNPM" => true]); ?>
12
10
11
+
<p>
12
+
If you have a lot of data in a table that you want to present to the user in small, bite-sized chunks, you may want to
13
+
use a pagination UI element to do this. The solution presented below is accessible and works for keyboard and screen
14
+
reader users.
15
+
</p>
13
16
17
+
<p>
18
+
<strong>That said, it is a bit of work for a keyboard and screen reader use to any pagination UI, even if it is
19
+
accessible.</strong> It may be easier for users to navigate <a href="table.php#sticky-header-example">a table with a
20
+
sticky header
21
+
instead</a>. Before you implement this solution (or if you are trying to make an existing pagination component
22
+
accessible), weigh the pros and cons between this and the Sticky Header solution.
"label": "Use the template HTML instead of hardcoding HTML inside your script",
1796
+
"highlight": "%OPENCLOSECONTENTTAG%template",
1797
+
"notes": "Hardcoding HTML in scripts is bad for two reasons: It prevents a developer for customizing the controls, and it can also hardcode the human language to a specific language. In this example, we use the <code>template</code> HTML tag to create the HTML fragments for the script. The dynamic content is added using template string style variable syntax(e.g. ${x}). See the next step to see how this is replaced"
1798
+
},
1799
+
{
1800
+
"label": "Use <code>interpolate()</code> to place dynamic content inside the templates.",
"notes": "The <a href=\"js/shared/interpolate.js\">interpolate function</a> is one that I created. It is based on code from a Stack Overflow page, <a href=\"https://stackoverflow.com/questions/29182244/convert-a-string-to-a-template-string\">Convert a string to a template string</a>, with a few <a href=\"https://gomakethings.com/how-to-sanitize-third-party-content-with-vanilla-js-to-prevent-cross-site-scripting-xss-attacks/\">XSS sanitizing logic included</a>"
1803
+
},
1804
+
{
1805
+
"label": "Mark up the pagination widget correctly",
"notes": "This widget is marked up as a group so screen readers will announce instructions on how it works when they navigate inside of it. Note the instructions are screen reader only using the <a href=\"screen-reader-only-text.php\"><code>sr-only</code></a> class."
1808
+
},
1809
+
{
1810
+
"label": "Ensure all pagination buttons have an aria-label",
1811
+
"highlight": "aria-label=\"[^\"]*\"",
1812
+
"notes": "This is to ensure the purpose of every button is reported to screen readers, since words like \"Greater than\", \"one\", \"two\", etc., would be confusing"
1813
+
},
1814
+
{
1815
+
"label": "Disable buttons that are not useful to screen reader users",
1816
+
"highlight": "\\$\\{disabledattr\\}",
1817
+
"notes": "This variable will be set to <code>\"disabled\"</code> if the arrow is supposed to be disabled, and to a blank string if not. This element will be skipped in the tabbing order."
1818
+
},
1819
+
{
1820
+
"label": "Use an ARIA live region to give update information to screen reader users",
1821
+
"highlight": "aria-live ||| role=\"alert\"",
1822
+
"notes": "This aria-live region will be updated with information for screen reader users on what has changed in the table when the pagination buttons are pressed."
0 commit comments