iT邦幫忙

2024 iThome 鐵人賽

DAY 20
0
Mobile Development

畢業專題拯救計畫系列 第 20

Flutter中的無障礙設計--Semantics

  • 分享至 

  • xImage
  •  

無障礙設計就是讓應用程式或網站能夠讓所有人,包括有視力、聽力、動作或認知障礙的人,都能夠輕鬆使用。

  • 語義標籤
    Semantics widget 是 Flutter 提供的一種用來描述 UI 元件語義信息的工具。這些訊息能夠幫助輔助技術(如屏幕閱讀器)更好地解釋應用中的內容。
Semantics(
  label: '播放按鈕',
  child: IconButton(
    icon: Icon(Icons.play_arrow),
    onPressed: () {
      // 執行播放操作
    },
  ),
)
  • 可觸控的目標區域
    Flutter 提供了 GestureDetector 和 InkWell 等小部件來處理觸控事件,但需要注意的是,觸控區域應足夠大(至少 48x48 dp)。
GestureDetector(
  onTap: () {
    // 處理點擊
  },
  child: Container(
    width: 48.0,
    height: 48.0,
    child: Icon(Icons.add),
  ),
)
  • 色彩對比和可視性
    Flutter 的 Color 和 Theme 小部件可以用來調整應用的色彩和主題,確保高對比度。
Text(
  '重要提示',
  style: TextStyle(
    color: Colors.white,
    backgroundColor: Colors.black, // 高對比度的文字顏色
  ),
)
  • 動態類型和字體縮放
    Flutter 支持系統字體大小設置。通過設置 Text 小部件的 textScaleFactor 屬性,確保文字可以根據用戶的偏好動態調整大小。
Text(
  '調整字體大小',
  style: TextStyle(fontSize: 16.0),
  textScaleFactor: MediaQuery.of(context).textScaleFactor,
)

https://ithelp.ithome.com.tw/upload/images/20240906/20163322qZ5eoaA8Pg.pnghttps://ithelp.ithome.com.tw/upload/images/20240906/20163322OctreakSC3.png
我們明天見~


上一篇
Flutter中的動畫--Explicit Animations
下一篇
Flutter中的連結器--MethodChannel
系列文
畢業專題拯救計畫30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言