すべての記事
-
overflow社で
アクセシビリティとか UIを いい 感じに する お仕事 overflow社でアクセシビリティとかUIをいい感じにするお仕事をはじめました。ポッドキャストにも出たので聞いてね。
/ Work -
BudouXを
使って フレーズ単位で 改行する BudouXのJavaScript moduleを使って、記事タイトルをフレーズ単位で改行した。少し違和感を覚える場合もあるけれど、簡単に試せるので良い感じ。
/ Design -
2021 ~ 2022
2021年の振り返りです。仕事、生活について振り返っています。転職が一番大きなできごとでしたかね。
/ Diary -
Web24の
アクセシビリティセッションで お話します #web24_a11y Web24というイベントでアクセシビリティの議論をします。アクセシビリティセッションは5月7日の18:30から。UDトークのライブキャプションも提供します。
-
サイバーエージェントを
退職して SmartHRに 入社します 2020年2月末で約4年勤めたサイバーエージェントを退職してSmartHRのプロダクトデザイングループでデザイナーをします。
/ Diary -
オンスクリーン タイポグラフィの
執筆に 参加 BNN社から出版されるオンスクリーン タイポグラフィ – 事例と論説から考えるウェブの文字表現の執筆に参加しました。ウェブのメディア特性を尊重しよう、とWCAGをタイポグラフィの道具として使うための2つの論説を書きました。
-
2020 ~ 2021
2020年を振り返って2021年に思いを馳せます
/ Diary -
2020年に
買ってよかった もの 2020年に買ってよかったものを紹介します。
/ Diary -
Web アクセシビリティの
検証ツール 「acot」 同僚の @wadackel とウェブアクセシビリティの検証ツール acot (アコット)を作っていて、まだまだ途中なのですが、Webアクセシビリティ Advent Calendar 2020の18日目になってしまったので紹介してみます。
-
SmartHR社で
アクセシビリティの 技術顧問 2020年4月からSmartHR社でアクセシビリティの技術顧問をしています。これまでの振り返りを兼ねて何をしているかを書きました。
-
2020アメリカ大統領選選挙速報の
地図の 色 2020年アメリカ大統領選挙の選挙速報の地図表示を白黒でエミュレーションした結果をまとめました
-
ダークモード
-
GAAD Japan 2020 #GAADjp
GAAD Japan 2020 #GAADjpでにて「アクセシビリティ向上を組織でどのように進め、何をもたらすか」という話をしました。
-
GitHub Pages, Cloudflare, 11tyに
移行 さくらのレンタルサーバー上に構築していたMovableTypeからGitHub PagesとCloudflareと11tyに移行しました。
-
見た目の
美しさと アクセシビリティを 戦わせないで 見た目の美しさとアクセシビリティのパラドックスという記事を読んで考えたことです。見た目の美しさとアクセシビリティがコンフリクトするケースはたしかにあるが、見た目が美しくアクセシブル、というのはパラドックスではないし、それぞれの専門家を対立構造に置くような表現はやめたい。
-
accname オンラインも
くもく 会を 開催しました Accessible Name and Description Computation 1.1をもくもくと読むオンラインもくもく会を開催して、学びを得ましたが最終的には accname 何もわからないになります。平日日中の開催も良かったです。
-
WCAGも
くもく 会第六回を 開催しました #a11ymoku2 WCAGもくもく会第六回を開催しました。こじんまりと密にやれてよかったです。続けていきたいな。次回は、WCAGではなく accname の仕様を読む会を2020-02-06T12:00+09:00から開催します。
-
2020-01 四日市、
浜松 2020年1月の四日市、浜松への旅行記。とんてき、競輪、餃子、さわやかなど。
/ Diary -
2019 ~ 2020
仕事、登壇、イベント、#deisui_html_radio やその他のことについて2019年を振り返り2020年に思いを馳せます。
/ Diary -
チームに
タイプデザイナーが いるつよさ #ostd2019 の特設ウェブページ制作で利用した Koga Sans と、その作者と一緒に作業をした感想です。作者最強。
/ Design -
OnScreen Typography Day 2019 登壇と
ost.today の 実装 #ostd2019 -
#accTalk in 福岡、
岡山、 京都 3/29(金)19:00 - 福岡、3/30(土)17:00 - 岡山、4/1(月)19:00 - 京都でアクセシビリティに関わりたい人が集まって話をする AccTalk を開催します。お近くで興味ある方はぜひおこしください。
-
トライデントコンピュータ専門学校 Webデザイン学科 業界研究授業で
発表 1月23日にトライデントコンピューター専門学校の業界研究授業で発表してきました。ウェブアクセシビリティについての紹介や、スクリーンリーダー(VoiceOver)の操作体験をしてもらいました。
-
腕力
お気持ちです
/ Diary -
私的東京お世話に
なった 店ベスト25アドベントカレンダー 下書き供養 Advent Calendar 2018の1日目の記事です。Gmailに残っていた3年前の下書きを供養します。
/ Diary -
Accessibility Object Modelの
日本語訳と HTML5 Conference 2018登壇 Accessibility Object Model の日本語訳を始めました。またAOMについての紹介をHTML5 Conference 2018でお話します。
-
aria-expandedの
よくある 間違い WAI-ARIAで制御するコンテンツが展開されているかどうかのステートを表すaria-expanded の使用にあたり、よくありそうな間違いである「展開されうるコンテンツ側にaria-expandedを指定してしまう」「制御するコンテンツを明示していない」の2つと正しい使用方法をまとめました。
-
#deisui_html_radio の
作り方 #deisui_html_radio というライブストリーミング番組をどうやって作り放送しているかを、振り返ってみました。使ってる機材、放送の内容の変化なども振り返っています。
/ Work -
アクセシビリティの
祭典 2018 に 参加、 登壇、 配信 #accfes 今年も開催されることとなったアクセシビリティの祭典2018に3年連続3回目の参加、そして今年はセッションにも登壇し、ライブ配信のお手伝いまでやってきたので、セッションやイベント全体の感想、自分のセッションの振り返りをしました。
-
WCAGも
くもく 会第四回を 開催しました #a11ymoku2 第四回WCAGもくもく会の開催レポートです。WCAG2.0のガイドライン2.1 キーボード操作可能を読むをもくもくしました。当日のつぶやきまとめも掲載しています。
-
2017年 ~ 2018年
昨年、2017年を振り返りつつ、2018年に思いを馳せています。
/ Diary -
渋谷で
よく 行く ビールの 店 / Beer Advent Calendar 2017 渋谷に越してきて1年が経って、何軒かのビールがうまい店に出会ったのでその一部を紹介する。
/ Diary -
富士そば
富士そば Advent Calendar 2017の1日目の記事です。なぜ富士そばに入ってしまうのかを少し考えてみました。
/ Diary -
AccSell Podcast Vol.126に
出演しました アクセルというアクセシビリティの情報サイトが月に2回配信しているポッドキャストにゲストとして参加しました。勤務先でのアクセシビリティに関する取り組みや、今後のイベントについてお話しました。また話をし忘れたことについても記載しています。
-
WCAGも
くもく 会第三回を 開催しました #a11ymoku2 第三回WCAGもくもく会の開催レポートです。WCAG2.1のワーキングドラフトに掲載されている新規達成基準の候補をもくもくしました。また当日のつぶやきまとめも掲載しています。
-
ふだんの
代替テキスト 最近はTwitterにアップする画像とかにもできるだけ代替テキストをいれるようにしています。自分のコンテンツですし、できるところからやっていきたいからです。
-
WCAGも
くもく 会第二回を 開催しました #a11ymoku2 第二回WCAGもくもく会の開催レポートです。デザイナーさんの参加が増えたこととガイドラインに関連する当事者の方のお話が聞けたことが良かったです。次回はもう少しWCAGの読み方について詳しく解説しようかと考えています。また当日のつぶやきまとめも掲載しています。
-
WCAGも
くもく 会を 開催しました #a11ymoku2 2017年7月11日に開催したWCAGもくもく会の開催報告です。リモート参加の準備不足や開始時間が早かったなど反省点はありますが、概ね良かったです。次回は8月30日(水)を予定しています。ご参加お待ちしています。
-
高さが
低い 要素に 高さを 揃える 2017年になっても高さ揃えの話です。高さが低い要素に合わせるには高さを合わせる要素にインナー要素を設置し、そのインナー要素の高さを計算外にしてから各要素の高さを揃る方法で実装しました。その実装方法の詳細と、少しの問題点について解説しています。
/ CSS -
フレックスコンテナ内で
絶対位置指定された 要素の 静的位置 フレックスコンテナの中に配置したposition:absoluteな要素の初期位置(静的位置)がブラウザごとに違ったので調べてみたら仕様の変遷にブラウザが追従しているかどうかという話で、SafariとIEが追従できてなくてツラみというお話。
/ CSS -
電子書籍版コーディングWebアクセシビリティ
電子書籍版コーディングWebアクセシビリティを献本頂いたので、改めて紙の方をレビューしました。自分のコーディングの楽しみを一段引き上げてくれた本でした。
-
FRONTEND CONFERENCE 2017 で
登壇します #frontkansai -
Reactと
WAI-ARIAで アクセシブルな アコーディオンUIを 実装してみた React の手習いに開閉式のいわゆるアコーディオンUIを実装してみましたので備忘録。ステートの管理は楽ですがフォーカス管理が難しかったです。
-
「効果的な
アプリ/Web開発の ための コラボレーションツール活用入門」の 執筆に 参加しました マイナビ出版さんから発売される「効果的なアプリ/Web開発のための コラボレーションツール活用入門」の執筆に参加しました。
/ Work -
text-decoration の
子要素への 適用の されかた 第11回 W3C CSS Module 仕様書もくもく会@東京に参加して、text-decoration プロパティを中心にCSSの仕様書を読みました。継承はしないけど、子要素のテキストも自分の要素の色で装飾する。インラインブロックには装飾は適用されないなどを学びました。
/ CSS -
display-wai-aria.css v0.3.0
display-wai-aria.css に aria-keyshortcuts の追加と aria-describedat の削除を反映し、v0.3.0 として公開しました。プロパティの削除について悩んでいます。
-
WP-D week 土曜日の
「HTMLに ついてLevel Up!」で お話しました #wpdweek WP-D が主催する1週間通しの勉強会イベント WP-D の最終日の「HTMLについてLebel Up! 〜 div? article? section? ココがわからない! HTMLのマークアップ。どうしたらいいの?」でお話してきました。
/ HTML -
MacBook Pro Retinaの
スクリーンショットを Automatorで 自動最適化する MacBook Pro のRetinaモデルで画面のスクリーンショットを取ると、ちょっと画面共有したいという場合に、ファイルサイズが重くて不便なので自動化しました。Automatorもっと使いこなしたいですね。
-
AccHop!! vol.4 に
参加してきました 2015年11月のAccHop!! vol.4 に参加してきた感想です。制作者としての姿勢を見なおしたり、ワークショップに素で参加できたことにびっくりしたりしました。
-
WAI-ARIAの
実装を デバッグ・検証する この記事はWeb Accessibility Advent Calendar 2015の5日目の記事です。WAI-ARIA の検証方法についてご紹介します。決して厳密な検証ができる方法ではありませんが、特別なツールなどを用意しなくとも簡単に検証することができる方法で簡単に検証できる方法が増えれば、WAI-ARIAに取り組みやすくなるかと考えています。
-
schema.org - 営業時間
openingHoursプロパティの マークアップ schema.org の openingHours のマークアップを試行錯誤し、time、data、metaの中からmetaを選びました。その経緯や考え方について紹介します。
/ HTML -
Github Pagesから
リダイレクト プロジェクトのGithub Pages のURLが変わってしまったので、リダイレクトの設定を行いました。Jekyll Redirect From pluginの設定をするだけですが、簡単に解説します。
-
display-wai-aria.css v0.1.0
勢いで作ったわりに、たまに使っていたdisplay-wai-aria.cssをWAI-ARIA 1.1 Working Draftに対応させて v0.1.0 としました。CSSだと複雑な実装をしなくても値の変化に追従できるので、案外使えるかもなって思ってます。
-
AMP(Accelerated Mobile Pages) HTMLしてみたと
いう 話 Google などが発表したAMP HTMLにさっそく対応してみたお話です。コンポーネントの使い方などをご紹介していますが、ちゃんと運用するとなると大変そうです。
/ HTML -
線を上手く
使った デザイン -
シンプルな
ニュースティッカーに role=marqueeを 添えて シンプルなニュースティッカーの実装の過程をご紹介します。HTMLは普通にマークアップして、javascriptで状態を変更し、CSSで状態に応じたスタイルとアニメーションを付与する、という何も変わったところのない感じです。状態を表すのにはWAI-ARIAを使用しました。これぐらいのものをサッと実装できる実装力を高めていきたいですね。
-
記事の
マークアップを Googleの Rich Snippets for Articlesに 対応させた 話 記事のマークアップをGoogleのRich Snippets for Articlesに対応させました。元より構造化データとしてマークアップしていたので少しのプロパティの変更だけで対応できました。加えてJSON-LDで対応する場合の注意点や、Movable Typeによる出力テンプレート、JSON-LDの再利用についても述べています。
/ HTML -
WAI-ARIAを
可視化する display-wai-aria.css と いう ツールを 作りました ページ内で使用されているWAI-ARIAを可視化するCSSのツールを作成しました。CSSならではの問題が多く素直にjavascriptで作ったほうが良かったかなと思っていますが、勢いで作って公開します。
-
#AccSell Meetup 009 『
デザイニングWebアクセシビリティ』 ディレクターズカット版の 感想 AccSell Meetup 009 『デザイニング Webアクセシビリティ』ディレクターズカット版に参加しての感想です。特定のユーザーにとっての利便性と広いアクセシビリティのトレードオフについて考えさせれました。今後も何のために、アクセシビリティをやるのか?を常に自分に問いながら精進していきたいと思いました。
-
sourceTreeの
作業ツリーの ファイルを sublime textで 開く カスタムアクション SourceTreeの作業ツリーにあるファイルをSublime Textで開くカスタムアクションを作りました。$FILEパラメータを Sublime Text の実行ファイルに渡すだけの簡単なものです。
-
JSON-LDを
WebComponentsで 表示する WebComponentsの練習にサイトに静的に設置されたJSON-LDを読み取るWeb Componentsを作ってみました。ライブラリ使わずにやってみましたので、備忘録がてら順を追って解説します。
-
シンタックスハイライトを
google code prettifyから highlight.jsに 変えた これまでシンタックスハイライトには Google code prettify を使ってたのですが、テーマもイイ感じのものがなく、言語の判別の精度もいまひとつだったので highlight.js に変更してみました。
-
ABCテレビキャストで
「コーンポタージュの コーンを 上手く 食べる 方法を 流体解析してみた」が 使用されました 関西のニュース番組キャストで「コーンポタージュのコーンを上手く食べる方法を流体解析してみた」が使用されました。季節ものは強いですね。しっかり紹介されていて良かったです。
/ Work -
Mobile Safariの
selectが イケてないので ほぼCSSで 擬似select作ってみた iPhoneのMobile Safariだとoptionの中に長い選択肢がある場合、途中から省略されてしまって選択肢が見えずに困るということがあり、CSSで擬似的なselectを作ってみました。
/ CSS -
#AccSell Meetup 008 『集まれ!
アクセシビリティー・ビギナーズ! 2015』 参加 アクセシビリティー・ビギナーズ向けのセミナー「AccSell Meetup 008」に参加して際のメモと感想。セミナーに参加した目的(JIS規格日本語訳)は達成できたし、ブログのアクセシビリティも改めてチェックして改善できたし、とても得るものは大きかったです。
-
選択範囲の
背景が はみ出す 問題を 調べてみた テキストを選択した時に選択範囲の色が変わって選択範囲が明示されますが、その選択範囲の背景が該当する要素をはみ出して表示されることが気になっていましたので調べてみました。
/ CSS -
illustratorで
日本地図の 各都道府県の イメージマップを 出力する Adobe illustrator を使用して、各都道府県に対応したイメージマップを出力する方法です。
/ HTML -
Sublime Text 3 + Emmetで
id,class名コメントを HTML閉じ タグの 前に 入れる Sublime Text 3 + Emmet で、id,class属性を持つ要素を展開した時にid, class属性の名前のコメントを自動的に挿入されるようにしてみました。閉じタグの前に入れるのに苦労しました。
/ HTML -
アイコンフォントの
代替テキスト 装飾以外の意味を持つアイコンフォント(Font Awesome)への代替テキストを考えてみました。少し無理矢理なやり方のように思えます。
-
NPO法人
ICT救助隊の ウェブサイトが サービスグラントの 実績で 紹介されました おおよそ1年前に携わったNPO法人ICT救助隊さんのウェブサイトが、サービスグラントさんの実績として紹介されました。リニューアルの成果として、問い合わせの質・量共に増加し、講習会や講演の依頼も増えているようです。
/ Work -
Android標準ブラウザが
background短縮プロパティで background-sizeを 初期化してくれない Android標準ブラウザは、backgroundを短縮形(ショートハンド)で記載してもbackground-sizeを初期化してくれなかったという話。
/ CSS -
順序リスト[ol]の
数字の 色だけを 変更する / CSS -
Web制作者の
ための CSS設計の 教科書を 読んだ / CSS -
Movabletypeで
テンプレート毎に OGPの 設定 MovabletypeでOGPをテンプレート毎に設定するコードを紹介します。
/ HTML -
国内主要ブログサービスの
OGPタイプ(og:type) 国内の主要ブログサービスでOGPのタイプ(og:type)がどのように設定されているかをまとめてみました。
/ HTML -
ブログの
デザイン / Design -
WEB+DB PRESS vol.81 イマドキHTML/CSS開発を
読んだ -
extendで
Sassから 出力される CSSを スッキリさせる / CSS -
勉強会資料 Webサイトの
中の 色に ついて / CSS -
noscript使わずに
スタイル無効の 時の スタイル -
空要素の
閉じ タグ忘れを 一括置換 / HTML -
ブラウザの
小数点以下の ピクセル(サブピクセル)レンダリングまとめ / CSS -
Sass/Compassコンパイル時の
色名変換で ハマった / CSS -
サンプルエントリー
/ CSS