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

简介: 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>
目录
相关文章
|
8天前
|
前端开发
css来实现一个好玩的按钮
这段代码实现了一个具有独特悬停效果的按钮。通过定义按钮及其`:after`伪元素,并设置初始状态下的透明度和尺寸,当鼠标悬停在按钮上时,背景色平滑过渡至另一种颜色,产生视觉上的动态扩展效果。为避免覆盖文字,特地调整了伪元素的层级,确保交互过程中文字始终可见。整体效果流畅自然,增强了用户界面的互动性与美观度。
16 0
|
1月前
|
前端开发
css特效——纯css绘制图标:带框的加号(添加按钮)、三横(三道杠)、带圈点(双层圆点)
css特效——纯css绘制图标:带框的加号(添加按钮)、三横(三道杠)、带圈点(双层圆点)
40 5
|
2月前
|
前端开发
CSS动画(毛玻璃按钮)
CSS动画(毛玻璃按钮)
|
2月前
|
前端开发
CSS动画效果(鼠标滑过按钮动画)
CSS动画效果(鼠标滑过按钮动画)
|
2月前
|
前端开发
css html 渐变按钮
css html 渐变按钮
19 0
|
3月前
|
前端开发
css样式实现一个滑动按钮
css样式实现一个滑动按钮
39 0
|
前端开发
入门css小demo,登录按钮
入门css小demo,登录按钮
67 0
|
3月前
|
前端开发
CSS 斜体按钮
CSS 斜体按钮
CSS 斜体按钮
|
3月前
|
前端开发 JavaScript
分享几个精美的网页按钮样式,纯CSS实现,无JS(拿来即用)
分享几个精美的网页按钮样式,纯CSS实现,无JS(拿来即用)
64 0