次の実装例のように、テキストを1文字ずつspan要素で区切ってアニメーションする際の注意点と実装例について纏めたメモ書きです。 実装例テキストアニメーションの実装例（英文）
テキストを1文字ずつアニメーションさせる時の注意点と実装例 ｜ TAKLOG
次の実装例のように、テキストを1文字ずつspan要素で区切ってアニメーションする際の注意点と実装例について纏めたメモ書きです。 実装例テキストアニメーションの実装例（英文）
プレースホルダーのアクセシビリティ上の課題と解決策 - SmartHR Tech Blog
こんにちは！SmartHRプロダクトエンジニアのhimiです。 この記事ではプレースホルダーのアクセシビリティとユーザビリティについての課題と、その解決手段についての話を書きます。 プレースホルダーって何？ Webアプリでよく見る、フォームコントロールに値が無いときに表示するテキストのことです。 主な用途としては、フォームの入力例や入力内容の説明テキストが設定されることが多いです。 HTML Standardでは The placeholder attribute represents a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief de
ユーザーのITリテラシーに配慮するのはアクセシビリティなのか - Qiita
主に2つの答えがあります。 A. WCAGの考えではユーザーが適切な支援技術を利用することも含めてアクセシビリティであり、支援技術の入手やアクセシビリティ機能の利用に必要なITリテラシーを持たない人はアクセシビリティの対象ではない。（WCAG偏重派） B. うるせえ！！ なるべく多様な人に情報を届ける、それがおもてなしの心ってヤツだろうが！！（アクセシビリティはみんなの心にあるよ派） 筆者には、Aのようにアクセシビリティの範疇からITリテラシーを外すのはやや極端な考え方であるように思えます。しかし、アクセシビリティに詳しい方でもAのような考え方をしているのを見かけます。 この記事では、WCAGやその関連文書を読みながら、この問いについて考察していきます。 今回WCAGとして参照するのはWeb Content Accessibility Guidelines (WCAG) 2.1です。この記
Webのルビ仕様にはアクセシビリティを阻害している面がある。「日本DAISYコンソーシアム」が改善を求めてブラウザベンダ、WHATWG、W3Cらに公開書簡
Webのルビ仕様にはアクセシビリティを阻害している面がある。「日本DAISYコンソーシアム」が改善を求めてブラウザベンダ、WHATWG、W3Cらに公開書簡 すべての人が等しく情報にアクセスできることを目指し、国際規格であるDAISY（Digital Accessible Information System：アクセシブルな情報システム）規格の開発・維持・普及のために設立された国際団体「DAISYコンソーシアム」の正会員である「日本DAISYコンソーシアム」は、Web上の文書の文字や熟語にルビを振るためのWeb標準仕様が、弱視や失読症などを含むさまざまなハンディキャップを持つ人々にとってのアクセシビリティを阻害している面があるとして、改善を求める公開書簡をWebブラウザベンダ、WHATWG、W3C宛てに送付しました。 その一部を引用します。 The historical purpose of
ゲーム内の色違いアイコンについて
よくあることなんだけど、同じマークなのに効果が違うのなんでだろうって思ってたら、実は色違いでしたってことがよくある。 理由は自分が色弱だからなんだけど、影響が小さいものだとゲームの終盤まで、下手したら終わっても気づいてないものっていうのが多くあるんだろうなって思う。 パズルゲームみたく色の見分けがつかないとそもそも満足にプレイできないゲームとかならさっさと諦めるからいいんだけど、アクションゲームとかRPGとかだとそれに気が付かなくてもなんとかなってしまうことが多くて、勝手に苦労しておいてからあとになってそんな簡単なことだったのか！って気づくことはよくある。 ゲームだからいいけど、世の中でも色に頼ればもっと近道できることがあったんだろうなって思うと、色々と心がざわつく。 デザインコストがかさんでしまうかもしれないけど、やっぱり形状を変えてほしい。 それが無理なら、せめてモノクロに変えたときに
Webアクセシビリティ難しすぎる問題
はじめに 私はデザイナー兼フロントエンドエンジニアというような立ち位置で、勤務するfreee株式会社のアクセシビリティガイドラインの作成に関わったり、アクセシビリティまわりの仕組みの整備や社内エバンジェリストみたいなことをしています。 もともと私はWebアクセシビリティという分野が、重要なものである以上に技術や考え方として面白いと思ってやっているうちに気付いたら仕事で大きなウェイトを占めるようになってしまったタイプの人です。しかし、そうではない人たちにその重要さを説明したり、対応をお願いしたり、そのための資料を作ったりしているうちに、「やっぱWebアクセシビリティって難しいんだなぁ」と思うようになってきたので、それについて書いてみようと思います。 なお、背景を説明するうえで必要なので社名を出しましたが、あくまでこの文章は個人の見解であり、所属組織とは関係がありません。 誰のためにやるのかが
僕は文字だけ拡大したい - dskd
公開日2020-02-02タグaccessibility文字だけ拡大できる機能とページ全体を拡大できる機能を持ったブラウザ（例えば Google Chrome）を使っていて、僕はその機能の違いを認識している。 しかし、文字だけ拡大するとページ全体を拡大したのと同じ挙動になるように作られているウェブサイトがたまにあり、そういうサイトに限って文字だけ大きくしたいので、つらい。 なんというか、手段が奪われたと感じてしまう。こちらの操作を阻害された感。 CSS でサイズ指定が全部 rem 単位だとそういうことが起きるんだけど、せっかく文字だけ拡大する方法があってそれを使いたいのにページ全体を拡大したのと同じになっちゃうというのは、エクスクルーシブではないだろうか。 大きいディスプレイ使ってると、その広さに見合った情報量、たとえば図と文字をある程度俯瞰できる割合を保ったまま文字を大きくしたいって思う
noteの新機能「ファイル名がalt属性に挿入」はどのように読み上げられるか｜Hiroki Tani
ということなので、新規投稿で画像を入れて検証。 なお検証はVoiceOverです。 「プールで遊ぶマメヒコ」を入れてみよう 「プールで遊ぶマメヒコ.jpg」とリネームしたところ、alt属性に「プールで遊ぶマメヒコ」が入った。 ファイル名をリネームしない次はモバイルで撮影した写真。リネームせずに「59905707_2369286120013939_4824854642716311552_n.jpg」という名前でアップロード。 するとalt属性には「画像2」と入った。ここではなぜファイル名の英数字の羅列ではないのだろう。そういうメタ情報を判別しているのか？あるいはファイル名の内容で判別している？ 半角英数字なファイル名でリネーム試しに半角英数字なファイル名にリネーム。「181003mamehiko_in_the_pool.jpg」とする。 すると「画像3」とalt属性に入り、
:hoverの誤用について - yuhei blog
ある要素がマウスオーバーされたことを伝える。それ以上の役割を:hoverに紐付くスタイルに持たせるべきではない。マウスオーバーするまでその要素のインタラクションがわからないデザインにしてはいけないのだ。 マウスオーバーするまでその要素がリンクであるという確信が持てないデザインによく遭遇する。それが本当にリンクであるか確かめるためには、わざわざマウスカーソルを移動させて試してみるしかない。スマホではタップだ。もし、ただのテキストだと期待して誤操作すれば、ページを戻る操作も必要になるかもしれない。 :hoverのスタイルを指定できることを拠り所にしてしまい、通常状態ではその振る舞いを期待させられる見た目になっていないことがよくある。しかし、マウスオーバーするということはインタラクションコストが掛かるということだ。また、:hoverによって何かしらの手掛かりが得られるかもしれないということにすら
アクセシビリティを確保するなら、ファインダビリティも大事。国税庁Webサイトリニューアルでリダイレクトなし | Web担当者Forum
3月31日に国税庁のサイトがリニューアルされ、トップページを除いたほとんどのページのURLが変更になりました。これにより、国税庁のコンテンツにアクセスできなくなり、困っているという声があちこちで聞かれるようになりました。この問題はニュースメディアでも取り上げられています。 国税庁サイト、リニューアルでほぼすべてのURLが変更。リダイレクトもなくユーザー阿鼻叫喚 https://internet.watch.impress.co.jp/docs/yajiuma/1114712.html 国税庁Webサイト、全URL変更で混乱 サイト内検索も役立たず、「無限ループ」状態に http://www.itmedia.co.jp/news/articles/1804/02/news108.html 国税庁HPリニューアルでページにたどり着けず…「決算期なのに」嘆きの声 https://www.beng
table要素をスクリーンリーダーが表として扱うかはCSS次第だったりする件
2017年12月4日 著 みるく姐さん@milk54さんが、Web Accessibility Advent Calendar 2017の2日目のために、Re: A Responsive Accessible Tableという記事を書いてくださいました。その中で、A11YJ Slackの#q_and_aチャンネルにおける自分の発言を引用してくださったのですけど、それでふと思ったのがアクセシビリティオブジェクトの存在って実はあまり認知されていないかもしれない、ということです。別の表現をするなら、CSSをどう書こうともマークアップで意図したセマンティクスが変わることは無いと信じて疑わない人が少なく無いかもしれない、ということ（自分もかつてはその一人でした）。 @milk54さんの立てた「NVDAがなぜCSSでdisplay: blockにすると「テーブル」と読み上げないか？」という問いの裏には
Fw: 職員のまじめさが役に立たない自治体サイトをつくる
2017年7月15日 著 東洋大学の山田先生がアゴラに寄稿された、職員のまじめさが役に立たない自治体サイトをつくるという記事を読みました。文字サイズの変更や音声読み上げといった、一見するとWebサイトのアクセシビリティに真摯に取り組んでいるように映るものの、実際のところそれが必須というわけでもなければ必ずしも障害当事者にとって役に立つものでもない......というのは、この覚え書きでも過去に何度か書いてきたつもりだけれど（例：文字サイズ変更ウィジェット、晴眼者がよかれと思って作ったUI？）、山田先生のようなお立場の方が真正面からそれらをバッサリ斬り捨てている様は、素晴らしいの一言： しかし「文字サイズの変更」ボタンは無用の長物である。障害を持つ利用者はブラウザでテキストサイズを変更し、検索ウィンドウに大きな文字で自治体名を入力して、自治体サイトにたどり着くからだ。自治体のサーバーで動く自動
JIS X 8341-3:2016 AA 検証支援ツール 「PowerCMS 8341」を発表〜Movable Type / PowerCMS 上で動作するウェブアクセシビリティ評価プラグイン〜 | 新着情報 | PowerCMS - カスタマイズする CMS
アルファサード株式会社(代表取締役社長：野田純生/本社大阪市、以下、「アルファサード」)は、CMSで管理するウェブページがアクセシビリティ「JIS X 8341-3:2016 高齢者・障害者等配慮設計指針－情報通信における機器，ソフトウェアおよびサービス－第3部：ウェブコンテンツ」(以下、「JIS X 8341-3」)達成基準に適合しているかどうかをチェックし、ウェブサイトの JIS X 8341-3 適合を支援する 「PowerCMS 8341※」の提供を12月1日(月)より開始します。 ※ PowerCMS または Movable Type(ver.6) が別途必要です。 リリースの背景 JIS X 8341-3:2010が公示されてから4年以上が経過しました。総務省のウェブサイトで公開されている「みんなの公共サイト運用モデル」でも、国及び地方公共団体等の公的機関においては2014年度
なぜ、富士通は「色覚障がい者のための診断ソフトウェア無償提供」を終了したのか
富士通は2013年8月20日、視覚障がい者や色覚障がい者のアクセシビリティを高めるための診断ソフトウェアツール群「富士通アクセシビリティ・アシスタンス」の無償提供を終了した（参照記事）。このニュースはSNSでの反響も大きく、ユーザーから「なぜこのような素晴らしいサービスが終了してしまうのか」との声が多く聞かれた。 同様のツールは他にもあったが、富士通アクセシビリティ・アシスタンスが愛用されるのにはわけがあった。富士通アクセシビリティ・アシスタンスは、3つのツール群「WebInspector（ウェブインスペクター）」「ColorSelector（カラーセレクター）」「ColorDoctor（カラードクター）」から構成されており、それぞれ以下の特徴が挙げられる。 WebInspector ローカルフォルダを指定した場合、サブフォルダのHTMLまで一括でチェックでき、結果をCSVで保存できる C
スキップリンクにまつわる議論まとめ | 水無月ばけらのえび日記
公開: 2012年3月22日22時0分頃 「スキップリンクの議論: 前提まとめ」の続きです。 まず、前提をおさらいしておきます。 WCAG2.0 2.4.1には"Bypass Blocks"という等級Aの基準があるその実装方法の一つがスキップリンクビジュアルブラウザの利用者もスキップリンクを利用できるように、見えるようになっている必要があるスキップリンク以外の実装方法もあるが、ビジュアルブラウザで利用できるものはほとんどないこの前提をふまえた上で、スキップリンクにまつわるいくつかの議論をまとめていきたいと思います。 スキップリンク実装の現状2.4.1は達成等級Aです。これは最低限の等級で、すなわちあらゆるサイトに求められる必須の要件ということになります。 また前提で述べたように、スキップリンクは見えている、もしくはフォーカス移動すると見えるようになる必要があります。ほとんどのサイトが、その
Re: 首相官邸ホームページのリニューアル構築費用に対して製作者側からの考察
2012年4月5日 著 4,500万円が妥当だの妥当でないだの盛り上がっているようですね。どうしても金額「だけ」を取り出して云々したくなるのが世の常・人の常だと思っていますから、その点については意見も感想ももっていません。いやもてない、と言ったほうが正確かな。あきみちさんがGeekなぺーじ:金額の報道は効果的に怒りを煽るで書かれているように、どこまでが4500万円の範囲内なのかを自分も知らないし。それはそれとして、首相官邸ホームページのリニューアル構築費用に対して製作者側からの考察という記事のアクセシビリティに関する考察は、多くの人にあらぬ誤解を招く可能性が高いように感じたので、反論させていただきます。 公共系の案件で用いられるアクセシビリティの基準の一つとして『Webアクセシビリティの新規格「JIS X 8341-3:2010」』というものがあります。 正確な標題は「高齢者・障害者等配慮
flash.accessibility.Accessibility (ActionScript 3.0)
Accessibility クラスは、スクリーンリーダーとの通信を管理します。スクリーンリーダーは、視覚障害のあるユーザー向けに、画面の内容を音声で出力する補助技術です。Accessibility クラスのメソッドは静的です。つまり、クラスのインスタンスを作成しなくても、このクラスのメソッドを使うことができます。 ボタンやムービークリップ、テキストフィールドなど、特定のオブジェクトのアクセシビリティプロパティを取得または設定するには、DisplayObject.accessibilityProperties プロパティを使用します。Player がアクセシビリティ補助をサポートする環境で実行されているかどうかを確認するには、Capabilities.hasAccessibility プロパティを使用します。 例を表示 関連項目
Accessible Rich Internet Applications (WAI-ARIA) 1.0 (W3C Recommendation 20 March 2014)
Accessible Rich Internet Applications (WAI-ARIA) 1.2 W3C Recommendation 06 June 2023 More details about this document This version: https://www.w3.org/TR/2023/REC-wai-aria-1.2-20230606/ Latest published version: https://www.w3.org/TR/wai-aria-1.2/ Latest editor's draft:https://w3c.github.io/aria/ History: https://www.w3.org/standards/history/wai-aria-1.2 Commit history Implementation report: https
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.mozilla-japan.org/access/windows/msaa-server.html
「Webユーザビリティランキング2011＜自治体サイト編＞」～ 使い勝手の良さ1位は「千葉県」 ～ ｜プレスリリース｜トライベック・ストラテジー株式会社
