Labelling of Landmarks

[matatk]

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

This was proposed by @stevefaulkner

[carmacleod]

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

[matatk]

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]

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

[carmacleod]

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]

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]

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]

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

[matatk]

:-) 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]

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

[matatk]

:-). 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]

@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]

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]

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]

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]

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

[matatk]

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]

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]

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]

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... :)