Is there a way to make the CSS outline always visible?

[matatk]

Sometimes, due to the CSS already on a page, the outline of the current landmark is not visible. Whilst this seems like a simple problem, there are several challenges. The current approach is very simple and robust (even if it doesn't catch every possible scenario), so will need to think about this one.

1. Sometimes the outline does not appear. There could be a few reasons for this (incomplete list).
   1. Outlines may not appear because they're outside of the page. Solution is to use the outline-offset property and set it negatively, so that the outline will be within the box. Ref Set and correctly restore both CSS outline and outline-offset #54.
   2. Where the outline may appear could be obscured by other elements. Solutions may be to either try to display the outline 'on top' or to display it within the visible element: https://www.google.co.uk/search?&q=z-index+of+css+outline
      • This doesn't seem to work on GitHub, because the element that's drawn over the top of the main landmark is a child of it and appears, though being position: relative to have an implied higher z-index: https://www.google.co.uk/search?&q=position+relative+z-index
   3. Suspect this unlikely, but CSS may override CSS outline. Looks like !important could help https://css-tricks.com/when-using-important-is-the-right-choice/
2. Size of containing landmark element can be much smaller than the contained elements. Not sure how much of a problem this one may be; worth taking time to get an idea of this, as any solutions seem to take us far from current implementation.
   1. Getting contained elements' sizes: https://www.google.co.uk/search?q=javascript+get+size+of+container+with+contained+elements
   2. Having got the real size, the current method of showing the landmarks' outline via the CSS outline property wouldn't work.
3. Sometimes the CSS colour used by Landmarks (red) matches the website, so it is unclear. Currently seems difficult to work around. Ideas would be, if it's possible to reliably determine the colour the user sees (which may not be the background/colour of the landmark element) then a secondary outline colour could be used instead, which is designed to contrast more.

[matatk]

The most promising things to address, from the above comment, are:

• 1i - per Set and correctly restore both CSS outline and outline-offset #54
• 3

Currently attempting to address 1ii, 1iii and 2 papers to run up against the law of diminishing returns.

[matatk]

Need to check out the ARIA Landmarks Example page approach to this, as per #1.

The key part is that Element.getBoundingClientRect() is used to figure out exactly where to put the outline, and an overlay is created to provide the outline (and that's also where the label with more info, such as tagName or landmark label, goes).