太阳集团5493conlogo
  • 微博
  • 微信
  • QQ好友
  • QQ空间
  • 百度

S

滚屏网站

crolling  website

太阳集团2138手机版
太阳集团2138手机版新闻
行业新闻
专业知识
太阳集团2138手机版教育
太阳集团2138手机版游记
详细内容

小程序无障碍 使用更有爱-杭州网站建设为你呈现

时间：2022-05-22     作者：杭州网站建设【转载】   来自：微信派

信息无障碍开发工程师 李朗 原创



在互联网飞速发展的时代，亿万用户通过智能手机获得更多生活便利。然而，技术的飞速发展并未完全覆盖到社会的 “小众” 群体——视障人群的需求。当前不少主流 APP 无法支持读屏软件，或无法完全应用读屏功能，间接导致视障人士远离互联网的便利性。

为了满足视障人士对小程序的访问需求，小程序团队持续优化提升无障碍能力，提供 aria-component 组件，匹配读屏软件，方便小程序开发者适配无障碍访问能力，最终惠及读屏用户。



image.png


无障碍开发能力升级


自基础库 2.7.1 版本起，小程序支持部分 ARIA 标签，内置无障碍属性。对于非原生组件，开发者可以结合开发需求，添加 aria-component 组件的无障碍属性，无需进行其他操作，即可快捷接入无障碍访问。


小程序无障碍能力效果





以 view 组件为例，开发者可以添加 aria-role 和 aria-label 属性，便于读屏软件自动朗读对应组件的角色和附带的额外信息。例如输入以下代码，读屏软件将自动朗读 “按钮 提交表单”。
除此以外，微信开发者工具现已支持「无障碍访问模式插件」，方便开发者调试无障碍访问能力，省时省力。
获取路径：微信开发者工具菜单栏 - 设置 - 扩展设置 - 模拟器插件。




无障碍开发实践总结


应用小程序原生无障碍组件能够减轻开发负担，但是由于无障碍场景的特殊性，开发过程仍会遇到不少问题，主要集中在以下方面：




无法聚焦
无法聚焦指的是读屏无法聚焦到某个控件，直接导致读屏用户无法感知到控件的存在，从而无法使用此功能。在小程序中，无法聚焦的控件主要出现在 icon 和 image 2 个方面，因此为 image 和 icon 添加 aria-label 属性便可解决大部分聚焦问题。

聚焦顺序错误
聚焦顺序错误指的是使用单指扫动时，聚焦页面控件的顺序不正确。应用浮动 / 固定控件却没有按照正常文档流书写容易造成这个问题。因此建议按照页面控件的正常文档流书写元素，以保证整个页面控件的聚焦顺序正确。

层级聚焦错误
在 z-index 的应用场景下，弹框弹出后，弹出层与底层均能被聚焦。建议使用 aria-hidden 属性控制底层是否可聚焦。





非文本内容缺乏替代文本




由于非文本内容 (例如图片、图表) 无法被读屏直接读取，开发者可通过 aria-label 属性为非文本内容添加对应的替代文本，实现成功读屏。除此以外，某些场景还需要后端支持，例如在动态图片广告场景下，前端无法直接添加固定文本，需要联合后端下发对应动态图片广告的文本。

忽略设置不可用状态
在无障碍开发过程中，开发者容易忽略不可用状态的设置，导致读屏用户点击组件无反应的糟糕体验。因此建议使用 aria-disabled 属性标识不可用状态，以便读屏及时提醒不可用状态。

忽略设置自定义控件
在无障碍开发过程中，开发者容易忽略设置自定义控件相关属性，例如控件名称、类型、状态，导致读屏软件无法识别。

以 button 为例，view 在读屏状态下无需设置控件，因此在未设置控件名称的情况下，读屏软件仅能朗读 “搜索” 操作，但无法读取具体角色，导致读屏用户无法理解搜索的是什么。例如增加 aria-role="button" 属性，便于读屏软件朗读 “搜索按钮”。




以 tab 选项卡为例，除了设置名称和类型，开发者还需要设置其状态，否则读屏用户无法知道自己是否选中选项卡。控件状态的代码示例如下：



aria-label 属性被滥用




aria-label 属性能够实现控件属性无障碍应用，但是不代表任何场景均可使用该属性。尤其在多语言场景、多系统读屏差异等情况下，单纯应用 aria-label 属性容易导致读屏错误。

从产品设计到技术开发，无障碍优化需要切身从读屏用户的需求考虑，契合用户习惯，例如所有内容均可被读屏浏览、合理设置控件的类型及状态等等。

互联网加强人与人之间相互理解，信息互通。每一个人都是需要被连接的对象。推动信息无障碍，解决信息不对称，实现更美好的世界！

