css实用技巧——最佳可访问性隐藏（网站左上角的logo，用label替代表单提交按钮）

可访问性隐藏

“可访问性隐藏”：虽然内容肉眼看不见，但是其他辅助设备却能够进行识别和访问的隐藏。

核心代码

    .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>