Permission Request Patterns

Permission Reason

A reminder notifications card explains the reason before a request button and states that no browser prompt appears.

Program

Permission requests are easier to trust when the page explains the reason before showing a request button. This lesson shows only a static UI state.

permission_reason_before_prompt.html
Visuals: captured from real browser rendering
<section class="permission-card">
  <h2>Reminder notifications</h2>
  <p id="permission-why">We ask so this page can show a reminder when a saved task is due.</p>
  <button type="button" aria-describedby="permission-why no-prompt">Enable reminders</button>
  <p id="no-prompt" role="status">No browser permission prompt appears in this lesson.</p>
</section>
<style>
  .permission-card { display: grid; gap: 10px; max-width: 30rem; border: 1px solid #94a3b8; padding: 12px; }
  .permission-card button { justify-self: start; padding: 8px 12px; }
  .permission-card p { margin: 0; color: #475569; }
</style>

  1. Name the permission purpose.

    The card names the concrete reminder notification use case.
    The card names the concrete reminder notification use case.

  2. Explain the reason before the button.

    The page explains why it would ask before showing the request button.
    The page explains why it would ask before showing the request button.

  3. Connect the button to the explanation.

    The button references both the reason and no-prompt status text.
    The button references both the reason and no-prompt status text.

  4. Show the request affordance.

    The button is visible, but this lesson does not run a permission request.
    The button is visible, but this lesson does not run a permission request.

  5. State what does not happen.

    The status makes clear that no browser prompt appears.
    The status makes clear that no browser prompt appears.

  6. Check the permission request UI.

    The UI shows a reason, a button, and an honest no-prompt status.
    The UI shows a reason, a button, and an honest no-prompt status.
reason first Explain why a permission is useful before a request button.
described button aria-describedby connects the button to the reason and status text.
no prompt Static lessons should not imply a browser permission prompt appeared.