WCAG Accessibility

[caseyg]

Thank you for the wonderful script! I've wanted to do something with telescopic text for ages, but it wasn't so easy to implement before this.

Is anybody up for collaborating on making this plugin WCAG accessible? I might need some help navigating the JS side but am happy to do any research/translation needed on the accessibility requirements and test things out.

From what I gather: the script currently renders a bunch of <span> elements for links instead of <a> with descriptive titles. I wonder if it could also be more semantic by rendering nested <ul> elements (mirroring the semantic meaningfulness of the editor syntax!), and then just using CSS to preserve "inline text" formatting.

Here's a WCAG checklist that I started to look through. Some of the key issues I found are:

• Lack of keyboard navigation
• Non-semantic elements, e.g. links are currently <span> instead <a>
  • Missing link descriptions (could say something like "expands so-and-so..."?)

[jackyzha0]

woah @caseyg yes, I would love to work on this! (cc: @spencerc99)

We initially tried implementing this with nested <detail> and <summary> tags but the styling wouldn't play nicely ://

Curious what would be intuitive keyboard navigation, I think just having each expansion be tab-selectable might make sense? (which, if we do an <a> should automatically happen)

[spencerc99]

making it accessible would be fantastic thank you for this prompt and discussion starter!! IMO i dont think the a tag fits for the expansions because it’s not actually rendering a link. I believe the most semantic expression would be a ‘button’? i do really like the idea of using ‘ul’ elements to mirror the textual representation :) this also relates to a previous discussion @jackyzha0 and i had on about rendering expansions on the fly (instead of all at once) for performance reasons.

…

-- Spencer Chang sometimes writing, sometimes reading, often eating. spencerchang.me ( http://spencerchang.me/ )

On Mon, Jun 13 2022 at 8:01 AM, Jacky Zhao < ***@***.*** > wrote: woah @caseyg ( https://github.com/caseyg ) yes, I would love to work on this! (cc: @spencerc99 ( https://github.com/spencerc99 ) ) We initially tried implementing this with nested <detail> and <summary> tags but the styling wouldn't play nicely :// Curious what would be intuitive keyboard navigation, I think just having each expansion be tab-selectable might make sense? (which, if we do an <a> should automatically happen) — Reply to this email directly, view it on GitHub ( #14 (comment) ) , or unsubscribe ( https://github.com/notifications/unsubscribe-auth/ADQ4OJBH35BZIFYGIUEWSLTVO5EL3ANCNFSM5YUEHORQ ). You are receiving this because you were mentioned. Message ID: <jackyzha0/telescopic-text/issues/14/1154034502 @ github. com>