Post ASXgp74JH76dZyjUJs by ryanberg@mstdn.social
(DIR) More posts by ryanberg@mstdn.social
(DIR) Post #ASXegxnheIgWbux2Se by simon@fedi.simonwillison.net
2023-02-10T16:20:19Z
0 likes, 0 repeats
@eric this is a really great article, thanks!As a developer who cares deeply about accessibility I'm constantly infuriated at how difficult it is to find good advice on how to make JavaScript features accessible - so few of the JS libraries seem to care, b it even basic tutorials on things like creating an accessible JavaScript drop-down menu are way harder to find then I'd like
(DIR) Post #ASXesyOzEsa1x07Jrs by simon@fedi.simonwillison.net
2023-02-10T16:22:21Z
0 likes, 0 repeats
@eric most basic example: when the user clicks a link, I'd like to fetch() a block of HTML from the server and update another part of the interface using innerHTML = that blobIt's bafflingly difficult to find good guidance on how to do even that in an accessible way!
(DIR) Post #ASXfHoDuDil1camDOy by simon@fedi.simonwillison.net
2023-02-10T16:27:24Z
0 likes, 1 repeats
@eric the thing I really wish existed is a documented collection of accessible JavaScript patterns - not so much code libraries, more a set of tutorials covering the basics as clearly as possible:- accessible JavaScript dynamic content replacement (fetch() then innerHTML)- accessible JavaScript drop-down navigation menus- accessible JavaScript mobile side-drawer navigation- accessible JavaScript sortable table interfacesEtcMaybe that exists already? I'd love to know if it does!
(DIR) Post #ASXfiICFP34w6wd4me by mattwilcox@mstdn.social
2023-02-10T16:31:30Z
0 likes, 0 repeats
@simon Best I know of, but not really quite what you're after - https://www.w3.org/WAI/ARIA/apg/patterns/
(DIR) Post #ASXfvG2oiRG3CWOthw by oldskirt@slightly.social
2023-02-10T16:34:14Z
0 likes, 1 repeats
@simon @eric do you mean something like the ARIA Authoring Practices Guides? https://www.w3.org/WAI/ARIA/apg/patterns/
(DIR) Post #ASXfvI655H3bZDwX4a by oldskirt@slightly.social
2023-02-10T16:34:56Z
0 likes, 0 repeats
@simon @eric ah, double response, the joy of federation.
(DIR) Post #ASXgp74JH76dZyjUJs by ryanberg@mstdn.social
2023-02-10T16:44:34Z
0 likes, 1 repeats
@simon @eric Heydon Pickering’s “Inclusive Components” book is a great reference for this sort of thing. https://book.inclusive-components.design/
(DIR) Post #ASXoBpgelSeS0kRwKu by horshacktest@a11y.info
2023-02-10T18:07:05Z
0 likes, 1 repeats
@simon @eric For dynamic content you can see how this demo is built. I think this is more appropriate for small atomic updates, not handling a SPA-like fake page navigation. https://dequeuniversity.com/library/aria/liveregion-playground
(DIR) Post #ASXp7cpki7sowXGISW by ryan@social.lol
2023-02-10T18:18:10Z
0 likes, 0 repeats
@simon @eric The only GitHub issue for this component is asking about accessibility concerns so YMMV, but I've used GitHub's `include-fragment-element` to accomplish that first bullet point a few times and I found it to be pretty handy. https://github.com/github/include-fragment-elementI think everything in your list could really gel with a custom element approach.
(DIR) Post #ASXt62vL8YGz67NUHo by hdv@front-end.social
2023-02-10T19:02:26Z
0 likes, 0 repeats
@simon +1, wanted this for a long time (made the case for it internally too when I worked at W3C). May do a blog post later but my hunch is this is one of the main reasons accessibility lacks in a lot of JS-heavy apps: even for well willing devs who want to get it right, it's hard to find definitive examples to these patterns (it's somewhat controversial there is such a thing as a ‘definitive’ answer because people are different, but I believe common denominators can be found like for other UX)
(DIR) Post #ASY0aeDNkn8F7WM82q by barefootliam@floss.social
2023-02-10T19:30:27Z
0 likes, 0 repeats
@mattwilcox @simon the trouble with these is they are the theory about where the Web should go, not the practice based on what actually works today. So they are useful, but alas, often can't be used as-is. I second @ryanberg 's recommendation of Heydon’s book but what works best changes frequently.
(DIR) Post #ASY0aesrGaJDC9lFh2 by simon@fedi.simonwillison.net
2023-02-10T20:26:34Z
0 likes, 0 repeats
@barefootliam @mattwilcox @ryanberg I think that's the e biggest thing I'm missingI don't want to know what the ARIA specs say. I want to know what works in screenreaders that are in widespread use, todayI want code examples with code/audio demos showing what they sound like in different software!Plus something a bit like https://caniuse.com but for accessibility coding patterns and currently deployed assistive technology
(DIR) Post #ASYNPPKvA0tireNmls by simon@fedi.simonwillison.net
2023-02-11T00:42:13Z
0 likes, 0 repeats
Here's a good collection I bookmarked a while ago https://www.smashingmagazine.com/2021/03/complete-guide-accessible-front-end-components/
(DIR) Post #ASZSSTw3DE0WvPzkeG by dwt@chaos.social
2023-02-11T13:13:35Z
0 likes, 0 repeats
@simon I would take a look at htmx https://htmx.org/ for me, that’s very close in spirit to what you are asking.
(DIR) Post #ASZYQy8gXmUBkKZBNQ by simon@fedi.simonwillison.net
2023-02-11T14:20:31Z
0 likes, 0 repeats
@dwt I'm not yet confident that HTMX addresses accessibility the way I need it tohttps://htmx.org/docs/ has one section that mentions it, but it just talks about the impotence of using semantic HTML and form labels and focus state - it doesn't address any of my questions about how replacing areas of the page interacts with screenreaders
(DIR) Post #ASZYemzmlva7EtzfzE by dwt@chaos.social
2023-02-11T14:23:06Z
0 likes, 0 repeats
@simon sorry, can’t help you there, as I’ve not tried the accessibility stuff. But at least html and htmx provide good places to make these patterns easily reusable that solve the accessibility part.
(DIR) Post #ASZYvV5GcVXUbuWgMa by simon@fedi.simonwillison.net
2023-02-11T14:26:12Z
0 likes, 0 repeats
@dwt that's what I find so frustrating: I would really hope that in 2023 there were libraries like this incorporated tested, thoroughly documented patterns for accessibility that were proven to workHTMX has a tiny smattering of aria- attributes, but it's missing the documentation that says "here's how this works with screenreaders" - and from glancing at the code I'm not at all convinced that it does, at least not out of the box https://github.com/search?q=repo%3Abigskysoftware%2Fhtmx%20aria-&type=code
(DIR) Post #ASZZ5Z7ITtvu0uH7A0 by simon@fedi.simonwillison.net
2023-02-11T14:26:52Z
0 likes, 0 repeats
@dwt and HTMX already looks much better on this front than the vast majority of other comparable libraries!
(DIR) Post #ASZZKKvFXOZEKngQYS by simon@fedi.simonwillison.net
2023-02-11T14:30:39Z
0 likes, 0 repeats
@dwt and I don't blame HTMX for this: building these JavaScript things for accessibility is SO hard, because the wider web development community as a whole has failed to pull together to figure out these problems and document the necessary patternsI'm part of the problem: I might loudly complain about this, but I haven't put the work in myself to learn how to test my stuff thoroughly in modern screnreaders
(DIR) Post #ASZZUt919iAxMt9eoS by dwt@chaos.social
2023-02-11T14:31:49Z
0 likes, 0 repeats
@simon I was just about to ask how you test. Every time I tried out screenreaders, it was just frustrating.
(DIR) Post #ASZbEqcAzdManVGwz2 by simon@fedi.simonwillison.net
2023-02-11T14:52:13Z
0 likes, 0 repeats
@dwt I really need to spend proper time on it - this guide is really good https://webaim.org/articles/voiceover/mobile
(DIR) Post #ASZbOQODLv8iMDJBgm by dwt@chaos.social
2023-02-11T14:53:28Z
0 likes, 0 repeats
@simon that goes straight to my reading list. Thanks!
(DIR) Post #ASapBwjxM5UDRWNksC by cwilcox808@c.im
2023-02-12T05:02:38Z
0 likes, 1 repeats
@simon @eric For that specific example, what you've described should be a button, not a link. To ensure a screen reader user knows clicking it did something, either add a message in an ARIA live region or move focus to an element at the beginning of the added content (don't do both). I don't have a good suggestion for how to choose which approach to use. I lean toward moving focus, which has the benefit of making the result apparent to a high magnification user.
(DIR) Post #ASbWLDDjkNyzBtybGS by simon@fedi.simonwillison.net
2023-02-12T13:06:44Z
0 likes, 0 repeats
@cwilcox808 @eric thank you! This is exactly the kind of practical accessibility advice that I've been finding it so difficult to figure out
(DIR) Post #ASg0CGdvQaasSLiTq4 by cwilcox808@c.im
2023-02-14T16:59:33Z
0 likes, 0 repeats
@simon @eric I should amend my original statement because *sometimes* the control is better as a link, rather than a button. If the block of HTML being fetched is basically a whole page being client-side routed to, especially if the address bar is updated, a link would better convey that clicking it will "go somewhere" vs. "do something."If the control is a link, moving focus is likely to be better than announcing the change, as it's closer to the HTML-native experience. Here's good research about client-side routing:https://www.gatsbyjs.com/blog/2019-07-11-user-testing-accessible-client-routing/I was originally thinking more about smaller use-cases, like applying filter parameters or pagination within a smaller component on a page.As is often the case, "it depends."
(DIR) Post #ASgDvT1NYEk3HYZOGO by simon@fedi.simonwillison.net
2023-02-14T19:33:37Z
0 likes, 0 repeats
@cwilcox808 @eric that's really useful, thanks - I like the idea that if something results in an update to the URL then a link makes more sense