Questa tipologia di guida \u00e8 pensata e dedicata agli sviluppatori web<\/b> che, come me, si trovano in certi casi a non sapere bene come progettare un certo componente, come i men\u00f9 di navigazione o gli accordion, giusto per fare due esempi molto diffusi.<\/p>\n\nMen\u00f9 di navigazione e dropdown<\/h2>\n
Il men\u00f9 di navigazione \u00e8 probabilmente l\u2019elemento pi\u00f9 usato all\u2019<\/b>interno di un sito web<\/b>. Dopotutto, permette all\u2019utente di navigare all\u2019interno del sito e raggiungere le pagine principali<\/b>, o almeno quelle che si vuole mettere in evidenza.<\/p>\n
Questi men\u00f9 sono solitamente posizionati in alto<\/b> (nell\u2019header), a lato<\/b> (aside) o in fondo<\/b> (footer). Potrebbero essere presenti anche delle navigazioni contestuali, ad esempio inserite in una barra fissa<\/b> che segue lo scorrimento della pagina.<\/p>\nCosa sapere per l’accessibilit\u00e0<\/h2>\n
In termini di accessibilit\u00e0, le informazioni principali che dobbiamo conoscere sono le seguenti:<\/p>\n
La struttura HTML suggerita<\/b> per creare un men\u00f9 di navigazione prevede i seguenti elementi:<\/p>\n Possiamo vedere gli esempi di Navbar<\/a> creati da Bootstrap per avere un\u2019idea base.<\/p>\n Un altro elemento importante che spesso fa parte degli elementi di navigazione \u00e8 il pulsante di apertura<\/b>, che io generalmente chiamo \u201chandler\u201d, e pu\u00f2 essere usato per attivare o disattivare il men\u00f9. Pensiamo al caso di un men\u00f9 che si apre a tendina<\/b> (come i dropdown<\/a> o soluzioni simili) oppure al caso di una navigazione che viene nascosta da mobile<\/b>, e che viene aperta solo dopo aver attivato il pulsante.<\/p>\n Questa strada prevede di avere un elemento, che generalmente \u00e8 un <button> ma potrebbe essere anche un <input type=\u201dcheckbox\u201d> senza attributo \u201cname\u201d, il quale permette di catturare il click<\/b> o l\u2019azione dell\u2019utente e scegliere se mostrare o nascondere<\/b> il men\u00f9.<\/p>\n Ecco un esempio semplificato<\/b>, preso da un caso reale di un sito web che ho sviluppato e che usa WordPress e Bootstrap Italia<\/b>:<\/p>\n In questo esempio possiamo trovare gli elementi principali che ci interessano:<\/p>\n Se volessimo replicare una struttura simile senza l\u2019uso di Bootstrap<\/b>, quindi per una soluzione completamente custom<\/b>, dovremmo replicare almeno il comportamento che modifica il valore dell\u2019attributo aria-expanded<\/b> e poi mostrare o nascondere il men\u00f9. Molto banalmente potremmo fare una cosa del genere in Javascript e in CSS:<\/p>\n Ora, chiaramente l\u2019esempio \u00e8 molto basilare ma \u00e8 utile per capire il concetto: mostriamo o nascondiamo<\/b> il men\u00f9 quando il pulsante viene azionato e modifichiamo l\u2019attributo aria-expanded<\/b>.<\/p>\n Per selezionare il men\u00f9 corretto tramite Javascript, facciamo uso di un data-attribute<\/a>, che \u00e8 un attributo HTML che non ha valore semantico<\/b> ma \u00e8 molto utile per passare dei valori a Javascript.<\/p>\n La modifica dell\u2019aria-expanded richiede per forza di cose l\u2019uso di Javascript<\/b>, ma in ogni caso potremmo optare anche per una soluzione con un checkbox<\/b> invece del button, e mostrare il men\u00f9 quando questo checkbox \u00e8 selezionato:<\/p>\n In questo secondo esempio, usiamo Javascript solo per impostare aria-expanded in modo dinamico<\/b>, e CSS per nascondere i menu <ul> di default, mostrandoli solo quando il checkbox viene selezionato. L\u2019evento onchange<\/b> ci serve proprio per capire quando viene modificato lo stato del checkbox.<\/p>\n Ho anche inserito una variante alternativa di codice Javascript fatta con jQuery<\/b>, framework che viene spesso usato quando si lavora con WordPress<\/b>, cos\u00ec da fornire un caso pi\u00f9 completo.<\/p>\n Questa tipologia di guida \u00e8 pensata e dedicata agli sviluppatori web che, come me, si trovano in certi casi a non sapere bene come progettare un certo componente, come i men\u00f9 di navigazione o gli accordion, giusto per fare due esempi molto diffusi. Men\u00f9 di navigazione e dropdown Il men\u00f9 di navigazione \u00e8 probabilmente l\u2019elemento […]<\/p>\n","protected":false},"author":2,"featured_media":258,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-174","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/posts\/174"}],"collection":[{"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/comments?post=174"}],"version-history":[{"count":5,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/posts\/174\/revisions"}],"predecessor-version":[{"id":259,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/posts\/174\/revisions\/259"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/media\/258"}],"wp:attachment":[{"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/media?parent=174"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/categories?post=174"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/tags?post=174"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}nav > ul > li > a<\/code><\/pre>\nPulsanti di apertura (dropdown)<\/h2>\n
<nav aria-label=\"Principale\" class=\"navbar navbar-expand-lg main-nav has-megamenu\" id=\"menu-principale\">\r\n <ul class=\"navbar-nav dl-menu nav-list nav-list-primary\" data-element=\"menu\">\r\n <li class=\"nav-item dropdown\">\r\n <button class=\"dropdown-toggle\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\" id=\"mainNavDropdownDesktopHandler1\" data-focus-mouse=\"false\" aria-label=\"Apri\/chiudi men\u00f9 di: Chi siamo\" data-bs-target=\"mainNavDropdownDesktop1\">\r\n <span class=\"text\">Chi siamo<\/span>\r\n <svg role=\"img\" class=\"icon icon-xs ms-1\"><use href=\"sprites.svg#it-expand\"><\/use><\/svg>\r\n <\/button>\r\n <div id=\"mainNavDropdownDesktop1\" class=\"dropdown-menu link-list-wrapper\">\r\n <ul aria-labelledby=\"mainNavDropdownDesktop1\" class=\"link-list\">\r\n <li><a class=\"list-item\" href=\"#\">Testo del link 1<\/a><\/li>\r\n <li><a class=\"list-item\" href=\"#\">Testo del link 2<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/li>\r\n <\/ul>\r\n<\/nav><\/code><\/pre>\n\n
<nav aria-label=\"Contestuale\">\r\n <button onclick=\"toggleMenu(this)\" data-menu-id=\"menu-1\" aria-expanded=\"false\">Apri\/chiudi men\u00f9 1<\/button>\r\n <ul id=\"menu-1\">\r\n <li><a href=\"#\">Link 1<\/a><\/li>\r\n <li><a href=\"#\">Link 2<\/a><\/li>\r\n <\/ul>\r\n <button onclick=\"toggleMenu(this)\" data-menu-id=\"menu-2\" aria-expanded=\"false\">Apri\/chiudi men\u00f9 2<\/button>\r\n <ul id=\"menu-2\">\r\n <li><a href=\"#\">Link 3<\/a><\/li>\r\n <li><a href=\"#\">Link 4<\/a><\/li>\r\n <\/ul>\r\n<\/nav>\r\n\r\n<style>\r\nnav ul { display:none; }\r\ninput[type=\"checkbox\"]:checked ~ ul { display:block; }\r\n.d-none { display:none; }\r\n.d-block { display:block; }\r\n<\/style>\r\n\r\n<script>\r\nfunction toggleMenu(element) {\r\n let selector = \"#\" + element.dataset.menuId;\r\n let menu = document.querySelectorAll(selector)[0];\r\n\r\n if (element.getAttribute('aria-expanded') == 'true') {\r\n \/\/ Menu is already open, let's close it\r\n menu.classList.add('d-none');\r\n menu.classList.remove('d-block');\r\n element.setAttribute('aria-expanded', false);\r\n } else {\r\n \/\/ Menu is closed, let's open it\r\n menu.classList.add('d-block');\r\n menu.classList.remove('d-none');\r\n element.setAttribute('aria-expanded', true);\r\n }\r\n}\r\n<\/script><\/code><\/pre>\nL’uso di aria-expanded<\/h2>\n
<nav aria-label=\"Contestuale\">\r\n <div class=\"menu-wrapper\">\r\n <input id=\"menu-1-handler\" class=\"visually-hidden\" type=\"checkbox\" onchange=\"toggleAriaExpanded(this)\" aria-expanded=\"false\">\r\n <label for=\"menu-1-handler\"><span class=\"visually-hidden\">Apri\/chiudi men\u00f9 1<\/span><\/label>\r\n <ul id=\"menu-1\">\r\n <li><a href=\"#\">Link 1<\/a><\/li>\r\n <li><a href=\"#\">Link 2<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"menu-wrapper\">\r\n <input id=\"menu-2-handler\" class=\"visually-hidden\" type=\"checkbox\" onchange=\"toggleAriaExpanded(this)\" aria-expanded=\"false\">\r\n <label for=\"menu-2-handler\"><span class=\"visually-hidden\">Apri\/chiudi men\u00f9 2<\/span><\/label>\r\n <ul id=\"menu-2\">\r\n <li><a href=\"#\">Link 3<\/a><\/li>\r\n <li><a href=\"#\">Link 4<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n<\/nav>\r\n\r\n<style>\r\nnav ul { display:none; }\r\ninput[type=\"checkbox\"]:checked ~ ul { display:block; }\r\n<\/style>\r\n\r\n<script>\r\nfunction toggleAriaExpanded(element) {\r\n if (element.getAttribute('aria-expanded') == 'true') {\r\n element.setAttribute('aria-expanded', false);\r\n } else {\r\n element.setAttribute('aria-expanded', true);\r\n }\r\n\r\n \/\/ Or, with jQuery (we need to include its files first tho):\r\n let ariaExpanded = jQuery(element).attr('aria-expanded');\r\n\r\n if (ariaExpanded == 'true') {\r\n jQuery(element).attr('aria-expanded', false);\r\n } else {\r\n jQuery(element).attr('aria-expanded', true);\r\n }\r\n}\r\n<\/script><\/code><\/pre>\nLink utili<\/h2>\n
\n
Leggi anche<\/span><\/h2>\n
\n