はてなブックマーク

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? アクセシビリティを考慮したWeb開発の話題で、しばしば 「ロール（role）」 というものが登場します。 role="button" のような role属性 として紹介されていることもあります。 ロールは、Webアクセシビリティでとても重要な概念なのですが、わかりやすい解説記事があまり多くない印象です。一方で「role属性を使えばアクセシビリティが向上する」という誤解を招きそうな内容のものもちらほらと存在しており、それを信じて誤った使い方をすることで、かえってアクセシビリティを下げかねない状態になっています。 そこでこの記事では、rol

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 文字の色と背景色の間には、一定以上のコントラスト（明るさの差）がなければ、文字の可読性が低くなります。特に老眼や弱視など、見えづらさを抱えている人は、文字の色のコントラスト比の低さの影響を受けやすくなります。 WCAGにはコントラストについていくつかの基準がありますが、最も意識される頻度が高いのは1.4.3 コントラスト (最低限)（レベルAA）に登場する4.5:1というコントラスト比の数字でしょう。文字が大きいときは、とか、レベルAAAでは、という話は一旦置いておきましょう。 WCAGの基準で使われるコントラスト比は、文字の色と背景色

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? WCAGの達成基準 1.4.1 色の使用には、以下のように書かれています。 達成基準 1.4.1 色の使用 (レベル A) 色が、情報を伝える、動作を示す、反応を促す、又は視覚的な要素を判別するための唯一の視覚的手段になっていない。 これを元にして、freeeアクセシビリティー・ガイドラインでは、以下のようなチェック項目を設けています。 チェックID：0051 グレイスケール表示でも以下のような事象は発生せず、利用に支障が出ない。 リンク箇所を判別できる 画像、テキストの意図が伝わる 入力フォームの必須項目、エラーを認知できる アクセシ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 11月23日に開催されたMTDDC Meetup Tokyo 2024で、「Webサイトのアクセシビリティにどう向き合う？」というタイトルで登壇しました。参加者の皆様からの投票で、この日の3人のベストスピーカーのうちの1人にも選んでいただきました。 これは、その発表内容を記事にするものです。時間や構成の都合により発表に含めなかった情報や、あとで追記したくなったことを書き足したりもしています。Movable Typeのイベントでの登壇だったため、CMSで構築したWebサイトを運用・管理・制作している人を前提とした内容になっています（少なく

aria-label 属性は、たまに「スクリーンリーダーによる読まれ方を指定する」属性のように思われてしまっているようです。この理解のされ方は、実はあまり正確なものではありません。 そもそもaria-labelという名前が aria- で始まているということは、WAI-ARIAで定義されている属性です。こういった属性は使う必要がなければ使わないに越したことはないという話を以前に書きました。 aria-label 属性も例外でなく、使い方を間違えると、意図した効果を得られないどころか、思わぬ形で作用してアクセシビリティを下げてしまうこともあります。 なお、 aria-label 属性と良く似た性質を持つ属性として aria-labelledby 属性があります。こちらは aria-label 属性とは違い、他の要素の id 属性の値を指定して、要素を参照して使用する属性です。ほかの要素を参照

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 最近、いくつかの場面でWebアクセシビリティについて、コーディングに関する技術的な説明をする機会がありました。そのなかで、そもそもWAI-ARIAというものが、どういう立ち位置のものなのかがわかりづらい状態にあるということに気付きました。その結果として、WAI-ARIAの活用を含めたWebアクセシビリティ向上に取り組むことへのネガティブな印象が生まれてしまったり、理解が足りないままWAI-ARIAの属性を使うことでかえって問題が発生しやすくなってしまったりしている現状があるのではないかと思うようになりました。 そこでこの記事では、なるべ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 最近、「アクセシビリティを向上させたいなら、HTMLの disabled 属性ではなく、aria-disabled 属性を使うべき」という主張を見かけますが、本当にそうなのでしょうか？ disabled属性を使っていても、スクリーンリーダーで要素を知覚できる そのような主張をしている人、それを受け止めた人の中には「 disabled 属性を使った要素はスクリーンリーダで読めなくなる」と誤解している人が少なからず存在するように思われます。しかしこれは正しい理解ではありません。 たしかに、disabled属性を付加している button 要

