UI 開発における ヘッドレス UI ライブラリの重要性とデザインシステムへの取り入れ方

2024/11/23 118 users ライブラリ 取り入れ方 ヘッドレス 開発 デザインシステム

昨今の Web 開発における UI はますます複雑化し、アクセシビリティの重要性が高まっています。ブラウザの標準機能だけでは実現できない複雑な UI を実装する際、アクセシビリティに関する誤った実装が原因で、ユーザー体験を損なう可能性があります。ヘッドレス UI ライブラリは、あらかじめアクセシビリティ… 続きを読む

任天堂とアクセシビリティ

2024/07/10 621 users N-Styles 任天堂 質疑応答 株主総会 最初

先日、任天堂の株主総会が行われた。例によって詳細をまとめているので前回の記事をご覧いただきたい。 任天堂株主総会レポート2024 | N-Styles 株主総会レポートでも記載したが、質疑応答で最初に指名された質問者が「任天堂は視覚障害者対応が遅れているのではないか」と指摘し、私はこの質問に非常に驚いた。 なぜな... 続きを読む

デジタル庁デザインシステムβ版

2024/05/30 660 users インタラクション ユーザビリティ UIコンポーネント 実装

デジタル庁デザインシステムは、スタイリングの考え方を提供するデザイン言語、情報の視覚表現とインタラクションを具現化するUIコンポーネント、ユーザビリティとアクセシビリティを踏まえた設計や実装のためのガイドラインから構成されるデザインアセットです。 デジタル庁のミッションである「誰一人取り残されない、... 続きを読む

少しの記述でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニック集 – TAKLOG

2024/05/18 102 users 独断 TAKLOG 登壇 偏見 CSSテクニック

少しの記述・工夫でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニックを独断と偏見で集めてみました。最近クローズドな場所で登壇を行ったのですが、そちらで話した内容を纏めたものにいくつか内容を追加したものとなります。 原則的にこのブログで取り入れられている手法だったり過去の記事で触れた手法... 続きを読む

freee、デザインシステム「vibes」を公開　アクセシビリティをはじめとするフロントエンド開発のノウハウが満載 | プレスリリース | freee株式会社

2023/12/19 119 users freee プレスリリース freee株式会社 ノウハウ 組織

freee、デザインシステム「vibes」を公開　アクセシビリティをはじめとするフロントエンド開発のノウハウが満載 ■マジ価値サマリー（このお知らせでお伝えしたいこと） ・freeeのアクセシビリティをはじめとするフロントエンド開発のノウハウが詰まったデザインシステム「vibes」を公開します ・あらゆる組織でシステム... 続きを読む

アクセシビリティ | SmartHR Design System

2023/07/03 174 users アクセシビリティ向上 さまざ 障害当事者 ユーザー 多く

アクセシビリティとはアクセシビリティは、サービスや情報をどんな利用者も円滑に利用できるかの度合いです。 アクセシビリティが高いほど、より多くのユーザーが円滑に利用でき、アクセシビリティが低いほど、より多くのユーザーが利用できないということです。 アクセシビリティ向上は、障害当事者だけでなく、さまざ... 続きを読む

サイト上のさまざまなページのパフォーマンスをまとめて測定できるツール「Unlighthouse」

2023/05/20 135 users Lighthouse スコア 速度 パフォーマンス ツール

「Lighthouse」はGoogleが作成したページの読み込み速度やアクセシビリティなどをまとめてチェック・採点してくれるツールですが、そのLighthouseをサイト上のさまざまなページで動作させることでサイト全体のスコアを一発で算出してくれるツールが「Unlighthouse」です。 Unlighthouse - Site-wide Google Lighthouse ·... 続きを読む

CSSの単位px、em、remはどれをどこで使用するのがよいか、ピクセルとアクセシビリティにおける意外な真相

2022/06/07 387 users rem height font-size width マージン

CSSの単位px、em、remは、どれをどこで使用するのがよいか。 font-sizeの値にはどの単位を使用していますか？ ほかにもメディアクエリを定義する時、マージンを定義する時、widthやheightを定義する時、使用する単位はアクセシビリティに配慮する必要があります。 The Surprising Truth About Pixels and Accessibility ... 続きを読む

Meta、JavaScript Webテキストエディターフレームワーク「Lexical」をOSS

2022/04/14 109 users テキストエディター Meta lexical OSS web

Metaは現在、JavaScript Webテキストエディターフレームワークの「Lexical」をリリースしている。軽快さや拡張性、アクセシビリティを重視し、開発者は必要に応じた機能を持つテキストエディターが利用可能。基本的な雰囲気はWebで確認できるが、ローカル環境に導入する場合は、「npm install --save lexical @lexical/r... 続きを読む

サブミット (送信) ボタンをデフォルトで無効化しない | Accessible & Usable

2021/10/14 125 users ユーザーインターフェース インタラクション ユーザビリティ

公開日 : 2021年10月14日 カテゴリー : ユーザビリティ / アクセシビリティ / ユーザーインターフェース (UI) / ユーザーエクスペリエンス (UX) ウェブのフォームにおいて、サブミットボタンをデフォルトで無効化しておいて、ユーザーの入力不備がなくなったときにボタンを有効化するインタラクションがあります。たとえ... 続きを読む

デジタル庁が大切にしたい、アクセシビリティとアカウンタビリティ｜デジタル庁（準備中）

2021/06/22 293 users アカウ 正司 HCD 内閣官房 Note

こんにちは、内閣官房ＩＴ総合戦略室の大橋 正司と申します。 4月12日から内閣官房に非常勤で採用された民間人材のひとりです。普段は人間中心設計（HCD）や情報設計（IA）の仕事をしています。 最初のnoteへの皆様のご意見をひとつひとつ拝見しながら、何を書こうか迷っていたのですが、今日はアクセシビリティとアカウ... 続きを読む

「iPhoneの画面をグレースケールにするとスマホに全然触らなくなる」というスマホ中毒の解消技を試したら本当に魅力が激減して全然触らなくなった - Togetter

2021/05/27 497 users Togetter iPhone カラーフィルタ 吉永龍樹 僕秩

吉永龍樹（ヨシナガタツキ@僕秩） @dfnt 昨日の放送で一番反応があった「iPhoneの画面をグレースケールにするとスマホに全然触らなくなる」というスマホ中毒の解消技、 設定→アクセシビリティ→画面表示とテキストサイズ→カラーフィルタ→オン から設定できます。本当にスマホが色を失うだけで魅力が激減して全然触らなく... 続きを読む

Web制作者は要チェック！現在のWeb制作に合わせて制作された新しいCSSリセット -Reseter.css | コリス

2021/04/12 179 users reset.css コリス Normalize.css 既存

現在のWeb制作だと、既存のReset.cssやNormalize.cssには不足を感じると思います。それらの代替手段として制作された新しいCSSリセットを紹介します。 Reseter.cssは各ブラウザの最後から5つ前までのバージョンをサポートし、アクセシビリティにも配慮されており、CSSのテクニックや学びも満載です。 Reseter.css Resete... 続きを読む

【iOS14】ドアベルなどの音をiPhoneが聞き取って通知する「サウンド認識」 - iPhone Mania

2021/03/27 229 users iPhone チャイム iPhone Mania ヘッドホン

イヤホン・ヘッドホンで音楽を聴いていたら、家のチャイムが鳴っているのに気づかなかった。何かいい解決策はないの？ iOS14 / iPadOS14から「サウンド認識」機能が追加されました。元々は「アクセシビリティ」に分類されている、聴覚サポート機能の一つです。しかし、iPhoneが聞き取った音を通知してくれる機能は、日常... 続きを読む

『投稿サイトに載せてる自作小説のタイトルを試しに短くしたらクリックの当たり判定がめちゃくちゃ狭くなってしまったんだが』～アクセシビリティの観点から見るWEB小説の長文タイトル

2020/10/24 267 users 観点 当たり判定 長文タイトル 自作小説 WEB小説

すかい@3冊予約受付中 @skynovel7 アイコンは妻(@nira_zui)から。なろうメイン 書籍化コミカライズ複数進行中 noteとFANBOXにて創作について記事を出したりサポートしています お仕事の依頼はDMまでお気軽に 欲しい物 amazon.jp/hz/wishlist/ls… skyfarm.fanbox.cc すかい@3冊予約受付中 @skynovel7 ncode.syosetu.com/n... 続きを読む

GoogleによるWebサイトパフォーマンス測定ツール「Lighthouse」入門 | さくらのナレッジ

2019/05/08 119 users Lighthouse 昨今 ナレッジ Webアプリケーション

昨今ではWebサイトやWebアプリケーションに対し「適切にページが表示されるか」だけでなく、ロード時間の早さやアクセシビリティといった使い勝手の良さも求められるようになっている。これらは利用者の満足度向上だけでなくGoogle検索の表示結果にも影響するため、できる限り対応しておきたい。そこで今回は、Googleが... 続きを読む

もしも『SEKIRO』にアシストモードがあったら。難易度に関する議論が再熱する中、高難度アクションゲームの開発者が提案 | AUTOMATON

2019/04/08 101 users イージーモード AUTOMATON SEKIRO 高難度 議論

高難度のアクションゲームが発売されるたびに、イージーモードの必要性を説いたり、アクセシビリティの向上を求める議論が過熱する傾向がある。以前には2017年に発売された『Cuphead』について、同作の高難度なゲームデザインは排他的ではないかとの議論が海外メディアやコミュニティ内で交わされた（関連記事）。そして... 続きを読む

