ウェブアクセシビリティの失敗事例を発信します。 2024年04月05日 : aria-hidden によって、サイト自体が閲覧できなくなることもある 2024年02月07日 : 標準でないチェックボックスはいろいろ難しい 2023年12月22日 : aria-live がうるさい
Home - ARIA-Barriers
ウェブアクセシビリティの失敗事例を発信します。 2024年04月05日 : aria-hidden によって、サイト自体が閲覧できなくなることもある 2024年02月07日 : 標準でないチェックボックスはいろいろ難しい 2023年12月22日 : aria-live がうるさい
標準でないチェックボックスはいろいろ難しい - ARIA-Barriers
今回は、ACTLabの代表、吹雪がお送りします。 私は弱視なので、マウスとスクリーンリーダーを組み合わせてウェブを閲覧しています。 みんな、標準のチェックボックスに不満を抱えている 普段からウェブサイトを閲覧している方であれば、以下のようなチェックボックスを一度は見たことがあるかと思います。 これは、HTMLのinput要素を用い、それ以上何の装飾や工夫もしていない、単純なチェックボックスです。 HTMLの標準要素なので、どのブラウザ、どのスクリーンリーダーでも支障なく利用することができるはずです。 <div class="bg-gray-200 my-8 py-4 px-4 flex items-center cursor-pointer"> <label class="flex items-center"> <input type="checkbox" class="mr-2"> はい
「絶対にdisabled属性を避けて、aria-disabled属性を使わなければならない」わけではありません - Qiita
「絶対にdisabled属性を避けて、aria-disabled属性を使わなければならない」わけではありませんHTMLアクセシビリティWAI-ARIA 最近、「アクセシビリティを向上させたいなら、HTMLの disabled 属性ではなく、aria-disabled 属性を使うべき」という主張を見かけますが、本当にそうなのでしょうか？ disabled属性を使っていても、スクリーンリーダーで要素を知覚できる そのような主張をしている人、それを受け止めた人の中には「 disabled 属性を使った要素はスクリーンリーダで読めなくなる」と誤解している人が少なからず存在するように思われます。しかしこれは正しい理解ではありません。 たしかに、disabled属性を付加している button 要素や input 要素、 select 要素、 textarea 要素は、Tabキーによるフォーカスはでき
【HTML】ボタン要素にdisabled属性をつけるのをやめませんか？ - Qiita
はじめに みなさんは、フォームなので必須項目が入力されてない時、Submitボタンに disabled をつけて押せないようにしていませんか？ この記事では、ボタンにdisabled属性をつけない方がいい理由とdisabledをつけない方法を紹介します。 disabled属性をつけない方がいい理由 disabled 属性をつけると、ユーザーがボタンを操作することを防ぎます。 そのため、キーボード（Tabキー等）で操作している時フォーカスが当たらないため、ボタンの存在が認知できません。 disableがない時 disableがある時 ボタンの存在が認知できないため、支援技術（スクリーンリーダ等）で操作しているユーザーにとって、「送信ボタンどこだろう？」と思ってしまったり、「なんで送信ボタンが出てこないんだろう？」と思ってしまい、操作を完了させることができなくなります。 aria-disabl
sakura: a minimal classless css framework / theme
sakura: a minimal classless css framework / theme. [Go to Github repository] The perfect blossom is a rare thing. You could spend your life looking for one, and it would not be a wasted life Just drop in sakura.css to any webpage and go from ugly looking 1900's website to a pretty modern website in literally 0 seconds. Easy to customize and build on top of sakura. Sakura supports extremely easy th
decoding="async" について詳しく調べてみる
この記事は2023年7月19日時点の Chrome の最新版 115.0.5790.98 を使って検証しました。今後 Chrome の実装によって挙動が変わる可能性はございます。 はじめに 画像表示のパフォーマンス改善において、「decoding="async" をつけましょう」というのをよく見かけますが、おそらくほとんどの人がその実際の挙動を理解していない、あるいは誤った認識をしていると思います。今回詳しく調べる前の僕も含めて。 loading と decoding の違い 画像のパフォーマンス改善で decoding="async" のほかに、もう一つよく言及されるのが loading="lazy" です。decoding 属性について詳しく見る前に、まずは loading 属性との違いについて理解したほうがいいと思います。 loading とは、ブラウザがどのように画像を読み込むかを
View Transitions API入門 - 連続性のある画面遷移アニメーションを実現するウェブの新技術 - ICS MEDIA
View Transitions APIを使うと、シンプルでスムーズな連続性のあるアニメーションを実装できます。 ウェブ技術でのアニメーションはさまざまな手段が存在します。CSSのtransitionやanimation、JavaScriptでのWeb Animations APIなど利用されている方も多いでしょう。View Transitions APIは、これらのアニメーション手段だけでは実現が困難だった新しい遷移アニメーションを実現できます。 本記事では「どのようなことができるか」「使い方」「使用上の注意点」を紹介します。 本記事で紹介すること View Transitions APIで実現できるのは新しい遷移アニメーション JavaScriptとCSSの指定で容易に利用できる JSフレームワークでの対応も進んでいる 2024年6月リリースのChrome 126とEdge 126でJ
想定外の新機能！ HTMLの<input type="checkbox" switch>だけで、スイッチUIが実装できるようになるぞ
WebサイトやアプリのUIで、スイッチを実装するのはなかなか面倒です。CSSで書くと、なかなかのボリュームになってしまいます。 そんなスイッチがHTMLだけで実装できるようになります。 Release Notes for Safari TP 185によると、HTMLの新機能としてswitch属性がサポートされました。これにより、スイッチUIがHTMLで簡単に実装できるようになります。 switchについては、かなり前から実装についてGitHubで議論されていました。スイッチは人気のあるUIコントロールだけど、CSSで実装するのは簡単じゃないよね、簡単に実装できるようにしよう。という感じです。 スイッチUIを実装するHTMLは、下記の通りです。
コンポーネントごとに考えるアクセシビリティのカレンダー | Advent Calendar 2023 - Qiita
はじめに みなさん初めまして。🎅🏻 Qiita株式会社で マネージャー・PdM・デザイナーをしている、自分のことをデザイナーであると自認 @degudegu2510 です。 去年に続き、今年のQiita Advent Calenar 2023でも、1人で25記事以上投稿した方 全員 に完走賞がおくられる企画を開催しています。🎉 🎉 Qiita運営として、ユーザー様だけに25記事完走してもらうのは、とても忍びないので、今年も25記事完走してやろうとこのカレンダーを作成しました。 「有給を使ってでも、25記事完走するぞ！💪🏻」という気概でいるので、購読・応援していただけると嬉しいです。 ※ 2022 完走賞：【完走賞ゲットだぜ！】CSSでポケモンマスターになってやる Advent Calendar 2022 テーマ このカレンダーは、 UIコンポーネントごとに考えるアクセシビリティ
意外と奥深いCSSのfont-weightの話 - ICS MEDIA
普段なにげなく使っているフォントですが、文字の太さを表すフォントウェイトには注意したいポイントがあります。とくにどの環境でも同じフォントにするためのウェブフォントでも、CSSの設定やOSの違いによって見え方が変わってしまうことがあります。ほかにもCSSの設定によっては意図しないウェイトが適用されてしまうこともあります。 この記事ではフォントウェイトのまつわる落とし穴と、それを回避するための方法を紹介します。エンジニアだけでなく、デザイナーの方にも役立つ内容です。 Noto Sans JPを例にフォントのウェイトの設定を変えながら見え方を確認できるデモページを用意しました。ぜひ試してみてください。 サンプルを別ウインドウで開く コードを確認する アンチエイリアス まず、アンチエイリアスについて簡単に説明します。アンチエイリアスとは、画面上で表示される輪郭を色の濃淡などを用いて滑らかにする処理
Tooltips & Toggletips
Tooltips — affectionately misnomered as "tootlips" by my friend Steve — are a precariously longstanding interface pattern. Literally "tips for tools", they are little bubbles of information that clarify the purpose of otherwise ambiguous controls/tools. A common example is a control that is only represented by a cryptic icon, the meaning of which the user has yet to learn. When and how these bubbl
【CSS】「なんかグラデーションが汚くなるんだけど」を解決する。 - Qiita
概要 このグラデーションは、#ff0000 → #00ff00のグラデーションになります。 みなさんは、このクラデーションを見てどう思いますか？ 真ん中あたりの色が茶色っぽくなって あまり綺麗なグラデーションとは感じないですよね? この記事では、これが発生する原因と綺麗なグラデーションの作り方を 解説していきます。 この記事を読んで理解すれば、綺麗なグラデーションが簡単に作れるようになるでしょう。 原因 1. RGBについて理解する RGBは、赤（Red）、緑（Green）、青（Blue）の3つの色を それぞれ、0~255の値を指定することで、色が作られます。 例えば、 R: 255, G: 0, B: 0 → 赤 R: 255, G: 255, B: 0 → 黄色 このように色が指定されます。 では、RGB全てが同じ値の時はどんな色になるでしょうか？ 答えは、↑このようにグレースケールカ
STUDIO | Web制作を、ノーコードで。
コードやテンプレートに縛られずに、 誰でも自由自在にデザイン可能。 作成したサイトは、1クリックで世界に公開。 そう、必要なのはSTUDIOだけです。
Splideをスライダーの新たな定番としたく - Qiita
はじめに Webページ制作において、スライダーの登場頻度は異常に高いですよね。 cssでanimationプロパティを書くより、スライダーを実装する方が多いまであります。 その上、地味に仕様決めをちゃんとしておかないと、後であーだこーだなって実装コストが高くなることも往々にしてあるかと思います。 そのため、大体の仕様を満たすことができるようにライブラリを使って実装している方がほとんどかと思います。 そして、そのスライダーライブラリのデファクトスタンダードとなっているのが、slickとSwiperでしょう。 そこに第三の選択肢として、Splideを推したいのです。 Qiitaで「Splide」と検索しても意外と記事がなかったので、おすすめポイントをまとめてみたいと思います。 Splideとは Splideは、MITライセンス下でリリースされたアクセシビリティに配慮された軽量で高機能なスライダ
2021年、CSSのクロスブラウザ対応の現状、SafariやFirefoxで起こる不具合の対応方法
2021年、CSSのクロスブラウザ対応の現状を紹介します。 Flexboxをはじめ、さまざまなCSSの魅力的な機能が主要ブラウザでサポートされ、CSSを書くことよりもデバッグして修正することの方が多いと嘆いたデベロッパーも減ってきたと思います。 しかし、いまだに修正が必要なCSSの問題点もあります。IEがなくなっても、SafariやFirefoxで起こる不具合の対応方法なども解説します。 The State of CSS Cross-Browser Development by Ahmad Shadeed 先日、MicrosoftからIE11サポート終了のお知らせがあり、ユーザーが世界規模のWordPressもIE11のサポートを終了します。これらの情報でIE11のサポート終了の流れは一気に加速しますね。 参考: Internet Explorer 11 デスクトップアプリは 2022年6
【2021年】UIデザイントレンドガイド - Qiita
本記事は、Diana Malewicz氏による「A guide of UI design trends for 2021 Part 1 & Part 2」（2020年12月8日公開）の和訳を、著者の許可を得て掲載しているものです。 より多くの3D、より多くの色、グラスモーフィズム、素晴らしいツール！🤩 あと1ヶ月もすれば（ついに！）2020年というあまりクールではない年に別れを告げることになります。前回のトレンド記事がとても好評だったので、時間をかけて業界研究をして、「2021年デザイントレンドガイド」を作りました。 2021年がどんな年になるか見てみましょう！ 1. 3Dイラスト（そう、まだね！） 左からCuberto、Superlist、afshint2y (instagram) 、Essentials、Minh Pham 3D画像はまだ健在です。特に、普通のUIデザイナーが3Dで実
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デバイスごとの要素(height)の修正について
Adobeの製品一覧から「Adobe XD」が消失 ～買収した「Figma」への一本化で提供終了？【1月26日追記】／収録させてもらっている窓の杜も寝耳に水【やじうまの杜】
GitHub - material-components/material-components-web: Modular and customizable Material Design UI components for the web
GitHub - FortAwesome/Font-Awesome: The iconic SVG, font, and CSS toolkit
