import{j as e,M as s}from"./index-BZ7NTJ0X.js";import{useMDXComponents as t}from"./index-BjvbZXZK.js";import{I as r}from"./Icons-BOlkDbeb.js";import{T as l}from"./custom-title-docs-CZy2Hnhl.js";import"./iframe-B7BuO-94.js";import"./index-C__6K5js.js";import"./index-DrFu-skq.js";function o(n){const i={br:"br",code:"code",h1:"h1",li:"li",p:"p",strong:"strong",ul:"ul",...t(),...n.components};return e.jsxs(e.Fragment,{children:[e.jsx(s,{title:"Foundation/Icone"}),`
`,e.jsx(l,{title:"Icone",links:[{text:"Intro",href:"#intro"},{text:"Icone più utilizzate",href:"#icone-più-utilizzate"}]}),`
`,e.jsx(i.h1,{id:"intro",children:"Intro"}),`
`,e.jsxs(i.p,{children:["Gli elementi iconici esprimono funzionalità e collegamenti che potrebbero richiedere un supporto testuale. Le icone scelte sono progettate ",e.jsx("br",{}),` per
avere un family look tra loro in modo da aumentarne l'unità visiva. La coerenza iconografica è possibile grazie a `,e.jsx("a",{href:"http://fontawesome.io/",target:"_blank",children:"FontAwesome"}),": uno ",e.jsx("br",{}),` speciale tipo di
font composto esclusivamente da icone vettoriali, accessibili e customizzabili tramite CSS. Questo set di icone è molto ricco e `,e.jsx("br",{}),"per utilizzarlo è necessario aggiungere all'elemento ",e.jsx(i.code,{children:"<span></span>"}),` l'attributo
`,e.jsx(i.code,{children:'class="fa"'})," e la classe identificativa dell'icona stessa.",e.jsx("br",{})," Esempio: ",e.jsx(i.code,{children:'<span class="fa fa-pencil"></span>'})," mostrerà l'icona di una matita."]}),`
`,e.jsx(i.h1,{id:"accessibilità",children:"Accessibilità"}),`
`,e.jsx(i.p,{children:"Per rendere il significato delle icone comprensibile per tutti gli utenti è necessario seguire queste indicazioni:"}),`
`,e.jsxs(i.ul,{children:[`
`,e.jsxs(i.li,{children:[`
`,e.jsxs(i.p,{children:[e.jsx(i.strong,{children:"Icone cliccabili"})," (link o bottoni):",e.jsx(i.br,{}),`
`,"Inserire su tutte le icone un tooltip che descriva chiaramente lo scopo dell'elemento.",e.jsx(i.br,{}),`
`,"Il tooltip deve:"]}),`
`,e.jsxs(i.ul,{children:[`
`,e.jsx(i.li,{children:"Essere ingrandibile fino al 200%"}),`
`,e.jsx(i.li,{children:"Aprirsi automaticamente al focus"}),`
`,e.jsx(i.li,{children:"Essere letto automaticamente dallo screen reader"}),`
`]}),`
`]}),`
`,e.jsxs(i.li,{children:[`
`,e.jsxs(i.p,{children:[e.jsx(i.strong,{children:"Icone non cliccabili"})," (es. usate per rappresentare una categoria o tipologia):",e.jsx(i.br,{}),`
`,"È necessario aggiungere un’etichetta testuale all’icona.",e.jsx(i.br,{}),`
`,"In alternativa, è possibile fornire una legenda con il significato delle icone:"]}),`
`,e.jsxs(i.ul,{children:[`
`,e.jsxs(i.li,{children:["La legenda deve essere posizionata ",e.jsx(i.strong,{children:"prima"})," delle icone"]}),`
`,e.jsx(i.li,{children:"Lo screen reader deve annunciare il significato di ogni singola icona"}),`
`]}),`
`]}),`
`]}),`
`,e.jsx("br",{}),`
`,e.jsx(i.h1,{id:"icone-più-utilizzate",children:"Icone più utilizzate"}),`
`,e.jsx(r,{})]})}function j(n={}){const{wrapper:i}={...t(),...n.components};return i?e.jsx(i,{...n,children:e.jsx(o,{...n})}):o(n)}export{j as default};