制作者のためのHTML

2019/03/10 430 users HTML 文脈 切り口 制作者 スクリーンリーダー

主にユーザー側の視点から語られることが多いアクセシビリティですが、制作という側からはどのように捉えることができるのでしょうか。2つの切り口から考えてみます。 # アクセシビリティという文脈において、何のためにHTMLを書くかという話になると マシンリーダビリティのため スクリーンリーダーのアクセシビリティ... 続きを読む

東京五輪ボランティア応募サイトのコードがいかに酷いか - Togetter

2018/09/28 289 users コード 支障 HTML 音声 ソースコード

ボランティア応募サイトの使い勝手が悪いと話題になってますが、ソースコードもなかなかの品質でした。 HTMLのコードが悪いと、アクセシビリティ（音声読み上げやキーボード操作）にも支障があるので、開発者だけでなく利用者にも不便を強いることになります。 続きを読む

Webアクセシビリティ対応で「音声読み上げ・文字拡大・色変更」は的外れ。本当に必要なのはSEO？ | 弁護士ドットコムがアクセシビリティに本気で取り組む狙い | Web担当者Forum

2018/04/23 131 users SEO アクセシビリティ向上 音声 弁護士ドットコム 色変更

Web担トップ » 弁護士ドットコムがアクセシビリティに本気で取り組む狙い » Webアクセシビリティ対応で「音声読み上げ・文字拡大・色変更」は的外れ。本当に必要なのはSEO？ 弁護士ドットコムがアクセシビリティに本気で取り組む狙い Webアクセシビリティ対応で「音声読み上げ・文字拡大・色変更」は的外れ。本当に必要なのはSEO？ SEOを意識してWebサイトをきちんと作ると、アクセシビリティ向上に... 続きを読む

Webのアクセシビリティを向上させる、始めに取り組んでおきたいガイドラインの10項目のまとめ | コリス

2018/01/12 144 users コリス ガイドライン web Tim Berners-Lee

Webの創始者であり、W3Cのディレクターを勤める Tim Berners-Lee 氏の言葉に、「Webが持つ力とは、その普遍性にあります」というのがあります。Webサイトに誰もがアクセスできるようにするのは、わたし達の責任です。 Webのアクセシビリティは机上では難しいと思われがちですが、実際に取り組んでみるとそんなに難しいものではありません。障害者、スクリーンリーダのユーザー、低速接続のユーザ... 続きを読む

アクセシビリティを意識した CSS の書き方 - Frasco

2017/10/27 143 users medium Frasco カンファレンス トピック CSS

私は約一年前から Web アクセシビリティについて注目し始めました。私にとって何かを学ぶこと最も効率的な方法は他人に教えることなので、 ミートアップやカンファレンス などで発言したり、このトピックに関する記事を書いているわけです。 Progressive Enhancement については Smashing Magazine で、Web アクセシビリティに関しては Medium で書いています。こ... 続きを読む

ひと昔前といろいろ違う、Webサイトを公開した時に確認しておきたい項目のまとめ -Web Launch Checklist | コリス

2017/07/24 712 users コリス SEO テクノロジー セキュリティ パフォーマンス

Webサイトを公開した時に、サイトのパフォーマンス、SEO、セキュリティ、アクセシビリティ、コンテンツ、機能性の面から確認しておきたい項目がまとめられたチェックリストを紹介します。 2017年、最近のWebのテクノロジーや制作事情をふまえたものとなっており、ひと昔前とはいろいろ変化しています。 イラスト: Girls Design Materials 「Web Launch Checklist」は... 続きを読む

目が見えない・見えづらい世界の「ビデオゲーム」 | AUTOMATON

2017/04/16 155 users AUTOMATON 対戦 アクセシビリティキャンプ東京 スト

全記事 Gamer Pick 目が見えない・見えづらい世界の 「ビデオゲーム」 視覚障害者たちに訊く、アクセシビリティの意味とゲームの力 参加者が主催側とともに「アクセシビリティ」について考える「アクセシビリティキャンプ」。「 第10回 アクセシビリティキャンプ東京 」は、「目が見えなくともスト2はできる。全盲ゲーマーと対戦！」 と銘打ち、「ビデオゲームとアクセシビリティ」がテーマに据えられた。今... 続きを読む

改めてWebサイトの品質について考える : could

2016/12/21 137 users could 地固め 品質 クオリティ 評価指標

アクセシビリティ デザイン 改めてWebサイトの品質について考える 独自の評価指標もないまま Web アクセシビリティを実践しようとすると、頑張れる人がやれる限り頑張るということになります。品質への捉え方を合わせなければ、「地固めという見え難いものに時間を費やす」ことが理解できません。 制作における品質とは？ Webサイトにおける品質（クオリティ）とはどういう意味でしょうか。 制作者であれば同じよ... 続きを読む