TORNA INDIETRO
Oggi l'accessibilità (A11y) è fondamentale in tutte le fasi della costruzione di prodotti software personalizzati. Partendo dalla parte di progettazione UX/UI, si sconfina in livelli avanzati di costruzione di funzionalità nel codice. Offre numerosi vantaggi agli sviluppatori che lavorano per aumentare la DX, ma soprattutto agli utenti finali. Una delle parti più importanti dell'HTML sono i tag semantici ed è di questo che vorrei occuparmi in questa sede.
Gli sviluppatori front-end devono avere una stretta conoscenza di Tag HTML poiché questo è il loro ambiente naturale su base giornaliera. Scommetto che tutti voi conoscete alcuni tag di base come , , e così via. Ma, per esempio, sapevate che potete suggerire un momento di interruzione di parola usando semplicemente HTMLsenza CSS?
Supponiamo che stiate lavorando a un sito web o a un'applicazione per un cliente tedesco. Come sapete, le parole tedesche possono essere molto lunghe. Quindi avete il progetto con alcuni contenuti di testo che dovete riprodurre in codice e questo contenuto deve essere diffuso in momenti ben precisi. Ecco che arriva il
Biscotti per il GeburtstagTutto qui! Con un tag così semplice, è possibile manipolare il contenuto del testo come si desidera.
Ma che dire del supporto del browser? A dire il vero, è abbastanza buono. La maggior parte dei browser comprende questo tag, ma Opera su Android e Safari su iOS potrebbero avere problemi.
Immaginate di costruire un'applicazione per la gestione dello spazio di archiviazione su disco. Dovete mostrare in qualche modo nell'interfaccia utente quanto spazio di archiviazione è ancora disponibile e volete renderlo il più accessibile possibile. Questo è un caso d'uso perfetto per l'applicazione <meter> tag. Si limita a visualizzare il valore all'interno di un intervallo definito. Un'altra cosa interessante di questo tag sono i suoi attributi:
Forse conoscete anche un tag simile, ovvero progress. Qual è la differenza tra i due? Il tag progress deve essere utilizzato per i compiti in corso. In altre parole, utilizzare il tag progress quando si ha a che fare con un'attività specifica. Il tag meter deve essere usato per mostrare l'utilizzo del disco o della memoria. Un'altra differenza è che il tag meter non è supportato da IE e questo è l'unico svantaggio di questo tag.
Vi siete mai chiesti come costruire un indicatore accessibile delle parti di contenuto cancellate e aggiunte (diff in GitHub o notifiche via email da Jira quando il ticket è stato aggiornato)? Basta avvolgere il contenuto cancellato con l'elemento<del><p>Contenuto appena cancellato</p></del>. Per mostrare solo la parte aggiunta del contenuto, si può usare l'opzione esattamente nello stesso modo. Questo tag offre anche due attributi:
Esistono, ovviamente, strumenti molto più utili in HTML . Consiglio vivamente di utilizzarli tutti quando è possibile e opportuno. I vostri clienti e gli utenti dell'applicazione vi ringrazieranno per questo approccio. Attenzione però, perché alcuni tag potrebbero essere deprecati. Si può sempre verificare che un tag meno comune che si vuole usare sia ancora valido e abbia un buon supporto in Documentazione MDN.
Italian 
English 
German 
Swedish 
Danish 
Norwegian 
Finnish 
French 
Arabic 
Japanese 
Korean 
Polish