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

Labelling of Landmarks #1

Closed
matatk opened this Issue May 22, 2013 · 19 comments

Comments

2 participants
@matatk
Owner

matatk commented May 22, 2013

Labelling of landmark (including label if present) on focus using CSS before: content (user configurable - on/off)

This was proposed by @stevefaulkner

@ghost ghost assigned matatk May 22, 2013

@matatk matatk modified the milestone: 2.1.0 Jan 31, 2017

@matatk matatk assigned matatk and unassigned matatk Feb 2, 2017

@carmacleod

This comment has been minimized.

carmacleod commented Jul 6, 2017

This is a cool idea. So, kind of like the labels on the ARIA Landmarks Example page with "Show Landmarks".

@matatk

This comment has been minimized.

Owner

matatk commented Jul 6, 2017

Thanks for the suggestion of how this might look; I've had a quick look at the example page and it looks great, both as a test case and some exemplary documentation on Landmarks, too. I should definitely link to this.

I think I see how the overlays are working; it's an interesting—and possibly quite robust—approach. Will look into it; thanks.

One of my concerns with labels was how to get them to always display (i.e. be drawn "on top"). Looks like the technique used here may be of help with that, and the .getComputedStyle() approach may be complementary to, or even replace, the ideas I was thinking about for #11 (though not quite sure that's the exact same problem, until I've looked into it further). Either way this is very interesting :-).

@carmacleod

This comment has been minimized.

carmacleod commented Jul 7, 2017

I wondered if the overlay implementation might be helpful for #47.

@carmacleod

This comment has been minimized.

carmacleod commented Jul 7, 2017

The code is here: https://github.com/w3c/aria-practices/tree/master/examples/landmarks
Specifically, I think the overlay code is in visua11y.js and visua11y.css.
Written by Thomas Foltz and Jon Gunderson; Apache license.
Maybe @jongund can answer any questions you may have.

@matatk

This comment has been minimized.

Owner

matatk commented Jul 8, 2017

D'oh, I meant to refer to #47 (not #11) in my previous comment; coding too late at night :-). I'd been looking at the code through the browser, but thanks for the GitHub link. It's an elegant technique.

@carmacleod

This comment has been minimized.

carmacleod commented Jan 11, 2018

I noticed that the initial comment says that this feature should be "(user configurable - on/off)".
Now that the plan is to use overlays, I think that the label should always be shown.

@carmacleod

This comment has been minimized.

carmacleod commented May 8, 2018

Looking forward to trying it - when's the next update? :)

@matatk

This comment has been minimized.

Owner

matatk commented May 9, 2018

:-) I was hoping it may've been a couple of hours after I merged the PR that closed this, but a little more realistically I'm very keen to complete the next release this week. I'm pleased with the improvement, and it starts setting the stage for the next major version. Thanks for your feedback on this. It appears to've taken some time to implement, but got there in the end :-).

@carmacleod

This comment has been minimized.

carmacleod commented May 17, 2018

It's awesome! Hot pink is an interesting choice of color. Gets the point across. ;)

@matatk

This comment has been minimized.

Owner

matatk commented May 17, 2018

:-). Glad you like it; thanks for the feedback. I often visited http://bbc.co.uk/news/ to test things (and it seems others do too). There's lots of red there, so the border was always slightly harder to pick out. I saw that pink in the palette on the Mac when first testing the <input type="color"> controls and also remembered how it was used as the accent colour for the 2012 Olympics (as pink, not being a major component of any country's flag, welcomes all equally :-)) and through it might be nice for a change :-).

@matatk

This comment has been minimized.

Owner

matatk commented May 18, 2018

@carmacleod I was just wondering if you had any views on the font size in the label? I had the default at 18px first, which works well for me, but I imagined it may be a bit too large for most people. Is the current default (16px) OK, do you think?

@carmacleod

This comment has been minimized.

carmacleod commented May 18, 2018

