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要素…