新しいビューポートの単位（sv*、lv*、dv*） | フロントエンドBlog | ミツエーリンクス
ミツエーリンクスでは全社的にInterop 2022の重点分野について調査をしています。 今回はその中から「新しいビューポートの単位」について紹介します。 ビューポートとは ビューポートはWebページを表示するための領域で、ブラウザウィンドウからアドレスバーなどのUIを除いた部分になります。 ビューポートの単位とは ビューポートの単位は相対的な長さの単位で、ビューポートの長さに従って指定します。 ブラウザで表示したビューポートの長さが対象となるため、@pageで宣言した印刷用のスタイルでは無効になります。 なぜ新しいビューポートの単位が必要になったのか 従来のビューポートの単位はUIがスクロールによって拡大縮小するような機能を持つ前に作成されました。 そのため後発の動的にサイズが変わるUIに対応しておらず、画面をスクロールする前の初期表示時に決定されたビューポートサイズを維持し続けます。
民間に対する法律上の「合理的配慮」の見直しについて | アクセシビリティBlog | ミツエーリンクス
年末に【独自】障害者配慮、民間も義務化へ...スロープ設置や手話対応 : 社会 : ニュース : 読売新聞オンラインという報道を目にした方も中にはいるかと思いますが、障害者差別解消法でこれまで民間では努力義務であった「合理的配慮」が義務化される公算が出てきました。 実際に、昨年12月に開催された第53回障害者政策委員会の議事次第での資料8 障害者差別解消法の改正に盛り込む事項（案）では、「事業者による合理的配慮の提供を義務化」が挙げられていることが確認できます。 ここでWebアクセシビリティと「合理的配慮」にはどのような関係があるのかおさらいをしてみたいと思います。総務省が公開しているみんなの公共サイト運用ガイドライン（2016年版）では、「障害者差別解消法を踏まえて求められる対応」として、以下のような記述があります。 2.2.2. 障害者差別解消法を踏まえて求められる対応 障害者差別解消
Microsoftのヒートマップツール「Clarity」を使ってみた | マーケティングBlog | ミツエーリンクス
Microsoft Clarity とは？ 2020年10月より利用可能となった、Microsoft製無料ヒートマップツールです。公式ヘルプより、下記のように紹介されています。 Clarityはユーザー行動分析ツールであり、ユーザーがWebサイトをどのように操作しているかを理解するのに役立ちます。サポートされている機能は次の通りです。 ①セッションのレコーディング ②ヒートマップ ③機械学習によるインサイト機能 Microsoft Clarity Microsoft Clarityの特徴 特徴としては、公式にもある通り、セッションのレコーディング機能を搭載していることと、セッション数の上限などが（今のところは）存在しないこと、またGAとの連携ができること、一番大きなところとしては、やはり月額課金などの費用がかからないことが挙げられます。 グローバルナビゲーションに設定を除き3つのメニューが
日本企業500社を対象にLighthouseのアクセシビリティスコアを計測してみた | アクセシビリティBlog | ミツエーリンクス
2020年12月6日 日本企業500社を対象にLighthouseのアクセシビリティスコアを計測してみた アクセシビリティ・エンジニア 中村（直） この記事はミツエーリンクス Advent Calendar 2020 - Adventarの6日目の記事です。 先月のCNET Japanの選挙のアクセシビリティーを改善するテクノロジー、その道のりは長いという記事の中で次のような文が目に入りました。 問題があるのは、選挙関連のサイトだけではない。ウェブのアクセシビリティーに取り組んでいるaccessiBeのレポートによると、同社が分析した米国のウェブサイトの98％は、完全なアクセシビリティーを提供していないという。 このレポートにざっと目を通したのですが、どういったページを対象にしているのかがはっきりとは書かれていないのでなんともいえない面はあります（1000万以上のWebページで、うち85％
新旧Microsoft Edgeの共存 | Web品質Blog | ミツエーリンクス
Chromiumベースの新しいMicrosoft Edge（以下「Chromium版Edge」）が、正式版としてリリースされました。日本国内向けにWindows Update経由で配信されるのは4月1日以降とのアナウンスがありましたが（新たな年に新たなブラウザーを - 新しい Microsoft Edge はプレビューを終え、ダウンロード提供を開始 - Windows Blog for Japan参照）、プロジェクトによってはレンダリングエンジンにEdgeHTMLを用いた従来のEdge（以下「レガシーEdge」）とChromium版Edgeの両方で制作なり検品の可能な環境が必要になるかもしれません。 幸い、同じWindows環境で新旧Edgeを共存させる方法が用意されています。本稿執筆時点ではまだ日本語訳が提供されていませんが、Access the old version of Micro
スクリーン・リーダーのページ内検索機能について | アクセシビリティBlog | ミツエーリンクス
私は普段、スクリーン・リーダーを使って目的の情報を探す際、ページ内に設定されている見出しを使って探している情報に近いところから内容を読むように心がけています。 これまでの経験から、その方が効率よく探している情報をみつけだすことができると考えているからです。 例えば、当社ミツエーリンクスのページを例に考えますと、アクセシビリティBlogの最新情報はおそらく「Blog更新情報」という見出しの中にあることが予想できますので、ページの先頭からHキーを何度か押して該当する見出しへ移動し、下矢印キーを何度か押せばアクセシビリティBlogの記事タイトルに効率よくたどり着くことができます（記事が更新されるタイミングによっては一覧にアクセシビリティBlogの記事がないこともあります）。 また、Google ニュースのページでは、見出しが以下のように規則的に使用されているので、これを活用して探しているジャンル
Google Homeアプリ開発をはじめよう！ | フロントエンドBlog | ミツエーリンクス
先日Google Homeが日本でも発売されました。Google Homeは「Google Assistant」と呼ばれる音声認識AIが内蔵されているいわゆるスマートスピーカーです。なんと日本語にも対応しており、「ねぇ、Google。今日の天気を教えて？」と話しかけると付近の天気予報を教えてくれます。今回はGoogle Homeアプリを開発するにあたり知っておきたいポイントをいくつかご紹介します。 アプリ開発の流れ おおまかな流れは下記のようになります。 会話の設計 Dialogflowを使用してプロジェクトを作成 アクションやインテントの設定 フルフィルメントの作成 「Dialogflow」とはおおまかに言えば自然言語処理機能を提供してくれるサービスで、GUIベースでどのインテントに対しどんなレスポンスを返すかといった設定ができます。つい先日サービス名が「API.AI」から変更になりまし
ニチバン様「セロテープ」動画制作/ブランドサイト構築プロジェクト | ピックアップ | ミツエーリンクス
コンテンツ資産の動画化で、ロングセラー商品のリブランディングに貢献 ニチバン様「セロテープ」動画制作/ブランドサイト構築プロジェクト ニチバン様のロングセラー商品「セロテープ」の歴史や製造過程を紹介する動画の制作・ブランドサイトの企画、制作を担当させていただきました。 クライアント課題と解決アプローチ おもな課題と目的 「セロテープ」ブランドの認知向上 セロテープの認知度をさらに高めたい若い世代をターゲットにセロテープブランドの商品理解、イメージ向上に役立つ動画を制作し、展示会などで活用したい。また、動画を掲載すると同時にブランド情報を発信していくためのWebサイトを構築したい。 課題解決までのアプローチ 大人から子どもまで楽しみながら学べる動画を制作 読み物として存在していた既存コンテンツをベースにセロテープの歴史から製造工程の紹介、環境への配慮などが短い時間で楽しく学べる動画をご提案。
代替テキストはtitle属性で代用可能か | アクセシビリティBlog | ミツエーリンクス
アクセシビリティ部では、社内のスタッフからアクセシビリティに関する質問や相談を受けることがたびたびあります。 特に代替テキストに関する質問を受ける機会が多いので、以前受けた質問の中から1つ紹介したいと思います。 リンク付きアイコンの代替テキストに関する質問 「別ウィンドウで開く」アイコン付きのリンクテキストのマークアップに関する質問を受けました。 質問：下記2種類のマークアップがアクセシビリティ上どのような違いがあるのか教えてほしい。 アイコンをimg要素に指定、代替情報をalt属性に記述 HTML： <a href="http://www.example.com" target="_blank">会社情報 <img src="/images/newWindow.png" alt="別ウインドウで開きます" class="newWindow"></a> アイコンを背景画像に指定、代替情報を
CSUN 2016参加報告 | コラム | ミツエーリンクス
私は2015年の4月に新卒入社し、現在はJIS X 8341-3やWCAG 2.0などのガイドラインに沿ったアクセシビリティの診断業務を行っております。今回は、CSUN 2016に参加して感じたことやサンディエゴの街で発見したアクセシビリティ対応についてお伝えしたいと思います。 今年で31回目の開催になる世界最大級のアクセシビリティの国際カンファレンスです。正式名称は31st Annual International Technology and Persons with Disabilities Conferenceですが、主催のCalifornia State University, Northridgeの略称から、CSUNと呼ばれています。 どれくらい大きなカンファレンスなのかというと、3日間で合計388セッションが、最大21部屋を使用して同時並行で開催されています。Webアクセシビ
ウェブコンテンツ・アクセシビリティ・ガイドライン（WCAG）2.0への標準対応の強化について | ミツエーリンクス
株式会社ミツエーリンクス（東京都新宿区、取締役社長・木達 一仁）は、「障害を理由とする差別の解消の推進に関する法律（障害者差別解消法）」が本日施行されることを踏まえ、2010年4月に開始した「ウェブコンテンツ・アクセシビリティ・ガイドライン（WCAG）2.0への標準対応」を強化します。 これまで、当社が新規に構築するWebサイトのコンテンツについては、WCAG 2.0の適合レベルAに準拠して制作、アクセシビリティの提供に取り組んできました（音声や動画といったメディアファイル、PDFコンテンツや特殊な要件を伴う一部の例外を除く）。 今回の強化により、運用を通じて追加ないし更新されるコンテンツについても、当社が構築を請け負ったWebサイトであれば、お客様に特別のご負担をいただくことなく同じWCAG 2.0適合レベルAに準拠したアクセシビリティをご提供いたします。
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原案作成委員会に名を連ねた一人でありますが、その分科会に参加し
デバイス間連係でユーザ体験を「つなぐ」 | コラム | ミツエーリンクス
スマートフォンが普及し、ウェブサービスとユーザとの接点として、デスクトップだけでなく、モバイルも想定することはかなり一般的になってきました。
レスポンシブWebデザインのこれから | コラム | ミツエーリンクス
本日、 レスポンシブWebデザイン入門セミナー の最終回を開催しました。Webサイトにおけるマルチデバイス対応の最新動向として、 レスポンシブWebデザイン （Responsive Web Design、以後「RWD」と表記）をご紹介するこのセミナー。今年5月25日の第一回を皮切りに計8回を開催、延べ410名もの方々にお申し込みいただきました。改めて、この場をお借りして参加された皆様に御礼申し上げます。ご参加、誠にありがとうございました。 これほど多くの方々がRWDに関心を寄せられたのは、スマートフォンやタブレット端末に代表されるモバイルデバイスの普及が、もはや無視できない状況にあるからだと思います。近年、モバイルデバイスからWebサイトへのアクセスは、着実にその比率を高めつつあります。サイト全体でみれば、モバイルデバイスからのアクセス比率の高くないB2Bサイトであっても、時事性のあるニュ
当社Webサイトのリニューアルについて | コラム | ミツエーリンクス
既にお知らせ「 当社Webサイトをリニューアル 」にありますように、先月23日、当社ミツエーリンクスの企業サイト（www.mitsue.co.jp、以下「当サイト」）をリニューアルしました。それまで、私が入社した2004年2月時点での情報構造やビジュアルデザインを維持してきましたから、少なく見積もっても8年以上ぶりのリニューアルになります。その間、Webの閲覧環境はもとより、デザインのトレンドや実装技術は大きく変化してきました。 2004年4月に当サイトのWeb標準準拠を実施し（コラム「 Web標準に準拠する価値 」参照）、以後も継続して運用に参加してきた立場ゆえ、早くリニューアルをしたいという思いは日常的に抱いていました。とりわけ自分の担当したマークアップ/スタイルシート設計について、「今の自分ならこうする」「最新の技術ならこう作れる」といった点は多く認識してきました。そうであればこそ、
納品物を標準でアクセシブルにするために | コラム | ミツエーリンクス
すでに、 アクセシビリティ対応強化のお知らせ でも触れています通り、ミツエーリンクスでは2011年4月より当社で新規構築を行なうWebサイトに対して、クライアントから特別なご要望や費用をいただかずとも、WCAG 2.0 レベルA相当のアクセシブルなコンテンツとなるように設計・実装する取り組みを行なっています。 具体的には、対象となる新規構築案件ではWebサイトの規模を問わず、全てのページに対してアクセシビリティの専任スタッフによる検証が実施されます。望ましくない設計・実装が行なわれている箇所については制作担当者へフィードバックされ、差し戻された問題点は、可能な限りページをアクセシブルに修正した上でクライアントの元へ納品するフローを取っています。この取り組みを社内では「アクセシビリティ標準対応」と呼んでいます。 それまで、当社で制作するページのアクセシビリティの検証を行なうのは、特にご要望を
UXデザインワークショップ開催 | UX | ミツエーリンクス
ユーザーエクスペリエンスデザインを体験してみませんか？ ユーザー中心設計という文化を組織に定着させる足掛かりに 近年では、FlashやSilverlight、Ajaxなどのテクノロジーの登場により、Webサイトにおいてもリッチなインタフェースが用いられるようになってきました。しかしながら、このような新しいテクノロジーやツールをただ採用したからといって、必ずしもユーザーに豊かな体験を提供できるわけではありません。豊かなユーザーエクスペリエンスを提供するWebサイトやソフトウェアを開発するためには、ユーザーのことを知り、ユーザーのふるまいやゴールをモデリングし、そのシナリオを基にストーリーボードを作成し、ユーザーにとって必要なデータと機能を導いて、デザインを行っていく必要があるのです。 本サービスでは、貴社スタッフ向けに、ユーザーエクスペリエンスデザイン（UXデザイン）の1日ワークショップを開
3.11とWebアクセシビリティ | コラム | ミツエーリンクス
3月11日の東日本大震災発生から、2カ月が過ぎました。当社の位置する東京都内では、電力需給逼迫への懸念から、節電への取り組みが未だ至る所で継続されているものの、概ね震災前の日常に復帰した感があります。もっとも、福島の原子力発電所事故については今なお予断を許さない状況が続いていますが、一時期と比べ大きな余震の発生頻度が下がったことが、要因としては大きいのかなと思っています。今回の震災に関連して、Webアクセシビリティの観点から興味深い動きがありましたので、1カ月以上前にまで遡りますが、本コラムで紹介させていただきます。 震災発生から時間経過とともに、全国民が注目・閲覧を要する重要コンテンツ、政府、地方公共団体から提供される情報の多くが、PDFやExcelファイル形式で情報配信されております。インターネットを通じて多数の国民に円滑に閲覧していただきたいところですが、アクセスが集中し、PDFやE
アクセシビリティ対応強化のお知らせ | コラム | ミツエーリンクス
東北地方太平洋沖地震の発生から、3週間が経過しました。東日本大震災において被害にあわれた皆様には、謹んでお見舞い申し上げます。同震災に端を発する社会不安は、いまだ根強く残っている状況ではありますが、ともあれ4月1日を迎えました。 当社では14名の新卒新入社員を迎え、2011年度がスタート。入社式では一人一人から業務への意気込みを聞かせていただき、大変頼もしく感じています。そんな新年度の初日、この場をお借りして、当社のアクセシビリティ対応の強化についてお知らせしたいと思います。 昨年1月29日、当社は「 ウェブコンテンツ・アクセシビリティ・ガイドライン (WCAG) 2.0への標準対応の開始について 」というプレスリリースを発行しています。以来、ご要望をいただいた顧客企業様につきましては、必要経費を別途申し受けるかたちで、アクセシビリティ検品をパスした納品物をご提供してきました。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
英語圏では「ファーストビュー」と言わない | 海外インターン Report | ミツエーリンクス