The Enforced Accessibility of the Geolocation Element – Frontend Masters Blog

There’s a element in HTML now. Looks like Chrome led it up and got it into Chrome first. Now we’re in the ol’ 🤷‍♀️ state on when we’ll get it elsewhere. But the process certainly involved other browser makers, so that’s good.

Manuel Matuzović has a good intro blog post.

The element doesn’t behave right within an so embedding a demo here doesn’t make sense. You can see a small demo here, and the code is here.

Here’s what I think you should know:

• It’s a with an enforced design. It’s got a map icon and text that says “Use location” (or “Use precise location” if you use accuracymode="precise")
• Clicking the button will,
  • if access is granted, do a geolocation and fire a location event.
  • if access needs to be granted, it will ask first, then act accordingly.
  • if access has already been denied, a new prompt will remind you it’s been denied, and give you a chance to grant it.
• The last bullet point above is crucial. It allows you to “recover” from a denied-permission state in a way that was previously impossible.
• You can use it progressive-enhancement style by putting an actual inside with event handlers that go through a flow where you aren’t 100% sure if you have granted permissions. Or polyfill it.
• It enforces a variety of accessibility requirements quite strictly.

It’s that last one we can dig into a little here, as I find it quite interesting. I’m not sure if we’ve had an element in HTML that behaves quite like this before.

I don’t think accessibility itself is actually the motivation behind these rules. It’s actually about security and the danger of “tricking” people into exposing their geolocation when they may not want to. For example: “Want 100 free Robux? Click here, then click Allow on the next pop-up.” It can’t totally stop that, but it can try.

The enforced-accessibility behavior comes in several forms:

You can’t change the text or the icon

As far as I can tell, anyway! The content is in a user-agent Shadow Root and there isn’t any part attributes or anything for styling access.

The normal things that penetrate the Shadow DOM still will, though. Like the color still sets the color and the SVG icon is set to fill: currentColor; so the icon color will change along with the text.

But!

You do get automatic localization, which is really nice. Whatever the lang attribute is set to in that area of the DOM, you’ll get text in the corrrect language.

There is various CSS you just can’t use.

Some CSS you try to apply to a button will simply be ignored.

geolocation {
  
  translate: 100px 100px;
  transform: scale(0);
  opacity: 0.75;
  filter: opacity(0);
  inline-size: 2px;
  clip-path: inset(50%);
}Code language: CSS (css)

I don’t know if that’s comprehensive, but the point is, if you try to write some CSS for this button and it doesn’t work, it’s probably on purpose. There is some conflicting information, like the Chrome post says 2D translates are allowed, but in practice, they are not.

There is some CSS that is fenced.

These are pretty strange!

geolocation {
  
  letter-spacing: 10em; 

  
  word-spacing: 10em;

  
  block-size: 1px;
  height: 1px;

  
  inline-size: 1px;
  width: 1px;
}Code language: CSS (css)

Perhaps the strangest one is font-size in that it’s capped but also has functionality limits.

geolocation {
  
  font-size: 50px;

  
  font-size: 1px;

  
  font-size: 12px;

  
  font-size: 13px;
}Code language: CSS (css)

I also note that font-size: 1px; actually does render when the button is in an , so uhhhh, whatever you wanna make of that.

There is some CSS that is allowed, but then disables the button.

Like font-size above, there is other CSS you can apply that is allowed (renders) but then makes the button just not work. By not work, I specifically mean it will not trigger location events.

geolocation {
  background: white;
  color: white;
}Code language: CSS (css)

That succeeds in hiding the button from view (on a white page), but if you find and click it, it won’t work.

This is quite easy to happen! For instance:

geolocation {
  
  color: orange;
}Code language: CSS (css)

The color orange (with a white background) is not enough contrast to be acceptable.

This does trigger an “issue” in Chrome DevTools. It’s not a JavaScript error so you won’t see it in the console, it comes up in the Issues area.

It’s kinda weird.

It’s quite weird how there is all this CSS that it’s happy to forcibly rein in for you. But then, other CSS just allows it through and disables the button. Or, I should say, “just makes not work”, because the button does not present itself in the accessibility tree as disabled.