タグ

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

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

    macOSのSafariでは、ボタンやリンクにTabキーでフォーカスを移動できないのがデフォルトの設定になっている Safariでは、「設定」画面の「詳細」パネル内にある「Tabキーを押したときにWebページ上の各項目を強調表示」のチェックを入れていないと、Tabキーを押したときにボタンやリンクにフォーカスが移動しません(Optionキーを押しながらTabキーを押すと移動できます)。デフォルトではチェックが入っていない状態になっています。 また、macOS版Firefoxでは、「設定(about:preferences)」内の「タブキーでフォームコントロールおよびリンク間のフォーカスを移動する」にチェックが入ってないと、Safariと同じくボタンやリンクにはTabキーでフォーカスが移動しないようになっています。これはSafariの挙動にあわせて追加されたようで、やはりデフォルトではチェック

    スクリーンリーダーの操作には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を追加するとか
  • コンポーネントごとに考えるアクセシビリティ - Qiita Advent Calendar 2023 - Qiita

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

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