`
yiminghe
  • 浏览: 1461792 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

aria practice

阅读更多

 

aria practice

 

 

1. WAI 工作组制定 ARIA 规范,aria 标准被映射到本地原生的无障碍机制中。

 

     1.1 支持浏览器:ie8,9 chrome firefox,读屏器:nvda

 

2.包括 角色 ( role ) 以及和角色相关联的状态 ( state)  和属性 ( property ).

 

    2.1 角色包括:文档结构角色,路标角色以及组件角色

    2.2 通过 tabindex 来控制焦点以及用户的键盘导航。

 

           tabindex > 0 : 精确描述 tab 顺序

           tabindex = 0 : tab 顺序同文档结构一致

           tabindex = -1 : tab 不到,但是可以通过 javascript 聚焦。

           不设 tabindex ,只有表单和链接元素可获得焦点,tab 顺序同文档结构一致。

 

3.标签组件实践

 

   3.1 挑选合适的角色,并设置

   3.2 根据初始逻辑,设置对应的 aria 状态,属性以及 tabindex

   3.3 绑定键盘事件 ( keydown , keypress ),处理函数中修改逻辑状态

   3.4 监听逻辑状态变化,并同步 aria 状态,属性,tabindex ,并通过 focus() 改变当前焦点元素。

 

 

 

分享到:
评论

相关推荐

    material-ui-practice

    7. **无障碍性(Accessibility)**:Material-UI组件遵循WAI-ARIA标准,确保对无障碍技术的兼容,提高所有用户,包括残障人士的访问体验。 在这个"material-ui-practice"项目中,开发者可能已经展示了如何使用...

    Practice

    9. **Web标准与可访问性**:遵循Web标准,确保代码简洁、语义化,同时考虑残障人士的可访问性,如添加`alt`属性给图片,使用`aria`属性等。 10. **框架与库**:了解和使用流行的前端框架如Bootstrap或Vue.js,以及...

    html-practice-solution

    4. 无障碍性:遵循WCAG标准,为视觉障碍用户提供辅助功能,如使用ARIA属性。 5. 性能优化:压缩CSS和JavaScript,减少HTTP请求,使用CDN加速资源加载。 六、HTML实践项目 "html-practice-solution-main"很可能包含...

    Bootstrap-Practice:ACA 101的Bootstrap练习

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> ...

    fe-practice-maecenas:Frontend Web Practice(7-4)-了解有关精美功能网页设计组合的更多信息

    10. **Web Accessibility**:遵循无障碍网页设计原则,如合理使用ARIA属性,确保视障人士等特殊群体也能顺利访问网页。 在"fe-practice-maecenas"项目中,你可以通过实践这些HTML知识点,创建一个吸引女性用户的...

    fe-practice-my-portfolio:Frontend Web Practice(7-3)-了解有关精美功能网页设计组合的更多信息

    在本项目"fe-practice-my-portfolio"中,我们聚焦于前端Web开发,特别是关于创建一个精美且功能丰富的个人作品集网页。这个练习是前端Web实践系列的第七个部分,第三阶段,旨在帮助开发者深入了解如何设计和实现一个...

    boostrap_practice

    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> ...

    portfolio_practice

    12. **Web Accessibility**:良好的HTML实践也应关注无障碍性,使用`aria-*`属性和适当的标签可以帮助视障用户通过屏幕阅读器理解网页内容。 在"portfolio_practice-main"这个项目中,开发者可能已经应用了这些概念...

    fe-practice-teach-skill-info:前端网页练习(8-4)-了解有关精美功能网页设计组合的更多信息

    为了提升网页的可访问性,HTML提供了一些辅助性技术,如属性用于为图像提供替代文本,<aria-*>属性用于向屏幕阅读器等辅助技术传递额外信息。同时,合理使用中的和标签,有助于搜索引擎优化(SEO)。 在实际项目中...

    single-page-app-practice

    了解ARIA属性和键盘导航规则有助于提升应用的可达性。 通过深入学习以上知识点,并结合Michael Mikowski的《单页Web应用程序》一书,你将能够构建出高效、易维护且用户体验出色的单页应用。在实践中不断迭代和优化...

    web-practice:2021 UXUI和Web Publisher的工作和实践

    HTML5提供了许多无障碍特性,如ARIA属性,帮助屏幕阅读器用户理解网页内容。合理的色彩对比、清晰的文本和图像替代文字也是无障碍设计的关键要素。 6. **性能优化**: 在2021年的实践里,快速加载的网页成为提升...

    tab page step-by-step

    6. **原型实践**:文件名"prototype_in_practice"可能指的是实践中创建的原型代码,这可能是一个实际的项目,用于测试和演示Tab页功能的实现。在实践中,开发者可能需要根据具体需求进行调整,例如添加数据动态加载...

Global site tag (gtag.js) - Google Analytics