静寂の街 消えた“耳印” | NHKニュース
男性は、街にあふれるさまざまな音を聞き分けていました。コンビニの自動ドアの音、ラーメン屋のBGM。自動販売機の音まで。すべては生きるため。 覚えた一つ一つの音は、“耳印”として記憶に刻み込まれていました。しかしいま、耳印は消え、その場に立ち尽くすこともあるといいます。 （社会部記者 災害担当 飯田耕太） “耳印”の取材は、意外なところから始まりました。 揺れをとらえる、地震計です。 車のエンジンや人々の足音、工場の機械音…。社会生活に伴って出る音は、すべて振動として地中に伝わっていました。 地震を観測するうえでは妨げとなる「ノイズ」と呼ばれています。 東京を中心とする1都5県に整備されている観測網「MeSO-net（メソネット）」。約290もの地震計が記録した「ノイズ」が、コロナ禍の異変をあぶり出していたのです。
瞬時に緊張感を与える「緊急地震速報」、臭さで危険を伝える「都市ガス」、苦さで誤飲を防ぐ玩具――。「不快」を効果的にデザインすることで世の中の役に立っているコトやモノを紹介する企画展「世の中を良くする不快のデザイン展」が2023年3月24日にスタート。同年4月23日まで、日本デザイン振興会が運営するデザインのコミュニケーションスペース「GOOD DESIGN Marunouchi」（東京・丸の内）で開催されている。1週間で2300人超、20代から70代まで幅広い世代が来場しているという。 世の中を良くするための不快が我々の身の回りにはたくさんあることを表現するために、展示会場内に街のジオラマを配置。ジオラマには番号が振られており、その番号と展示内容が対応している 「一般的に良いデザインは『使いやすく、分かりやすいこと』『見た目が美しく、洗練されているもの』『誰もが幸せになるもの』といった“快
はじめに 今やあらゆるサイトで使用されているハンバーガーメニュー。 私たちウェブサイト系のエンジニアは数え切れないくらい実装してきている定番パーツです。 しかしながらその実装は容易ではありません。自分の作り方に自信を持てていない方も少なくないのではないでしょうか。 ただ単にそれっぽく動くものを作るのであれば簡単ですが、アクセシビリティやメニュー展開時の他の箇所の挙動など、不具合がないように徹底的に作り込もうとするとなかなか難しいものです。 今回はそんな厄介な存在であるハンバーガーメニューについて、私なりの現在の作り方を紹介したいと思います。。 ハンバーガーメニューの実装で気を付けるべきこと ハンバーガーメニューの作り方を見る前に、ハンバーガーメニューのあるべき姿、実装時に気を付けるべきことを洗い出してみましょう。 私が思い浮かぶものだと以下のようなものがあります。 メニューボタン、アコーデ
見かけのユーザビリティの研究が語っていることを教訓的にまとめると、「デザイナーは、まず実質的なユーザビリティの向上を目指すべきであり、その後、可能なかぎり見かけのユーザビリティを高めるべく、審美性の向上を目指すべきだ」ということになる。 黒須教授 2022年11月8日 研究を始めた経緯 実は、筆者は、日立製作所の中央研究所からデザイン研究所に移籍した当時、世間のプロダクトデザイナーたちが美しさや格好良さなどの見た目の魅力を増そうとして努力していることに、一種の憤慨を覚えていた。いや、美しさや格好良さは悪いことではない。しかし、中央研究所でヒューマンインタフェースの研究をしてきた自分としては、審美性もさることながら、もっと使いやすさやユーザビリティにも力を入れるべきではないかと思っていたのだ。 それでも、デザイン研究所に在籍してしばらくするうちに、「認・操・快」というキーワードをプリントした
キャレットアイコンは、アコーディオンがその場で開くのであって、新しいページへの直接のリンクではない、ということを最も明確にユーザーに示すことができていた。 Accordion Icons: Which Signifiers Work Best? by Page Laubheimer and Raluca Budiu on August 23, 2020 日本語版2021年4月8日公開 アコーディオンが、現在、人気のあるUI要素であるのには理由がある。というのも、モバイルでは、コンテンツを折りたたんでページの長さを管理可能にする不可欠なツールになっている一方、デスクトップでも、視覚的な複雑さを軽減し、ユーザーが目下のタスクに最も関連性の高いコンテンツに集中できるようにしてくれるからだ（複雑なアプリケーションには特に適している）。 モバイルUXとアプリケーションデザインの両方の講座でよく聞かれ
ヤコブ・ニールセンのインタラクションデザインのための一般的な原則。これらの原則は幅広い経験則であり、具体的なユーザビリティガイドラインではないため、「ヒューリスティックス」という。 10 Usability Heuristics for User Interface Design by Jakob Nielsen on November 15, 2020 日本語版2021年4月12日公開 この記事の最後で、ヤコブの10ユーザビリティヒューリスティックスの無料ポスター（英語）をダウンロードできる。 1. システム状態の視認性 デザインは、妥当な時間内に適切なフィードバックを通じて、今、何が起こっているのかを絶えずユーザーに知らせる必要がある。 ユーザーが現在のシステムの状態を把握できれば、彼らは自分がそれまでに行ったインタラクションの結果を知り、次のステップを決定することができる。予測可能
web アクセシビリティに、どうやって対応したら良いか？を 手助けするツールを作りました。 WCAG2.0 の達成基準に合わせた実装方法を確認し、試験結果を記録することができます。 ■ WCAG 2.0 達成基準・実装チェックリスト https://a11y-i-guideline.netlify.com （chrome ブラウザでしか挙動確認してません） 対象 web コンテンツで JIS X 8341-3:2016・WCAG2.0 への対応を求められた コーダー、ディレクター、デザイナー 目次 アクセシビリティ用語解説 実装チェックリストでできること 各ポジション別確認ポイント 使い方 アクセシビリティ用語解説 web アクセシビリティ 一般的に「障害者対応」と考えられるが、メガネがない・眩しい屋外など健常者にとっての 一時的な状況でも、誰でも web コンテンツを支障なく利用できる状
複数のチャットソフト使用で起きる「改行とポストはEnterかAlt＋EnterかShift＋EnterかCtrl＋Enterかギャンブル」どうにかしてほしい問題
すぐさま共感してしまうツイートを、イラストとともにご紹介する企画「共感しかない」。今回はプログラマーのnrs（@nrslib）さんが呟いた、リモートワーカー納得の嘆きです。 （イラスト：かるーめ） おかげで適当にenterを押せない 複数のチャットソフト使ってると Enter Alt Enter Shift Enter Ctrl Enter のいずれかで「頼む！！ ポストするな！ 改行してくれぇええ！」って賭けしてる気分になる （nrsさんのツイートより） 今では一般的になった、リモートワーク。それに伴いさまざまなチャットソフトが普及しましたが、取引先などによって異なるソフトを使い分けている人も多いでしょう。しかし複数のチャットソフトを使っていると思わぬわなとなるのが、改行と投稿の操作です。 チャットソフトによって、AltキーとEnterキーで改行したり、逆にEnterキーだけで投稿できた
9月1日に発足したデジタル庁のウェブサイトについて、まずはデジタル庁発足日に、アクセスしにくい状態が発生してしまったことをお詫び申し上げます。関係チーム一丸となって、詳しい原因の解明と対策に向けて取り組んで参ります。 改修した主な項目オープン後、すでに様々なフィードバックをいただいています。これまでにいただいたフィードバックの中で、以下の主な項目の改修を行いましたので、ご報告いたします。 ・記事のタイトル要素が全部同じになっている ・フッターのリンク漏れ ・Tweetボタンをタップしたときに自動的に出てくる表記の設定漏れ ・特定画面サイズでのトップページの表示崩れ またアップデートされた項目の告知については、ウェブサイト内にリリースノートを設置するなど、情報発信の方法と頻度についても今後検討して参ります。 ウェブアクセシビリティ上の課題についてウェブアクセシビリティのページに記載している内
半豚 @nai6ZUXMUVaEmP6 考えてみたら、ダイアログとかの場合のOKボタンは左配置だよな そのページで完結している場合は左配置で次ページある場合が右配置なのかな いや、まあ、この場合はそもそもリセットボタンは右上とか右下に小さめに配置した方が良いとは思うけど twitter.com/MacopeninSUTAB… 2023-06-13 08:54:15
ロービジョン「弱視」の人は、Webサイトをどのように使うのか？ ユーザー調査結果を公開 | 弁護士ドットコムがアクセシビリティに本気で取り組む狙い
「ロービジョン」をご存知ですか？視覚障害という言葉を聞くと、多く人は、全く見えない「全盲」という状態を連想するかと思います。しかし実際には、視覚障害とされる方の中には、わずかながら見えるという方もいます。 わずかでも視力があるなら、眼鏡やコンタクトレンズで視力の矯正をすれば良いと思うかもしれません。しかし、矯正しても十分な視力が得られない人もいます。また、視野が狭い、視野の一部が欠けているなど、別の要因で見えにくい人もいます。 このように、矯正をしても見えにくい状態を「弱視」あるいは「ロービジョン」と言います。実は、視覚障害とされる方の6割が「ロービジョン」だと言われており、割合としては全盲の方よりも多いのです。 では、ロービジョンの方はどのようにしてWebを利用するのでしょうか？ この問いの答えは、一言で言うと「人によって異なる」です。先に述べたように、ロービジョンといっても見え方はさま
2023年度リクルート エンジニアコース新人研修の講義資料です
モーダルダイアログのようなUIには、それが出現している間はダイアログの外の領域が操作不能になっているという慣習があります。ダイアログが取り扱うタスクだけにユーザーを集中させるために、あえてダイアログ以外の操作ができないようになっています。 またモーダルダイアログをはじめとしてディスクロージャーなど、ユーザーの操作に応じて表示と非表示が切り替わるUIもあります。こうしたUIは視覚的には隠れているようでも、実装としては、つねにDOM上に存在しているHTML要素の属性だけを書き換えてレンダリング結果を制御するのが一般的です。 こうしたケースでは、特定の領域を操作できないように実装を行う必要があります。CSSでdisplay:noneかvisibility:hiddenが指定されたHTML要素はそれだけで操作できない状態になりますが、それ以外の方法で非表示になったHTML要素は、利用状況によっては
Web制作時にGoogleChrome拡張のAccessibility Insightsを使ってアクセシビリティの評価を行う | DevelopersIO
いわさです。 皆様、アクセシビリティに配慮したWebサイトの設計されてますでしょうか。 Webアクセシビリティを評価するためのツールがMicrosoftから提供されていますので紹介したいと思います。 Accessibility Insightsというツールです。 元々はMicrosoftにて内部開発されていたもので、2019年にオープンソース化されています。 本日はWebサイトのアクセシビリティの評価を行いたいと思いますが、AndroidやWindowsのアプリケーションにも対応しています。 Webアクセシビリティの場合はGoogle Chromeの拡張として提供されています。 Webアクセシビリティとは 全ての利用者や環境下において、使用できるようにWebサイトが設計・開発されていることを指します。 弊社の以下のエントリをご参照ください。 使ってみた テスト用のWebサイトはSeleni
こんにちは。サイボウズの小林大輔といいます。社内で「アクセシビリティエキスパート」として活動しています。 サイボウズでは、2014年ごろからアクセシビリティについての取り組みを行ってきました。社内啓発活動の一環としてアクセシビリティの社内勉強会やワークショップを継続的に開催したり、実際の製品改善の取り組みも多数行ってきました。さらに社外に向けて、アクセシビリティの重要性や取り組み方を発信する活動もしてきました。 最近では、社内外でアクセシビリティという言葉を少しずつ聞くようになってきました。社内にも社外にもアクセシビリティを発信しつづけてきた身としては嬉しい限りです。 今回は、全盲 (両目が見えない) のエンジニアSUGIさんが入社したことで、私たちサイボウズが得た知見について紹介しようと思います。 もともと、私がアクセシビリティに関わることになったきっかけは、弱視の方へのユーザビリティテ
人を救う傘『サイレントアンブレラ』 視覚障害者が歩く時に重要な「周囲の音」を雨音で遮らない 18年かけて開発「難しかった」と傘職人（関西テレビ） - Yahoo!ニュース
大阪・阿倍野区にある老舗の傘店「丸安洋傘」が開発した「サイレントアンブレラ」。 普通の傘と違い、メッシュ生地と通常の生地の2層構造になっています。外側のメッシュ生地が雨をはじき、内側の生地との間に空間を作ることで雨音が軽減されます。その名の通り“静かな傘”なのです。 開発に携わった丸安洋傘の傘職人、川口博文さんは「これまでは、雨音の良い傘が良い傘だといわれてきた」といいます。では、なぜ“静かな傘”を開発することになったのでしょうか。 きっかけは約18年前、先代の社長に寄せられたある相談でした。 「視覚障害があり、雨の日は傘に当たる雨音で普段歩く際に頼りにしている音が聞こえづらい。雨音のしない傘を作ってほしい」という切実なオーダーだったのです。
Mozilla Foundationとその傘下であるMozilla Corporationによって開発されているフリーかつオープンソースのウェブブラウザが「Firefox」です。約20年の歴史を持つFirefoxのユーザーインターフェース(UI)の変遷について、韓国のエンジニアであるMS_Y氏が、GitHubで解説しています。 [Article] 0. Firefox UI UX history · black7375/Firefox-UI-Fix Wiki · GitHub https://github.com/black7375/Firefox-UI-Fix/wiki/%5BArticle%5D-0.-Firefox-UI-UX-history 1998年にNetscape Communicatorがオープンソース化した際に立ち上げられたのがMozillaでした。その後、Netscap
日本各地で活躍する現金自動受払機（ATM）。設置台数の国内トップは「ゆうちょ銀行」の約3万2000台。2位は大手銀ではなく、何とセブン銀行の約2万6000台だ。躍進の秘密を探ろうとセブン銀のATM開発に最初期から携わってきた松橋正明さん（60）を訪ねると「予想外」の連続だった。 開発者、異色の経歴 「セブン銀のATMの使いやすさには、めちゃくちゃ自信があります。夢中になってお客様のニーズに対応してきましたから」。東京・丸の内にあるセブン銀本社を訪ねると、自慢のATMがずらりと並んでいた。応接室で待ってくれていた松橋さんは喜々として語り始めた。 松橋さんは釧路工業高専（北海道）を卒業後、NECの関連会社に入社。そこに、新たに銀行業界に参入することになった同行からATM開発の話が舞い込んできた。松橋さんにATM開発の経験はなかったが、「セブン―イレブンからは新商品がどんどん出てくる。そんな会社
react-modalのアクセシビリティまわりの実装について、ソースコードを読んでみたかったのでその記録を残します。 特にことわりがない限り、 v3.11.2 の内容に基きます。 ドキュメント react-modalのドキュメントには accessibility という項目があり、3つの機能について説明があります。 The app element Keyboard Navigation ARIA attributes The app element 主にスクリーンリーダーのユーザー向けの機能で、 aria-hidden 属性によって、モーダルが開いているときにページコンテンツを非表示と同じような状態にする機能です。視覚的にモーダルウインドウがページコンテンツの上に被さるように表示されている＝ページコンテンツが隠されているのを、スクリーンリーダー向けにはモーダル以外の部分に aria-hid
「何のアイコンか分かりくい」「アップデートで発見しにくくなった」――Gmailのアイコンが10月に変わったことに対し、一部のユーザーからこんな声が上がった。メールアプリであることを直感的に認識しにくくなったというのだ。以前はMの文字下に影のように重なっていた封筒が、現在のデザインでは取り去られている。 特に今回の変更では、Gmailのアイコンがブルー、レッド、グリーン、イエローの4色デザインとなり、Google製の他のアプリと配色が統一された。これによってアプリの統一感は出た一方、色による区別が付きにくくなったとする声も上がった。 このような例はGoogle マップでも発生した。アイコンがマップそのものをベースにしたデザインからマップ上にピンを刺すデザインへ変更されたとき、「Google マップ＝地図のアイコン」と頭に刷り込まれていたユーザーは戸惑いを覚えた。 Googleに限らず、アイコ
HTML Standardの更新でdialog要素に関する変更があったので、自分の理解の整理のためにもまとめてみます。 Scott O'Hara氏によるdialog initial focus, a proposalという提案の一部が反映された変更で、#8199でマージされました。主な変更差分を見るとわりと大きめの追記がされていることがわかります。 提案されていることがすべて採用されていたり、提案で言及されている問題がすべて解決しているわけではなく、議論が続いているものも多いので、今後dialog要素がどういった方向に変更され、進化していくのかを見守る補助的な記事になればいいなと思います。 autofocus属性ほぼ必須 結論から言うと、autofocus属性がほぼ必須となります。そのautofocus属性はdialog要素自体とは限らず、内包している子孫要素に適切な場合もあります。 <d
『ストリートファイター6』の「音」でキャラの動きが伝わるオプションが絶賛される。CBT時点で充実のアクセシビリティ - AUTOMATON
カプコンの対戦格闘ゲーム『ストリートファイター6』のクローズドβテストが、10月7日から10月10日にかけて実施された。参加当選者は、来年2023年発売予定であるこの新作での、対戦やアバター作成などをいち早く試すことができた。そうしたなか、本作のアクセシビリティ設定の充実度について、一部で大きな注目が集まっているようだ。 Here is the feature in action with background sounds and music removed so the accessibility sounds can be heard better. pic.twitter.com/R8nngYe2uZ — kurominah (@kurominah) October 7, 2022 本作のクローズドβテスト版には、オーディオ設定内に「サウンドアクセシビリティ設定」が用意されている。
kohta_fd on Twitter: "このタイプの電灯スイッチ、on/offがわかりにくいし、ボタンの表示は消えるし、レスポンスは超遅いし、全てが最悪なので心の底から絶滅してほしいと思っている。 少なくともこいつのデザインを考えた奴・承認した奴は死んだほうがいい https://t.co/G9fDB1qNWy"
このタイプの電灯スイッチ、on/offがわかりにくいし、ボタンの表示は消えるし、レスポンスは超遅いし、全てが最悪なので心の底から絶滅してほしいと思っている。 少なくともこいつのデザインを考えた奴・承認した奴は死んだほうがいい https://t.co/G9fDB1qNWy
data-testidはいつ使うべきか？そもそも使うべきなのか？ | フューチャー技術ブログ
Playwrightあるいはそのロケーターの元ネタとなっているTesting Libraryでは、DOMを指定する方法として data-testid 属性を扱ったクエリーを提供しています。どちらでも getByTestId(ID文字列) メソッドを使い、この属性値を使った要素の取得が行えます。しかし、ドキュメントを見ると、PlaywrightもTesting Libraryも、「他の手法が使えないときの最終手段」としています。 In the spirit of the guiding principles, it is recommended to use this only after the other queries don’t work for your use case. Using data-testid attributes do not resemble how your
freeeアクセシビリティー・ガイドラインVer. 202104.0を公開しました - freee Developers Hub
こんにちは、freeeのアクセシビリティーおじさん、中根です。 締切が延長されたおかげで、先日余裕を持って確定申告を終わらせることができました。確定申告は概ね独力でできるのですが、紙で交付される書類やアクセシビリティーが低いPDFで交付される書類から情報を転記するところだけは相変わらず人に頼らないと突破できず、毎年残念な気持ちになっています。でも確定申告が終わると気持ちも軽くなり、気温も高くなっていよいよ春が来るなあという感じになります。 さて、それでは今回の更新内容を紹介します。 そして最後にイベントのお知らせもあります。 freeeアクセシビリティー・ガイドライン Ver. 202104.0リリース・ノート axe改めaxe DevToolsのルールに関する情報を追加 まず、freeeでも活用していてガイドラインの参考情報でも取り上げているアクセシビリティーのチェック・ツールaxeがい
米Twitterは8月11日（現地時間）、フォローボタンの色を変更するなど、ブラウザ版、スマートフォンアプリ版両方のUIを変更した。しかしユーザーからは「見づらい」「分かりにくい」と否定的な声が多く、「TwitterのUI」といったワードが同日朝から日本のトレンドに入っている。ボタンの色を変えたのは「（UIの）コントラストを上げることで、投稿される写真や映像に注目を集めるため」（同社）という。 Twitterではこれまで、フォローしていないアカウントのボタンは白、フォロー済みのアカウントのボタンは青で表示していた。新しいUIでは、フォローしていない場合は黒、フォロー済みの場合は白く表示するよう変更。白いボタンの指す意味を逆にした。変更を受けたユーザーからは「間違えてフォロー外しそう」「（黒のときは）ダークモードにすると見づらい」といった声が出ている。 Twitterは色の変更について「確か
テックタッチアドベントカレンダー 22 日目を担当する、フロントエンドエンジニアの shoko です。クリスマスが大好きで、12 月に入ってからは毎日うきうきしています！ 本日のテーマは「アクセシビリティ」です。 アクセシビリティとは？ アクセシビリティとは、Web システムやサイトを可能な限り多くの人が利用できるようにすることを意味します。 「可能な限り多くの人」というのは、ハンディキャップを持つ人々だけではなく、さまざまな状況や環境も含まれます。例えば、モバイルデバイスや回線の遅いネットワークを利用する場合、屋外の光が眩しい場所でデバイスを利用する場合、機械の故障でマウスが使えずキーボードで操作する場合…などです。このような状況や環境になることは誰でも考えられることであり、アクセシビリティを改善することは多くの人にとってメリットがあります。 しかし、アクセシビリティに興味を持っても、「
福岡のWebアクセシビリティ/フロントエンドエンジニア。株式会社ディーゼロ所属。Webにインクルーシブな未来を夢見てる人。よりセマンティックでアクセシブルなHTMLをマークアップできるように開発者を手助けするmarkuplintというオープンソースツールを個人の活動として開発しています。 これはエンジニアである僕がアクセシビリティを学ぶことによりデザインの知識と理解が深まったという経験談です。もしも今、あなたがデザインに関わっていく上で物足りなさやスキルの向上に伸び悩んでいるのであれば、アクセシビリティの知識がその助けになるかもしれません。広範囲でしかも大袈裟な話に聞こえるかもしれませんが、気になったところからちょっとずつ覗いてみるだけでもいいと思います。 アクセシビリティとは Accessibilityは英語なので人によって訳や解釈が若干異なりますが、これから話すアクセシビリティは、一般
花王が挑む、600サイト・1200名を巻き込んだ全社ウェブアクセシビリティプロジェクトの全貌【前編】 - Findy Engineer Lab
企業がウェブアクセシビリティの向上に取り組む際、まずは少人数で小さな改善から始めていく方法を選択するケースがほとんどです。しかし、2022年のGAAD（※1）で、ある企業の革新的な取り組みが大きな話題になりました。 その企業とは、大手消費財化学メーカーとして知られる花王株式会社。花王が発表したのは、全社を挙げたウェブアクセシビリティ推進プロジェクトの発足と取り組み内容についてでした。 ウェブアクセシビリティの啓蒙に取り組むFindyでは、花王でウェブアクセシビリティの推進に携わる後藤 亮さんと渡邊 佳菜恵さんにお話を伺うべく、ウェブアクセシビリティの専門家として活動されている株式会社ディーゼロのゆうてん（@cloud10designs）さんをインタビュアーに迎えて対談を実施。本記事では、対談の内容を前・後編に分けてたっぷりお届けします。 社員数が3万人を超える大企業である花王が、どのように
とり @to_ri3 @uwemon 値段と量が違うみたい…見つけちゃったから買ったけど、店員さんも同じ物と認識して1個スキャンして2個にしようとしてたので違う商品ですよって言う羽目に…
こんにちは、Ubie株式会社でデザインエンジニアをやっているtakanoripです。 UbieではユビーAI受診相談というサービスを開発しており、症状に関する質問をするページ（以下「質問ページ」という）を中心にアクセシビリティ向上のための様々な改善を進めています。 今回はその中の1つの事例をご紹介します！ Ubieでのアクセシビリティ推進の全体像が気になる方は弊社デザイナー3284さんの記事を読んでもらえたら嬉しいです！ 今回の課題：SPAでの画面遷移 SPAの画面遷移はスクリーンリーダー対応が漏れがちなポイントとして広く知られています。 SPAでない静的なウェブサイトでページ遷移した場合、スクリーンリーダーは次ページのタイトルを読み上げ、カーソル位置はページの先頭の要素に移動します。 しかしスクリーンリーダーに対応できていないSPAでページ遷移した場合、スクリーンリーダーは次ページのタイ
アクセシビリティ上の問題を仕込んだサイトを生成します 勉強の教材、業務の資料としてお使いいただけます 用途にかかわらず無料でお使いいただけます 障壁（バリア）の設定 プリセット版 問題をあらかじめ設定（プリセット）した駒瑠市サイトです。カスタマイズ版にのみ存在する障壁もあります。 プリセット版で使うWCAGのバージョンを選択してください WCAG 2.0以外のバリアは、まだあまり揃っていません。WCAG 2.2のバリアはまだありません。 WCAG 2.0 WCAG 2.1 WCAG 2.2 altの不具合の多い駒瑠市駒瑠市のロゴ、COOL CHOICEのロゴ、情報が不足したalt（「温暖化の状況」ページのグラフ）、altと重複したキャプションの提供（トップページ「あなたにもできる取り組み」）、文字画像にする必要がない上にaltが不適当な画像（トップページ「駒瑠市の本日のCO₂排出量」）、市
Next.jsに専用のESLintが追加された！
Next.js11がついに発表されましたね。 next/script、Next.js Liveなど、興味深い機能が色々ですが、自分が地味に嬉しかったのはNext.js専用のESLint設定がデフォルトでサポートされたことです。 create-next-appでESLint設定済みのNext.jsプロジェクトが作成できる ReactやNext.jsのプロジェクトを立ち上げる際、結構面倒くさい難しいのがESLintの設定です。 .eslintrcファイルの記述とか、extendsの記述順によって優先されるルールとかも変わってくるので、慣れないうちはなかなか難しい作業でしょう。（自分はいまだに試行錯誤してます…） しかし、今ではcreate-next-appを使うと、専用のESLintが設定済みのNext.jsプロジェクトを作成してくれます。 実際にコマンドを実行した結果を見ていきましょう。 $
アップルは10月30日、第3世代にあたる新型のワイヤレスイヤフォン「AirPods Pro」を発売しました。筆者は普段、iPhone 11 ProをメインにAirPods第2世代（以下、AirPods 2）とソニーの「WF-1000XM3」の両刀でそれぞれメリット・デメリットを補い合いながら今日まで特に不満なく使ってきましたが、いつかひとつのモデルに絞りたいと考えていました。 そして今回、アップルが発売したカナル型のイヤフォンがどんな性能なのか実際に試してみるべく、早速購入してみることにしました。価格は3万580円。ちなみに、執筆時点でAppleオンラインストアでの予約状況を見ると約3週間待ちの状態です。 AirPods Proへ乗り換えを決めたポイント
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「不快のデザイン展」が盛況 Switchのゲームが“苦い”わけ
色弱とは? 日本人男性の20人に1人いる「色の見え方が少し違う人々」のために | イベント・セミナー
【2024年】ハンバーガーメニューの作り方決定版【コピペ可能】 | techlab / baigie
見かけのユーザビリティの研究について
アコーディオンのアイコン：どのシグニファイアが最適か
ユーザーインタフェースデザインのための10ユーザビリティヒューリスティックス
webアクセシビリティ実装チェックリストを作った - Qiita
デジタル庁ウェブサイトにいただいたフィードバックの反映状況について｜デジタル庁
「このUIエグいて。」リセットボタンの配置が罠すぎる入力フォームに戦慄する人たち
Webアクセシビリティ入門
UIにおける見えるけど利用できない非活性な領域の実装とinert属性について
全盲のエンジニアと働くことで見えてきたサイボウズのアクセシビリティ｜Cocoda
20年の歴史を有するMozilla Firefoxのユーザーインターフェースはどう変遷したのか？
国内2位、躍進するセブン銀行ATM 開発者の意外な「正体」 | 毎日新聞
react-modal のアクセシビリティまわりの実装を読む
「Gmailどこいった」――Googleアプリのアイコン統一から考えるアイコンデザインの過去と未来
<dialog>内でautofocus属性がほぼ必須になる話
Twitter、フォローボタンの色を変更も「見づらい」と不評 白いボタンの意味が真逆に
いますぐできる！Webアクセシビリティ改善3選 - Techtouch Developers Blog
アクセシビリティからデザインを学ぼう
「ビヨンセの公式サイトも訴えられた」企業Webサイトがアクセシビリティに取り組むべき理由とは？ | イベント・セミナー
[スタパ齋藤の「スタパトロニクスMobile」] ミニミニAndroid「Jelly 2」はどうなのか？
![[スタパ齋藤の「スタパトロニクスMobile」] ミニミニAndroid「Jelly 2」はどうなのか？](https://cdn-ak-scissors.b.st-hatena.com/image/square/f91c0a0cd16743496ef6534f3298b565de035e4c/height=288;version=1;width=512/https%3A%2F%2Fk-tai.watch.impress.co.jp%2Fimg%2Fktw%2Flist%2F1311%2F923%2Fstptncs2021-03-15_thumbnail.jpg)
MacBook Air(M3)と「AI PC」の時代【西田宗千佳のイマトミライ】
「Firefox 105」のちょっとした仕様変更が不評、開発チームが撤回／Mozilla、「Firefox 105.0.1」をリリース
ローソンに売られていた『お好み焼き 豚玉』と『豚玉お好み焼き』の違いがわからず混乱するみなさん「どっちも豚玉よね…？」
SPA(Next.js)のスクリーンリーダーによる画面遷移で工夫したこと
駒瑠市〜アクセシビリティ上の問題の体験サイト〜
アップルAirPods Proは「精神と時の部屋」だった！ソニーWF-1000XM3から乗り換えを決めた理由 (1/3)
CAMP
