Sito in aggiornamento

Il sito è in fase di aggiornamento dopo la sostituzione del sito vecchio.

Qual è la differenza tra Button e Link

Nell’immagine ci sono 2 bottoni e 2 link, ma quali sono quelli corretti? Basta usare il buon senso e un po’ di astuzia.

 Slide 1: Differenza tra Button e Link in accessibilità digitale

Cosa trovi in questa pagina:

  1. Bottoni VS Link: come usarli nel modo corretto?
  2. Caratteristiche principali dei bottoni
  3. Per cosa usare i bottoni
  4. Caratteristiche principali dei link
  5. Per cosa usare i link
  6. Quindi?
  7. Bottoni VS Link
  8. A volte è utile mostrare i link come se fossero bottoni
  9. Design ovvio
  • Bottoni VS Link: come usarli nel modo corretto?

    Nell’immagine ci sono 2 bottoni e 2 link, ma quali sono quelli corretti? Basta usare il buon senso e un po’ di astuzia.

  • Caratteristiche principali dei bottoni:

    • Hanno la proprietà :focus by default;
    • Si possono cliccare con barra spaziatrice;
    • Si possono disabilitare;
    • Sono annunciati dallo screen reader con “buttonrole”;
    • Hanno proprietà :focus, :hover, :active, :disabled .
  • I bottoni sono ideali per:

    • Aprire una finestra modale;
    • Aprire un submenu con tastiera;
    • Avviare contenuti come video player;
    • Accendere e spegnere eventi;
    • Aggiungere e togliere classi per creare eventi con CSS;
    • Form di contatto.
  • Caratteristiche principali dei link:

    • Creare ipertesti tra pagine;
    • Aprire una nuova pagina;
    • Cambiare URL;
    • Aprire una nuova finestra con target=”_blank”;
    • Hanno la proprietà :focus by default;
    • Si possono cliccare con tasto invio;
    • Non si possono disabilitare naturalmente;
    • Si può usare tabindex=”-1″ e aria-hidden=”true” per toglierli dallo screen reader;
    • Sono annunciati dallo screen reader con “linkrole”;
    • Hanno proprietà :link, :visited, :focus, :hover, :active .
  • I link sono ideali per:

    • Navigare verso altre pagine;
    • Creare anchor link nel sito.
  • Quindi?

    I bottoni servono per azionare eventi particolari;

    I link servono per navigare tra pagine e tra sezioni della pagina.

  • Bottoni VS Link

    HTML ci mette già a disposizione molti indizi utili, quindi non serve scambiare bottoni e link. A volte vediamo usare anche i DIV come se fossero bottoni. Questo è ancora più sconsigliato, perché vuol dire che bisogna riassegnare le proprietà, come il :focus.

  • A volte è utile mostrare i link come se fossero bottoni

    Forse stai pensando ai link “Leggi di più” nelle card del blog. Ma è giusto? Sono dell’idea che non sia utile avere link ripetitivi e per nulla esplicativi, ricordando che c’è chi usa lo screen reader.

  • Design ovvio

    Sono invece dell’idea che le card dovrebbero essere progettate in modo da rendere ovvia la proprietà cliccabile, ad esempio sottolineando il link, come fa NHS. In aggiunta, si può usare la tecnica con :after in position absolute per allargare la superficie cliccabile alla card, senza avere molteplici link (per foto, titolo e link). Non penso che ci sia una sola soluzione ma più soluzioni. Mi piacerebbe sapere cosa ne pensate.