{"id":19,"date":"2007-10-03T21:16:28","date_gmt":"2007-10-03T20:16:28","guid":{"rendered":"http:\/\/www.carinato.net\/?p=19"},"modified":"2007-10-03T21:16:28","modified_gmt":"2007-10-03T20:16:28","slug":"tag-radio-e-accessibilita","status":"publish","type":"post","link":"https:\/\/carinato.com\/?p=19","title":{"rendered":"Tag Radio e accessibilit\u00e0"},"content":{"rendered":"

Girovagando per la rete ho trovato un form che mi ha suggerito un’idea…<\/p>\n

Problema<\/strong>: Campi radio tipo “SI” e “NO” con una label senza campo associato per entrambi i campi ed un testo descrittivo pi\u00f9 dettagliato. ecco un esempio di come si presenta attualmente la struttura (semplificata) in Plone<\/a>:<\/p>\n

\n
Se ti piace la musica classica scegli Si altrimenti scegli No<\/div>\n

Codice<\/strong>:<\/p>\n

  <div>\n  <label>Musica ?<\/label>\n  <div>Se ti piace la musica classica scegli Si altrimenti scegli No<\/div>\n  <input type=\"radio\" name=\"musica\" id=\"musicasi\" value=\"si\" \/>\n  <label for=\"musicasi\">Si<\/label>\n\n  <input type=\"radio\" name=\"musica\" id=\"musicano\" value=\"no\" \/>\n  <label for=\"musicano\">No<\/label>\n<\/div><\/pre>\n
Lo screen reader Jaws, quando \u00e8 in modalit\u00e0 ediitazione, ignora la prima label non associata ad alcun campo ed il div con classe formHelp e legge solo Si e No. L’utente non vedente \u00e8 come se dovesse “firmare un assegno in bianco..”.
\nL’unica cosa che pu\u00f2 fare \u00e8 uscire dalla modalit\u00e0 editazione leggere i testi e rientrare in modalit\u00e0 editazione… Questa operazione diventa particolarmente pesante per form con molti campi.<\/p>\n
Primo aggiustamento<\/strong>: Questo tipo di campi devono essere racchiusi in un fieldset. il tag legend verr\u00e0 letto da Jaws:<\/p>\n\n
\n
\nMusica ?<\/legend>\n
Se ti piace la musica classica scegli Si
\naltrimenti scegli No<\/div>\n
 
Codice<\/strong>:<\/p>\n
<div>\n   <fieldset>\n      <legend>Musica ?<\/legend>\n      <div>Se ti piace la musica classica scegli Si\naltrimenti scegli No<\/div>\n      <input type=\"radio\" name=\"musica\" id=\"musicasi\" value=\"si\" \/>\n      <label for=\"musicasi\">Si<\/label>\n\n      <input type=\"radio\" name=\"musica\" id=\"musicano\" value=\"no\" \/>\n      <label for=\"musicano\">No<\/label>\n   <\/fieldset>\n<\/div><\/pre>\n
Ora Jaws in modalit\u00e0 editazione  legge meglio il form, ma salta ancora il div di classe formHelp.<\/p>\n
Da notare che quando Jaws legge i campi SI e NO, ora antepone sempre il testo della LEGEND; pronuncia qualcosa tipo “Musica ? SI” e “Musica ? NO”.<\/p>\n
Soluzione proposta<\/strong>: Prendendo spunto da un form visto in rete ho pensato fattibile inserire un link nella legend che punti al div col testo di aiuto:<\/p>\n
\n
\nMusica ? [ Help<\/a> ]<\/legend>\n
Se ti piace la musica classica scegli Si altrimenti scegli No<\/div>\n
 
Codice<\/strong>:<\/p>\n
<div>\n   <fieldset>\n      <legend>Musica ? [ <a href=\"#aiuto_musica\" title=\"ulteriori\ninformazioni sulla compilazione del campo\">Help<\/a> ]<\/legend>\n      <div id=\"aiuto_musica\">Se ti piace la musica\nclassica scegli Si altrimenti scegli No<\/div>\n      <input type=\"radio\" name=\"musica\" id=\"musicasi\" value=\"si\" \/>\n      <label for=\"musicasi\">Si<\/label>\n\n      <input type=\"radio\" name=\"musica\" id=\"musicano\" value=\"no\" \/>\n      <label for=\"musicano\">No<\/label>\n   <\/fieldset>\n<\/div><\/pre>\n
Verificato con Jaws, il link viene letto correttamente e consente, premendo il tasto invio, di uscire automaticamente dalla modalit\u00e0 editazione e leggere il testo di aiuto.
\nPer gli utenti vedenti \u00e8 possibile nascondere tramite css il link “[Help ]” in quando non necessario:<\/p>\n
<span>[ <a...>Help<\/a> ]<\/span><\/pre>\n
Risultato<\/strong>:<\/p>\n
Pro<\/strong>: l’utente non vedente se vuole pu\u00f2 accedere facilmente al testo di aiuto e viene indicato subito il fatto che tale testo esiste. Non c’e’ bisogno che esca manualmente dalla modalit\u00e0 editazione e cerchi manualmente se esiste qualcosa che Jaws non ha letto.<\/p>\n
Contro<\/strong>: in questo modo la legend viene letta come detto prima prima di ogni campo radio e con la legend anche il testo del link: “Musica ? Aiuto SI” e “Musica ? Aiuto NO”<\/p>\n","protected":false},"excerpt":{"rendered":"
Girovagando per la rete ho trovato un form che mi ha suggerito un’idea… Problema: Campi radio tipo “SI” e “NO” con una label senza campo associato per entrambi i campi ed un testo descrittivo pi\u00f9 dettagliato. ecco un esempio di come si presenta attualmente la struttura (semplificata) in Plone: Musica ? Se ti piace la […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[],"class_list":["post-19","post","type-post","status-publish","format-standard","hentry","category-accessibilita"],"_links":{"self":[{"href":"https:\/\/carinato.com\/index.php?rest_route=\/wp\/v2\/posts\/19","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/carinato.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/carinato.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/carinato.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/carinato.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=19"}],"version-history":[{"count":0,"href":"https:\/\/carinato.com\/index.php?rest_route=\/wp\/v2\/posts\/19\/revisions"}],"wp:attachment":[{"href":"https:\/\/carinato.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=19"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/carinato.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=19"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/carinato.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=19"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}