すべての記事 / masuP.net

overflow社でアクセシビリティとかUIをいい感じにするお仕事

overflow社でアクセシビリティとかUIをいい感じにするお仕事をはじめました。ポッドキャストにも出たので聞いてね。

2022.05.31 / Work

BudouXを使ってフレーズ単位で改行する

BudouXのJavaScript moduleを使って、記事タイトルをフレーズ単位で改行した。少し違和感を覚える場合もあるけれど、簡単に試せるので良い感じ。

2022.01.05 / Design

2021 ~ 2022

2021年の振り返りです。仕事、生活について振り返っています。転職が一番大きなできごとでしたかね。

2021.12.31 / Diary

Web24のアクセシビリティセッションでお話します #web24_a11y

Web24というイベントでアクセシビリティの議論をします。アクセシビリティセッションは5月7日の18:30から。UDトークのライブキャプションも提供します。

2021.05.02 / Accessbility

サイバーエージェントを退職してSmartHRに入社します

2020年2月末で約4年勤めたサイバーエージェントを退職してSmartHRのプロダクトデザイングループでデザイナーをします。

2021.02.13 / Diary

オンスクリーンタイポグラフィの執筆に参加

BNN社から出版されるオンスクリーンタイポグラフィ – 事例と論説から考えるウェブの文字表現の執筆に参加しました。ウェブのメディア特性を尊重しよう、とWCAGをタイポグラフィの道具として使うための２つの論説を書きました。

2021.01.31 / Work Accessibility

2020 ~ 2021

2020年を振り返って2021年に思いを馳せます

2020.12.31 / Diary

2020年に買ってよかったもの

2020年に買ってよかったものを紹介します。

2020.12.28 / Diary

Web アクセシビリティの検証ツール「acot」

同僚の @wadackel とウェブアクセシビリティの検証ツール acot （アコット）を作っていて、まだまだ途中なのですが、Webアクセシビリティ Advent Calendar 2020の18日目になってしまったので紹介してみます。

2020.12.18 / Work Accessibility

SmartHR社でアクセシビリティの技術顧問

2020年4月からSmartHR社でアクセシビリティの技術顧問をしています。これまでの振り返りを兼ねて何をしているかを書きました。

2020.12.06 / Work Accessibility

2020アメリカ大統領選選挙速報の地図の色

2020年アメリカ大統領選挙の選挙速報の地図表示を白黒でエミュレーションした結果をまとめました

2020.11.04 / Design Accessibility

ダークモード

ダークモードに対応した。ダークモードのときはコントラスト比低めが好き。

2020.10.25 / Design CSS

GAAD Japan 2020 #GAADjp

GAAD Japan 2020 #GAADjpでにて「アクセシビリティ向上を組織でどのように進め、何をもたらすか」という話をしました。

2020.05.23 / Work Accessibility

GitHub Pages, Cloudflare, 11tyに移行

さくらのレンタルサーバー上に構築していたMovableTypeからGitHub PagesとCloudflareと11tyに移行しました。

2020.05.10

見た目の美しさとアクセシビリティを戦わせないで

見た目の美しさとアクセシビリティのパラドックスという記事を読んで考えたことです。見た目の美しさとアクセシビリティがコンフリクトするケースはたしかにあるが、見た目が美しくアクセシブル、というのはパラドックスではないし、それぞれの専門家を対立構造に置くような表現はやめたい。

2020.03.13 / Accessibility

accname オンラインもくもく会を開催しました

Accessible Name and Description Computation 1.1をもくもくと読むオンラインもくもく会を開催して、学びを得ましたが最終的には accname 何もわからないになります。平日日中の開催も良かったです。

2020.02.15 / Accessibility

WCAGもくもく会第六回を開催しました #a11ymoku2

WCAGもくもく会第六回を開催しました。こじんまりと密にやれてよかったです。続けていきたいな。次回は、WCAGではなく accname の仕様を読む会を2020-02-06T12:00+09:00から開催します。

2020.01.26 / Accessibility

2020-01 四日市、浜松

2020年1月の四日市、浜松への旅行記。とんてき、競輪、餃子、さわやかなど。

2020.01.09 / Diary

2019 ~ 2020

仕事、登壇、イベント、#deisui_html_radio やその他のことについて2019年を振り返り2020年に思いを馳せます。

2019.12.31 / Diary

チームにタイプデザイナーがいるつよさ

#ostd2019 の特設ウェブページ制作で利用した Koga Sans と、その作者と一緒に作業をした感想です。作者最強。

2019.06.23 / Design

OnScreen Typography Day 2019 登壇と ost.today の実装 #ostd2019

オンスクリーン上のタイポグラフィを扱うイベント「On-Screen Typography Day 2019」で登壇し、特設ウェブページの実装も担当しました。登壇はライブを意識して準備しました。特設ウェブページの実装の時に考えていたことや、準備の時に聴いていた曲も紹介しています。

2019.06.10 / Design HTML Work

#accTalk in 福岡、岡山、京都

3/29（金）19:00 - 福岡、3/30（土）17:00 - 岡山、4/1（月）19:00 - 京都でアクセシビリティに関わりたい人が集まって話をする AccTalk を開催します。お近くで興味ある方はぜひおこしください。

2019.03.20 / Accessibility

トライデントコンピュータ専門学校 Webデザイン学科業界研究授業で発表

1月23日にトライデントコンピューター専門学校の業界研究授業で発表してきました。ウェブアクセシビリティについての紹介や、スクリーンリーダー（VoiceOver）の操作体験をしてもらいました。

2019.01.31 / Accessibility Work

腕力

お気持ちです

2018.12.18 / Diary

私的東京お世話になった店ベスト25アドベントカレンダー

下書き供養 Advent Calendar 2018の1日目の記事です。Gmailに残っていた3年前の下書きを供養します。

2018.12.01 / Diary

Accessibility Object Modelの日本語訳とHTML5 Conference 2018登壇

Accessibility Object Model の日本語訳を始めました。またAOMについての紹介をHTML5 Conference 2018でお話します。

2018.11.12 / Accessibility Work

aria-expandedのよくある間違い

WAI-ARIAで制御するコンテンツが展開されているかどうかのステートを表すaria-expanded の使用にあたり、よくありそうな間違いである「展開されうるコンテンツ側にaria-expandedを指定してしまう」「制御するコンテンツを明示していない」の2つと正しい使用方法をまとめました。

2018.10.24 / Accessibility HTML

#deisui_html_radio の作り方

#deisui_html_radio というライブストリーミング番組をどうやって作り放送しているかを、振り返ってみました。使ってる機材、放送の内容の変化なども振り返っています。

2018.09.18 / Work

アクセシビリティの祭典 2018 に参加、登壇、配信 #accfes

今年も開催されることとなったアクセシビリティの祭典2018に3年連続3回目の参加、そして今年はセッションにも登壇し、ライブ配信のお手伝いまでやってきたので、セッションやイベント全体の感想、自分のセッションの振り返りをしました。

2018.05.21 / Accessibility Work

WCAGもくもく会第四回を開催しました #a11ymoku2

第四回WCAGもくもく会の開催レポートです。WCAG2.0のガイドライン2.1 キーボード操作可能を読むをもくもくしました。当日のつぶやきまとめも掲載しています。

2018.01.18 / Accessibility

2017年 ~ 2018年

昨年、2017年を振り返りつつ、2018年に思いを馳せています。

2018.01.08 / Diary

渋谷でよく行くビールの店 / Beer Advent Calendar 2017

渋谷に越してきて1年が経って、何軒かのビールがうまい店に出会ったのでその一部を紹介する。

2017.12.19 / Diary

富士そば

富士そば Advent Calendar 2017の1日目の記事です。なぜ富士そばに入ってしまうのかを少し考えてみました。

2017.12.01 / Diary

AccSell Podcast Vol.126に出演しました

アクセルというアクセシビリティの情報サイトが月に2回配信しているポッドキャストにゲストとして参加しました。勤務先でのアクセシビリティに関する取り組みや、今後のイベントについてお話しました。また話をし忘れたことについても記載しています。

2017.10.19 / Accessibility Work

WCAGもくもく会第三回を開催しました #a11ymoku2

