CSS3的aria-hidden学习

前言

aria-hidden 属性可用于埋伏非交互内容，使其在无停滞 API 中不可见。即当aria-hidden="true" 添加到一个元素会将该元素及其全部子元素从无停滞树中移除，这可以通过埋伏来改善辅助技能用户的体验：

• 纯装饰性内容，如图标或图片
  
• 重复的内容，如重复的文本
  
• 屏幕外或折叠的内容，如菜单
  

tips： 不要在可以得到核心的元素上利用 aria-hidden="true"。因元素的埋伏状态基于其是否被渲染通常由 CSS 控制。

2. [aria-hidden="true"] {
3.   display: none;
4. }

复制代码

弹窗显隐demo

2. <template>
3.   <!-- 弹窗内容 -->
4.   <div id="myModal" class="modal" aria-hidden="true" style="display: none;">
5.     <div class="modal-content">
6.       <span class="close-button" @click="closeModal">&times;</span>
7.       <p>这是一个弹窗内容。</p>
8.     </div>
9.   </div>
11.   <!-- 触发弹窗的按钮 -->
12.   <button @click="openModal">打开弹窗</button>
13. </template>
15. <script setup>
16. const openModal = () => {
17.   var modal = document.getElementById('myModal');
18.   modal.style.display = 'flex'; // 显示弹窗
19.   modal.setAttribute('aria-hidden', 'false'); // 使弹窗对辅助技术可见
20. }
21. const closeModal = () => {
22.   var modal = document.getElementById('myModal');
23.   modal.style.display = 'none'; // 显示弹窗
24.   modal.setAttribute('aria-hidden', 'true'); // 使弹窗对辅助技术可见
25. }
26. </script>
27. <style lang="scss">
28. .modal {
29.   position: fixed;
30.   left: 0;
31.   top: 0;
32.   width: 100%;
33.   height: 100%;
34.   background-color: rgba(0, 0, 0, 0.5);
35.   display: flex;
36.   justify-content: center;
37.   align-items: center;
38. }
40. .modal-content {
41.   background-color: #fff;
42.   padding: 20px;
43.   border-radius: 5px;
44.   position: relative;
45. }
47. .close-button {
48.   position: absolute;
49.   top: 10px;
50.   right: 10px;
51.   cursor: pointer;
52.   font-size: 20px;
53. }
54. </style>

复制代码

input获取核心提示demo

2. <template>
3.   <div class="input-container">
4.     <input type="text" v-model="inputValue" :aria-describedby="tooltipId" @focus="showTooltip = true"
5.       @blur="showTooltip = false" />
6.     <transition name="fade">
7.       <div v-show="showTooltip" class="tooltip" :id="tooltipId" ref="tooltip" role="tooltip">
8.         这是当输入聚焦时出现的工具提示。
9.       </div>
10.     </transition>
11.   </div>
12. </template>
14. <script>
15. import { ref, computed } from 'vue';
17. export default {
18.   setup () {
19.     const inputValue = ref('');
20.     const showTooltip = ref(false);
21.     const tooltip = ref(null);
22.     const tooltipId = computed(() => showTooltip.value ? 'tooltip' : '');
24.     return {
25.       inputValue,
26.       showTooltip,
27.       tooltip,
28.       tooltipId
29.     };
30.   }
31. };
32. </script>
34. <style scoped>
35. .input-container {
36.   position: relative;
37.   display: inline-block;
38. }
40. .tooltip {
41.   position: absolute;
42.   bottom: 100%;
43.   left: 0;
44.   top: 25px;
45.   background-color: green;
46.   border: 1px solid green;
47.   color: #fff;
48.   padding: 10px;
49.   border-radius: 5px;
50.   height: 80px;
51.   z-index: 999;
52.   width: 200px;
53. }
55. .fade-enter-active,
56. .fade-leave-active {
57.   transition: opacity 0.1s ease-in-out;
58. }
60. .fade-enter-from,
61. .fade-leave-to {
62.   opacity: 0;
63. }
64. </style>

复制代码

---

追更

2. <template>
3.   <input type="text" v-model="inputValue" @focus="showTooltip" @blur="hideTooltip" placeholder="单击或聚焦我" ref="inputRef">
4.   <transition name="fade">
5.     <div v-if="isTooltipVisible" class="tooltip" :style="tooltipStyle">这是一个工具提示！</div>
6.   </transition>
7. </template>
9. <script setup>
10. import { ref, onMounted, reactive } from 'vue';
12. const inputValue = ref('');
13. const isTooltipVisible = ref(false);
14. const inputRef = ref(null);
16. const tooltipStyle = reactive({
17.   left: '0px',
18.   top: '0px'
19. });
21. const showTooltip = () => {
22.   isTooltipVisible.value = true;
23.   positionTooltip();
24. };
26. const hideTooltip = () => {
27.   isTooltipVisible.value = false;
28. };
30. const positionTooltip = () => {
31.   if (inputRef.value) {
32.     const inputRect = inputRef.value.getBoundingClientRect();
33.     tooltipStyle.left = `${inputRect.left + window.scrollX}px`;
34.     tooltipStyle.top = `${inputRect.bottom + window.scrollY + 10}px`; // 10px的间距
35.   }
36. };
38. onMounted(() => {
39.   // 可以在这里做一些额外的初始化工作，比如监听窗口滚动事件来重新定位tooltip等
40.   // 但在这个简单示例中，我们不需要这样做
41. });
42. </script>
44. <style scoped>
45. .tooltip {
46.   position: absolute;
47.   background-color: #333;
48.   color: #fff;
49.   text-align: center;
50.   border-radius: 5px;
51.   padding: 5px;
52.   z-index: 1000;
53.   white-space: nowrap;
54.   /* 防止文本换行 */
55. }
57. .fade-enter-active,
58. .fade-leave-active {
59.   transition: opacity 0.3s;
60. }
62. .fade-enter,
63. .fade-leave-to
65. /* .fade-leave-active in <2.1.8 */
66.   {
67.   opacity: 0;
68. }
69. </style>

复制代码