今、改めて考えるInternet Explorer 11対応のコスト | コラム | ミツエーリンクス
2020年4月17日 今、改めて考えるInternet Explorer 11対応のコスト アクセシビリティ部 チーフ・アクセシビリティエンジニア 黒澤 剛志 「もうたくさんだ（Enough is enough）」。2019年2月、MicrosoftのChris Jackson氏は 企業にInternet Explorerの利用をやめるよう呼びかけるBlog記事 を発表して話題になりました。当時からMicrosoftはセキュリティ関連の修正を除いてInternet Explorerの改善（新機能の追加や処理速度の向上など）を行っていません。それは、現在もサポートが継続しているInternet Explorer 11（IE 11）でも同様です。かわりにMicrosoftはEdgeの改善に力を注いでおり、先日（2020年4月9日）も 新しい Microsoft Edge に移行すべき 10 の
アメリカで増加するWebアクセシビリティ関連訴訟 | コラム | ミツエーリンクス
年明け早々、著名な女性アーティストとして知られるビヨンセさんのWebサイトがアクセシブルではないということで、全盲のファンが運営会社に対し訴訟を起こしたことが話題になりました（1月3日付の記事、Beyonce's Parkwood Entertainment Sued | Hollywood Reporter参照）。本件はその後、日本国内のメディアでも報じられたため、ご存知の方もいらっしゃることと思います（ビヨンセのサイトを視覚障害者が提訴。“クレーマー”と言う日本人の無知コメントも | 女子SPA！参照）。 公的機関のWebサイト、とりわけハザードマップのような人の生死に関わるコンテンツならまだしも、歌手のWebサイトでグッズを購入したりサービスを利用できなかったからといって、何を大げさな……とお考えでしょうか？ 少なくとも訴えを起こした方にとっては、それだけWebアクセシビリティの不足
今すぐ使えるアクセシビリティチェックツール13選！ | フロントエンドBlog | ミツエーリンクス
夏だ！祭りだ！アクセシビリティだ！ ということで、すぐに使えるWebアクセシビリティチェックツールをまとめてご紹介したいと思います。 当社では、アクセシビリティの品質チェックを行う専門の部署が存在しますが、検品依頼をする前に最低限の自己検品を行うことは、時間短縮に加えて品質を守る上でも大切です。 今回は私が普段に使っているGoogle Chromeのエクステンションなど、これまでフロントエンドBlogで紹介してきたツールも含めてまとめをご用意いたしました。 目次 スクリーンリーダー VoiceOver NVDA その他制作で使える便利ツール Accessibility Developer Tools ARIA Validator Alix aXe Chrome Accessibility Experiment ChromeLens Colour Contrast Analyser Cont
レシピを見ながら楽しく実装、フォームのアクセシビリティ！その1 | フロントエンドBlog | ミツエーリンクス
2017年5月16日 レシピを見ながら楽しく実装、フォームのアクセシビリティ！その1 UI開発者 宇賀 先日（4月20日）、2016年版のWCAG 2.0達成方法集の日本語訳が公開されました。 WCAG 2.0 達成方法集を掲載しました。2016年10月7日に公開された「Techniques for WCAG 2.0」の日本語訳です。 https://t.co/phwmpSVCOg — ウェブアクセシビリティ基盤委員会 (@waic_jp) 2017年4月20日 WCAG 2.0 達成方法集 日本語訳がでたことで、より一層日本語Webページのアクセシビリティ向上に期待が高まりますが、「実際どこから手を付けたらいいのかわからない」ということはありませんか？ 個人的なおすすめにはなりますが、わかりやすく手を付けやすい項目は「フォーム」のアクセシビリティだと感じています。日々の業務の中でも、フォ
PWA＋AMP＝PWAMPと言う考え方 | フロントエンドBlog | ミツエーリンクス
2017年5月17日から19日かけてGoogle I/O 2017が開催されました。 Smart ReplyやGoogle LensなどのAI技術、Android Go/Oに加え開発言語であるKotlinの正式化、Google Assistant iOS版の提供、Google Assistantを搭載したGoogle Homeの日本発売など、さまざまな技術躍進が発表される中で、やはり個人的にはPWAとAMPに関する内容が気になる所です。 PWAに関してはProduction Progressive Web Apps With JavaScript Frameworksにおけるフレームワーク上の「PRPL」のことを書くべきだとは思いますが、今回はFrom AMP to PWA: Progressive Web AMPsからAMP＋PWA対応を行ったサイトがどのような恩恵を受けるのか、一部抜粋
「CSUN 2017 参加報告セミナー」のフォローアップ | アクセシビリティBlog | ミツエーリンクス
去る4月21日、当社セミナールームにてCSUN 2017 参加報告セミナーを開催しました。当日は60名近くの方々にご参加をいただき、誠にありがとうございました。また開催に多大なご協力とご支援をいただいた株式会社インフォアクシア、サイボウズ株式会社、株式会社コンセントの皆様にも、大変感謝しております。ありがとうございました。以下、当日の様子を簡単にご紹介し、またフォローアップとさせていただきます。 セミナー前半ではまず私の方から、CSUNカンファレンスの概要についてご紹介しました。3日間で420ものセッション（うち169セッションがWebに関するもの）が催されるというその数字からしても、世界最大規模といわれる所以を感じ取っていただけたのではないかと思います。各セッションで使われたスライドの一部はWebで公開されていますので、現地で参加しなかった方も、CSUN 2017 Megalist of
自分でできるWebページのアクセシビリティチェック | フロントエンドBlog | ミツエーリンクス
※ 2017年03月24日 20:48ごろ修正しています。本日時点で、WHATWGはHTML Validatorを提供していませんでした。 インターネット上に公開されているWebページはあらゆるユーザーの目に触れるものです。どうせなら、誰にとっても便利で使いやすく、不自由なく閲覧できるものにしたいですよね。 Webサイトの品質を保つために検品作業は欠かせないものですが、皆さんが業務や趣味で制作した成果物は普段どのような方法やツールで検品をなさっていますか？ たとえば、W3CやWHATWGが提供しているHTML Validatorを用いてマークアップの文法違反を見つけることや、Google Chrome、Mozilla Firefox、Microsoft Edgeといった異なるブラウザで作ったページを確認してレイアウトの崩れがないかを確認したりなどが思い当たるかと思います。 JavaScri
gulpを使用してレスポンシブ Eメール デザイン作成の効率をあげる | フロントエンドBlog | ミツエーリンクス
私がレスポンシブ Eメール デザインを作り始めた頃、制作ワークフローの中に2つの重い作業が発生していました。 CSSファイルからHTML要素に直接スタイルを指定するインライン化 変換後のHTMLファイルの送信 この作業を手作業で行うのは大きく時間を割きます。当時はまずツールでスタイルのインライン化を行い、今度はそのHTMLファイルを用いてメールを作成・送信をしていました。つまり、この作業はコピー&ペーストの繰り返しです。 HTMLメールは、たとえWebブラウザーで正常に表示されたとしても、いざ送信してみると必ずと言ってよいほど、レイアウトの崩れている閲覧環境（Webブラウザー/メーラー）があります。そのため、何度もコピー&ペーストしてはメールを送信していました。 そこで、タスクランナーを使用して上記の問題を解決する方法を探りました。探す基準としては、メディアクエリーの記述はstyle要素と
AMP HTMLに構造化データを記述する | フロントエンドBlog | ミツエーリンクス
AMPの発表から約1年が経ち、国内のGoogle検索でも正式対応されたことや、AMPに対応しているサービスやアプリの増加などから、AMP対応をしているサイトを見る機会が増えてきたように思います。以前は、AMPのプレビュー用検索ページでしか、AMP対応アイコンやAMP対応サイトがカルーセルに掲載されていることが確認できませんでしたが、正式対応されたことで、通常の検索ページからでもAMP対応ページが一目でわかるようになりました。 その中でも、カルーセルに掲載されたページは、タイトルやサムネイルが大きく表示されるため、よりユーザーの目を引くことが可能だと思われます。AMP対応ページをカルーセルに掲載させるためには、次の条件を満たす必要があります。 AMP HTMLが仕様に準拠して適切に記述されている AMP HTML内にJSON-LD形式の構造化データが適切に記述されている そこで、カルーセルへ
HTML5 Conference 2016セッション資料を公開 | アクセシビリティBlog | ミツエーリンクス
当日、質疑応答でWAI-ARIAの実装の確認方法について質問をいただきましたが、珍プレー2として取り上げている問題に対する確認方法をお伝えできませんした。改めて調べたところGoogle Chromeで以下の方法で確認できることがわかりました。 Google Chromeの試験運用機能で「デベロッパー ツールの試験運用版機能」を有効にする（chrome://flags/#enable-devtools-experiments） デベロッパーツールの設定画面（Settings）でExperiｍentsのAccessibility Inspectionにチェックを入れる Elementsパネルで要素を調査する AccessibilityタブのComputed Propertiesを確認する AccessibilityタブにAncestor's children are all presentat
JIS X 8341-3:2016の公示 | コラム | ミツエーリンクス
Webコンテンツのアクセシビリティに関する設計指針、JIS X 8341-3（規格名称「高齢者・障害者等配慮設計指針−情報通信における機器，ソフトウェア及びサービス− 第3部：ウェブコンテンツ」）が2度目となる改正を迎え、JIS X 8341-3:2016として公示されました。本日を境に、JIS X 8341-3の最新版は2016年版ということになり、2010年版（JIS X 8341-3:2010）は入手できなくなります。 今回の改正にあたっては、ウェブアクセシビリティ基盤委員会（WAIC：Web Accessibility Infrastructure Committee）に参加している委員並びに作業部会委員を中心に組織された、JIS原案作成委員会において検討が進められました。WAICの副委員長という立場から、私もJIS原案作成委員会に名を連ねた一人でありますが、その分科会に参加した当
Karmaとmochaとaxeでアクセシビリティチェックを行う | アクセシビリティBlog | ミツエーリンクス
はじめに 突然ですが、皆さんには次のような経験はないでしょうか。 最初は正しく動作していたはずなのに、開発している間にいつのまにか動作しなくなっていた Pull Requestなどを使ったレビューを実施しているものの、レビューで議論したい内容とは関係ない問題（インデントが揃っていない、命名規則に沿ってない、などなど）が多い そのような場合、機械（プログラム）でチェックできる部分は機械（プログラム）に任せる、例えば自動テストを導入する、ことが一般的になってきたと感じています。前述の悩みはアクセシビリティでも同じです。先ほどの例をアクセシビリティに置き換えると次のようになるでしょう。 最初はアクセシビリティの問題がなかったはずなのに、開発している間にいつのまにかアクセシビリティの問題が作りこまれていた Pull Requestなどを使ったレビューを実施しているものの、レビューで議論したい内容と
CSSとアクセシビリティ | フロントエンドBlog | ミツエーリンクス
Simply AccessibleのDerek Featherstone氏がCSSDevConf 2014で行った講演、CSS, Accessibility and Youの動画を拝見しました。スライドが公開されていますので、英語が苦手な方であっても、比較的理解しやすいのではないかと思います。Featherstone氏といえば、かつてはWeb Standards Projectでご一緒した時期があり、それが縁で2006年にインタビューをしたこともあります。 「CSS, Accessibility and You」のなかでは、アクセシビリティを確保するうえでスタイルシートを作成する際に注意すべきポイントが紹介されていました。CSSの書き方に関するものもあれば、ビジュアルデザインから改善が必要なものまであったのですが、印象的だったものを三つご紹介します。 冒頭、フォームのラベルとコントロールが
癸巳に思うCMS（コンテンツ管理システム）の行く末 | コラム | ミツエーリンクス
今年も残り2ヶ月余りとなりました。日頃、今日の企業サイト運営には欠かせなくなったCMS（コンテンツ管理システム）を継続的にウォッチしていますが、今年は、CMSの今後の動向を考えるうえで印象的な出来事がいくつかありました。 思い起こせば今年の干支は癸巳（みずのとみ）です。十干と十二支の組合せである干支は60年周期とされ、癸巳は30番目の折り返し点にあたります。前時代の終わりと次代の始まりを控えた節目の年であり、次代の趨勢が決まる転換の始まりの年ともいわれます。本稿では、節目の年のCMSを取り巻く動向をふりかえりながら、CMSの行く末について考えてみたいと思います。 節目の年のCMSを取り巻く動向 CMSの行く末を考えるうえで、今年、私が印象に残った出来事には次のものがありました。 オープンデータ運動の広がり 今年6月にイギリスで開催された「G8ロック・アーン・サミット」において「オープンデー
WAI-ARIAの誕生と現状 | コラム | ミツエーリンクス
WAI-ARIA（WAI Accessible Rich Internet Applications）という仕様が策定中であるのをご存知でしょうか？ WAI-ARIAは、様々なWebコンテンツをよりアクセシブルにするためにW3CのWAI（Web Accessibility Initiative）が作成した技術仕様と関連文書の総称です。 本コラムでは、WAI-ARIAとは何か、について軽くご紹介します。 アクセシブルでないリッチコンテンツの台頭 現在、多くのWebサイトが(X)HTMLとCSSだけでは表現することができない様々な機能をJavaScript、Adobe Flash、Silverlightなどを用いて補完しています。例えば、MJLが提供している各種機能（特にタブインターフェイス）もそのひとつです。 しかしながら、(X)HTMLだけでは表現することができない様々な機能は、実現する方
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
