New plugin: Landmarks - Githubissues

GoogleChromeLabs / ProjectVisBug

FireBug for designers › Edit any webpage, in any state https://a.nerdy.dev/gimme-visbug

https://visbug.web.app

Apache License 2.0

5.42k stars 285 forks source link

New plugin: Landmarks #526

Open argyleink opened 3 years ago

argyleink commented 3 years ago

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 commented 3 years ago

related #501

hchiam commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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.