Accessibilità

Perché usare l’accessibilità?

L’accessibilità su web (spesso indicata anche con a11y) è il processo attraverso il quale si creano applicazioni che siano fruibili da chiunque. L’accessibilità è necessaria per permettere a tutte quelle tecnologie di assistenza di interpretare le pagine web.

React fornisce il pieno supporto per la creazione di siti web accessibili, spesso semplicemente utilizzando HTML nel modo standard.

Standards e linee guida

WCAG

L’acronimo WCAG sta per Web Content Accessibility Guidelines e fornisce linee guida per la creazione di pagine web accessibili.

La seguente lista fornisce un’anteprima:

WAI-ARIA

Il documento sull’iniziativa del web accessibile - Accessible Rich Internet Applications contiene tecniche per costruire widget JavaScript accessibili.

Tutti gli attributi HTML aria-* sono pienamente supportati in JSX. Mentre la maggior parte delle proprietà e attributi in React sono camelCase, gli attributi aria-* sono separati da trattino (-, notazione anche nota come kebab-case, lisp-case ecc.) dal momento che sono elementi HTML.

<input
  type="text"
  aria-label={labelText}  aria-required="true"  onChange={onchangeHandler}
  value={inputValue}
  name="name"
/>

HTML semantico

L’HTML semantico costituisce la base per l’accessibilità in un’applicazione web. Usare diversi elementi HTML per rafforzare il significato dell’informazione nel vostro sito, spesso può portare ad avere accessibilità gratis.

MDN HTML elements reference

Alcune volte spezziamo la semantica di HTML quando inseriamo elementi come <div> all’interno di JSX solo per fare in modo che il nostro codice funzioni, specialmente quando lavoriamo con le liste (<ol>, <ul> e <dl>) e tabelle <table>. In questi casi possiamo usare i Fragments di React per raggruppare più elementi insieme.

Ad esempio, diamo uno sguardo al seguente codice

import React, { Fragment } from 'react';
function ListItem({ item }) {
  return (
    <Fragment>      <dt>{item.term}</dt>
      <dd>{item.description}</dd>
    </Fragment>  );
}

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        <ListItem item={item} key={item.id} />
      ))}
    </dl>
  );
}

è possibile mappare la collezione di elementi semplicemente all’interno di fragments, vedi il codice seguente, come faresti con qualsiasi altro tipo di elemento

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // Fragments should also have a `key` prop when mapping collections
        <Fragment key={item.id}>          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </Fragment>      ))}
    </dl>
  );
}

Quando non si ha bisogno delle props all’interno del tag Fragment è anche possibile utilizzare la sua notazione abbreviata, naturalmente se è supportata:

function ListItem({ item }) {
  return (
    <>      <dt>{item.term}</dt>
      <dd>{item.description}</dd>
    </>  );
}

Per maggiori informazioni fai riferimento alla documentazione sui Fragments di React.

Form accessibili

Labeling

Ogni elemento di un form, come ad esempio <input> e <textarea>, necessita di essere etichettato come accessibile. É necessario mettere label descrittive, dato che queste vengono processate dai lettori di schermi.

Le seguenti risorse mostrano come raggiungere tale scopo:

Sebbene tutte queste pratiche standard possano essere utilizzate in React, tieni presente che l’attributo for in JSX viene scritto come htmlFor:

<label htmlFor="namedInput">Name:</label><input id="namedInput" type="text" name="name"/>

Notifica degli errori all’utente

Gli errori devono essere compresi da tutti gli utenti. Le seguenti risorse mostrano come esporre testi di errore ai lettori di schermo:

Focus Control

Assicurati che la tua applicazione web sia totalmente utilizzabile tramite tastiera:

La WebAIM parla di accessibilità tramite tastiera

Keyboard focus and focus outline

Il focus della tastiera fa riferimento all’elemento del DOM selezionato per accettare un input. É semplicemente riconoscibile come un contorno sul campo di input come quello che si vede nell’immagine seguente: