ダークモードとライトモード：どちらが良いのか
正常な視力の人（または視力を矯正している人）は、ライトモードのほうがよく見える傾向があるが、白内障および関連疾患のある人の中には、ダークモードのほうが見え方が良好になる人もいる。その一方で、ライトモードでの長時間の読書は、近視を引き起こす可能性も指摘されている。 Dark Mode vs. Light Mode: Which Is Better? by Raluca Budiu on February 2, 2020 日本語版2022年10月31日公開 最近、iOS 13へのダークモードの導入をきっかけに、ダークモードのデザイントレンドとしての人気とそのユーザビリティについて、ある記者からコメントを求められた。また、UXカンファレンスの参加者からもダークモードについてのこの質問を何度か受けている。 iOS 13：ライトモード（左）とダークモード（右）。 前もって言っておかなければならないが
Ameba Pickのアクセシビリティ向上への取り組みについて | CyberAgent Developers Blog
こんにちは、Ameba事業本部という部署でフロントエンド開発をしております宮本 (@hrfmmymt) です。 2020年4月(iOSアプリ版は5月)にAmebaブログの新アフィリエイト機能である Ameba Pick (アメーバピック) がリリースされました。 Ameba Pickのランディングページ ( はじめ方_Ameba公式アフィリエイトAmeba Pick ) Ameba PickはAmebaブログの管理画面やエディタから操作できる、Amebaブログの内包する一つの新機能という位置付けではあります。しかしながら、モーダルウィンドウなども含めた画面の数や、PCブラウザ・SPアプリへの対応、デザインや機能を既存の管理画面へ整合させる必要性があることなどの事情を含めると、要した開発期間はおよそ10ヶ月に及ぶもので、開発規模としては一サービス程度のものとなりました。 さて、本稿ではそんな
CSSのメディアクエリには頼らず、コンテンツベースで実装するレイアウトの最近の方法 -Relearn CSS layout
CSSのレイアウトは最近ではFlexboxが主流となり、それまでの考え方や実装方法とは大きく異なります。@mediaのブレイクポイントやハックを使用せず、CSSの性能を活かした、コンテキストに依存しないコンテンツベースで実装するコンポーネントのレイアウト方法を学べるRelearn CSS layoutを紹介します。 すべてのデバイスに対してフレキシブルなレイアウトが可能で、一貫性のある簡潔なコードで実装できます。 Relearn CSS layout Relearn CSS layoutは、インクルーシブ HTML＋CSS＆JavaScript（紹介記事）、コーディングWebアクセシビリティ（紹介記事）などの著者Heydon Pickering氏（@heydonworks）とAndy Bell氏（@andybelldesign）のプロジェクトです。
INSPIRED BY USER! 当事者と学ぶ アクセシビリティ 勉強会を開催しました #a11y #inspired_a11y | DevelopersIO
概要 「アクセシビリティ」とは、スマホアプリやWebアプリの設計において、ユーザーの様々な特性(見ることができない、見えづらい、聴くことができない、聴こえづらい、細かい操作が困難、認知や理解・学習が困難)に配慮したデザインやアプリ開発を行うことです。 Web分野ではアクセシビリティへの取り組みが増えてきましたが、スマホアプリの分野では、あまり語られていない印象があります。これから開発されるスマホアプリが少しでも多くアクセシブルになることを願って、2019年7月31日、クラスメソッド大阪オフィスで「INSPIRED BY USER! 当事者と学ぶアクセシビリティ勉強会」を開催しました。 当日は、13名の方にご参加いただき、クラスメソッドからも4名の参加がありました。 障害当事者である実際のユーザーの声を聞くことを通じてアクセシビリティの必要性を実感できることを大切にしたいという思いで、今回は
テクニカルSEOの優先順位。あなたが今取り組むべきは、どの段階か？ ｜SEO Japan by アイオイクスSEO Japan｜アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
インデックス率の改善、メタタグの最適化、CTR向上のための施策。SEOにおけるテクニカルな領域は非常に広範囲です。もちろん、全ての領域を最適な状態にすることが望ましいですが、そのためには領域ごとの優先度をつけることが効果的でしょう。 自身のサイトが今取り組むべき領域はどこか。現状把握に役に立つ記事を紹介します。 技術的な進歩と実装方法の理解を深めるために、テクニカルSEOに求められる内容に優先順位をつけよう。そして、あなたが次に取り組むべき内容を理解しよう。 何をもってして、「最高のWebサイト」と定義することができるだろうか？ 健全で、SEOのポテンシャルを十分に発揮している機能的なサイトがベースとしているものはなんだろうか？ マーケットとキーワードの調査、E-A-T、検索意図に合致したコンテンツ、バックリンク、などなど。 しかし、こうしたサイトに共通していることは、テクニカルSEOの要
ユーザーは音声だけでWebサイトをどう使うのか？ 弁護士ドットコム、アクセシビリティユーザー調査の結果を公開 | 弁護士ドットコムがアクセシビリティに本気で取り組む狙い
いよいよユーザーテストに入ります。テストの結果どうなり、何がわかったのでしょうか。今回は、ユーザーテスト本番の様子をお伝えします。 中根さん登場！前回の記事でもご紹介した中根さんに、実際に当社までお越しいただきました。中根さんは、アクセシビリティの専門家です。かつてはW3CのWAI (Web Accessibility Initiative) でアクセシビリティガイドラインの策定にも関わっており、現在ではアクセシビリティの情報サイト「AccSell」を主催して、Webに限らず、アクセシビリティ全般の情報を積極的に発信されています。 弁護士ドットコムの社内からは、20名ほどの参加者が集まりました。テストに先立ち、まずは視覚障害者の一般的な環境や、中根さんの普段の利用方法をご紹介いただきました。この内容は第1回、第2回の記事で触れた内容と重複しますので、そちらをご覧いただければと思います。 い
第6回 D2D アクセシビリティ勉強会：フォーム編 - CodingMania
前回デザインしたフォームをグループでマークアップ！またより実践的なあるあるなフォームもイジワル問題として出題され、ドドーンと延長（汗。 勉強会のツィートまとめ @SawadaStdDesignさんの第6回 D2D アクセシビリティ勉強会資料 「アクセシブルな入力フォームを作ろう」 @milk54さんの第6回 D2D アクセシビリティ勉強会振り返り 第6回 D2D アクセシビリティ勉強会でアクセシブルなフォームを作成！ 今回は勉強会の振り返りというより勉強会で学んで、日々できるフォームの書き方をズラリまとめてみました。 label要素でテキストラベルとテキストフィールドを関連付ける。 例） <label for="name">名前</label> <input type="text" id="name" /> 例）必須項目の場合 <label for="name">名前<span>[必須]<
Webアクセシビリティについて勉強してみて知ったことや感じたこと | mkasumi.com
ガイドライン兼国際標準規格であるWCAG2.0をもとに日本工業規格としたのが「JIS X 8341-3：2016」です。2004年、2010年にも改正されていて、2016年4月18日現在、最新版は「JIS X 8341-3：2016」となります。過去のJISを知っている方は最新版との差を知りたいと思いますが、2010年版と違い、2016年版は「等級A」と言われていた適合レベルが「レベルA」となったり、すこし文言が変更されています。2010年と引き続き、WCAG2.0をもとにしているので、項目はWCAGと同じく61項目のままとなっています。 JIS X 8341-3：2016が元に作られている国際標準規格です。JISは日本の規格ですが、こちらは海外にも適用されます。チェックツールなど、海外で配布されているものはWCAGが基準となっています。 基本的に、JIS X 8341-3：2016 はW
Ajaxによる画像の拡大｜ウェブユーザビリティ向上を支援するWebsite Usability Info
Webページ上にある小さな画像（サムネイルなど）をクリックすると、画像が拡大表示される — Ajaxを使った、そんなUI（ユーザーインターフェース）をご覧になったことがある人は多いと思います。たとえば、以下のような感じです（eコマースサイトの例）。 【ページ1】商品一覧の中から、興味のある商品を選びます。 【ページ2】上記で選んだ商品について、拡大してみたい画像を選びます。 【ページ2'】拡大画像が表示されます。 なお、このページを【ページ3】ではなく【ページ2'】と記しているのは、上記【ページ2】からページが切り替わっていないから（URLが同じだから）です。 潜んでいる問題点 Ajaxを使うと、上記のようにクールに（かっこよく）画像を拡大することができるので、自分のWebサイト（ホームページ）でも採り入れようと考えているウェブマスターの方も多いことでしょう。ただしこのAjaxによる
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
VOICEVOX | 無料のテキスト読み上げ・歌声合成ソフトウェア