Buttons use only color to indicate permissions status

[ljme]

Written by James Thompson as part of an accessibility audit:
All platforms, tested on 6/25/20

All browsers

Not a regression

Whether or not a button has permission in the browser is indicated with a background color change for the applicable button. No textual equivalent is available in the code.

Light green for
Notifications

Light red for

Location

White for

Camera

Ideally, the color changes would rely on a hue difference between the red and green (for color-blind users), the color will have a high contrast difference from the background (for low-vision users), and either text that is moved of-screen using CSS (See below) or aria-attributes that describes the current state of the button.

Using off-screen text

<style> .off-screen { position: absolute; left:-500px; top:0; width:1; height:1; overflow:hidden; } </style>

NotificationsAllowed

…

LocationBlocked</span

…

Camera

Using ARIA attributes

<button aria-pressed=”true” aria-label=”Notifications allowed” id="notifications" class="success">Notifications

…

<button aria-pressed=”true” aria-label=”Location blocked” id="location" class="error">Location

…

Camera

[lgarron]

Ideally, we'd also use permission API calls to indicate the status of each of the permissions.