[{"data":1,"prerenderedAt":330},["Reactive",2],{"content-query-YU4LakPBNt":3},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"_empty":6,"title":8,"description":9,"body":10,"_type":325,"_id":326,"_source":327,"_file":328,"_extension":329},"/docs/utilities/css/screen-reader","css",false,"","CSS Utility Classes - Screen Reader - Inkline","Use screen reader utilities to hide elements on all devices except screen readers.",{"type":11,"children":12,"toc":322},"root",[13,20,27,48,134,219,224,317],{"type":14,"tag":15,"props":16,"children":19},"element","content-heading",{"subtitle":17,"title":18},"CSS Utility Classes","Screen Reader",[],{"type":14,"tag":21,"props":22,"children":24},"h2",{"id":23},"use-screen-reader-utilities-to-hide-elements-on-all-devices-except-screen-readers",[25],{"type":26,"value":9},"text",{"type":14,"tag":28,"props":29,"children":30},"p",{},[31,33,39,41,46],{"type":26,"value":32},"Hide an element to all devices except screen readers using the ",{"type":14,"tag":34,"props":35,"children":36},"code-inline",{},[37],{"type":26,"value":38},"_visually-hidden",{"type":26,"value":40}," utility class. Use the ",{"type":14,"tag":34,"props":42,"children":43},{},[44],{"type":26,"value":45},"_visually-hidden:focusable",{"type":26,"value":47}," utility variant to show the element again when it’s focused (e.g. when focusing using a keyboard).",{"type":14,"tag":49,"props":50,"children":55},"code",{"className":51,"code":53,"language":54,"meta":7},[52],"language-html","\u003Cspan class=\"_visually-hidden\">\n    Opens in new tab\n\u003C/span>\n","html",[56],{"type":14,"tag":57,"props":58,"children":59},"pre",{},[60],{"type":14,"tag":49,"props":61,"children":62},{"__ignoreMap":7},[63,107,116],{"type":14,"tag":64,"props":65,"children":68},"span",{"class":66,"line":67},"line",1,[69,75,80,85,91,96,102],{"type":14,"tag":64,"props":70,"children":72},{"class":71},"ct-553616",[73],{"type":26,"value":74},"\u003C",{"type":14,"tag":64,"props":76,"children":78},{"class":77},"ct-914029",[79],{"type":26,"value":64},{"type":14,"tag":64,"props":81,"children":82},{"class":71},[83],{"type":26,"value":84}," ",{"type":14,"tag":64,"props":86,"children":88},{"class":87},"ct-762058",[89],{"type":26,"value":90},"class",{"type":14,"tag":64,"props":92,"children":93},{"class":71},[94],{"type":26,"value":95},"=",{"type":14,"tag":64,"props":97,"children":99},{"class":98},"ct-952708",[100],{"type":26,"value":101},"\"_visually-hidden\"",{"type":14,"tag":64,"props":103,"children":104},{"class":71},[105],{"type":26,"value":106},">\n",{"type":14,"tag":64,"props":108,"children":110},{"class":66,"line":109},2,[111],{"type":14,"tag":64,"props":112,"children":113},{"class":71},[114],{"type":26,"value":115},"    Opens in new tab\n",{"type":14,"tag":64,"props":117,"children":119},{"class":66,"line":118},3,[120,125,129],{"type":14,"tag":64,"props":121,"children":122},{"class":71},[123],{"type":26,"value":124},"\u003C/",{"type":14,"tag":64,"props":126,"children":127},{"class":77},[128],{"type":26,"value":64},{"type":14,"tag":64,"props":130,"children":131},{"class":71},[132],{"type":26,"value":133},">",{"type":14,"tag":49,"props":135,"children":138},{"className":136,"code":137,"language":54,"meta":7},[52],"\u003Ca class=\"_visually-hidden:focusable\" href=\"#content\">\n    Skip to main content\n\u003C/a>\n",[139],{"type":14,"tag":57,"props":140,"children":141},{},[142],{"type":14,"tag":49,"props":143,"children":144},{"__ignoreMap":7},[145,196,204],{"type":14,"tag":64,"props":146,"children":147},{"class":66,"line":67},[148,152,157,161,165,169,174,178,183,187,192],{"type":14,"tag":64,"props":149,"children":150},{"class":71},[151],{"type":26,"value":74},{"type":14,"tag":64,"props":153,"children":154},{"class":77},[155],{"type":26,"value":156},"a",{"type":14,"tag":64,"props":158,"children":159},{"class":71},[160],{"type":26,"value":84},{"type":14,"tag":64,"props":162,"children":163},{"class":87},[164],{"type":26,"value":90},{"type":14,"tag":64,"props":166,"children":167},{"class":71},[168],{"type":26,"value":95},{"type":14,"tag":64,"props":170,"children":171},{"class":98},[172],{"type":26,"value":173},"\"_visually-hidden:focusable\"",{"type":14,"tag":64,"props":175,"children":176},{"class":71},[177],{"type":26,"value":84},{"type":14,"tag":64,"props":179,"children":180},{"class":87},[181],{"type":26,"value":182},"href",{"type":14,"tag":64,"props":184,"children":185},{"class":71},[186],{"type":26,"value":95},{"type":14,"tag":64,"props":188,"children":189},{"class":98},[190],{"type":26,"value":191},"\"#content\"",{"type":14,"tag":64,"props":193,"children":194},{"class":71},[195],{"type":26,"value":106},{"type":14,"tag":64,"props":197,"children":198},{"class":66,"line":109},[199],{"type":14,"tag":64,"props":200,"children":201},{"class":71},[202],{"type":26,"value":203},"    Skip to main content\n",{"type":14,"tag":64,"props":205,"children":206},{"class":66,"line":118},[207,211,215],{"type":14,"tag":64,"props":208,"children":209},{"class":71},[210],{"type":26,"value":124},{"type":14,"tag":64,"props":212,"children":213},{"class":77},[214],{"type":26,"value":156},{"type":14,"tag":64,"props":216,"children":217},{"class":71},[218],{"type":26,"value":133},{"type":14,"tag":28,"props":220,"children":221},{},[222],{"type":26,"value":223},"You can extend the provided Sass placeholder as well.",{"type":14,"tag":49,"props":225,"children":230},{"className":226,"code":228,"language":229,"meta":7},[227],"language-scss","@import '@inkline/inkline/css/mixins';\n\n.skip-navigation {\n    @extend %visually-hidden;\n}\n","scss",[231],{"type":14,"tag":57,"props":232,"children":233},{},[234],{"type":14,"tag":49,"props":235,"children":236},{"__ignoreMap":7},[237,260,268,281,308],{"type":14,"tag":64,"props":238,"children":239},{"class":66,"line":67},[240,246,250,255],{"type":14,"tag":64,"props":241,"children":243},{"class":242},"ct-149352",[244],{"type":26,"value":245},"@import",{"type":14,"tag":64,"props":247,"children":248},{"class":71},[249],{"type":26,"value":84},{"type":14,"tag":64,"props":251,"children":252},{"class":98},[253],{"type":26,"value":254},"'@inkline/inkline/css/mixins'",{"type":14,"tag":64,"props":256,"children":257},{"class":71},[258],{"type":26,"value":259},";\n",{"type":14,"tag":64,"props":261,"children":262},{"class":66,"line":109},[263],{"type":14,"tag":64,"props":264,"children":265},{},[266],{"type":26,"value":267},"\n",{"type":14,"tag":64,"props":269,"children":270},{"class":66,"line":118},[271,276],{"type":14,"tag":64,"props":272,"children":273},{"class":87},[274],{"type":26,"value":275},".skip-navigation",{"type":14,"tag":64,"props":277,"children":278},{"class":71},[279],{"type":26,"value":280}," {\n",{"type":14,"tag":64,"props":282,"children":284},{"class":66,"line":283},4,[285,290,295,299,304],{"type":14,"tag":64,"props":286,"children":287},{"class":71},[288],{"type":26,"value":289},"    ",{"type":14,"tag":64,"props":291,"children":292},{"class":242},[293],{"type":26,"value":294},"@extend",{"type":14,"tag":64,"props":296,"children":297},{"class":71},[298],{"type":26,"value":84},{"type":14,"tag":64,"props":300,"children":301},{"class":87},[302],{"type":26,"value":303},"%visually-hidden",{"type":14,"tag":64,"props":305,"children":306},{"class":71},[307],{"type":26,"value":259},{"type":14,"tag":64,"props":309,"children":311},{"class":66,"line":310},5,[312],{"type":14,"tag":64,"props":313,"children":314},{"class":71},[315],{"type":26,"value":316},"}",{"type":14,"tag":318,"children":319},"style",[320],{"type":26,"value":321},".ct-553616{color:#24292E;}\n.dark-theme .ct-553616{color:#E1E4E8;}\n.ct-914029{color:#22863A;}\n.dark-theme .ct-914029{color:#85E89D;}\n.ct-762058{color:#6F42C1;}\n.dark-theme .ct-762058{color:#B392F0;}\n.ct-952708{color:#032F62;}\n.dark-theme .ct-952708{color:#9ECBFF;}\n.ct-149352{color:#D73A49;}\n.dark-theme .ct-149352{color:#F97583;}",{"title":7,"searchDepth":109,"depth":109,"links":323},[324],{"id":23,"depth":109,"text":9},"markdown","content:docs:utilities:css:screen-reader.md","content","docs/utilities/css/screen-reader.md","md",1794582261686]