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月前
|
前端开发 JavaScript 测试技术
CSS3 动画效果对网站性能有什么影响?
CSS3动画效果在为网站带来丰富视觉体验的同时,也会对网站性能产生多方面的影响
302 58
|
11月前
|
前端开发
导航新风尚:CSS梯形设计,让网站菜单不再单调!
导航新风尚:CSS梯形设计,让网站菜单不再单调!
|
7月前
|
JavaScript 前端开发
jQuery和CSS3滑动展开菜单按钮插件
这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后,子菜单以滑动的方式依次展开
109 21
|
9月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML和CSS之旅
【9月更文挑战第32天】在这个数字化的时代,拥有一个个人博客不仅是展示自我的平台,也是技术交流的桥梁。本文将引导初学者理解并实现一个简单的个人博客网站的搭建,涵盖HTML的基础结构、CSS样式的美化技巧以及如何将两者结合来制作一个完整的网页。通过这篇文章,你将学会如何从零开始构建自己的网络空间,并在互联网世界留下你的足迹。
|
9月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML与CSS之旅
【9月更文挑战第31天】在这个数字时代,拥有一个个人博客网站是展示自我、分享知识和连接世界的重要方式。本文将引导你通过简单的HTML和CSS知识,一步步构建起你的在线空间。无论你是编程新手还是希望通过实践加深理解,这篇文章都将是你的理想指南。我们将探索基本概念,实现页面布局,并点缀以个性化样式,最终将静态页面转变为动态交互式网站。准备好了吗?让我们开始吧!
|
11月前
|
前端开发
视觉充电:CSS动画特效,为网站带来动力与活力!(一键复制)
视觉充电:CSS动画特效,为网站带来动力与活力!(一键复制)
|
10月前
|
前端开发
网站变灰白css
本文介绍了如何通过CSS滤镜效果实现网站变为灰白色,具体方法是在HTML或BODY标签上应用`filter`属性,使用`progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)`和`-webkit-filter: grayscale(100%)`实现灰度效果。
86 0
|
11月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML、CSS与JavaScript之旅
在这个数字时代,拥有一个个性化的网络空间已成为许多人的梦想。本文将引导你了解如何从零开始,使用HTML、CSS和JavaScript创建属于自己的博客网站。我们将探索这些技术的基础概念,并通过实际代码示例展示如何将静态页面转变为动态交互式网站。无论你是编程新手还是希望扩展技能的开发者,这篇文章都将为你提供一条清晰的学习路径。【8月更文挑战第31天】
|
11月前
|
前端开发 UED
设计新潮流:CSS动画毛玻璃按钮,展开效果引人入胜!
设计新潮流:CSS动画毛玻璃按钮,展开效果引人入胜!
|
11月前
|
前端开发 搜索推荐 容器
创意按钮,触手可及:CSS不规则形状效果揭秘!
创意按钮,触手可及:CSS不规则形状效果揭秘!

热门文章

最新文章