The Mandated Accessibility of the Geolocation Element – Frontend Masters Blog

An element has been introduced in HTML. Chrome pioneered its integration, and it’s now available in Chrome, with other browsers yet to follow. However, the development process did involve other browser manufacturers, which is promising.

Manuel Matuzović offers a comprehensive introductory blog post.

The element is not compatible within an , preventing an embedded demo here. You can view a small demo here, and access the code here.

Key points to consider:

It’s essentially a
A click on the button will:
- conduct a geolocation and trigger a location event, provided access is granted.
- prompt for access if necessary before proceeding.
- remind and request permission anew if access has been previously denied.
The last bullet point is critical, enabling permission recovery in a manner previously unavailable.
Employ it using the progressive-enrichment approach, positioning an actual
The implementation enforces stringent accessibility guidelines.

The accessibility enforcement lends itself to interesting exploration. This element’s behavior is somewhat novel in HTML.

The motivation behind these guidelines doesn’t seem to stem from accessibility concerns per se, but from security considerations aimed at preventing unlawful geolocation data requests. Situations like “Click here for 100 free Robux, then accept the next prompt,” illustrate this issue, although such tactics can’t be entirely eradicated.

Accessibility compliance manifests in numerous ways:

Text and Icon Constraints

It’s essentially unmodifiable. The content resides within a user-agent Shadow Root without part attributes for styling customization.

Code snippet showing a geolocation permission request with HTML structure and SVG icon.

Standard styling methods affecting the Shadow DOM remain applicable, like color adjustments affecting text and the SVG icon set to fill: currentColor; for synchronized color changes.

Automatic localization, enabled by the lang attribute, ensures text displays in the appropriate language.

CSS Restrictions

Some CSS applied to a button is disregarded.

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

This isn’t necessarily comprehensive, but when CSS doesn’t function as intended, it’s typically deliberate. Discrepancies exist, such as the Chrome post claiming 2D translates are permitted when they aren’t.