グラフや図解の説明テキスト | Accessible & Usable
公開日 : 2018年8月4日 (2020年6月13日 更新) カテゴリー : アクセシビリティ ウェブコンテンツの中で、視覚的な情報提示としてグラフや図解を用いる場合、アクセシビリティ (特に視覚障害者に対する情報保障) はどのように両立したらよいでしょうか。主宰しているウェブアクセシビリティの勉強会で、質問が寄せられたので、考えてみました。 グラフも図解も「画像」なので、alt 属性で代替テキストを記述すれば...とまずは思うかもしれません。ただし、alt 属性内に要約をコンパクトにまとめられればよいのですが、多くの場合、グラフや図解は情報量が多いため、テキストに起こしてみると記述は説明的で長くなりがちです。また、alt 属性内のテキストはセマンティックに構造化することができず、長いテキストでも平坦な記述 (情報の優先度付けなどのない「べた書き」) にならざるを得ないため、スクリーンリ
フリーランスになって、3年が過ぎた - 日記
今年も確定申告が終わったので、1年の振り返りです。 昨年の記事はこちら。 tnamao.hatenablog.com 3年目の仕事 去年の記事にある程度は書いてしまっていましたが、こんなことやっていました。 GKE インフラのお手伝い (〜3月) 某ゲーム、テストツールの GUI アプリ (〜4月) Electron + React + Alt 某ゲームの公式サイト更新システムとインフラ整備 開発 (1,2月) 保守 (通年) 某社・会議システムのインフラ設計と構築 (6月〜) オンプレ → 国内クラウド + オンプレ → GCP + オンプレ と変遷 事情により、GCP をフル活用とはいかず ansible playbook とカスタムモジュールをひたすら書いてる 他にも定期的にお誘いいただくものの、ずっと仕事で埋まってしまっていてお断りさせていただいているのが現状です。今後、ぽっと予定
Markdown エディタ Typora が好きになる7つの理由 - A Memorandum
みなさんは Markdown エディタは何を使っているでしょうか？ Atom や Visual Studio Code のプラグインでプレビュー表示していたり、Windows だったらMarkdownPad 、Mac だったら MacDown などの専用エディタを使っている方が多いのではないでしょうか。 そんな方へTypora を紹介します。 Typora は無駄なプレビュー領域を使いません Typora には便利なショートカットがあります Typora ではテーブル書くのが楽しくなります Typora はドラッグ&ドロップで画像を貼り付けられます Typora はテーマもコードハイライトもあります Typora は PDF や HTML など多くの形式にエクスポートできます Typora はマルチプラットフォームで今の所 Free です まとめ Typora は無駄なプレビュー領域を使い
はてな社内で10年間運用されていた広告配信システムを刷新し、ネイティブ広告枠に対応しました - Hatena Developer Blog
アプリケーションエンジニアのid:yanbeです。2011年にはてなに入社し、以後、はてなブックマークのエンジニアやディレクターなどを経て、最近では、社内で利用する広告入稿システムと、その広告を配信するシステムを開発するチームに所属しています。 はてなでは、Webサービスの収益化の手段の一つとして、Google AdSenseなどのアドネットワークによる広告掲載のほかに、広告主との直接契約や広告代理店を介した広告掲載もおこなっています。 後者の具体的な例としては、はてなブックマーク公式スマートフォンアプリの人気エントリーを開くと、一覧に[PR]表記とともに差し込まれる広告枠*1です。 スマートフォンアプリの他に、はてなブックマークのPC版やスマートフォン版にも、このような広告枠が複数存在します。各プラットフォームに設置されている広告枠の掲載状況を効率的に管理するために、はてな社内では「広告
IntelliJとかJVMのIDE使いでもKarabinerなしでバックスラッシュを片手入力したい - Qiita
--- Perfect backslash(\) for Mac JIS keybord users -- The problem: -- On Mac, Japanese IME setting to replace Yen-backslash is ignored by -- IntelliJ, jEdit or such as because JVM uses another keymap traditionally. -- Solution: -- Use Hammerspoon (http://www.hammerspoon.org/) instead of Japanese IME -- setting. Paste below to your ~/.hammerspoon/init.lua file. -- @author Hisateru Tanaka (tanakahis
Idris + Atomによる型駆動開発入門 - たけぞう瀕死ブログ
4月から社内でType-Driven Development with Idrisの読書会をやっています。 takezoe.hatenablog.com 最近ようやくChapter 3まで進み、実際に自分でコードを書くエクササイズなども出てきました。この本ではAtomを使うことが推奨されているのですが、Atom用のIdrisパッケージが非常に強力で、型駆動開発の魅力を存分に感じることができます。そこで、今回は実際にAtomでのIdrisプログラミングがどのようなものかについて紹介したいと思います。 github.com たとえば以下のようなシグネチャを持つVect（要素数を型情報に持つリスト）用のマップ関数を実装するとします。Vect n aの各要素に(a -> b)という関数を適用してVect n bを返すというものです。 my_vect_map : (a -> b) -> Vect n
プログラマとしてのキャリアを脅かす反復運動過多損傷の痛みをどう解消したか | POSTD
タイピング時に痛みを感じつつ、プログラマとして働き続けるのは非常に辛いことでしょう。音声認識という代替手段はあっても、やはりタイピングとは勝手が違います。新しい仕事を始めてすぐに手首と腕の痛みがぶり返した時、私は恐怖感すら覚えました。 私は過去に2度、こうした状況に陥ったことがあります。その時は痛みが消えるまで結局何年もの間、プログラミングなしの生活を余儀なくされました。そのため、またプログラマとしてのキャリアが脅かされるのでは、と不安に感じていました。 そんなある日、仕事場へと自転車をこいでいる最中に、私は何が起きているのかに気付いたのです。そして自らの理論を検証する手段を思い付き、それを実行に移すと、痛みは消え去りました。同じ対策を何年か前にも講じていれば、きっと痛みは解消していたはずです。しかし実際は、プログラミングができたはずの数年間を、嫌々プロダクト・マネジャとして働いて過ごして
ブラウザの描画関連プロファイリングツールと利用方法 - Qiita
Developer Toolsの下部、ハンバーガーボタンから"Rendering"を選択すると表示される。 項目 Paint Flashing 表示中のDOM要素内でリペイントを行う必要がある要素を緑色のボックスのオーバーレイで示す Layer Borders Compositing Layerとtileを表示する Compositing Layer: オレンジ/オリーブ色 tile: シアン FPS Meter 現在のFrame RateとGPUラスタライズの有効状況、GPUメモリの状況を表示する Scrolling Performance Issues スクロールのレスポンスを阻害するようなEvent Listenerやスクロールの度に再描画される要素があれば画面内に表示する Emulate CSS Media CSSのMediaタイプをprint/screenと切り替える Layer
Flexbox入門 - 横並びを実現する定番のCSS - ICS MEDIA
ボックス要素の横並びをCSSで行う場合は、CSSの「Flexboxフレックスボックス」 が便利です。Flexboxを使用することで、簡潔なコードで豊富なボックスのレイアウトが可能です。本記事ではウェブページの作成を通してFlexboxの特徴と使い方について解説します。 この記事で学べること Flexboxの使い方 スマートフォンへのレスポンシブ対応 Flexboxはボックスレイアウト用のCSS Flexboxとは、ボックスのレイアウト方法を定めるCSSの機能です。ボックスとは、HTML上の各要素が生成する領域のことです。下図のHTMLコードのウェブページでは、div要素・h1要素・p要素がそれぞれボックスを生成します。 Flexboxでは、ボックスを横ならびにしたり、右寄せ・中央寄せ・左寄せをしたりと、さまざまなレイアウトを少量のコードで実現できます。 サンプルの紹介 今回はレスポンシブな
既存 Web アプリケーションのアクセシビリティを向上させるときによくあるヤツと対応方針
アクセシビリティ向上メモ 最初から考慮されているのが一番ですが、そうでもなかったプロダクトに手を入れるときのあるあるを記録します。既存プロダクトはモノが出来上がってしまっているため根治的なリファクタリングよりも基本的には省力で済ませたいので、今回書いた対応方法も完璧よりは省力路線です。 HTML やらセマンティクスに関する知識はそれなりにあるつもりでしたが、AT やマシンリーダビリティを念頭に勉強し直すと自分で作ったものも至らなかったなと振り返らざるを得ない今日この頃。初期設計のときの考慮範囲が拡がったように思うので善きかなです。 各項目について、もっと良い解法や誤り等あれば twitter とかでご指摘ください。 1. 画像に alt 属性がない場合 付けましょう。付けます。はい。 昔から基本とも言うべき、HTML/CSS 書きとしては耳にたこができるほど言われてきたことなので今更感もあ
Web制作のクオリティを飛躍的に高めるJavaScriptライブラリ10選を一挙公開！ - paiza times
どうも、まさとらん（@0310lan）です。 みなさんは、「JavaScriptライブラリ」を活用しているでしょうか？ Webサイト制作はもちろんのこと、さまざまなWebアプリやサービスなどを開発する時に、大幅な時間短縮やクオリティを飛躍的にアップすることが出来るようになります。 そこで今回は、国内外で人気が高くて誰でも簡単に扱える「JavaScriptライブラリ」を厳選してご紹介しようと思います！ ■多機能な「写真ギャラリー」を組み込めるライブラリ！ ◆1.Viewer.js 複数の画像を表示する際に、オシャレな「ギャラリー風」に変換してくれるライブラリです。 類似のライブラリはいくつか存在しますが、「Viewer.js」は使い方が非常にシンプルで扱いやすいのに、多機能性も備えているスグレモノとなっています。 基本的な使い方としては、HTMLファイルに表示させたい画像を「リスト要素」で指
Sassで寿司を回す、たった一つの冴えたやりかた - HOME'S Designer's Blog ｜ ホームズ デザイナーズ ブログ
2016 - 01 - 19 Sassで寿司を回す、たった一つの冴えたやりかた こんにちは、ウェッブデザイナーのアズマです。 みなさん、Sassは好きですか。僕は好きです。 そして、寿司は好きですか。僕は好きです。 Sassがあれば何でもできる！ Sassがあれば、回転寿司も回せる！ というわけで、今日はSass(CSS)を使って回転寿司のように要素を無限ループさせてみましょう。 何ができるか こうです。寿司が無限ループしています。(本当はもっとなめらかに動きます) 僕の圧倒的な画力についての感想はここでは本質ではないのでご遠慮願います。ここで大事なのは寿司が無限ループすることです。 「画像が流れればそれでよい」ということであれば、 1枚の横長背景画像にしてbackground-positionを動かす という手法や、いっそのこと 全部Gifアニメにしちゃう (寿司ゆき超かわいい
Fluxフレームワーク戦争の現状確認（前編） - マルシテイア
この記事は 仮想DOM/Flux Advent Calendar 2015 2日目の記事です。 みなさんFlux書いてますか？ 僕はオレオレ実装を書き続けて消耗してます。 Fluxフレームワーク使いたいけど使いたくない……！！ いったい今Fluxフレームワークって幾つ生き残ってるの……戦争は終わったの？ っていうか最近新フレームワークの噂聞かないけど、まだFluxって流行ってるの？ 今日はその辺をまとめてみたいと思います。 もくじ 前提知識 Flux以前 2014年5月 Flux登場 〜2015年前半 戦国時代 Fluxxor Fluxible Alt NuclearJS 振り返り 2015/5月 Reduxの登場 前半まとめ 前提知識 Fluxってなに？という方はこちらの資料をみると良いでしょう。 非常に丁寧にまとめられています。 speakerdeck.com なお、以下ではアーキテク
IntelliJ IDEAが便利になる40のショートカット - 壷ラボ
ここ数カ月、家でも仕事でもIntelliJ IDEAを使っているのですが、せっかくのIDEなのにショートカットをほとんど使っていなくて宝の持ち腐れ状態になっているので、ちょっと調べて便利そうな物を一欄にまとめてみました。 Macでは微妙に違うものもあるので注意。 ショートカット 動作 Ctrl + Space Basic Code Completion Alt + Enter Show intention actions and quick-fixes Ctrl + Alt + L Reformat code Ctrl + Alt + O Optimize imports Ctrl + P Parameter info Ctrl + Q Quick Documentation lookup Ctrl + F1 Show descriptions of error or warning at
Reactはリアクティブプログラミングなのか? - uehaj's blog
Reactとは 設計をとりもどす Reactでやってみる Elm-HtmlとReactの対応 ReactはFRPか? ReactはFPか? FPとOOPの真の関係 まとめ 追記 Reactとは Reactは、Facebookが開発した、JSのUIフームワークもしくはライブラリです。Reactが提供する中核機能は以下です。 イミュータブルなUIビルダー Virtual DOMによる効率的更新 上記に付随するイベントハンドラ群を編成していくための方法論 React単体ではコールバックの組合せで、Fluxの一部として使用するとオブザーバーパターンで実現 効用は、再利用性と保守性・可読性向上です。特に、Reactで作成した画面部品のコンポーザビリティが高く、細粒度のUI部品利用の発展充実が期待されます。作りは通常のJSクラスライブラリであり、覚えたりすることは多くありません。 設計をとりもどす R
別ウィンドウを開くことの是非 (その2) | Accessible & Usable
公開日 : 2012年1月28日 (2018年1月20日 更新) カテゴリー : アクセシビリティ / ユーザビリティ 2007年5月に「別ウィンドウを開くことの是非」という記事を書きました。リンクを別ウィンドウで開くべきではない...という主旨の記事ですが、その理由として、以下の問題を挙げました。 初心者ユーザーやシニアユーザーは、別ウィンドウで開いたことに気づかないことが多い。特にブラウザを最大化表示している場合、ウィンドウが完全に重なった状態 (元ページが完全に隠れた状態) になってしまい、かつ、前面に出ている (別ウィンドウとして表示された) ブラウザ画面では [戻る] ボタンがグレーアウトしているので、ユーザーは「前のページに戻れない」と戸惑ってしまう。 視覚などの障害や手指の怪我などでマウスが使えない (キーボードを使って操作する) 場合、別ウィンドウとして開いたページから元ペ
iOS 8.4.1の:hover問題
iOS 8.4.1の:hover問題 追記(2015年10月23日) iOS 9.0.2で確認した所この問題は解決していました。 ネタ元：結構緊急リンクが飛ばない iOS 8.4.1からCSS :hoverも１クリックカウントっぽいSafari | WEBスキルアップ君 上記の件、結構やっかいな問題なのでiPhone6+をiOS 8.4.1にアップデートして色々と検証してみました。 どんな現象になるの？ 以下のサンプルで確認できます。 a:hover img{ opacity:0.6; } <a href="http://blog.webcreativepark.net/"><img src="button.png" alt="button"></a> サンプルページ iOS 8.4.1をお持ちでない方は以下の動画で確認できます。 SPサイトなら:hoverを利用するケースは少ないので使わ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
子連れ出勤しています！──「小1の壁」に直面した社員発、新しいワークスタイルの試み | サイボウズ式
Tumblr
GitHub - hainproject/hain: An 'alt+space' launcher for Windows, built with Electron