如有其他小程序应用相关的问题，可在 微信开放社区小程序交流专区 发帖互动，技术专员将为大家解答及进行深度交流。



相关信息
  1. 这5家企业用企微提效6到飞起-杭州微信小程序开发为你呈现
  2. 悟空骑摩托？AI剪辑是创意还是恶搞-杭州APP开发为你呈现
  3. 派，发一点春-杭州APP开发为你呈现
  4. 最新财报：增！-杭州网站建设为你呈现
  5. 这3个微信功能，谢谢老朋友！-杭州网站建设为你呈现
  6. 深圳大学，刷个掌-杭州网络公司为你呈现
  7. 挖一挖！5个微信“隐藏”功能-杭州网络公司为你呈现
  8. Q1财报，主要说两点：-杭州APP开发为你呈现
  9. 5.17-5.23 节目单是......杭州抖音短视频直播商城制作开发为你呈现
  10. 这份名单，第一次发布-杭州微信小程序开发为你呈现
太阳集团2138手机版
更多
  • Q3财报：有「新」有「增」-杭州网络公司

    Q3财报：有「新」有「增」-杭州网络公司

    腾讯2024年第三季度财报显示，期内：微信及WeChat的合并月活跃账户数13.82亿。财报还提到：视频号得益于广告主对视频号、小程序及微信搜一搜广告库存的强劲

  • 微信小店助手APP来啦，方便得很！-杭州

    微信小店助手APP来啦，方便得很！-杭州

    一个好消息！微信小店助手APP已正式上架各大应用市场，安卓/iOS都可！商家经营更方便啦~核心功能速览——1、小店的管理，移动端都能搞定支持在移动端进行商品、交

  • 港澳小程序交易翻倍，有商家月入八位数！-

    港澳小程序交易翻倍，有商家月入八位数！-

    10月24日，微信公开课·港澳专场在香港举办。聚焦于 “双向奔赴：新生态、新机遇” 这一主题，微信团队以及深耕港澳小程序的标杆商家、服务商齐聚，一起探讨了大湾区

  • 4个月销售额翻10倍，这家小众户外品牌怎

    4个月销售额翻10倍，这家小众户外品牌怎

    微信小店 Lafuma户外热这个小众品牌如何在视频号破圈?首场达播试水,销售额突破300万平均客单价1800元常态化直播带货,4个月实现月销售额翻10倍数据来自

  • 微信小店11.11好物节即将启动!三大带

    微信小店11.11好物节即将启动!三大带

    微信小店 11.11 好物节活动激励计划低门槛 高激励主播作为带货主播报名活动，并选择“购物”类目开播，累计成交数据满足对应目标门槛，即可在活动结束后获得对应电

  • 这个爬山搭子，十几万黄山游客都在用-杭州

    这个爬山搭子，十几万黄山游客都在用-杭州

    国庆假期就要来了，有人想去爬黄山吗？琐事缠身的你可能还没来得及做攻略，又或者没订到合适的酒店……没关系！现在，@黄山旅游官方平台 通过企业微信、小程序、视频号等

  • 小程序，玩法上“新”！-杭州抖音短视频直

    小程序，玩法上“新”！-杭州抖音短视频直

    这波上“新”，是新加坡的“新” ！9月23日，微信公开课·新加坡专场启幕，微信团队奔赴狮城，携手新加坡旅游局以及当地多家标杆企业，一起探讨小程序在跨境生态下的新

  • 官宣:微信小店新商家激励政策-杭州微信小

    官宣:微信小店新商家激励政策-杭州微信小

    五大激励政策助力新商家成长微信小店新商家激励政策血降门槛0保证金试运营减成本前百万自营交易额的技术服务费率减至1%刘促增长新商家成长流量激励加福利开通运费险享「

  • 如何做出NB的视频号？-杭州网络公司为你

    如何做出NB的视频号？-杭州网络公司为你

    @闪电制片厂 @国翠儿 @时差岛 @王可乐说这些NB的视频号你刷到过吗？最近，他们和视频号一起在NB的城市宁波聚会，现场分享了创作秘籍，视频号官方和大家交流了短

  • 又贵又火，之禾视频号年销3000万-杭州

    又贵又火，之禾视频号年销3000万-杭州

    3000多的牛仔裤，5000一件的亚麻衬衫，上万一条的桑蚕丝连衣裙……来自上海的时装品牌之禾因为高定价而出圈，并且业绩还在持续攀升。曾有外媒报道称，2022年，

太阳集团5493con是一家专门致力于为企业提供全方位网站建设服务。年轻的我们带着梦想和对网络的热情走在互联网道路的前沿，一路走来，我们的努力和真诚得到了更多客户的认可。在未来的发在未来的发...

浙公网安备：33010602011153

seo seo