Button Name

Qunado un pulsante non ha un nome accessibile

Accessibility

Quando un pulsante non ha un nome accessibile

Le tecnologie assistive, come gli screen reader, non sono in grado di fornire informazioni su un pulsante se questo non ha un nome accessibile; pertanto lo chiamano solamente "pulsante".

 

Come viene visualizzato l'audit del nome del pulsante su SeoChecker

Quando un pulsante non ha un contenuto testuale o una proprietà aria-label, SeoChecker lo segnalerà.

button name

Come posso creare nomi accessibili per i pulsanti

Utilizzate una CTA chiara e precisa quando create un contenuto testuale per il button:

<button> Shop now </button>

Utilizzare l'attributo aria-label per descrivere il pulsante quando la label non è visibile:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Accessible icon button demo</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <link rel="stylesheet" href="/style.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
  </head>  
  <body>
    <h1>Accessible icon button demo</h1>
    
    <button class="btn" aria-label="Left Align">
      <span class="material-icons" aria-hidden="true">format_align_left</span>
    </button>
    <button class="btn" aria-label="Center Align">
      <span class="material-icons" aria-hidden="true">format_align_center</span>
    </button>
    <button class="btn" aria-label="Right Align">
      <span class="material-icons" aria-hidden="true">format_align_right</span>
    </button>
    <button class="btn" aria-label="Justify">
      <span class="material-icons" aria-hidden="true">format_align_justify</span>
    </button>
  </body>
</html>

Guide correlate

Per saperne di più Accessibility

Seo Audit

SEO Audit

Prestazioni SEO sulla pagina e checkup.

Oltre 300 parametri per l'analisi approfondita delle pagine.

Provalo adesso

Condividi questa Guida.

Ti è piaciuta? Condividila!

Share it!

Web tools per sviluppatori moderni. Provali!

Generatori, builder e validatori per migliorare le tue performance di ottimizzazione SEO e web

Home Back to top of the page