Deswign

Su 24ways come ogni anno prima di Natale escono grandi articoli, vi invito a spulciare bene tutto il contenuto e mi vorrei soffermare e riportare parte di CSS for Accessibility di Ann McMeekin, una raccolta di piccole regole per rendere i nostri css più accessibili. Eccole:

• la prima nasce da un dato disarmante, cioè che la maggior parte dei siti non dichiara un colore di defualt allo sfondo delle pagine, quindi ci ricorda di inserire sempre (magari nel nostro foglio di reset) uno sfondo bianco e anche un colore per il testo
  body {background-color: #fff; color:#000;}
• successivamente sofferma l’ attenzione sulla tipografia e sull’ uso improprio o il non uso della proprietà line-height, la quale se ben settata può rendere il contenuto molto più leggibile specialmente per i dislessici, mantenendosi tra il 1.2 e il 1.6 e usando l’ em come dimensione del testo, per esempio:
  p { font: 1em/1.3 "Lucida Grande", Lucida, Verdana, Helvetica, sans-serif; }
• poi ci fa notare come l’ uso di parole tutte in maiuscolo possa creare problemi agli screen-reader (es: CONTACT US diventa Contact U S) quindi suggerisce di lasciare il testo in minuscolo e poi trasformarlo tramite la proprietà text-transform:
  .uppercase { text-transform: uppercase }
• rendere i link più accessibili: ogni link dovrebbe essere sottolineato, e se decidete di farlo non lasciate la sottolineatura di default che crea problemi di lettura (es: con le lettere g e y) ma sostituitela con un bordo e padding:
  text-decoration: none;
  border-bottom: 1px #000 solid;
  padding-bottom: 2px;

  come sapete potete usare la pseudo classe :hover per generare un effetto al passaggio del mouse sul link, ma le persone che possono usufruire di questo ulteriore indizio visivo sono anche quelle che ne hanno meno bisogno, dato che già il cursore cambia da freccia a mano al passaggio su un link, quindi prestate più attenzione agli utenti non vedenti e usate la pseudo classe :focus ma per poter funzionare anche su Internet Explorer, dovete usarla insieme all’ :active, se volete realizzare un inversione di colori al passaggio del mouse sui link potete usare queste regole:

  a:link {
  background: #fff;
  color: #000;
  font-weight: bold;
  text-decoration: none;
  border-bottom: 1px #000 solid;
  padding-bottom: 2px;
  }a:visited {
  background: #fff;
  color: #800080;
  font-weight: bold;
  text-decoration: none;
  border-bottom: 1px #000 solid;
  padding-bottom: 2px;
  }a:focus, a:hover, a:active {
  background: #000;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  border-bottom: 1px #000 solid;
  padding-bottom: 2px;
  }
• infine ci mostra un di un menù di navigazione accessibile: esempio.

Above all, remember that accessibility is for life, not just for Christmas.