読者です 読者をやめる 読者になる 読者になる

WHATWG版とW3C版がある仕様たち

2015年11月末にW3CからWeb Storage (Second Edition)の勧告案が出ました。この勧告案では、Latest Editor's Draftにhttps://w3c.github.io/webstorage/と書かれています。そのEditor's Draftを見ると、最新版はWHATWGのHTML Standardでメンテナンスされてい…

ディレクトリ構造を保ったままWebページをダウンロードする

指定したWebページが読み込むファイルを、ディレクトリ構造を保ったままダウンロードするスクリプト(slimebundle)を書きました。 git clone https://github.com/takenspc/slimebundle.git cd slimebundle slimerjs slimebundle.js -u http://example1.com/…

Chrome 43 Canaryのデフォルト日本語フォント

Google Chromeは、長らく「ヒラギノ角ゴシック Pro」(sans-serif)と「ヒラギノ明朝 Pro」(serif)をOS Xのデフォルト日本語フォントとして使ってきました。しかし、SafariやFirefoxでは、以前から「ヒラギノ角ゴシック ProN」「ヒラギノ明朝 ProN」を使っ…

Chrome 41 Betaのデフォルト日本語フォント

Windows 最近、というほどでもありませんが、デバイスフォント(OSなどにインストールされているフォント)を多用したサイトが増えています。その際、Windowsではメイリオ(Meiryo)を指定することも多いと思いますが、Chrome 41 Betaでは、デフォルトの日本…

続・縦書きと代替テキストの表示

以前、縦書きの中にある画像の代替テキストが縦書きにならないと書きましたが、その後、状況の変化がありましたので紹介します。 Google Chrome Google Chromeは、2014年12月に、代替テキストの表示にShadow DOMを使うようになりました。以前は、WebKitから…

スマートフォンを変えました

しばらく液晶画面が割れていたスマートフォンをだましだまし使っていましたが、Fx0に変えました。 良かった点 特に変えて良かった点を挙げるとすれば、次のようなものがあります。 カメラ 8MPカメラ*1は期待していたよりも良く、いろいろと撮って楽しめます…

WAI-ARIA 1.1のブラウザー対応状況(2014年11月)

