タグ

htmlとdesignに関するLhankor_Mhyのブックマーク (3)

  • スクリーンリーダーの操作にはTab以外のキーも必要です - Qiita

    Webのアクセシビリティの確認としてスクリーンリーダーを使った動作確認もしてもらうと 「リンクとかボタンしか読まれず、見出しや説明文がスキップされてしまいました」 という報告をされることが時々あります。 これは大抵、スクリーンリーダーを起動して、Tabキーだけを繰り返し押してしまっていることによって起こります。スクリーンリーダーの操作方法を伝えると、読み飛ばしたと思っていたところもちゃんと読みあげてくれたということがほとんです。 アクセシビリティをかなり意識したページであっても、Tabキーだけでスクリーンリーダーを操作しているかぎり、ページの隅々まで読めることはほとんどありません。スクリーンリーダーにはTabキーを押す以外にもいろいろな操作が存在して、それを憶える必要があるわけです。私はアクセシビリティチェックのやり方を説明するときには、必ずその操作方法のうち最低限のものを紹介しているつも

    スクリーンリーダーの操作にはTab以外のキーも必要です - Qiita
  • 想定外の新機能! HTMLの<input type="checkbox" switch>だけで、スイッチUIが実装できるようになるぞ

    WebサイトやアプリのUIで、スイッチを実装するのはなかなか面倒です。CSSで書くと、なかなかのボリュームになってしまいます。 そんなスイッチがHTMLだけで実装できるようになります。 Release Notes for Safari TP 185によると、HTMLの新機能としてswitch属性がサポートされました。これにより、スイッチUIHTMLで簡単に実装できるようになります。 switchについては、かなり前から実装についてGitHubで議論されていました。スイッチは人気のあるUIコントロールだけど、CSSで実装するのは簡単じゃないよね、簡単に実装できるようにしよう。という感じです。 スイッチUIを実装するHTMLは、下記の通りです。

    想定外の新機能! HTMLの<input type="checkbox" switch>だけで、スイッチUIが実装できるようになるぞ
    Lhankor_Mhy
    Lhankor_Mhy 2024/02/01
    スキュモーフィズム時代に現実のスイッチを模して作られたはずのデザインが、フラットデザインやマテリアルでも生き残ってるの、なんか不思議。HTMLが見た目を記述するの、良くないと思う。CSSのappearanceを追加するとか
  • コンポーネントごとに考えるアクセシビリティのカレンダー | Advent Calendar 2023 - Qiita

    はじめに みなさん初めまして。🎅🏻 Qiita株式会社で マネージャー・PdM・デザイナーをしている、自分のことをデザイナーであると自認 @degudegu2510 です。 去年に続き、今年のQiita Advent Calenar 2023でも、1人で25記事以上投稿した方 全員 に完走賞がおくられる企画を開催しています。🎉 🎉 Qiita運営として、ユーザー様だけに25記事完走してもらうのは、とても忍びないので、今年も25記事完走してやろうとこのカレンダーを作成しました。 「有給を使ってでも、25記事完走するぞ!💪🏻」という気概でいるので、購読・応援していただけると嬉しいです。 ※ 2022 完走賞:【完走賞ゲットだぜ!】CSSポケモンマスターになってやる Advent Calendar 2022 テーマ このカレンダーは、 UIコンポーネントごとに考えるアクセシビリティ

    コンポーネントごとに考えるアクセシビリティのカレンダー | Advent Calendar 2023 - Qiita
  • 1