I think the current default is fine, and if I type Ctrl+Plus then it gets larger, as expected.
Anything larger than that would probably cover up too much of the content (and more would get clipped in skinny regions). :)
Speaking of covering up things, I would actually prefer to have the label on the left, because on the right, it tends to hide under the landmarks menu. :) However, I realize that content tends to start on the left, so more would be covered up if the label was there. It almost wants to be optional - on the left for authors testing their page with the landmarks menu, and on the right for users navigating through landmarks with the navigation keys. Or maybe it could automatically go on the left or right depending on which method was used to get there (menu or keyboard). Anyhow, if you agree, then I can open a new issue for it.

@matatk

This comment has been minimized.

Owner

matatk commented May 18, 2018

The default label font size sounds cool then; thanks.

My ideal is to be quite strict about not adding options where it can be avoided, and focus on trying to make it work just right for as many people as possible out-of-the-box. [ Related aside: big changes are coming up in the next major version, which is still quite a long way off, via #156 and #157 for example, so I am keen to add as few options as possible :-). ]

Switching the sides automatically would be quite subtle, yet helpful, and I can't see it really needing an option, as it'd "just work". The code required to handle this could also be adopted to right-to-left pages, too (I must look into this in future, as it's not an area I know much about, but would like to). Thanks for the great suggestion; by all means file an issue for it :-). I think it goes well with #166 and would make a suitable 2.3.1 release.

@matatk

This comment has been minimized.

Owner

matatk commented May 19, 2018

Something occurred to me whilst I was concentrating on how well the label side-switching would work... the user can move the Landmarks button to anywhere on the toolbar they like, so we can't just assume that the pop-up covers the top-right/right part of the page, d'oh! I don't think there are any APIs for ascertaining where it is (and it's starting to sound a bit complex now). On Firefox it's also possible to have the pop-up appear in the Firefox menu sidebar type thing, in which case it wouldn't overlap the content at all (and I don't think this can be determined programmatically either).

Will think on it a bit more, but might have to park this idea for now (though I still intend to do something about #166—there is a simple way to handle that).

@carmacleod

This comment has been minimized.

carmacleod commented May 19, 2018

Ah, I didn't know that. Good point. I just let the default thing happen. :)

@matatk

This comment has been minimized.

Owner

matatk commented May 19, 2018

I did wonder about implementing Landmarks as a sidebar rather than a pop-up (particularly in light of #156), but sidebars are only supported on Firefox and Opera, not Chrome and Edge.

(It's possible I could code both, as they're likely similar, and alter the way the extension is built for different browsers, such that on Firefox and Opera one gets the sidebar—though I decided against this for now due to complexity. I also wondered whether I could offer the pop-up as standard and the sidebar as an option on browsers that support it; I don't see why this shouldn't be possible, but it's not clear from the API docs, and I've not actually tried it.)

@carmacleod

This comment has been minimized.

carmacleod commented May 20, 2018

Interesting. I tried to get the browsers to implement landmark (and heading) navigation several years back, and I pictured it as a sidebar in Firefox. :)

@matatk

This comment has been minimized.

Owner

matatk commented May 22, 2018

Small world! I think that thread is what prompted @stevefaulkner to suggest that I work on the original Landmarks extension to add HTML5 support :-). It was our hope then (and still) that maybe browser developers might use this code to help them implement such a feature. Thanks for reminding me of this (I'll re-read and check out your suggestions there); it's quite motivating :-).

@carmacleod

This comment has been minimized.

carmacleod commented May 22, 2018

At the time, I was trying to include heading navigation as well (i.e. h1, h2, etc).
That may have been the major stumbling block, for 2 reasons:

  1. Landmark navigation and heading navigation really are 2 completely separate things
  2. The Outline algorithm has been "broken" since HTML5 was introduced, and people keep trying to fix it over the years

So if you are looking at my suggestions in the old FF bug, you might want to steer clear of anything to do with headings for now... :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment