Web Accessibility(网络无障碍)是确保所有人都能平等访问和使用网站和应用程序的关键。这包括视觉、听觉、运动和认知能力有限的用户。以下是一些构建无障碍前端应用的基础原则和代码示例:
1. 文本替代(alt属性)
确保所有非文本内容(如图片)都有描述性的alt属性,以便屏幕阅读器用户理解图片内容。
<img src="hero.jpg" alt="A smiling person holding a cup of coffee">
2. 标签和角色(ARIA roles)
使用ARIA(Accessible Rich Internet Applications)角色和属性来增强可访问性,尤其是对于复杂交互元素。
<button role="button" aria-label="Close">X</button>
3. 表单元素
确保表单元素有清晰的标签,使用<label>与<input>关联。
<label for="email">Email:</label> <input type="email" id="email" required>
4. 键盘导航
所有交互元素都应可以通过键盘导航,并遵循自然的焦点顺序。
<nav> <ul> <li><a href="#home" tabindex="0">Home</a></li> <li><a href="#about" tabindex="0">About</a></li> <li><a href="#contact" tabindex="0">Contact</a></li> </ul> </nav>
5. 颜色对比
确保文本和背景之间有足够的颜色对比,避免颜色作为唯一的信息传递方式。
/* 使用颜色对比检查工具,如WCAG Color Contrast Checker */ body { color: #000; /* dark text */ background-color: #f8f8f8; /* light background, good contrast */ }
6. 视觉隐藏
使用visually-hidden类隐藏内容,使其仅对屏幕阅读器可见。
.visually-hidden { position: absolute !important; clip: rect(0 0 0 0) !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; border: 0 !important; }
<button> <span class="visually-hidden">Skip to main content</span> Skip </button>
7. ARIA live区域
使用aria-live属性通知屏幕阅读器用户关于页面动态更新的信息。
<div aria-live="polite" aria-atomic="true" class="notification"> <!-- Dynamic content will be inserted here --> </div>
8. 时间敏感内容
为时间敏感的内容提供截止日期或计时器。
<p> This offer expires in: <span id="countdown"></span> </p> <script> // 更新countdown元素的内容 </script>
9. 考虑触控设备
确保触摸目标足够大,至少44x44像素,避免过于紧密的布局。
.button { min-width: 44px; min-height: 44px; padding: 10px; }
10. 编码语义化
使用语义化的HTML元素,如<header>, <nav>, <main>, <article>, <section>, <footer>
等。
<body> <header> <!-- Header content --> </header> <main> <!-- Main content --> </main> <footer> <!-- Footer content --> </footer> </body>
11. 视觉指示器
为交互元素添加视觉反馈,如悬停、聚焦和激活状态。
.button { transition: all 0.3s; } .button:hover, .button:focus, .button:active { background-color: #333; color: #fff; }
12. 语音命令和语音输入
考虑到语音控制设备,如Siri、Google Assistant等,确保界面可以通过语音命令操作。
<form action="/search"> <label for="search">Search:</label> <input type="search" id="search" name="q" placeholder="Voice command: Search..."> <button type="submit">Go</button> </form>
13. 字体和文本可读性
选择易读的字体,保持足够的行高、字间距和字号。确保文本缩放不影响布局。
body { font-family: Arial, sans-serif; font-size: 16px; line-height: 1.5; letter-spacing: 0.05em; text-rendering: optimizeLegibility; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
14. 交互元素的清晰状态
确保用户清楚知道何时可以与元素交互,以及交互的状态。
input[type="checkbox"]:checked + label::before { content: '\2713'; /* checkmark character */ } html <input type="checkbox" id="accept" /> <label for="accept">I accept the terms and conditions</label>
15. 考虑色盲用户
使用色彩对比度检查工具,确保颜色组合对色盲用户友好。
.colorblind-friendly { background-color: #008080; color: #fff; }
16. 视觉辅助
提供视觉辅助,如放大镜、高对比度模式、色盲模拟器等。
<button id="toggle-high-contrast">Toggle High Contrast</button> <script> document.getElementById('toggle-high-contrast').addEventListener('click', function() { document.body.classList.toggle('high-contrast'); }); </script> <style> .high-contrast { background-color: #000; color: #fff; } </style>
17. 适配屏幕阅读器
确保所有重要信息都能被屏幕阅读器读取,例如表格的标题和摘要。
<table> <caption>Employee List</caption> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> </tr> </thead> <!-- Table rows --> </table>
18. 响应式设计
确保网站在不同设备和屏幕尺寸上表现良好,适应不同访问方式。
@media (max-width: 768px) { /* Mobile-specific styles */ }
19. 视频和音频内容
为视频提供字幕,为音频提供文字转录。
<video controls> <source src="movie.mp4" type="video/mp4"> <track kind="captions" src="movie.vtt" srclang="en" label="English"> </video>
20. 定期测试
使用自动化和人工测试工具(如axe,Pa11y,Lighthouse等)定期检查可访问性,并根据反馈进行改进。
21. 图像地图(Image Maps)
对于包含多个交互区域的图像,使用图像地图提供可点击的区域。
<img src="worldmap.png" usemap="#worldmap" alt="World Map"> <map name="worldmap"> <area shape="rect" coords="0,0,82,126" alt="North America" href="#na"> <area shape="circle" coords="200,100,30" alt="Europe" href="#eu"> <area shape="poly" coords="330,50,380,0,450,50,400,100" alt="Asia" href="#as"> </map>
22. 语音合成(Text-to-Speech)
为用户提供语音合成选项,让他们能够听到页面内容。
<button id="tts">Read Aloud</button> <script> document.getElementById('tts').addEventListener('click', function() { const textToRead = document.querySelector('main').innerText; const speech = new SpeechSynthesisUtterance(textToRead); window.speechSynthesis.speak(speech); }); </script>
23. 错误提示和反馈
提供清晰的错误消息和反馈,使用户了解如何解决问题。
<form> <label for="email">Email:</label> <input type="email" id="email" required> <span id="email-error" class="error"></span> <button type="submit">Submit</button> </form> <script> document.querySelector('form').addEventListener('submit', function(event) { event.preventDefault(); const emailInput = document.getElementById('email'); const errorSpan = document.getElementById('email-error'); if (!emailInput.checkValidity()) { errorSpan.textContent = 'Please enter a valid email address.'; } else { errorSpan.textContent = ''; // Submit form or perform other actions } }); </script>
24. 交互元素的焦点管理
确保键盘焦点在页面元素之间正确流动,避免跳过或重复。
const focusableElements = 'a[href], button, input:not([type="hidden"]), textarea, select, iframe, object, embed, [tabindex="0"], [contenteditable]'; const firstFocusableElement = document.querySelector(focusableElements); document.addEventListener('DOMContentLoaded', function() { if (firstFocusableElement) { firstFocusableElement.focus(); } }); document.addEventListener('keydown', function(event) { if (event.key === 'Tab') { const lastFocusableElement = document.querySelector(`${focusableElements}:last-of-type`); if (event.shiftKey && document.activeElement === document.body) { lastFocusableElement.focus(); event.preventDefault(); } else if (!event.shiftKey && document.activeElement === lastFocusableElement) { firstFocusableElement.focus(); event.preventDefault(); } } });
小结一下
作为程序员,持续学习和充电非常重要,作为开发者,我们需要保持好奇心和学习热情,不断探索新的技术,只有这样,我们才能在这个快速发展的时代中立于不败之地。低代码也是一个值得我们深入探索的领域,让我们拭目以待,它将给前端世界带来怎样的变革。
介绍一款程序员都应该知道的软件JNPF快速开发平台,很多人都尝试用过它,它是功能的集大成者,任何信息化系统都可以基于它开发出来。
JNPF 可以实现应用从创建、配置、开发、测试到发布、运维、升级等完整生命周期的管理。减少了传统应用程序的代码编写量,通过图形化、可视化的界面,以拖放组件的方式,即可快速生成应用程序的产品,大幅降低了开发企业管理类软件的难度。