{"id":206,"date":"2024-08-13T15:42:34","date_gmt":"2024-08-13T15:42:34","guid":{"rendered":"https:\/\/www.accessibilita.digital\/?p=206"},"modified":"2024-08-20T12:53:02","modified_gmt":"2024-08-20T12:53:02","slug":"come-realizzare-una-navigazione-a-briciole-di-pane-breadcrumbs-accessibile","status":"publish","type":"post","link":"https:\/\/www.accessibilita.digital\/come-realizzare-una-navigazione-a-briciole-di-pane-breadcrumbs-accessibile\/","title":{"rendered":"Come realizzare una navigazione a briciole di pane (breadcrumbs) accessibile"},"content":{"rendered":"

Il termine \u201cbreadcrumbs\u201d viene usato per indicare un elemento di navigazione<\/b> che comunica all\u2019utente il percorso del sito<\/strong> nel quale si trova.<\/p>\n\n

Esempio dimostrativo<\/h2>\n

Vediamo un esempio<\/a> fornito dal W3C Design System.<\/p>\n

<nav id=\"breadcrumb\" aria-label=\"Breadcrumb\">\r\n    <div class=\"l-center\">\r\n        <div class=\"l-cluster\">\r\n            <ol class=\"breadcrumbs clean-list\" role=\"list\">\r\n                <li><a href=\"\/\">Home<\/a><\/li>\r\n                <li><a href=\"\/pg2\">Second Page<\/a><\/li>\r\n                <li><a href=\"\/pg2\/this-pg\" aria-current=\"page\">This page<\/a><\/li>\r\n            <\/ol>\r\n        <\/div>\r\n    <\/div>\r\n<\/nav><\/code><\/pre>\n
L\u2019elemento contenitore \u00e8 sempre un <<\/b>nav><\/b>, ma poi usiamo un <ol><\/b> dato che \u00e8 una \u201cordered list\u201d, cio\u00e8 una lista ordinata di elementi. La pagina selezionata usa aria-label<\/b> sul tag <<\/b>a><\/b>.<\/p>\n
Esempio reale con dati strutturati<\/h2>\n
Vediamo un esempio pi\u00f9 completo e comprensivo di vari dati strutturati<\/b>.<\/p>\n
<nav aria-label=\"Breadcrumbs\" class=\"breadcrumb-trail breadcrumbs\" itemprop=\"breadcrumb\">\r\n    <ol class=\"breadcrumbs-list\" data-element=\"breadcrumb\" itemscope=\"\" itemtype=\"http:\/\/schema.org\/BreadcrumbList\">\r\n        <meta name=\"numberOfItems\" content=\"4\">\r\n        <meta name=\"itemListOrder\" content=\"Ascending\">\r\n        <li itemprop=\"itemListElement\" itemscope=\"\" itemtype=\"http:\/\/schema.org\/ListItem\"\r\n            class=\"breadcrumb-item trail-begin\"><a href=\"\/\" rel=\"home\" itemprop=\"item\"\r\n                aria-label=\"Vai alla pagina Home\"><span itemprop=\"name\">Home<\/span><\/a>\r\n            <meta itemprop=\"position\" content=\"1\">\r\n        <\/li>\r\n        <li itemprop=\"itemListElement\" itemscope=\"\" itemtype=\"http:\/\/schema.org\/ListItem\" class=\"breadcrumb-item\"><a\r\n                href=\"\/news\" itemprop=\"item\"\r\n                aria-label=\"Vai alla pagina News e comunicazioni\"><span itemprop=\"name\">News e comunicazioni<\/span><\/a>\r\n            <meta itemprop=\"position\" content=\"2\">\r\n        <\/li>\r\n        <li itemprop=\"itemListElement\" itemscope=\"\" itemtype=\"http:\/\/schema.org\/ListItem\" class=\"breadcrumb-item\"><a\r\n                href=\"\/tipologia-articolo\/news-e-media\/\" itemprop=\"item\"\r\n                aria-label=\"Vai alla pagina News e media\"><span itemprop=\"name\">News e media<\/span><\/a>\r\n            <meta itemprop=\"position\" content=\"3\">\r\n        <\/li>\r\n        <li itemprop=\"itemListElement\" itemscope=\"\" itemtype=\"http:\/\/schema.org\/ListItem\" class=\"breadcrumb-item active\"\r\n            aria-current=\"page\"><span itemprop=\"item\"><span itemprop=\"name\">Titolo della news<\/span><\/span>\r\n            <meta itemprop=\"position\" content=\"4\">\r\n        <\/li>\r\n    <\/ol>\r\n<\/nav><\/code><\/pre>\n
In questo caso abbiamo usato dei metadati per indicare il numero di elementi della navigazione<\/b>, e l\u2019ordine<\/b> nel quale sono disposti, se crescente o decrescente. Usiamo \u201cposition\u201d per indicare la posizione di un elemento nell\u2019elenco, e itemListElement per indicare che l\u2019elemento \u00e8 effettivamente parte di una lista.<\/p>\n
Questi ultimi attributi non sono necessari per l\u2019accessibilit\u00e0<\/b> ma, come tutti i dati strutturati, potrebbero essere utili ai browser o ai crawler per identificare meglio la struttura del documento HTML.<\/p>\n
Link utili<\/h2>\n