uni app input添加获取验证码按钮_uni-app跨平台框架对微信小程序的无障碍支持探索...

2cc4b095a238b4c34708c79be957c204.png

uni-app是一个使用Vue.js开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。

今天,我们来体验uni-app对微信小程序的无障碍支持情况。

开发uni-app项目需要通过HBuilderX,下载地址:

DCloud官网​dcloud.net.cn

运行HBuilderX

点击文件菜单->新建->项目,进入创建项目窗口

fddce38096fdb064acb6ef775879949e.png
运行HBuilderX

新建项目窗口截图

在项目类型中选择uni-app单选按钮,在模板列表中选择使用uni-app开发的新闻/资讯类App模板,项目名称任意填写,例如我的新闻App,项目路径可选修改或保持默认,然后点击创建按钮,就完成了一个项目的创建。

为了能够在真机上运行小程序项目,我们需要在manifest.json文件中的mp-weixinkey下配置appid,保存后点击运行->运行到小程序模拟器->微信开发者工具,如果没有配置开发者工具的路径和端口,请跟随提示或官网说明配置,配置正确无误的话,此项目会运行到微信开发者工具内。

我们在开发者工具内点击预览->自动预览,手机上成功运行。

首页截图

f8e449a7de044d5a4b9c38ad9b2c970b.png
首页截图

接下来浏览一下首页,体验一下无障碍情况如何:

知乎视频​www.zhihu.com

通过浏览,发现首页存在以下无障碍问题:

  • 选中的分类没有添加选中状态提示
  • 每条新闻项目的图片都朗读为图片,属于无标签问题
  • 每条新闻的焦点拆分太多,导致浏览效率降低,一条新闻被拆分成了标题、图片、作者、评论数、时间等五个焦点;

接下来,我们就利用微信小程序所支持的无障碍属性对这个新闻小程序进行改造

处理方案

  • 为顶部分类添加选中状态提示
  • 合并每条新闻的标题、图片、作者、评论数、时间为一个焦点,也就是每条新闻为一个焦点,便于用户浏览;

第一步,给分类添加选中状态,阅读代码,我们发现当选中某个分类后,会动态修改分类名称text元素的class

<text class="uni-tab-item-title" :class="tabIndex==index ? 'uni-tab-item-title-active' : ''">{{tab.name}}</text>

这里的关键代码是

" :class="tabIndex==index ? 'uni-tab-item-title-active' : ''"

我们就抄写这句代码中的判断方式,为text的容器view添加选定状态

<view class="uni-tab-item" v-for="(tab,index) in tabList" :key="tab.id" :id="tab.id" :ref="'tabitem'+index"
:data-id="index" :data-current="index" @click="ontabtap" :aria-selected="tabIndex==index" >
<text class="uni-tab-item-title" :class="tabIndex==index ? 'uni-tab-item-title-active' : ''">{{tab.name}}</text>
</view>

此处的关键代码是

aria-selected="tabIndex==index"

意思是当选定的分类等于当前索引时返回true,否则返回false,这里的aria-select属性是选定状态属性,接受布尔值。

添加完选定状态属性,结果发现还是读不出选定状态,注意知识点来啦:

要给容器添加选定状态、必须添加控件角色,单纯给容器加选定状态不生效。

不信我们试试看。

尝试给分类容器添加一个无障碍角色button

<view class="uni-tab-item" v-for="(tab,index) in tabList" :key="tab.id" :id="tab.id" :ref="'tabitem'+index"
:data-id="index" :data-current="index" @click="ontabtap" :aria-selected="tabIndex==index" aria-role="button">
<text class="uni-tab-item-title" :class="tabIndex==index ? 'uni-tab-item-title-active' : ''">{{tab.name}}</text>
</view>

再次编译运行看看效果:

知乎视频​www.zhihu.com

第二步,合并每条新闻的所有内容为一个大的焦点

index.nvue中我们分析代码发现,每条新闻的相关代码在news-item.nvue文件中,打开这个文件,观察代码结构,的确是新闻条目的相关代码。

我们需要给每条新闻设置成一个焦点,思路就是直接给每条新闻的容器添加一个无障碍角色,这样就能达到我们要的效果,例如这样:(注意看第二行代码)

<template>
<view class="media-item view" v-if="newsItem.title" @click="click" aria-role="text">
<view class="view" :style="{flexDirection: (newsItem.article_type === 1 || newsItem.article_type === 2)?(newsItem.article_type === 2 ?'row':'row-reverse'):'column' }">
<text class="media-title" :class="{'media-title2': newsItem.article_type === 1 || newsItem.article_type === 2}">{{newsItem.title}}</text>
<view v-if="newsItem.image_list || newsItem.image_url" class="image-section flex-row" :class="{'image-section-right': newsItem.article_type === 2, 'image-section-left': newsItem.article_type === 1}">
<image :fade-show="false" class="image-list1" :class="{'image-list2': newsItem.article_type === 1 || newsItem.article_type === 2}"
v-if="newsItem.image_url" :src="newsItem.image_url"></image>
<image :fade-show="false" class="image-list3" v-if="newsItem.image_list" :src="source.url" v-for="(source, i) in newsItem.image_list"
:key="i" />
</view>
</view>
<view class="media-foot flex-row">
<view class="media-info flex-row">
<text class="info-text">{{newsItem.source}}</text>
<text class="info-text">{{newsItem.comment_count}}条评论</text>
<text class="info-text">{{newsItem.datetime}}</text>
</view>
<view class="close-view" @click.stop="close">
<view class="close-l close-h"></view>
<view class="close-l close-v"></view>
</view>
</view>
<view class="media-item-line" style="position: absolute;"></view>
</view>
</template>