第三回WCAGもくもく会の開催レポートです。WCAG2.1のワーキングドラフトに掲載されている新規達成基準の候補をもくもくしました。また当日のつぶやきまとめも掲載しています。

2017.10.12 / Accessibility

ふだんの代替テキスト

最近はTwitterにアップする画像とかにもできるだけ代替テキストをいれるようにしています。自分のコンテンツですし、できるところからやっていきたいからです。

2017.09.10 / Accessibility

WCAGもくもく会第二回を開催しました #a11ymoku2

第二回WCAGもくもく会の開催レポートです。デザイナーさんの参加が増えたこととガイドラインに関連する当事者の方のお話が聞けたことが良かったです。次回はもう少しWCAGの読み方について詳しく解説しようかと考えています。また当日のつぶやきまとめも掲載しています。

2017.09.03 / Accessibility

WCAGもくもく会を開催しました #a11ymoku2

2017年7月11日に開催したWCAGもくもく会の開催報告です。リモート参加の準備不足や開始時間が早かったなど反省点はありますが、概ね良かったです。次回は8月30日（水）を予定しています。ご参加お待ちしています。

2017.07.14 / Accessibility

高さが低い要素に高さを揃える

2017年になっても高さ揃えの話です。高さが低い要素に合わせるには高さを合わせる要素にインナー要素を設置し、そのインナー要素の高さを計算外にしてから各要素の高さを揃る方法で実装しました。その実装方法の詳細と、少しの問題点について解説しています。

2017.07.11 / CSS

フレックスコンテナ内で絶対位置指定された要素の静的位置

フレックスコンテナの中に配置したposition:absoluteな要素の初期位置（静的位置）がブラウザごとに違ったので調べてみたら仕様の変遷にブラウザが追従しているかどうかという話で、SafariとIEが追従できてなくてツラみというお話。

2017.06.06 / CSS

電子書籍版コーディングWebアクセシビリティ

電子書籍版コーディングWebアクセシビリティを献本頂いたので、改めて紙の方をレビューしました。自分のコーディングの楽しみを一段引き上げてくれた本でした。

2017.04.03 / Accessibility

FRONTEND CONFERENCE 2017 で登壇します #frontkansai

2017年3月18日(土)に関西フロントエンドUGさん主催の FRONTEND CONFERENCE 2017 にて「ウェブを構成するUIの品質とHTML」という題で登壇します。ウェブ上のUIの品質についてのポエムと、UIの品質の基礎的な部分を担うHTMLについて主に実装面からお話する予定ですので、お時間のあるかたはぜひご来場ください。

2017.03.05 / HTML Work

ReactとWAI-ARIAでアクセシブルなアコーディオンUIを実装してみた

React の手習いに開閉式のいわゆるアコーディオンUIを実装してみましたので備忘録。ステートの管理は楽ですがフォーカス管理が難しかったです。

2016.09.24 / Accessibility JavaScript

「効果的なアプリ/Web開発のためのコラボレーションツール活用入門」の執筆に参加しました

マイナビ出版さんから発売される「効果的なアプリ/Web開発のためのコラボレーションツール活用入門」の執筆に参加しました。

2016.09.12 / Work

text-decoration の子要素への適用のされかた

第11回 W3C CSS Module 仕様書もくもく会@東京に参加して、text-decoration プロパティを中心にCSSの仕様書を読みました。継承はしないけど、子要素のテキストも自分の要素の色で装飾する。インラインブロックには装飾は適用されないなどを学びました。

2016.08.16 / CSS

display-wai-aria.css v0.3.0

display-wai-aria.css に aria-keyshortcuts の追加と aria-describedat の削除を反映し、v0.3.0 として公開しました。プロパティの削除について悩んでいます。

2016.08.05 / Accessibility CSS

WP-D week 土曜日の「HTMLについてLevel Up!」でお話しました #wpdweek

WP-D が主催する1週間通しの勉強会イベント WP-D の最終日の「HTMLについてLebel Up! 〜 div? article? section？ココがわからない！ HTMLのマークアップ。どうしたらいいの？」でお話してきました。

2016.04.20 / HTML