この記事は、Web Accessibility Advent Calendar 2014、2日目の記事です。 2014年3月にWAI-ARIA 1.0(日本語訳)が勧告に達しましたが、W3Cでは次期WAI-ARIA 1.1(Editor's Draft)の標準化が進んでいます。WAI-ARIAは、Webで必要とされているセマンティクス…

CSSセレクターマッチングのコスト

ブラウザエンジン先端観測会での、Constellationさんの話を聴いて、CSSセレクターマッチングのコストには複数のレベルがあることを強く意識するようになりました。セレクターマッチングにかかるコストを下げたい、という場合には、どのレベルで何を高速化し…

PUAアイコンフォントのアクセシビリティ

UnicodeのPUA(Private Use Area:私用領域)を使ったアイコンフォント(FontAwesomeなど)には、いくつかアクセシビリティ上の問題があります。この記事では、問題点、対処療法的な解決方法、本質的な解決方法(となりうるもの)について簡単にみていきます…

vnu.jarでコマンドラインからNu Markup Checkerを使う

Nu Markup Checkerにはコマンドラインから呼び出して使えるバージョンもあります(validator.github.io)。この記事では一応、vnu.jarと呼ぶことにします。vnu.jarを使うとローカルに置いたHTML5のチェックは次のように関単に行うことができます。 $ java -j…

Nu Markup CheckerでもHTML 4とXHTML 1.0のチェック

先日、Nu Markup Checker(http://validator.nu/)でHTMLファイルをチェックするBrackets用の拡張機能を作りました(Nu Markup Checker for Brackets)。拡張機能自体はありきたりで、特に何というほどのものでもないのですが、この記事ではNu Markup Checke…

Techniques for WCAG 2.0にコメントを送る会

先日、Techniques for WCAG 2.0にコメントを送る会をやりましたので、イベント中、およびその後で思ったこと・感じたことを書きます。 この記事ではTechniques for WCAG 2.0について思ったことの後に、個別の実装方法について思ったことの順番に書きます。ま…

縦書きと代替テキストの表示

最近では多くのブラウザーが縦書きに対応するようになりました(ただしFirefoxは除く)。CSSで縦書きを扱えることのメリットの1つは、縦書き部分を画像ではなくテキストで表現できることだと思いますが、画像を使わなくてはならない場合もあると思います。で…

MathMLとアクセシビリティAPI

数式のアクセシビリティには様々な切り口が考えられますが、ここではMathMLとアクセシビリティAPIについて見てみます。 アクセシビリティAPIを使ったアプローチは大きく2つあります。アクセシビリティAPIに数式を表現するための仕組みを設ける方法と、既存の…

MathMLの2つのマークアップ

MathMLのマークアップは大きく2種類に分かれます。プレゼンテーションとコンテントです。 プレゼンテーションマークアップ プレゼンテーションマークアップは数式のレイアウトを表現します。数式のレイアウトは数式の書き方と言っても良いと思います。例えば…

outline-color: invert

端的にいってFirefoxのoutlineはわかりにくいです。1pxなので目立たないというのもありますが、そもそも視認できない状況がいくつかあります。 currentColor 例えば、outlineを表示する要素の前景色が、その要素の外側の領域の色と同じ場合、ユーザーはoutli…

少しアクセシブルな、列や行を固定した表

大きな表では見出しになる列や行を固定して、残りの行や列をスクロールさせた方がわかりやすい場合があります。しかし、行や列を固定した表をアクセシブルに実装することが難しいことも事実です。 現状では、固定部分とスクロール可能部分をそれぞれ別のtabl…

Internet Explorerはimg要素に対応してください

名前 ブラウザーはスクリーン・リーダーなどの支援技術向けに、ページの構造を提供しています。支援技術はブラウザーが提供するページの構造を読んで、ユーザーに情報を伝えています。このやりとりで使われるのが、アクセシビリティAPIで、やりとりされる情…

Firefox Nightlyにおける分数用字形

しばらく前に、Firefox Nightly(Windows)がハングルのシェイピング*1をharfbuzzで行うようになりました。それにともなって、Firefoxが使っているharfbuzzが更新されています(964240 – update harfbuzz to pick up Hangul shaping improvements and other …

暗黙のARIAセマンティック

「暗黙のARIAセマンティックと強いネイティヴセマンティックについて」で、暗黙のARIAセマンティックをHTMLに指定するべきかどうか、に絡んだ話がされていましたので、この記事では私の考えを書きます。 私の考え 本来的には、HTMLのセマンティックは単独で…

Indie UI: Eventsについて妄想してみる

この記事はWeb Accessibility Advent Calendar 2013の17日目の記事です。 いいたいこと Indie UI: Eventsはユーザーの操作を抽象化したDOMイベントを定義する仕様です。この仕様によってユーザーがどんなデバイスをどう使っているかにかかわらず、操作の意図…

SVG2で検討されているプロパティ

CSS Property Advent Calendar 2013の12日目の記事です。 もともと:futureや:pastなどを考えていたのですが、9日目にTime-dimensional擬似クラスについて調べてみたで書かれています*1ので、今日はSVG 2で検討されているプロパティを2つ見てみます*2。 paint…

Internet Explorer 11におけるtitle属性

お断り:この記事はInternet Explorer Advent Calendar 2013、あるいはYet Another Internet Explorer Advent Calendar 2013のゲリラ投稿、ではありません。 Internet Explorer 9以降といえば、HTML5やCSS、SVGといったものへの対応が注目されがちですが、他…

Mozilla FirefoxとWeb Developer ToolsでEasy Checks (第8回 アクセシビリティキャンプ東京に参加してみて)

第8回 アクセシビリティキャンプ東京は、W3Cが公開しているEasy Checksに沿って、実際にサイトをチェックしてみるという内容でした。Easy Checksはチェックツールではなく、チェックの観点と方法を説明しているドキュメントです。当日、対象となったサイトは…

IE11とPer Monitor DPI

Windows 8.1になって、モニターごとにDPIを設定できるようになりました。といっても、あるモニターにXdpi、別のモニターにはYdpiという指定はできないようです。DPIの設定は「すべての項目のサイズを変更する」に設けられた「小さくする」から「大きくする」…

リンクかボタンかそれ以外か

あるアクションを引き起こす「モノ」を「リンク」とするか「ボタン」とするかは、何を基準に判断すればよいのでしょうか。ここでは最近の私の解釈を書きます。 最近の私の解釈 最近の私の解釈は「アクションが、ページの遷移かフォーカスの移動を発生させる…

BandersnatchとPandocの話

Bandersnatchは便利ですねという話とBandersnatchを見て知ったPandocの機能について書きます。 Bandersnatch BandersnatchはMarkdownファイルをReveal.jsを使った格好いいスライドに変換するツールです。 使い方 GitHubプロジェクトに非常にわかりやすい導入…

Firefox OSでWeb Speech APIを使う

Gecko勉強会の懇親会でGeckoのWeb Speech APIまわりというライトニングトークをしました。 GeckoのWeb Speech APIまわり from takenspc この記事ではライトニングトークではしゃべらなかったこと、Firefox OSでWeb Speech APIを試す方法を書きます。Web Spee…

inertとは何だろう

HTML5などにはinert(不活性)という概念があります。イナートと読むのでしょう(たぶん)。 HTML5でのinert HTML 5.1でのinert HTML Living Standardでのinert inertなノードとその子孫はユーザーによる操作の対象にはならない、そうです。ブラウザーによっ…

role="navigation"はどの要素に書くのが良いのだろうか

基本 HTML5に関して言えば基本的にはどの要素にも書かない、と考えています。 もともと、role="navigation"はその要素がナビゲーションランドマークであることを示します。そしてHTML5では、主要なナビゲーションを表すnav要素が新設されました。このnav要素…

新しいHTML5勧告候補(2013年8月版)で目についたところ

先日、HTML5の新しい勧告候補が公開されました。今更ですが、目についた変更点を挙げます。 要素の追加と削除 data要素が追加されました main要素が追加されました hgroup要素が削除されました menu要素とcommand要素が削除されました data要素 data要素は、…

DOM Inspectorで要素のARIA role値を確認する

HTMLの要素には暗黙的に付くARIA roleが定められているものある。これってどうやって取るの? って話 とteramakoさんが書かれていたので便乗です。言いたいことは、DOM Inspectorを使うと、nsIAccessbileオブジェクトのxml-rolesを手軽に確認できる、という…

B2GでAccessFuをそれなりに試す

B2Gのアクセシビリティ機能は常用できるレベルにはまだ達していませんが、試すレベルでもいくつかのハードルがあります。 スクリーン・リーダー(AccessFu)に関して言えば、そもそもテキストから音声に変換する機能が入っていない*1のですが、次のような問…

GeeksPhone PEAKのAccessFuを30秒で有効化する方法

本当は他に書くべきことがあるのですが、これすら書かないと本当に何も書かなくなってしまう気がしたので、今はこれを書きます。 AccessFuはJavaScriptで書かれたMozillaの支援技術です。Android版Firefoxの読み上げサポートなどで使われていますし、デスク…

「Colour Accessibility」を読みました

電子書籍「Colour Accessibility」を読みました。色のアクセシビリティを多方面から取り上げられています。英語ですが、わかりやすく、読みやすかったです。 覚え書き@kazuhi.toの記事(記事作成時には404 Not Foundになっていますが)もどうぞ。 Colour Acc…

meter要素でへぇボタン

HTML5 input type="range" で作る 「へぇボタン」 | WWW WATCHという記事を見て、自分もmeter要素で「へぇボタン」を作ってみました。 キーボードでも使えるようにしました。 19へぇを超えたらhighになるようにしました。 ユーザーがへぇの値を減らせないよ…

Mozilla Hackathon 2013 春に参加しました

2013年4月27日から28日に行われたMozilla Hackathon 2013春に参加しました。今回はFirefoxを使っていて普段気になっていたバグの修正を試みました。 1. 黒い画像に対するイメージマップのフォーカスリングが見えない 338033 – No visible focus indicator on…

Firefoxの設定画面が簡素になったけど、ワイルドな現実は変わっていない

少し前にFirefox Nightlyから「画像を自動的に読み込む」と「JavaScriptを有効にする」設定が取り除かれました。 mozilla-central: changeset 128223:b61950280061 (Bug 851701 - Remove 'Load images automatically' checkbox from prefs, r=gavin) mozilla…

Mozillaにnavigator.productが入ったのは2000年3月21日

Mozillaのソースコードにnavigator.productが追加されたのは2000年3月21日です。13年前ですね。 nsGlobalWindow.cpp: 1.246 vs. 1.247 r=jst. 30067. we now expose OSCPU, vendor and product attributes of the user agent string through the JS navigato…

canvas要素のフォールバックコンテンツが支援技術に見えるまで(WebKit)

最近のWebブラウザ(IE9、Firefox 13以降、いつからか忘れましたがGoogle Chromeなど)はcanvas要素のフォールバック・コンテンツをサポートしています。これらのブラウザはcanvas要素内に記述されたフォールバック・コンテンツに対してアクセシビリティ・オ…