CSS3的aria-hidden学习

前言

aria-hidden 属性可用于隐藏非交互内容,使其在无障碍 API 中不可见。即当aria-hidden="true" 添加到一个元素会将该元素及其所有子元素从无障碍树中移除,这可以通过隐藏来改善辅助技术用户的体验:

  1. 纯装饰性内容,如图标或图片
  2. 重复的内容,如重复的文本
  3. 屏幕外或折叠的内容,如菜单

tips: 不要在可以获得焦点的元素上使用 aria-hidden="true"。因 元素的隐藏状态基于其是否被渲染通常由 CSS 控制。

css 复制代码
[aria-hidden="true"] {
  display: none;
}

弹窗显隐demo

javascript 复制代码
<template>
  <!-- 弹窗内容 -->
  <div id="myModal" class="modal" aria-hidden="true" style="display: none;">
    <div class="modal-content">
      <span class="close-button" @click="closeModal">&times;</span>
      <p>这是一个弹窗内容。</p>
    </div>
  </div>

  <!-- 触发弹窗的按钮 -->
  <button @click="openModal">打开弹窗</button>
</template>

<script setup>
const openModal = () => {
  var modal = document.getElementById('myModal');
  modal.style.display = 'flex'; // 显示弹窗
  modal.setAttribute('aria-hidden', 'false'); // 使弹窗对辅助技术可见
}
const closeModal = () => {
  var modal = document.getElementById('myModal');
  modal.style.display = 'none'; // 显示弹窗
  modal.setAttribute('aria-hidden', 'true'); // 使弹窗对辅助技术可见
}
</script>
<style lang="scss">
.modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  position: relative;
}

.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  font-size: 20px;
}
</style>

input获取焦点提示demo

javascript 复制代码
<template>
  <div class="input-container">
    <input type="text" v-model="inputValue" :aria-describedby="tooltipId" @focus="showTooltip = true"
      @blur="showTooltip = false" />
    <transition name="fade">
      <div v-show="showTooltip" class="tooltip" :id="tooltipId" ref="tooltip" role="tooltip">
        这是当输入聚焦时出现的工具提示。
      </div>
    </transition>
  </div>
</template>


<script>
import { ref, computed } from 'vue';


export default {
  setup () {
    const inputValue = ref('');
    const showTooltip = ref(false);
    const tooltip = ref(null);
    const tooltipId = computed(() => showTooltip.value ? 'tooltip' : '');


    return {
      inputValue,
      showTooltip,
      tooltip,
      tooltipId
    };
  }
};
</script>


<style scoped>
.input-container {
  position: relative;
  display: inline-block;
}


.tooltip {
  position: absolute;
  bottom: 100%;
  left: 0;
  top: 25px;
  background-color: green;
  border: 1px solid green;
  color: #fff;
  padding: 10px;
  border-radius: 5px;
  height: 80px;
  z-index: 999;
  width: 200px;
}


.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.1s ease-in-out;
}


.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>

追更

javascript 复制代码
<template>
  <input type="text" v-model="inputValue" @focus="showTooltip" @blur="hideTooltip" placeholder="单击或聚焦我" ref="inputRef">
  <transition name="fade">
    <div v-if="isTooltipVisible" class="tooltip" :style="tooltipStyle">这是一个工具提示!</div>
  </transition>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue';

const inputValue = ref('');
const isTooltipVisible = ref(false);
const inputRef = ref(null);

const tooltipStyle = reactive({
  left: '0px',
  top: '0px'
});

const showTooltip = () => {
  isTooltipVisible.value = true;
  positionTooltip();
};

const hideTooltip = () => {
  isTooltipVisible.value = false;
};

const positionTooltip = () => {
  if (inputRef.value) {
    const inputRect = inputRef.value.getBoundingClientRect();
    tooltipStyle.left = `${inputRect.left + window.scrollX}px`;
    tooltipStyle.top = `${inputRect.bottom + window.scrollY + 10}px`; // 10px的间距
  }
};

onMounted(() => {
  // 可以在这里做一些额外的初始化工作,比如监听窗口滚动事件来重新定位tooltip等
  // 但在这个简单示例中,我们不需要这样做
});
</script>

<style scoped>
.tooltip {
  position: absolute;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 5px;
  z-index: 1000;
  white-space: nowrap;
  /* 防止文本换行 */
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter,
.fade-leave-to

/* .fade-leave-active in <2.1.8 */
  {
  opacity: 0;
}
</style>
相关推荐
橘颂TA44 分钟前
【C++】C++11特性的介绍和使用(第三篇)
前端·c++·算法·c++11
武子康6 小时前
Java-82 深入浅出 MySQL 内部架构:服务层、存储引擎与文件系统全覆盖
java·开发语言·数据库·学习·mysql·spring·微服务
爷_7 小时前
字节跳动震撼开源Coze平台!手把手教你本地搭建AI智能体开发环境
前端·人工智能·后端
charlee449 小时前
行业思考:不是前端不行,是只会前端不行
前端·ai
霜绛9 小时前
机器学习笔记(三)——决策树、随机森林
人工智能·笔记·学习·决策树·随机森林·机器学习
Amodoro10 小时前
nuxt更改页面渲染的html,去除自定义属性、
前端·html·nuxt3·nuxt2·nuxtjs
Wcowin10 小时前
Mkdocs相关插件推荐(原创+合作)
前端·mkdocs
站住前面的二哈10 小时前
Cartographer安装测试与模块开发(三)--Cartographer在Gazebo仿真环境下的建图以及建图与定位阶段问题(实车也可参考)
学习·ubuntu
伍哥的传说10 小时前
CSS+JavaScript 禁用浏览器复制功能的几种方法
前端·javascript·css·vue.js·vue·css3·禁用浏览器复制
lichenyang45311 小时前
Axios封装以及添加拦截器
前端·javascript·react.js·typescript