[B! web][UI] AmaiSaetaのブックマーク

AmaiSaeta id:AmaiSaeta

webとUIに関するAmaiSaetaのブックマーク (33)

一貫性のあるフォーカスインジケーター | Accessible & Usable
公開日 : 2022年2月17日カテゴリー : アクセシビリティマウスなどのポインティングデバイスの代わりにキーボードを用いてウェブを利用する人や、ロービジョンのユーザーにとって、ウェブコンテンツ上で (キーボード操作による) フォーカス位置が視覚的に明示されることは、とても重要であり、大きな助けになります。 W3C が勧告している WCAG (Web Content Accessibility Guidelines) には「Focus Visible (フォーカスの可視化)」という達成基準があります (参考 : WCAG 2.1 解説書達成基準 2.4.7 Focus Visible / 日本語訳)。また、WCAG の次期バージョン (2.2) では「Focus Appearance (フォーカスの外観)」という達成基準が新たに追加される見込みです (参考 : WCAG 2.2 解
AmaiSaeta 2022/02/27
web

accessibility

UI

design
リンク
Web Share APIを試してみた - アクトインディ開発者ブログ
morishitaです。いこーよやいこレポでは、情報を共有してもらいやすいようにシェアボタンをページに置いています。シェアボタン現状はTwitterやFacebookなど各サービスごとにシェアボタンを用意していますが、モバイルに於いてはWeb Share APIを使っても良い状況ではないか？　と思って調べてみました。ちなみにCan I use... ではこんな感じです。 Can I use ... Web Share API スマホに限るとiOS SafariもAndroid Chromeもサポートしているようです。モバイルでは使えそう?!コードとりあえず、試すためのページを用意をしないと、ということで Web Share APIを使ったシェアボタンだけのページを作りました。コードは次の通りです。 <html lang="ja"> <head> <meta charset
AmaiSaeta 2019/06/14
今んとこ渡せるのはタイトル、テキスト、URLだけ? 見出し画像を渡したいとか拡張の要望が出そう。

web

development

programming

UI

standard

API

JavaScript
リンク
ショートカットキーの抑止について | Microsoft Docs
ショートカットキーの抑止について 02/09/2018 2 minutes to read こんにちは。今回は、お問い合わせとしてよくいただく「Internet Explorer 11 でショートカットキーを抑止したい」について記載します。本記事に記載の内容が、今後の Web 開発における仕様検討にお役に立てますと幸いです。これまでどうしていたか？ショートカットキーの抑止に関して、実は Web 標準として定められたものはありません。ショートカットキーは、各ベンダーが開発しているブラウザーごとにそれぞれ任意に用意されていることが一般的です。 Internet Explorer では、例えば、Alt + Home キーでホームページへ戻る動作となります。 Internet Explorer 11 のキーボードショートカット https://support.microsoft
AmaiSaeta 2018/03/10
web

development

programming

UI

Internet_Explorer

Internet_Explorer_11
リンク
遅延読み込み用のぼやけた画像
Mediumでとある記事を高速にスクロールして読んでいたら、さりげなく画像を遅延読み込みしていることを知った。読み込み発火のタイミングがうまいのかあまり遅延読み込みの存在を感じさせないのもすごいと思ったが、プレースホルダー画像の実装方法が良さそうだった。単純に元の画像を幅30px程度まで小さくしてそれをブラウザーにリサイズさせることでぼやけた画像をプレースホルダーとして表示しているだけだが、十分に機能していそうで目から鱗だった。画像の遅延読み込みはなかなか曲者で、読み込むタイミングやプレースホルダーとしている画像が悪いと大きくユーザーにストレスを与える。プレースホルダーでよく使われるローディング画像は読み込み中のインジケーターではあるが、同時に何か遅いことをやっていますというネガティブな印象も与えてしまう。ユーザーはローディング画像を見るとスクロールを止めなくてはならないのかと感じること
AmaiSaeta 2015/10/24
"単純に元の画像を幅30px程度まで小さくしてそれをブラウザーにリサイズさせることでぼやけた画像をプレースホルダ―として表示しているだけ" ！！！！

web

development

image

programming

UI
リンク
展開ボタンやタブに隠れたコンテンツは無視され検索結果の対象にならないかもしれない
[対象: 中〜上級] 展開ボタンマークや切替型のタブやによって既定の状態では隠れているコンテンツを、検索結果の対象に含めないようにGoogleが扱いを変更した可能性があります。展開することを示すプラスマークや﹁詳細﹂といったテキスト、またはタブの切替などで、初期状態で隠れているコンテンツをURLを変えずに表示するデザインがあります。たいていは、JavaScriptやCSSで実装されます。隠れたコンテンツが展開することを示すプラスボタンプラスボタンをクリックすると残りのコンテンツが出現する完全ではないにしても部分的に、このなかに隠れているコンテンツをGoogleは無視するようになったようです。隠れているコンテンツをGoogleがインデックスしなくなった？事の発端の1つは、WebmasterWorldでのスレッドです。 “read more”︵続きを読む︶のなかにあるコンテンツを
AmaiSaeta 2014/11/25
分からんでは無い。 | 固有のURLが割り振られる場合はインデックスされるのかな?

Google

web

search

UI
リンク
【Photoshop入門】Webデザインをはじめよう！第1回デザイン前に覚えておきたい環境設定とレイヤー機能 - Adobe Blog
The Blog | Welcome to Adobe Blog アドビのブログでは、Creative Cloud、Document Cloud、Experience Cloudの最新情報や役に立つ情報を紹介しています。
AmaiSaeta 2014/10/24
web

UI

communication
リンク
メガメニュー | Accessible & Usable
公開日 : 2014年5月12日カテゴリー : アクセシビリティ / ユーザビリティ「メガメニュー (Mega Menu または Mega Dropdown Menu)」と呼ばれる、面積の広いドロップダウンメニューがあります。情報量の多い大規模サイトを中心に、時折見ることができます。メガメニューの例 : スターバックス (starbucks.com) メガメニューの例 : MoMA (www.moma.org) メガメニューの例 : LG (lg.com) JavaScript によるドロップダウンメニュー自体は昔からありましたが、それに比べると、メガメニューは以下のような特長があり、ファインダビリティの面で優れていると言えます。サブメニューを二次元的に (縦だけでなく横にも) 展開できるので、たくさんのメニュー項目を、一度ですべて見渡せるように表示できる。広い面積を活かして、情
AmaiSaeta 2014/05/13
あれ「メガメニュー」っていうのか。確かにアクセシビリティに対する配慮がダメダメなの多い。

UI

accessibility

web

development
リンク
モーダルダイアログを視覚表現だけで終わらせない - Web Accessibility Advent Calendar 2013 - neotagの雑文
Web Accessibility Advent Calendar 2013 初日です。 http://www.adventar.org/calendars/64 neotagです。初日なのに記事公開が遅れてしまいました。しょっぱなから出鼻をくじいてしまい大変申し訳ありません。︵土下座︶追記 2013/12/06 この記事の補足になる記事を @milk54 さんが書いてくださいました。リニューアルして情報が得られなくなったというサイトを調べてみた追記ここまで JavaScript による視覚表現が盛んになってから当たり前に使われるようになったモーダルダイアログについてです。このモーダルダイアログ、ちょっとした情報を追加で表示する際に大変便利なのですが、見た目だけ実装すると思わぬ罠があります。普通に組んだ場合 Library など使わずに普通に JavaScript を書いた場合
AmaiSaeta 2013/12/09
"今回は手軽な解決方法の紹介でしたが、関連技術として WAI-ARIA などのしっかりした仕様もあります。"

web

UI

accessibility

HTML

JavaScript

development

programming
リンク
次はこれ読んで
MovableTypeにあったからか前や次のエントリー(とそれに加えてウェブログのトップ)に移動するリンクをpermalinkに設置するウェブログは多い。こと日本に限ると90%以上のウェブログにあるように感じる。このクラシカルなパターンに対して、最近はRead This Nextなどとして最も関連性が高いエントリーをひとつだけ推薦したり(Dustin CurtisとかSvbtleネットワークのウェブサイトはそう)、単に時系列的に1つ古いエントリーへのリンクのみというパターンが増えている。次にこれを読むと良いんじゃないかなー特にSvbtleで採用されている最も関連性の高いエントリーをRead This Nextとして推薦するというのは、トピックがバラエティに富んでいて時系列における前後にあたるエントリーと関連性が薄いことが多いウェブログには向いていそう。つまり企業やプロダクトではなく個人
AmaiSaeta 2013/06/13
確かに、明確な流れが存在している場合(中国嫁日記とか)以外は、「一つ古い/新しい記事」へのリンクって使わない。同サイト内移動は、サイドメニューの「最新記事一覧」とかが主。

web

UI

design
リンク
レトロゲームでの主人公の死に方考察と、UIのわかりやすさ～ゲームセンターCX万歳～
ゲームセンターCXが好きである。最新DVDはすべて借りたし、家で暇なときはたいていゲームセンターCX録画版を見ている。2010年12月31日～2011年1月1日には年末年始の番組は紅白・ガキ使を見ず﹁大晦日12時間ぶち抜き!!ゲームセンターCX×よゐこの企画案年越し生放送よゐこ祭り﹂を見ていた。夫はあきれていた。私はこれを見るためにスカパー契約をしているといっても過言ではない。何がおもしろいか。有野課長のゲームの下手さ、周囲のADさんやカメラマンさんの存在はもちろんのこと。いろんなゲームのUIが見れる、という点がとてもおもしろくて好きなのだ。たとえば、主人公の死に際︵1機消滅︶ひとつとっても、おもしろいものがたくさんある。 ※ゲームセンターCXとは昔懐かしいコンピュータゲーム︵レトロゲーム︶に焦点を当て、毎回異なるテレビゲームにお笑い芸人の有野晋哉︵よゐこ︶が挑戦し、12
AmaiSaeta 2013/05/25
ああなるほど、ゲーム見てUIの研究というのは良いね。 | (フジにはゲーム画面の著作権はないでしょ)

game

web

design

UI
リンク
http://blog.e-riverstyle.com/2012/12/roleariawaiariahtml5-advent-ca.html
AmaiSaeta 2012/12/29
web

standard

WAI-ARIA

HTML

HTML_5

UI
リンク
ニコニコ超会議2012『超エンジニアミーティング』で喋った時のスライドを公開します - ぼくはまちちゃん！
こんにちはこんにちは！！ニコニコ超会議2012 ﹃超エンジニアミーティング﹄で喋った時のスライドを公開します！﹃ふつうのformをつかいたい﹄ - はまちや２ - ニコニコ超会議2012 難しい話は苦手なので、普通のお話です。あとこのスライドはIEでは動きません。他のブラウザで見てね。 (追記) IEでも見られるようになりました。たぶん。超エンジニアミーティング全体の内容については、﹃ニコニコ超会議の﹁超エンジニアミーティング﹂を全部取材してみた﹄でまとめてくれています。ちなみにぼくは自分が喋ったあとは、ずーっと隣の﹃ニコニコ学会β﹄の発表を見てました。ロボット作ったりとかすごいかっこいい。 (関連記事) その言葉は誰のためのもの？ [この日記のブックマークコメントを見る/書く ]
AmaiSaeta 2012/05/01
あるある

web

UI

design
リンク
Windows Azure : Windows Azure Joins Windows Server in a New Organization: Server & Cloud Division
In Visual Studio 2022 17.10 Preview 2, we’ve introduced some UX updates and usability improvements to the Connection Manager. With these updates we provide a more seamless experience when connecting to remote systems and/or debugging failed connections. Please install the latest Preview to try it out. Read on to learn what the Connection ...
AmaiSaeta 2012/04/13
Windows

Windows_8

Internet_Explorer

Internet_Explorer_10

UI

API

web

development
リンク
Identifying Application State
TAG Finding 01 December 2011This version: http://www.w3.org/2001/tag/doc/IdentifyingApplicationState-20111201 Latest version: http://www.w3.org/2001/tag/doc/IdentifyingApplicationState Previous versions: http://www.w3.org/2001/tag/doc/IdentifyingApplicationState-20111130 http://www.w3.org/2001/tag/doc/IdentifyingApplicationState-20110930 http://www.w3.org/2001/tag/doc/IdentifyingApplicationState-2
AmaiSaeta 2012/01/17
web

UI

standard

気になる
リンク
WAI-ARIA導入（日本語訳） - Trans
著者: Gez Lemon件名: Introduction to WAI ARIA日付: 2008年8月1日URL: http://dev.opera.com/articles/view/introduction-to-wai-aria/訳者: Arata Kojima著作: This article is licensed under a Creative Commons Attribution, Non Commercial - Share Alike 2.5 license. WAI-ARIA導入 ARIAにはじめて触れる人たちのためにこの記事は書かれている。障害を持つ人たちがWebを使うにあたってぶつかる潜在的な難しさとHTMLの理解を必要とする。ユーザを観察すると、いくつかのRIAと親和性が高いことが分かるだろう。この記事を読んだあと、ARIAが何の役に立つか、Webサイトにど
AmaiSaeta 2011/11/23
study

WAI-ARIA

web

UI
リンク
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記はてなグループ日記のエクスポートデータは2020年2月28
AmaiSaeta 2011/11/19
http://agpg.seesaa.net/article/235900930.html

web

UI

-何か書いた
リンク
TechCrunch
When X (formerly Twitter) launched paid subscription verification, Mistress Rouge, a professional dominatrix, hoped that it would help her advertise to new clients. But paying for the service didn’t
AmaiSaeta 2011/10/14
良いね。Androidのintentは良いものだ。webとローカルアプリの間で使えればなぁと思ってたが、それも可能になると良いな。

●Google

●web

●UI
リンク
[JS]かなりかっこいいデザインのローディング用アニメーションを生成するスクリプト -Sonic
HTML5 Canvasを使って、ローディング用のアニメーションを作成する超軽量（約3K）のスクリプトを紹介します。デモページ Sonicの実装 Square（矩形）とCircle（円形）を例に実装方法を紹介します。外部ファイル当スクリプトを外部ファイルとして指定します。 <script src="sonic.js"></script> JavaScript: Square（矩形）あとは、JavaScriptで記述するだけです。 var square = new Sonic({ width: 100, height: 100, fillColor: '#000', path: [ ['line', 10, 10, 90, 10], ['line', 90, 10, 90, 90], ['line', 90, 90, 10, 90], ['line', 10, 90, 10, 10]
AmaiSaeta 2011/08/30
要Canvas。 | 円形でないローディングアニメーションとは思いつかなかった。 | アニメGIFで良くね?という気もするが、Tumblrみたいな(画像使えない)とこだと助かるのかも知れん。

●web

●UI

●JavaScript

●HTML_5

●興味深い
リンク
TechCrunch | Startup and Technology News
Unlike Light’s older phones, the Light III sports a larger OLED display and an NFC chip to make way for future payment tools, as well as a camera.
AmaiSaeta 2011/06/22
要ははてスタ+αでしょ。

Google

web

UI

考察
リンク
みんなのアクセシビリティ評価ツール： miChecker (エムアイチェッカー) ダウンロードページ
みんなのアクセシビリティ評価ツール： miChecker (エムアイチェッカー) Ver. 1.0 のダウンロードページこのページから、miChecker Ver. 1.0 （以下、miCheckerと呼びます）がダウンロードできます。 miCheckerのダウンロードおよびインストールは、必ず以下の説明をよく参照した上で実施して下さい。 miCheckerの実行環境ダウンロードの手順インストールの手順 miCheckerのダウンロード 1. miCheckerの実行環境 miCheckerは、以下の実行環境でお使い頂くことができます。 OS：　Microsoft Windows XP SP3, Windows Vista, Windows 7 メモリ：　１GB以上（2GB以上を推奨）ハードディスク空き容量：　250MB以上 Java実行環境：　Java 32bit版 Versi
AmaiSaeta 2011/06/09
webサイトのアクセシビリティ評価ツール(JIS X 8341-3:2010基準) | via: http://pc.nikkeibp.co.jp/article/news/20110601/1032122/

web

UI

tool
リンク
1 2 次のページ