可访问性隐藏
“可访问性隐藏”:虽然内容肉眼看不见,但是其他辅助设备却能够进行识别和访问的隐藏。
核心代码
.hide { position: absolute; clip: rect(0 0 0 0); }
使用场景一:网站左上角的logo
logo一般使用图片,但为了更好地SEO以及无障碍识别,还会补充网站的名称,但网站的名称不能被看到,实现方式如下:
<template> <div class="logo"> <span class="hide">CSDN</span> </div> </template> <style scoped> .logo { display: inline-block; height: 40px; width: 80px; background: url("https://img-home.csdnimg.cn/images/20201124032511.png") no-repeat; background-size: contain; } .hide { position: absolute; clip: rect(0 0 0 0); } </style>
使用场景二:用label替代表单提交按钮
type为submit的按钮在不同浏览器UI不同,为了保持兼容性,经常使用label来替代提交按钮
<template> <form> <input type="submit" id="someID" class="hide"> <label for="someID">提交</label> </form> </template> <style scoped> .hide { position: absolute; clip: rect(0 0 0 0); } </style>