macOSのSafariでは、ボタンやリンクにTabキーでフォーカスを移動できないのがデフォルトの設定になっている Safariでは、「設定」画面の「詳細」パネル内にある「Tabキーを押したときにWebページ上の各項目を強調表示」のチェックを入れていないと、Tabキーを押したときにボタンやリンクにフォーカスが移動しません（Optionキーを押しながらTabキーを押すと移動できます）。デフォルトではチェックが入っていない状態になっています。 また、macOS版Firefoxでは、「設定（about:preferences）」内の「タブキーでフォームコントロールおよびリンク間のフォーカスを移動する」にチェックが入ってないと、Safariと同じくボタンやリンクにはTabキーでフォーカスが移動しないようになっています。これはSafariの挙動にあわせて追加されたようで、やはりデフォルトではチェック

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Webサービスのフォームに住所を入力するとき、丁目や番地などを入れる欄について、数字やハイフンを全角で書かなければいけない「全角縛り」をやっているフォームをよく見ます。半角文字を入力してしまってエラーになったり、咄嗟に変換方法を思い出せなかったり、全角と半角の見分けが付きづらかったり、「全角縛り」であることが明示されていなかったり、「ハイフン」としてどの文字を使うべきかわからなかったり……と、鬱陶しさを感じることが多くあります。 「住所は全角のみ」（数字やハイフンも絶対に半角を受け付けない）という仕様がどういう経緯で生まれて、どう広まっ

書籍「Webアプリケーションアクセシビリティ1」では、「3.1 ラベルと説明」のところで、紙版にして約1.5ページの分量を割いて、フォーム入力欄のプレースホルダー（<input> 要素や<textarea> 要素の <placeholder> 属性）の問題点を指摘しています。 この本で指摘されているプレースホルダーの問題点は以下の3つです。 プレースホルダーの色が薄く視認しづらい プレースホルダーとフォームコントロールの値との区別がつかない フォームコントロールに値を入力したときにプレースホルダーの値が見えなくなってしまう Webアプリケーションアクセシビリティ さらに、Nielsen Norman Groupによる「Placeholders in Form Fields Are Harmful」（日本語訳: 入力フォームのプレースホルダーを使ってはいけない）で数々の問題点が指摘されている

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 開発している Web アプリケーションをスクリーンリーダーでも扱えるようにするにあたって、 VoiceOver を使いはじめてみたら思ったより簡単だったので、やり方についてまとめてみます。 この記事内では macOS High Sierra (10.13.6（17G65）) を前提としていますが、 VoiceOver の操作方法などはバージョンが変わってもあまり変わらないんじゃないかと思います。 VoiceOverとは Appleが macOS や　iOS に搭載しているスクリーンリーダーです。視覚障害者向けに画面上に並んでいるものを音

この記事は freee Engineers Advent Calendar の1日目です。 こんにちは。freee株式会社でフロントエンドエンジニアをしている @ymrl です。freeeでは給与計算freeeの開発をしています。 僕はフロントエンドエンジニアを名乗っていますが、実際はサーバーサイドの開発もしています（freeeではフロントエンドとサーバーサイドの担当に線引きをしていません）。しかし自分としてはフロントエンドのほうが得意だし、UIを作るのが心底楽しいし、サーバーサイドに比較的苦手意識を持っています。 今日はそういう状態の僕が、どういうふうに開発しているかという話をします。 技術に自信がないのでペアを組んだ 給与計算freeeの開発チームでは、ひとつの機能を開発するときに エンジニアのペア制 というのをとっています。 かつて僕が給与計算freeeのチームに異動してすぐの頃、僕

どうやら長音記号や半角の濁点と半濁点にはマッチしないらしい。 定義をしらべてみる また、Unicodeのプロパティ(属性情報)による文字クラス指定も可能です。 以下の記法が使えます。 \p{property-name} \p{^property-name} (否定) \P{property-name} (否定) サポートされているプロパティのリストは https://github.com/k-takata/Onigmo/blob/master/doc/UnicodeProps.txt を 参考にしてください。また、プロパティの意味は Unicode の仕様を参照してください。 http://docs.ruby-lang.org/ja/2.2.0/doc/spec=2fregexp.html URLで参照されてるテキストは、rubyが使用している Onigmo という正規表現エンジンのドキュ

こんにちは、freee株式会社 の @ymrl です。フロントエンドエンジニアなるものをしています。 この記事は freee Engineers Advent Calendar の2日目です。 革命について freee では最近フロントエンド開発を取り巻くいろいろなものを大きく変化させていて、これを 革命《レボリューション》 と呼んでいます。これはフロントエンド界の地殻変動の速さに付いて行きづらくなっているRailsアプリケーションのフロントエンドをエイヤッと近代化して、具体的にはRailsが用意している Sprockets によるフロントエンドの precompile のレールからはずれようとする動きです。 主力サービスである 会計freee は、最初のgitリポジトリへのコミットが2012年7月で、開発初期から jQuery UI や各種 jQuery プラグインや Backbone.

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?