编译预览到手机,我们看下效果:

知乎视频​www.zhihu.com

通过本次体验我们发现uni-app跨平台框架可以支持编译微信小程序支持的aria-label、aria-role、aria-select等无障碍属性,其他更多的无障碍属性等待大家探索。

总结

  • 对于想从微信小程序原生开发转uni-app开发的同学不必担心无障碍属性支持情况,目前体验uni-app支持编译无障碍相关属性;
  • 如果要给view容器设置aria-select选定状态,必须要给此容器设置无障碍角色aria-role,角色值可以是button、text等;
  • 如果要合并多个项目为一个焦点,可以给相关内容的容器设置一个无障碍角色aria-role,值可以为text、button等,合并后的内容为一个焦点,旁白可合并此容器内所有文本元素的内容进行朗读,如果需要调整文本朗读顺序、或是修改朗读内容,可以手动设置无障碍标签aria-label实现,属性的值可以手动拼接要朗读的内容;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/513258.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

比开源快30倍的自研SQL Parser设计与实践

简介&#xff1a; SQL作为一种领域语言&#xff0c;最早用于关系型数据库&#xff0c;方便管理结构化数据&#xff1b;SQL由多种不同的类型的语言组成&#xff0c;包括数据定义语言&#xff0c;数据控制语言、数据操作语言&#xff1b;各数据库产品都有不同的声明和实现&#x…

SLS控制台内嵌操作指南

简介&#xff1a; SLS控制台内嵌操作指南 一、机制 详见&#xff1a;https://help.aliyun.com/document_detail/74971.html 二、操作 2.1 子账号操作&#xff08;主账号身份操作&#xff09; 登陆ram控制台&#xff0c;创建子账号。给子账号授予AliyunSTSAssumeRoleAccess权…

python vlookup 模糊_如何用python写excel中的vlookup函数?

1.背景Vlookup 函数&#xff0c;可以算是一个数据专员必须要会使用的基本函数了&#xff0c;确实很好用。但是你可能会注意到&#xff0c;Excel 一旦数据量过大&#xff0c;打开都费劲了&#xff0c;何况打开后&#xff0c;你还要输入公式计算&#xff0c;就更费劲了&#xff0…

装linux服务器进去配置界面,在CentOS 8 Linux上安装和配置SuiteCRM的步骤

本文介绍在CentOS 8 Linux服务器上安装和配置SuiteCRM的详细步骤&#xff1a;更新系统、安装PHP、安装MariaDB和Nginx Web服务器、安装SuiteCRM、配置SuiteCRM Web访问界面。SuiteCRM是由SalesAgility团队开发和维护的开源企业级CRM应用程序&#xff0c;该产品最初是SugarCRM社…

Dev Lake 0.4.0 版本:开源、开放的研发效能数据平台

建设研发工具链后&#xff0c;效能提升如何更进一步&#xff1f; 工程师们反馈流程体验确实有所提升&#xff0c;和业务同事的沟通似乎也愉快了一些——但研发团队依然需要量化数据作为抓手&#xff0c;一方面佐证先前实践优化的有效性&#xff0c;另一方面为持续的效能提升寻找…

tensorflow图形识别_手把手教你使用TF服务将TensorFlow模型部署到生产环境

摘要&#xff1a; 训练好的模型不知道如何布置到生产环境&#xff1f;快来学习一下吧&#xff01;介绍将机器学习(ML)模型应用于生产环境已成为一个火热的的话题,许多框架提供了旨在解决此问题的不同解决方案。为解决这一问题&#xff0c;谷歌发布了TensorFlow(TF)服务&#xf…

一文读懂 - 云上用户如何灵活应用定制化网络服务

简介&#xff1a; 在将传统数据中心业务迁移上云的过程中&#xff0c;如何将云下基于不同业务场景和设备角色灵活变化的网络配置基于云上网络统一服务能力进行转换&#xff0c;用户及其业务架构通常会面临诸多的挑战。阿里云混合云网络技术团队和阿里云网络产品团队自主创新研发…

python 元组长度_Python 学习笔记 - 元组

Python 元组元组与列表类似&#xff0c;其不同之处在&#xff1a;元组不可修改元组使用小括号 ( )创建元组只需要在括号内添加元素&#xff0c;用逗号隔开即可&#xff1a;mytuple (太白金星,太上老君,菩提老祖)print(mytuple)​结果&#xff1a;(太白金星, 太上老君, 菩提老祖…

