2024年1月18日に開催した本セミナーの録画（質疑応答を除く40分）を、どなたでもご覧いただけるよう公開します。改正障害者差別解消法を正しく理解し、また改正法の施行に正しく備えるため、ぜひお役立てください。
改正障害者差別解消法とWebアクセシビリティ | セミナー | ミツエーリンクス
2024年1月18日に開催した本セミナーの録画（質疑応答を除く40分）を、どなたでもご覧いただけるよう公開します。改正障害者差別解消法を正しく理解し、また改正法の施行に正しく備えるため、ぜひお役立てください。
ARIAを取り巻く2つの自動テスト | アクセシビリティBlog | ミツエーリンクス
W3Cの年次総会に当たるTPAC 2023が9月11日から15日にかけて開催されました。アクセシビリティに関係するワーキンググループも活発にミーティングが行われましたが、ブレイクアウトセッションとして、WAI-ARIAに関係する自動テストのセッションが目を惹きました。2つのセッションについて簡単に触れたいと思います。 1つは、Cross-Browser Automated Accessibility Testing in WPT Interop 2023 and Beyondというセッションです（議事録）。 Interop 2023では、Investigation Efforts（調査の取り組み）として、Accessibility Testingが挙げられています。（Interopとは何なのかについては、フロントエンドBlogのInterop 2023がスタートをご覧ください。） 実際の議
セミナー「改正障害者差別解消法とWebアクセシビリティ」でお寄せいただいたご質問への回答 | アクセシビリティBlog | ミツエーリンクス
昨日オンラインで開催したWeb担当者のためのピンポイント講座、改正障害者差別解消法とWebアクセシビリティには大変多くの方々にご参加いただきました。この場を借りて厚く御礼申し上げます。また、質疑応答の時間ではすべてのご質問に回答することができず、申し訳ございませんでした。 本記事では、開催後にアンケートへのご回答を通じてお寄せいただいたものを含め、いただいたご質問にお答えさせていただきます（セミナーの時間中に回答できたものについては割愛しております、あらかじめご了承ください）。字数の兼ね合いから、回答にご満足・ご納得いただけない場合もあるかと思いますが、その場合には是非お気軽にお問い合わせをいただければ幸いです。 アクセシビリティに対する意識の高さを鑑みると、日本国内サイトよりグローバルサイトを優先的に着手すべきでしょうか？ おっしゃる通り、そのような考え方で優先順位を定義することには、一
:user-validと:user-invalid擬似クラス | フロントエンドBlog | ミツエーリンクス
入力フォームがあるページの設計をする際はフロントエンドでもバリデーションを実装することが多くあります。代表的なバリデーションは例えば以下のようなものです。 必須の入力欄に値が入力されていなければエラーとする メールアドレス入力欄に入力された値がメールアドレス形式でなければエラーとする パスワードとして使用できない文字が入力されればエラーとする 入力内容が不適切な場合は、入力欄に装飾を施すために:validと:invalidの2つの擬似クラスを利用してきました。 :validと:invalidは、主にフォームコントロール要素に関連する擬似クラスで、以下のような基準にしたがって各要素の状態がマッチするかどうかを判定します。 required属性付きの入力欄が空でなければ:valid、空であれば:invalid type属性がemailである入力欄に入力された値がメールアドレス形式であれば:va
そのaria-labelは本当に必要ですか？ | アクセシビリティBlog | ミツエーリンクス
2023年5月31日 そのaria-labelは本当に必要ですか？ チーフアクセシビリティエンジニア 黒澤 アクセシビリティ対応には複数の方法がありますが、方法によって運用負荷はさまざまです。 私はお客様に、aria-labelを設定するのではなく、画面に表示されているテキストで情報が伝わるようにすると運用負荷を抑えられますよ、という話をすることがあります。 aria-labelは指定をミスするとほぼ確実にアクセシビリティの問題につながりますが、画面に表示されないため、作業漏れが生じやすく、指定ミスに気がつきにくい性質があります。 実際、お客様サイト・サービスの現状把握や競合調査の業務ではaria-labelの作業漏れや指定ミスによるアクセシビリティの問題を多数見てきました。 この記事では実際の問題例をサイト・サービスが特定されないように調整したうえで紹介していきます。 紹介した例はいずれ
CSSだけでスクリプトの有効・無効に合わせてスタイルを設定する | フロントエンドBlog | ミツエーリンクス
CSSだけでJavaScriptなどのスクリプトの有効・無効に合わせてスタイルを設定するには@mediaのscripting特性を使用します。 @mediaのscripting特性とは @mediaのscripting特性はW3C Working Draft の Media Queries Level 5となり、Firefox Nightly 113で追加になりました。 構文 scripting特性のキーワードにはnone initial-only enabledがあります。 none ... スクリプトが利用できない状態で有効です。 @media (scripting: none) { body { /* ... */ } } initial-only ... スクリプトが利用できる状態のページロード時に有効です。 例として、CSSだけでページロードの間だけローディング要素を表示し、ペー
2023年3月のWebプラットフォームの新機能 | フロントエンドBlog | ミツエーリンクス
このページの一部は、Google が作成し、クリエイティブ・コモンズ 4.0 著作権表示情報に記載されている用語に従って使用されている、著作物を複製したものです。 以下の内容は、2023年3月31日に公開された記事「New to the web platform in March」の日本語訳です。翻訳の正確性は保証いたしかねますので、必要に応じ原文を参照ください。また、ブラウザサポートについては原文公開時点のbrowser-compat-dataに基づいており、必ずしも最新の状況を反映しているとは限りませんので、ご注意ください。 2023年3月に安定版およびベータ版のWebブラウザに搭載された興味深い機能を複数ご紹介します。 安定版ブラウザのリリース 2023年3月にはFirefox 111、Chrome 111、Safari 16.4が安定版となりました。これがWebプラットフォームにと
視覚障害者とCAPTCHA | アクセシビリティBlog | ミツエーリンクス
当社からウェブアクセシビリティ基盤委員会に参加し、委員長を務める中村と作業部会2の委員を務める私の2名で、先日マイナビ出版様の雑誌「Web Designing」から取材を受けました。今月17日に発売されるWeb Designing 2023年4月号の「Webアクセシビリティに向き合うべき理由」という特集にて、障害者差別解消法が2021年に改正されたことに関連し、Webアクセシビリティに関する具体的な問題や対応を行う際の基本的な考え方についてお話ししました。よろしければぜひご覧ください。 その中で私から、特に視覚障害者にとってWebサイトを閲覧するうえでの障壁となるのが画像認証やパズル認証をはじめとするCAPTCHAであるとお話ししました。今回はCAPTCHAの変遷や現状の課題について、簡単にまとめたいと思います。 CAPTCHAとは、オンライン上でログインや会員登録といった操作を人間が行っ
2023年1月のWebプラットフォームの新機能 | フロントエンドBlog | ミツエーリンクス
このページの一部は、Google が作成し、クリエイティブ・コモンズ 4.0 著作権表示情報に記載されている用語に従って使用されている、著作物を複製したものです。 以下の内容は、2023年1月31日に公開された記事「New to the web platform in January」の日本語訳です。翻訳の正確性は保証いたしかねますので、必要に応じ原文を参照ください。また、ブラウザサポートについては原文公開時点のbrowser-compat-dataに基づいており、必ずしも最新の状況を反映しているとは限りませんので、ご注意ください。 2023年1月に安定版およびベータ版のWebブラウザに搭載された興味深い機能を複数ご紹介します。 安定版ブラウザのリリース 2023年1月にはFirefox 109、Chrome 109、そしてSafari 16.3が安定版となりました。これがWebプラットフ
スクリーンリーダーで目的の情報を見つける5つの方法 | アクセシビリティBlog | ミツエーリンクス
先月公開した記事、日本視覚障害者ICTネットワークが第2回支援技術利用状況調査報告書を公開の中で、スキップリンクの利用状況について触れました。スキップリンクとは、Webページの先頭からナビゲーションなどを飛ばし、メインコンテンツの開始位置へと移動できるページ内リンクのことを言います。スキップリンクは、スクリーンリーダーを利用して目的の情報へ素早くアクセスする手段の1つですが、そのほかにも、スクリーンリーダーの機能を活用することで、効率よく目的の情報を見つける方法があります。今回は一例として5つの方法を紹介します。また、参考としてそれぞれの機能をNVDAとiOSのVoiceOver（以下VoiceOverと表記します）で利用する方法についても簡単に記載します。 1つ目が、見出し要素間を移動する機能を活用するというものです。ページ内の見出し要素の内容のみを確認し、ページ全体の大まかな内容や、目
日本視覚障害者ICTネットワークが第2回支援技術利用状況調査報告書を公開 | アクセシビリティBlog | ミツエーリンクス
2022年10月4日 日本視覚障害者ICTネットワークが第2回支援技術利用状況調査報告書を公開 アクセシビリティ・エンジニア 大塚 今年の5月に当Blogで公開した記事、「日本視覚障害者ICTネットワークが第2回支援技術利用状況調査を実施」で触れた調査の結果が公開されました(第2回支援技術利用状況調査報告書)。2021年に行われた第1回の調査結果と比較しながら、個人的に印象に残った点を取り上げたいと思います。なお、1回目の調査結果については、当Blogでも日本視覚障害者ICTネットワークによる支援技術利用状況調査報告書という記事で取り上げています。 調査結果の中で注目したポイントの1つめが、パソコンで使うことがある支援技術をすべて選択する質問においてPC-Talkerを挙げる人がトップとなり、NVDAがそれに続いたことです。こちらについては、第1回目の調査結果と大きな変化はありませんでした
新しいビューポートの単位（sv*、lv*、dv*） | フロントエンドBlog | ミツエーリンクス
ミツエーリンクスでは全社的にInterop 2022の重点分野について調査をしています。 今回はその中から「新しいビューポートの単位」について紹介します。 ビューポートとは ビューポートはWebページを表示するための領域で、ブラウザウィンドウからアドレスバーなどのUIを除いた部分になります。 ビューポートの単位とは ビューポートの単位は相対的な長さの単位で、ビューポートの長さに従って指定します。 ブラウザで表示したビューポートの長さが対象となるため、@pageで宣言した印刷用のスタイルでは無効になります。 なぜ新しいビューポートの単位が必要になったのか 従来のビューポートの単位はUIがスクロールによって拡大縮小するような機能を持つ前に作成されました。 そのため後発の動的にサイズが変わるUIに対応しておらず、画面をスクロールする前の初期表示時に決定されたビューポートサイズを維持し続けます。
応答性を示す新しい指標「INP」 | フロントエンドBlog | ミツエーリンクス
ユーザーの直帰率や離脱率とパフォーマンスの関係から、コンテンツを表示する速度や応答性（ページがユーザー入力に応答する速度）がいかに重要であるかは、既によく知られるようになってきています。 ではコンテンツを表示する速度や応答性を上げるにはどうしたらいいでしょう。 結論から述べるとパフォーマンスを客観的な指標に基づいて正確かつ定量的に測定し、そこから課題を見つけて解決することが必要になります。 GoogleはChrome User Experience Reportに新しく応答性指標INPを導入しました。 INPとは INP（Interaction to Next Paint）は、ページの読み込みを開始してからユーザーがページを離れるまでの間に発生するユーザー入力の応答性（インタラクション）を評価する測定基準で、遅延時間を計測します。 計測対象のインタラクションは、以下となります。 ユーザー入
国境のないインターネット | コラム | ミツエーリンクス
コラムのタイトルをお読みになり、いやいやインターネットにも国境はあるでしょう、中国のグレート・ファイアーウォールは有名ですし……といった感想をお持ちなら、それはある意味、正しい感想です。実際、私が監訳した2017年発売の書籍『 グローバルWebサイト＆アプリのススメ 』の第1章「翻訳経済の新しいルール」には、「インターネットにはたくさんの国境がある」という見出しに続けて次のように記されています。 国境のないインターネットが、より国境なき世界を実現すると思われがちです。しかし、実際はその反対のことが起きています。インターネットには厳密な意味での国境はないかもしれませんが、仮想の法的な国境を作る国が増えているのです。 そうした状態は、破片を意味するSplinterとInternetを組み合わせた造語、「スプリンターネット」と呼ばれ、各国のインターネットに対する向き合い方、スタンスの違いが反映さ
Webサイトで地図を載せない方が良い5つの理由 | 「Global by Design」日本語版 | ミツエーリンクス
（この記事は、2021年11月15日に公開された記事「Five reasons to avoid using maps on your website」の日本語訳です。） かつてRobert Frostは、「良いフェンスが良い隣人を作る」と書きました。 しかし、地図として可視化されたバーチャルなフェンスについて言うと、「良いフェンス」を作る方法は無いような気がしています。 世界には、紛争中の地域がたくさんあります。また、一見落ち着いて見える地域であっても、実はそうではないかもしれません。 次の事柄について考えてみてください... 中国は（ほんの数例を挙げると）台湾、日本、ベトナム、インドネシアなど、17の領土問題を抱えています 地図に端を発して、ベトナムはNetflixに対しオーストラリアのテレビ番組放映を強制的にストップさせました（Netflix removes Australian s
Google アナリティクス 4とは？ユニバーサル アナリティクスとの違いは？ | マーケティングBlog | ミツエーリンクス
GA4の大きな特徴は、「アプリとWebサイトにまたがる計測」「機械学習を活用した分析と予測機能の導入」「プライバシーを配慮したデータ収集」などの機能が組み込まれたことです。 今回は、従来のUAでアプリもWebも解析できるのに、なぜこのようなツールが開発されたのかを深掘りしていきたいと思います。 参照：新しいGoogleアナリティクスのご紹介 GA4のリリースの背景 時代の変化と共にユーザーの行動は大きく変わり、プライバシー重視の流れによって従来のUAでは対応できなくなってきたため、今回のリリースに至りました。ここでは、その理由を大きく2つ説明します。 急速に変化するユーザー行動の正しいデータ取得が困難となった スマートフォンやタブレットやスマートウォッチなどが普及し、1人で複数デバイスを利用することが当たり前となり、いつでもどこでも簡単にインターネットやアプリを利用できるようになりました。
Chrome DevToolsのRenderingタブを活用しよう | フロントエンドBlog | ミツエーリンクス
Chrome DevToolsにはさまざまな機能が搭載されています。そのうちの1つ「Rendering」には、ページのレンダリングパフォーマンスを視覚化する機能や、さまざまな見え方を疑似的に再現する機能が含まれています。 サイトのレンダリングパフォーマンス改善の取り組みに活用できる、こちらのRenderingタブ内の各機能についてご紹介します。 利用方法と各機能について Renderingタブはデフォルトだと非表示になっており、利用するにはまず次のいずれかの方法で表示する必要があります。 Chrome DevToolsを開いた状態でWindowsではCtrl+Shift+P、MacではCommand+Shift+Pを押して表示されるコマンドメニューに「Rendering」と入力し、「Show Rendering」を選択 Chrome DevTools内の三点ドットから「More tools
いろいろなHTMLのリンター | フロントエンドBlog | ミツエーリンクス
先日当社のPodcast「ミツエーテックラジオ」で「リンター特集」というエピソードを公開しました。このエピソードでは、社内でよく使われているリンターを紹介しましたが、他にもWeb制作で活用できるリンターはたくさん存在しています。 今回はPodcastではあまり取り上げなかったHTMLのリンターについてご紹介します。 LintHTML 1つ目はLintHTMLです。LintHTMLはhtmllintのフォークとして作られたツールです。htmllintでチェックできる内容は全てLintHTMLでもチェックできます。 リンターでチェックできるルールは多ければ多いほどいい、というものでもないのですが、2014年から開発されていたhtmllintをもとにしていることもあり、さまざまなルールを設定できます。 他のリンターにはない特徴としては、ファイルの一部分に対して個別の設定ができることです。サイト全
source要素にwidth/height属性を指定して各画像のアスペクト比の維持とCLSの改善を図る | フロントエンドBlog | ミツエーリンクス
2021年5月31日 source要素にwidth/height属性を指定して各画像のアスペクト比の維持とCLSの改善を図る UI開発者 橋本 Google Chrome 90からsource要素におけるwidth属性、height属性の指定がサポートされました。 これまでpicture要素で表示する画像のアスペクト比は、picture要素に含まれるimg要素に指定されたwidth属性、height属性から計算されていましたが、source要素に指定したwidth属性、height属性からもアスペクト比が計算されるようになります。 width属性とheight属性を付けることで解決できる問題 Core Web Vitalsの3つ指標のうちの1つにCumulative Layout Shift、略してCLSというレイアウトシフトがどれくらい発生したかをスコアにしたものがあります。 レイアウト
民間に対する法律上の「合理的配慮」の見直しについて | アクセシビリティBlog | ミツエーリンクス
年末に【独自】障害者配慮、民間も義務化へ...スロープ設置や手話対応 : 社会 : ニュース : 読売新聞オンラインという報道を目にした方も中にはいるかと思いますが、障害者差別解消法でこれまで民間では努力義務であった「合理的配慮」が義務化される公算が出てきました。 実際に、昨年12月に開催された第53回障害者政策委員会の議事次第での資料8 障害者差別解消法の改正に盛り込む事項（案）では、「事業者による合理的配慮の提供を義務化」が挙げられていることが確認できます。 ここでWebアクセシビリティと「合理的配慮」にはどのような関係があるのかおさらいをしてみたいと思います。総務省が公開しているみんなの公共サイト運用ガイドライン（2016年版）では、「障害者差別解消法を踏まえて求められる対応」として、以下のような記述があります。 2.2.2. 障害者差別解消法を踏まえて求められる対応 障害者差別解消
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