MacBook Pro RetinaのスクリーンショットをAutomatorで自動最適化する

MacBook Pro のRetinaモデルで画面のスクリーンショットを取ると、ちょっと画面共有したいという場合に、ファイルサイズが重くて不便なので自動化しました。Automatorもっと使いこなしたいですね。

2016.02.24

AccHop!! vol.4 に参加してきました

2015年11月のAccHop!! vol.4 に参加してきた感想です。制作者としての姿勢を見なおしたり、ワークショップに素で参加できたことにびっくりしたりしました。

2016.01.27 / Accessibility

WAI-ARIAの実装をデバッグ・検証する

この記事はWeb Accessibility Advent Calendar 2015の5日目の記事です。WAI-ARIA の検証方法についてご紹介します。決して厳密な検証ができる方法ではありませんが、特別なツールなどを用意しなくとも簡単に検証することができる方法で簡単に検証できる方法が増えれば、WAI-ARIAに取り組みやすくなるかと考えています。

2015.12.05 / Accessibility HTML

schema.org - 営業時間 openingHoursプロパティのマークアップ

schema.org の openingHours のマークアップを試行錯誤し、time、data、metaの中からmetaを選びました。その経緯や考え方について紹介します。

2015.11.06 / HTML

Github Pagesからリダイレクト

プロジェクトのGithub Pages のURLが変わってしまったので、リダイレクトの設定を行いました。Jekyll Redirect From pluginの設定をするだけですが、簡単に解説します。

2015.10.28

display-wai-aria.css v0.1.0

勢いで作ったわりに、たまに使っていたdisplay-wai-aria.cssをWAI-ARIA 1.1 Working Draftに対応させて v0.1.0 としました。CSSだと複雑な実装をしなくても値の変化に追従できるので、案外使えるかもなって思ってます。

2015.10.28 / Accessibility CSS

AMP(Accelerated Mobile Pages) HTMLしてみたという話

Google などが発表したAMP HTMLにさっそく対応してみたお話です。コンポーネントの使い方などをご紹介していますが、ちゃんと運用するとなると大変そうです。

2015.10.20 / HTML

線を上手く使ったデザイン

良いデザイナーの方は単純な図形、特に線（ボーダー）の使い方が上手いなあと思っていたので、ボーダーをデザインに取り入れてみました。グラーデーションにするとコントラストをそこまで落とさずに柔らかい感じにできて良いですし、アニメーションも映えるので気に入っています。

2015.10.09 / CSS Design

シンプルなニュースティッカーにrole=marqueeを添えて

シンプルなニュースティッカーの実装の過程をご紹介します。HTMLは普通にマークアップして、javascriptで状態を変更し、CSSで状態に応じたスタイルとアニメーションを付与する、という何も変わったところのない感じです。状態を表すのにはWAI-ARIAを使用しました。これぐらいのものをサッと実装できる実装力を高めていきたいですね。

2015.10.08 / Accessibility CSS JavaScript

記事のマークアップをGoogleのRich Snippets for Articlesに対応させた話

記事のマークアップをGoogleのRich Snippets for Articlesに対応させました。元より構造化データとしてマークアップしていたので少しのプロパティの変更だけで対応できました。加えてJSON-LDで対応する場合の注意点や、Movable Typeによる出力テンプレート、JSON-LDの再利用についても述べています。

2015.08.20 / HTML

WAI-ARIAを可視化する display-wai-aria.css というツールを作りました

ページ内で使用されているWAI-ARIAを可視化するCSSのツールを作成しました。CSSならではの問題が多く素直にjavascriptで作ったほうが良かったかなと思っていますが、勢いで作って公開します。

2015.07.09 / Accessibility CSS

#AccSell Meetup 009 『デザイニングWebアクセシビリティ』ディレクターズカット版の感想

AccSell Meetup 009 『デザイニング Webアクセシビリティ』ディレクターズカット版に参加しての感想です。特定のユーザーにとっての利便性と広いアクセシビリティのトレードオフについて考えさせれました。今後も何のために、アクセシビリティをやるのか？を常に自分に問いながら精進していきたいと思いました。

2015.07.06 / Accessibility