linux bash环境,Win10系统怎样启用Linux Bash环境

不久前&#xff0c;微软召开了Build 2016大会&#xff0c;会上微软宣布将在Windows10系统中内置Linux Bash&#xff0c;这一消息引起了非常大的轰动。到了Windows10内部预览版Build 14316&#xff0c;该特性终于面世了。系统城小编将在本文为大家详细介绍下Windows10启用Linux …

云上安全保护伞--SLS威胁情报集成实战

简介&#xff1a; 威胁情报是某种基于证据的知识&#xff0c;包括上下文、机制、标示、含义和能够执行的建议。 什么是威胁情报 根据Gartner对威胁情报的定义&#xff0c;威胁情报是某种基于证据的知识&#xff0c;包括上下文、机制、标示、含义和能够执行的建议。威胁情报描…

数据备份资深老牌厂商 Commvault 的新玩法

作者 | 宋慧 出品 | CSDN 云计算 头图 | 付费下载于视觉中国 已经连续十年&#xff0c;被权威分析机构 Gartner 企业备份与恢复软件魔力象限评为领导者&#xff08;leaders&#xff09;的 Commvault&#xff0c;在数据备份和恢复领域的技术实力和优势毋庸置疑。不过&#xf…

docker 远程连接 文件看不到_pycharm连接远程linux服务器的docker

在我们利用远程服务器部署的docker调试深度学习模型时&#xff0c;需要将代码传来传去&#xff0c;很不方便。这里我们介绍pycharm连接远程服务器docker的方法。首先我们启动一个新的pytorch容器&#xff0c;命令如下。关于此步骤更详细的说明&#xff0c;参见ubuntudocker使用…

「技术人生」第4篇:技术、业务、组织的一般规律及应对策略

简介&#xff1a; 本文讨论了如何让技术一号位能够从理论上、以宏观的视角看清日常工作息息相关的事物的发展规律&#xff0c;从而为顺应规律办事或者创造条件打破规律提供理论依据。 往期技术一号位方法论系列文章&#xff1a; 「技术人生」第1篇&#xff1a;什么是技术一号位…

python创建只包含一个元素的元组时_Python中声明只包含一个元素的元组数据方法...

{"moduleinfo":{"card_count":[{"count_phone":1,"count":1}],"search_count":[{"count_phone":4,"count":4}]},"card":[{"des":"阿里技术人对外发布原创技术内容的最大平台&…

linux汇编伪指令大全,RM汇编的伪指令(二)

2)ARM杂项伪指令1.ADR伪指令&#xff1a;小范围的地址读取伪指令。ADR指令将基于PC相对偏移的地址值读取到寄存器中。在汇编编译源程序时&#xff0c;ADR伪指令被编译器替换成一条合适的指令。通常编译器用一条ADD指令或SUB指令来实现该ADR伪指令的功能。指令格式&#xff1a;A…

python贴吧顶贴_Python实现百度贴吧自动顶贴机

开发这款小工具&#xff0c;我们需要做一些准备&#xff1a; url.txt&#xff1a;多个需要顶起的帖子地址。 reply&#xff1a;多条随机回复的内容。 selenium&#xff1a;浏览器自动化测试框架 首先&#xff0c;我们先使用pip完成selenium的安装。 示例代码&#xff1a; pip i…

腾讯云成为国内首家FinOps基金会顶级会员

11月24日&#xff0c;腾讯云正式宣布加入FinOps基金会&#xff0c;作为国内首家FinOps基金会顶级会员&#xff0c;腾讯云将联合FinOps基金会&#xff0c;全面推进对FinOps标准和最佳实践的贡献&#xff0c;为企业提供云财务管理的最佳解决方案。 “作为中国云原生技术和应用的领…

雷锋网独家解读:阿里云原生应用的布局与策略

简介&#xff1a; 阿里云一直希望可以做标准化的技术&#xff0c;跟社区的标准、行业的标准进行打通&#xff0c;这样对于阿里云的客户而言&#xff0c;简化了很多流程&#xff0c;其具备的能力也是未来的主流。 文章来源&#xff1a;雷锋网 作者&#xff1a;杨丽 原标题&am…

python map zip_Python学习笔记(九) map、zip和filter函数

这篇文章主要介绍 Python 中几个常用的内置函数&#xff0c;用好这几个函数可以让自己的代码更加 Pythonnic 哦1、mapmap() 将函数 func 作用于序列 seq 的每一个元素&#xff0c;并返回处理后的结果&#xff0c;其语法格式如下&#xff1a;map(func, seq)其中&#xff0c;func…

日本字全角字符linux,Linux命令行输入全角字符被转化

产品经理在jira里报了个ticket&#xff0c;说文章里有链接404了。另外非常积极主动的说&#xff0c;应该是没填“http://“协议头。哎&#xff0c;好好提你的bug&#xff0c;把解决bug的事情留给专业人士来不行么。人与人之间的沟通有时候就是要逞一下能&#xff0c;显得”我“…