IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 移动开发 -> Android Accessibility知识分享 -> 正文阅读

[移动开发]Android Accessibility知识分享

工具

工欲善其事,必先利其器。下面我们介绍一下工具来发现我们的accessibility问题。感谢这篇文章的分享:https://www.kodeco.com/240-android-accessibility-tutorial-getting-started

  • Lint:这个工具是google提供的,在android studio上直接可以使用。默认是启用的。请添加图片描述
    它的使用也相当简单,当你在编辑你的布局文件时,它就起作用了。如:
    请添加图片描述
  • Accessibility Scanner 扫描器
    这是google提供给开发者的一个accessibility扫描器。大家可以去网上搜索这个app,然后把它下载下来,或者去在这个地方下载
    安装好后,可以按Settings/Accessibility/Accessibility Scanner,打开扫描器:
    在这里插入图片描述

打开扫描器后,打开我们的app,此时会有一个蓝色按钮,点击它,扫描器就会扫描我们的app,然后就会给出结果,还要修改的建议。

Accessibility问题修复指导

android:contentDescription

用这个属性来描述我们的视图,如果我们的组件是继承或是Button类型,那么我们的screen reader会识别出它是按钮,并且告诉用户可以点击去激活它。所以我们只需要在这个属性提供关于视图的描述即可。

如果我们想screen reader跳过这个元素,移动到下一个,那么我们就可以将其android:contentDescription设置为@null ,或者添加一个属性android:isImportantForAccessibility并设置为 ”no”

组合内容

    <LinearLayout
        android:id="@+id/consumedContainer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:focusable="true"
        android:focusableInTouchMode="false">

      <TextView
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_weight="1"
          android:text="@string/amount_consumed"
          android:textAppearance="@style/TextAppearance.AppCompat.Title"/>

      <TextView
          android:id="@+id/amountConsumed"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_gravity="end"
          android:layout_weight="1"
          android:textAlignment="textEnd"
          android:textAppearance="@style/TextAppearance.AppCompat.Title"
          tools:text="3 of 5"/>
    </LinearLayout>

请添加图片描述
如果我们的screen reader先读“Amount Consumed”,等到划到下一个,才读"3 of 5",那么这个体验就真得很差.
请添加图片描述

如果能够让screen reader将两个元素一起读的话,也就是让它们同时获得焦点,体验就会很好,如下图:
请添加图片描述
我们可以采用组合的方式来实现:在它们的父元素LinearLayout加上android:focusable,设置值为true,再加上android:focusableInTouchMode,并设置值为false,因为我们只想让screen reader获得焦点。

    <LinearLayout
        android:id="@+id/consumedContainer"
        ...![请添加图片描述](https://img-blog.csdnimg.cn/92ed0ee33a744e82a4262f56b953b1fd.png)

        android:focusable="true"
        android:focusableInTouchMode="false">
		...

    </LinearLayout>

Labels

上面因为是只读的,所以组合在一起会比较合理,但是如果是下面这种情况呢?

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

      <TextView
          android:id="@+id/coffeeLimitLabel"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_gravity="start|center_vertical"
          android:layout_weight="1"
          android:text="Coffee Limit"
          android:textAppearance="@style/TextAppearance.AppCompat.Title"/>

      <EditText
          android:id="@+id/coffeeLimitValue"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_gravity="end"
          android:layout_weight="1"
          android:hint="Limit"
          android:inputType="number"
          android:text="@string/default_coffee_limit"
          android:textAlignment="textEnd"/>
    </LinearLayout>

在这里插入图片描述
右边是一个输入框,也就是说在这里,我们其实想告诉我们的用户这里要请他/她输入Coffee Limit的数量。但是目前的实现就是先读了左边,再读右边,那么如果用户是连续的滑动,那或许还能听懂5的意思,那万一是隔了好一会才滑过去的,只听到5的话,就不知所谓了。所以分开他们不是很好,最好的实践应该是,当焦点在输入框上时,我们就要告诉用户这里是用来干什么的。具体我们可以这样做,在Coffee Limit的组件上使用android:labelFor属性,它的值设置成输入框的id值。

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

      <TextView
          android:id="@+id/coffeeLimitLabel"
          ...
          android:labelFor="@id/coffeeLimitValue"/>

      <EditText
          android:id="@+id/coffeeLimitValue"
          .../>
    </LinearLayout>

这样设置过后,当焦点在输入框时,screen reader就会读:limit for “Coffee Limit”。

改变遍历次序

请添加图片描述
比如说,我们现在要让右下角的“+”按钮先于“Amount Consumed 0 of 5”先被screen reader读到,我们可以在“+”按钮加上一个属性android:accessibilityTraversalBefore,将其值设置成@+id/consumedContainer. 类似的属性还有android:accessibilityTraversalAfter

announceForAccessibility()

如果我们的用户完成了一些操作,我们想通知他/她结果。那么就可以在某个view上调用announceForAccessibility()播报给用户听。

    binding?.addCoffee?.setOnClickListener {
      coffeeRepo.increment()
      showCount()
      binding?.amountConsumed?.announceForAccessibility("Limit is increased to 8")
    }

上述例子,就是在用户点击“+”按钮时,通知用户:“Limit is increased to 8”

根据本文中的链接,Google推荐任务可点击的组件大小至少是48dp。这与iOS的不一样。

  移动开发 最新文章
Vue3装载axios和element-ui
android adb cmd
【xcode】Xcode常用快捷键与技巧
Android开发中的线程池使用
Java 和 Android 的 Base64
Android 测试文字编码格式
微信小程序支付
安卓权限记录
知乎之自动养号
【Android Jetpack】DataStore
上一篇文章      下一篇文章      查看所有文章
加:2022-12-25 11:21:32  更:2022-12-25 11:26:05 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/22 18:04:29-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码