プレースホルダーのアクセシビリティ上の課題と解決策 - SmartHR Tech Blog

2024/03/12 65 users プレースホルダー ユーザビリティ アクセシビリティ上 課題

こんにちは！SmartHRプロダクトエンジニアのhimiです。 この記事ではプレースホルダーのアクセシビリティとユーザビリティについての課題と、その解決手段についての話を書きます。 プレースホルダーって何？ Webアプリでよく見る、フォームコントロールに値が無いときに表示するテキストのことです。 主な用途としては... 続きを読む

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

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

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

ウェブコンテンツアクセシビリティガイドライン（WCAG）は何が難しいのか、あるいは難しさに立ち向かう方法 - 水底の血

2023/11/12 89 users WCAG 水底 文言 スライド ハードル

LINEヤフーにおけるこれからのアクセシビリティというスライドで「WCAGはハードルが高い」という文言を見かけました。どうしてハードルが高い、言いかえるならば難しいとされるのか、その難しさはどこから来るのかをちょっと深掘りしてみようと思います。 WCAGという言葉について、改めて見ておきましょう。WCAGはもっぱ... 続きを読む

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

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

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

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

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

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

HTMLが強みになる解説書、アクセシビリティやユーザビリティに配慮したコーディングを学べる -武器になるHTML

2022/12/02 62 users ユーザビリティ コーディング CSS 本書 HTML

Webページを実装する際に重要なのは、HTMLです。しっかりと確かなHTMLが書けないと、CSSやJavaScriptにも影響を与えてしまいます。 HTML Living Standardに基づいた知識、アクセシビリティやユーザビリティに配慮したコーディングを学べる、HTMLのみに特化された解説書を紹介します。 本書は仕事としてWeb制作に携わって... 続きを読む

ユーザーのITリテラシーに配慮するのはアクセシビリティなのか - Qiita

2022/07/29 81 users Qiita WCAG Problem ITリテラシー ユーザー

Help us understand the problem. What are the problem? 主に2つの答えがあります。 A. WCAGの考えではユーザーが適切な支援技術を利用することも含めてアクセシビリティであり、支援技術の入手やアクセシビリティ機能の利用に必要なITリテラシーを持たない人はアクセシビリティの対象ではない。（WCAG偏重派） B. うる... 続きを読む

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... 続きを読む

React-axe で React アプリケーションのアクセシビリティを向上させる - Mercari Engineering Blog

2019/06/19 53 users Safari メルカリ 新卒 フロントエンドエンジニア

React-axe で React アプリケーションのアクセシビリティを向上させる こんにちは、この 4 月にメルカリに新卒入社したフロントエンドエンジニアの @karszawa です。 この頃は Google I/O 2019 のキーノートでアクセシビリティが大きく取り上げられたり、Safari に Audit タブが追加されアクセシビリティに関する様々な... 続きを読む

面倒な配色もこれなら簡単に！多くの人に見やすいUI用のカラースケールを生成する無料ツール -Geenes | コリス

2019/06/10 57 users コリス リーダビリティ 配色 カラースケール コントラスト

このツールを使うと、面倒な配色を考える必要はなくなります。WebページやスマホアプリのUIで使用するカラースケールを生成できる無料ツールを紹介します。 最近増えてきた同系色のカラーでホワイトやブラックを加えたり、リーダビリティやコントラストなどのアクセシビリティもチェックすることができます。 類似ツール... 続きを読む

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/04/04 93 users コリス 利点 習得 HTML プログラミング言語

「HTMLは簡単だよ」という声をよく聞きます。 確かに、HTMLは他のプログラミング言語よりも習得が容易であると言うことに同意はしますが、軽く考えるべきではありません。 HTMLは強力なマークアップ言語です。Webアプリケーションに構造を与え、強力なアクセシビリティの利点を提供するために使用できますが、それは適切... 続きを読む

［GDC 2019］ゲームにおける身体的・精神的な障害の表現と，そこに働くバイアス，そして秘められた可能性とは - 4Gamer.net

2019/03/21 60 users バイアス 徳岡正肇 オブジェクト ライター 色覚

［GDC 2019］ゲームにおける身体的・精神的な障害の表現と，そこに働くバイアス，そして秘められた可能性とは ライター：徳岡正肇 ゲームにおいて「アクセシビリティ」が重視されるようになってから，結構な時間が経過した。結果として，例えば「色覚異常を持つ人の場合，特定の色が区別しにくいので，色でオブジェクト... 続きを読む

制作者のためのHTML

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

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

高齢者が使うアプリケーションのアクセシビリティデザイン | Goodpatch Blog

2019/02/26 61 users アクセシビリティデザイン アプリケーションデザイン 高齢者

この記事は、とある高齢者がメインターゲットのアプリケーションを制作するに当たって、私がデザインを行うために留意していたアクセシビリティデザインに関するポイントや得た学びをまとめています。 これからアプリケーションデザインを行う際に、アクセシビリティについて参考にしていただければ嬉しいです。 今回ア... 続きを読む

フロントエンドエンジニアの多様性｜平尾ゆうてん｜note

2018/12/17 64 users 平尾ゆうてん Note フロントエンドエンジニア 多様性 領域

フロントエンドエンジニアの領域が広すぎる。そんな話が先日のアクセシビリティの情報交換会ででてきた。今回はそこをもう少し考えてみた。 フロントエンドの領域いつ頃からだったかフロントエンドエンジニア（以下FEE）という言葉が生まれ、IT/Web界隈でみんなの共通認識ができた。マークアップエンジニアやWebデザイナ... 続きを読む

2018年、freeeのアクセシビリティを振り返る - freee Developers Blog

2018/12/08 52 users freee インフォメーションアーキテクト UXデザイナー

この記事はfreee Developers Advent Calendar 2018、およびWebアクセシビリティ Advent Calendar 2018の8日目です。 こんにちは、freeeの@magi1125こと伊原です。UXデザイナー／インフォメーションアーキテクトを経て、現在は人事労務freeeという素敵なサービスのプロダクトマネジャーを担当しています。 社内ではたまに... 続きを読む