fix accesibility and keyboard navigation issues in examples #1433

Renerick · 2023-05-10T19:01:02Z

This PR fixes a number of issues with accessibility practices in the examples section of the docs. Most notably:

fix missing hrefs on links
replace links with buttons
add autofocus attribute to inline editing examples and "click to load"
fix missing input labels
make a progress bar a Proper Progress bar (aria attributes)

This is not an exhaustive fix of all issues that probably exist in the examples, but an effort to cover most obvious low hanging bugs

yawaramin · 2023-05-10T19:18:59Z

www/content/examples/lazy-load.md

    // templates
    function lazyTemplate(page) {
-      return `<div hx-get="/graph" hx-trigger="load">
+      return `<div hx-get="/graph" aria-busy='true' hx-trigger="load">


Any particular reason for single quotes here?

yawaramin · 2023-05-10T19:20:49Z

www/content/examples/progress-bar.md

+  <h3 id="pblabel">${job.complete ? "Complete" : "Running"}</h3>
+
+  <div>
+    <div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="${job.percentComplete}" aria-labelledby="pblabel">


Any reason not to use the <progress> tag? It would eliminate the need for ARIA annotations.

CSS transitions

yawaramin · 2023-05-10T19:21:32Z

www/content/examples/tabs-hateoas.md

-	<a hx-get="/tab1" class="selected">Tab 1</a>
-	<a hx-get="/tab2">Tab 2</a>
-	<a hx-get="/tab3">Tab 3</a>
+	<a hx-get href="#" class="selected">Tab 1</a>


Is this a mistake? The hx-get attrs now have no value.

yep, a typo, artifact of mass find and replace, thanks for noticing

If a link isn't linking to anything it probably should be a button as this can be confusing to screen readers.

I reread the spec for tab in ARIA and updated this example accordingly, thanks for pointing this out

dz4k · 2023-05-10T19:09:42Z

www/content/examples/tabs-hateoas.md

-			<a hx-get="/tab1" class="selected">Tab 1</a>
-			<a hx-get="/tab2">Tab 2</a>
-			<a hx-get="/tab3">Tab 3</a>
+			<a hx-get="/tab1" href="#" class="selected" autofocus>Tab 1</a>


This autofocus attribute causes the tab to be focused as soon as the page loads, before the user has interacted with or even seen the tab. Maybe use hyperscript or hx-on to do the focus instead?

The problem was from the fact that the first tab was being loaded lazily. Setting it with custom event handling would require filtration by events. I just made tabs prerendered, to keep the example simple

dz4k · 2023-05-10T19:47:44Z

www/content/examples/progress-bar.md

+  <h3 id="pblabel">${job.complete ? "Complete" : "Running"}</h3>
+
+  <div>
+    <div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="${job.percentComplete}" aria-labelledby="pblabel">


In the setup I tested (Firefox and Chrome, Linux, Orca) this moves focus to the body, announcing the title of the page and causing me to lose my position..

This one I will get back to later. On my setup FF/Win10/NVDA focus (both tab and reader) stays around the progress bar, so I will have to dig a bit deeper

dz4k · 2023-05-10T20:12:37Z

www/content/examples/click-to-load.md

    function rowsTemplate(page, contacts) {
      var txt = "";
      for (var i = 0; i < contacts.length; i++) {
        var c = contacts[i];
-        txt += "<tr><td>" + c.name + "</td><td>" + c.email + "</td><td>" + c.id + "</td></tr>\n";
+        txt += `<tr ${i==0&&'autofocus'}><td>  ${c.name}  </td><td>  ${c.email}  </td><td>  ${c.id}  </td></tr>\n`;


Elements that are focusable should have a name so that AT has something to announce. Maybe move the autofocus to a tbody (having one tbody per page) and adding a label of some sort?

Possible impl:

txt += `<tbody autofocus aria-label="Page ${page}">` for (var i = 0; i < contacts.length; i++) { txt += "<tr><td>" + c.name + "</td><td>" + c.email + "</td><td>" + c.id + "</td></tr>\n"; txt += `<tr><td> ${c.name} </td><td> ${c.email} </td><td> ${c.id} </td></tr>\n`; } txt += `</tbody>`

dz4k · 2023-05-10T20:15:40Z

www/content/examples/lazy-load.md

    // templates
    function lazyTemplate(page) {
-      return `<div hx-get="/graph" hx-trigger="load">
+      return `<div hx-get="/graph" aria-busy='true' hx-trigger="load">


aria-busy is useless without aria-live.

1cg · 2023-05-11T19:59:37Z

is this mergeable?

Renerick · 2023-05-11T20:15:24Z

@1cg Kinda? Some of the issues are resolved, I'm currently stuck on the progress bar focus behavior

Renerick · 2023-05-14T14:19:21Z

I completely reworked how progress bar example works. Now instead of reloading an entire section, the bar is updated separately and "done" event is raised upon completion. The focus is moved on the status label with autofocus tabindex="-1". @dz4k please check if this implementation works on your setup

dz4k · 2023-05-15T17:34:28Z

Seems to work here. Orca reads "JOB" as "jay oh bee" but we should probably leave that be

1cg · 2023-05-23T14:45:35Z

am I to be merging?

Renerick · 2023-05-23T18:18:45Z

@1cg i fixed what I wanted to fix, so I think yes

1cg · 2023-06-30T16:29:14Z

thank you @Renerick @dz4k and @yawaramin

fix accesibility and keyboard navigation issues in examples

ab650c4

yawaramin reviewed May 10, 2023

View reviewed changes

fix review comments

13bbc50

yawaramin approved these changes May 10, 2023

View reviewed changes

dz4k reviewed May 10, 2023

View reviewed changes

remove redundant aria attributes, remove redundant autofocus

0d7790a

rework progress bar demo's accesibility

b9219ab

Renerick added 2 commits May 25, 2023 13:05

rework tabs HATEOS example to be more ARIA compliant

2e5dc6a

rework tabs _hyperscript example to be ARIA compliant

a6de2f1

1cg merged commit 18aa247 into bigskysoftware:dev Jun 30, 2023
5 checks passed

Renerick deleted the 1431-a11y-examples-review branch July 19, 2023 10:58

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix accesibility and keyboard navigation issues in examples #1433

fix accesibility and keyboard navigation issues in examples #1433

Renerick commented May 10, 2023

yawaramin May 10, 2023

yawaramin May 10, 2023

Renerick May 10, 2023

yawaramin May 10, 2023

Renerick May 10, 2023 •

edited

Htbaa May 25, 2023 •

edited

Renerick May 25, 2023

dz4k May 10, 2023

Renerick May 10, 2023

dz4k May 10, 2023

Renerick May 10, 2023

dz4k May 10, 2023

Renerick May 10, 2023

dz4k May 10, 2023

dz4k May 10, 2023

Renerick May 10, 2023

1cg commented May 11, 2023

Renerick commented May 11, 2023

Renerick commented May 14, 2023

dz4k commented May 15, 2023

1cg commented May 23, 2023

Renerick commented May 23, 2023

1cg commented Jun 30, 2023

fix accesibility and keyboard navigation issues in examples #1433

fix accesibility and keyboard navigation issues in examples #1433

Conversation

Renerick commented May 10, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Renerick May 10, 2023 • edited

Choose a reason for hiding this comment

Htbaa May 25, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

1cg commented May 11, 2023

Renerick commented May 11, 2023

Renerick commented May 14, 2023

dz4k commented May 15, 2023

1cg commented May 23, 2023

Renerick commented May 23, 2023

1cg commented Jun 30, 2023

Renerick May 10, 2023 •

edited

Htbaa May 25, 2023 •

edited