Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New plugin: Landmarks #526

Open
3 tasks
argyleink opened this issue Jun 23, 2021 · 6 comments
Open
3 tasks

New plugin: Landmarks #526

argyleink opened this issue Jun 23, 2021 · 6 comments
Labels
good first issue 👍 Good for newcomers

Comments

@argyleink
Copy link
Member

argyleink commented Jun 23, 2021

Invokes this script, or something like it. The outline style could be replaced with visbug handles and labels elements, see the zindex plugin for details 👍🏻

  • update the a11y tooltip to show the new hotkey ctrl hotkey and what it does
  • update a11y tool to: holding the control key shows the landmarks, releasing it hides them
  • landmarks use visbug handles or hover, and a visbug label
@argyleink argyleink added the good first issue 👍 Good for newcomers label Jun 23, 2021
@argyleink
Copy link
Member Author

related #501

@hchiam
Copy link
Contributor

hchiam commented Jun 24, 2021

Maybe have a button that appears on the bottom left, in the blank space under the #border color icon?

The only thing is there's not much space underneath if your screen is small or if you're zoomed in, so maybe the button could go elsewhere on the screen? bottom right of screen? next to the Accessibility Tool li?

Or maybe have a toggle for landmarks as a keyboard shortcut and show that on the <aside accessibility>? It looks like n and r are available https://visbug.web.app/

@argyleink
Copy link
Member Author

I like the idea of putting it into the accessibility tool, as a shortcut!

  • update the a11y tooltip to show the new hotkey ctrl
  • while a11y tool is selected, holding the control key shows the landmarks, releasing it hides them
  • landmarks can be shown and hid
  • landmarks use visbug handles or hover, and a visbug label

it places the action and ux right there with the accessibility inspect workflow. hover over stuff, verify contrast and attributes, then hold control and review landmarks for errors and proper flow. sounds awesome. do you think there should be a way to make the landmarks sticky, as in they persist beyond holding the hotkey? what's the use case where you need the landmarks to stick around?

@hchiam
Copy link
Contributor

hchiam commented Jun 25, 2021

not a very strong reason, but: it could be helpful to remind you where the landmarks are while you tab and/or navigate around the page with the keyboard, if the landmark labels persist. or maybe only show the landmark that applies to the currently-focused element while you tab around?

@argyleink
Copy link
Member Author

nice, that sounds like a fun plugin or debug feature, like tab order breadcrumbs. these persistent marks could show a number too! but sounds like a different plugin? plus, tab/shift+tab are already used by visbug to traverse elements in the same way Sketch does, so we'd need to do some extra work in the plugin to steal tab.

@hchiam
Copy link
Contributor

hchiam commented Jun 29, 2021

True, tab order breadcrumbs is prolly better off in a different plugin, if at all (or have tab/shift+tab act differently when you have the a11y tool on? maybe not). In that case, only showing landmarks while you hold down ctrl makes sense to me now.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
good first issue 👍 Good for newcomers
Projects
None yet
Development

No branches or pull requests

2 participants