※2023年5月29日に一部内容を更新しました 基本無料で使っている立場上、あまり文句は言えない気がしますが、急にサービスを立ち上げたり、リニューアルしたり、ある日突然サービスが終わっちゃったりと、いろいろな驚きをもたらしてくれる、Google。 この度、ある一つのサービスが急に終わってしまったんです。 そのサービス名は、Google翻訳の「Webサイト翻訳ツール」というもので、このサービス終了に伴いどんな影響が発生するのか、まとめてみました。 突然Google翻訳埋め込みサービスが終了 Googleアカウントさえあれば誰でも使えて誰でもサイトに埋め込みができる、「Google Webサイト翻訳ツール」が終了しました。これさえあればGoogle翻訳機能をサイトに埋め込み、サイトを移動せずに無料で100言語以上の翻訳が可能だったのに…。 ＜サイトでは以下のようにサービス終了を説明＞ http

Web Almanac HTTP Archiveの年次報告書 ウェブの状態レポート 私たちの使命は、HTTP Archiveの生の統計やトレンドを、ウェブコミュニティの専門知識と組み合わせることです。Web Almanacは、実際のデータと信頼できるウェブの専門家に裏付けられた、ウェブの状態に関する包括的なレポートです。2022年版は、ページコンテンツ、ユーザー体験、パブリッシング、配布などの側面を網羅した23の章で構成されています。 探索を開始 注目の章 SEO ページのHTMLにおける構造化データの実装は増加の一途をたどっています。2021年には、デスクトップページの41.8%、モバイルページの42.5%が構造化データを使用していました。2022年には、HTML内に構造化データを持つデスクトップページの44%、モバイルページの45.1%に上昇しています。

概要 Ameba Accessibility Guidelinesは、Amebaのサービスを利用するユーザーの「誰もがいつでも迷わずコンテンツを楽しむことができる」ようにするための、制作指針集である。 Amebaのサービスに携わるコンテンツや開発者は、高品質なサービスを提供するため、ガイドラインに沿った制作/開発を強く推奨する。 本ガイドラインで掲載している事例や実装方法はAmebaでの事柄である。失敗例で実装していても、WCAG 2.0（2.1）の各項目に適合できる場合もあり、適合・不適合の判断はWCAG 2.0（2.1）を参照のこと。 対象となるサービス 本ガイドラインに準拠するサービス一覧。 各サービス毎に、アクセシビリティ改善プロジェクトの目的と対象とする範囲を定義する。 アメブロ 各項目の構成 適合レベル 達成基準を対応する目的と意義、対応すると得られるメリットなど 具体例 実装

Several eBay teams worked together to create a plug-in that makes it easy to include accessibility in a design right from the start. There is sometimes a fundamental gap between the engineering and design teams when creating a new product. Designers want their work to be accessible, but many of the available tools are cumbersome, confusing, and come with processes that aren’t well-defined. This ca

The Accessible Usability Scale (AUS) is a free tool to measure the usability of a digital product for assistive technology users. Inspired by the System Usability Scale (SUS), the Accessible Usability Scale consists of ten questions administered at the end of a user experience to calculate a score.

2019年6月1日にCSSNite主催のwebアクセシビリティの学校に参加してきました。 ここでは詳細は記載しませんが、マシンリーダブルなコードを書くことへの意識が高まる1日でした。 アンケートの質問欄にフォームのコーディングについて質問を書いたところ、フォローアップで質問にご回答頂きました。 （質問採用されるのなかなか嬉しいですよね） そこでfiledsetとlegendというタグを知ったので、その使い方と調べていく過程で疑問に思ったテーブルレイアウトへの組み込み方をまとめていきます。先にお伝えしておくと、tableタグでは使えませんでした。 質問と回答内容 【質問】 フォームで氏名を入力する場面で、「氏名：姓［　　］名［　　］」のような場合、labelは姓と名だけにつければいいでしょうか？ 【ご回答】 「姓」と「名」をlabel要素でマークアップするのに加えて、全体をfieldset要

input[type="file"] な要素を装飾する方法を検索したときに、次のような間違った label 要素の使い方を紹介する記事ばかりヒットするのが気になったので書きました。label 要素を使っても問題ない場合もありますが、間違った使い方をしている（しようとしている）人に届きやすいようにこのような表題にしています。 何が問題か 上記の方法は input 要素を display: none で非表示にし、label 要素を使ってヒット領域を拡大させて「ファイルを選択」ボタンを表現するという方法ですが、この方法ではフォーカスが当たりません。また、tabindex 属性に非負の値を設定しフォーカスを当てられるようにしても label は clickable な要素ではないので Space / Enter キーで click イベントを発火することができません。 どうするべきか butto

A最低限の基準です。この基準を達成しないとWebサイトを閲覧できない人が存在しうるとされます。 AA望ましい基準です。この基準を達成すればWebサイトの閲覧が困難なケースは多くないとされています。 AAA発展的な基準です。この基準を満たすと最も閲覧しやすいWebサイトと言えます。

デジタル庁では「誰一人取り残されない、人に優しいデジタル化」を実現するため、継続的に「ウェブアクセシビリティ」の向上に取り組んでいます。この度、ウェブアクセシビリティに初めて取り組む行政官の方や事業者向けに、ウェブアクセシビリティの考え方、取り組み方のポイントを解説する、ゼロから学ぶ初心者向けのガイドブックを公開します。 優しいサービスのつくり手になる一助として、ぜひご活用ください。 公開の背景ウェブアクセシビリティの向上に取り組むには、非常に専門的な複数の規格とガイドラインをそれぞれ確認する必要があります。そのため、適切なやり方がわからないままに、現在は間違っている対応の踏襲、不要・過剰な対応、不適切な対応をしてしまうことがあります。ウェブサイトだけではなく、申請・手続等のデジタルサービスの重要性が増す中で、最新の技術動向を踏まえた、初心者が学習できる行政機関向けの研修資料が不足していま

2023年2月7日 CSS, アクセシビリティ アニメーションのあるWebページって、見るのも作るのも好きなんですが、みなさんはいかがでしょう？中には動きが苦手で目が疲れてしまう、画面酔いしてしまう…なんていう方もいらっしゃるかと思います。今回はアニメーションが苦手な方のためにWebサイト側でできることを考えてみます。 ↑私が10年以上利用している会計ソフト！ アニメーションを減らす設定 アニメーションによって画面酔いしてしまったり、動きがつくと内容が理解できなくなるという方は、OS側で視覚効果を減らす設定をしているかと思います。そういった設定をしている場合は、CSSでWebサイトのアニメーションもなくす、あるいは軽減させる指定が可能です。 設定方法 まずはアニメーションを減らすためのOS側の設定方法から紹介します。 Windows 10: 設定 → 簡単操作 → ディスプレイ → アニメ

公開日 : 2013年9月4日 (2014年1月7日 更新) カテゴリー : ユーザビリティ ページの先頭に戻るリンク、というのを時々見かけます。ページ内の決まった位置にテキストリンクがあるパターンもあれば、クリック/タップ可能なボタンが浮遊する (スクロールに追従して常に画面上に表示される) パターンもあります。 この、ページの先頭に戻るリンクは、なぜあるのでしょうか？「ページの先頭には、グローバルナビゲーションや機能ナビゲーション (お問い合わせ、サイトマップ、サイト内検索機能、など)、サイトロゴ (ホームへのリンク)、といった重要な機能が並んでいて、そこに素早くアクセスできるようにしたほうが親切だから。」「ページの先頭に戻る際、スクロールバーまでマウスポインターを動かしてドラッグするのが、面倒だから。」...というのが、主な理由でしょう。 一見とても便利な機能なだけに外すのは難しい

「SEO に強い HTML の書き方」というツイートがそこそこバズっていて、その内容に対して駆け出しエンジニアの方たちが「参考になった」などと称賛の声を挙げていたのを見かけて思うところがあったのでこの記事を書きました。 元ツイの概要は次の通り。 body > main > article > sectionに h1は 1 ページに 1 つ（要キーワード） 見出しタグは毎度 section で囲む ヘッダーメニューは nav で囲む 画像に適切な alt を設定する title / description を書く 階層を意識して書く div はあまり使わない 画像は p で囲む この記事は元ツイおよび元ツイの投稿者を批判する意図で書いたものではなく、あくまで挙げられている内容に対する個人的見解をまとめたものです。 正しいか正しくないかをそれぞれの項目のはじめに書いていますが、あくまで僕個人の

I still remember my excitement when I learned how to build a hover-triggered submenu with just CSS. (It was probably after reading this 2003 article from A List Apart.) At the time, it was a true CSS trick. Seriously. Wild times. That went a little something like this: <ul class="my-menu"> <li> <a href="page-a.html">Page A</a> <ul> <li><a href="page-b.html">Page B</a></li> <li><a href="page-c.html

みなさん、入力フォームを制作する際、どのような施策をおこなっていますか？　入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。 サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※本記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。 自動入力機能に対応しよう Google Chrome（デスクトッ

HTMLのマークアップでアクセシビリティーを向上させる方法として、WAI-ARIA（ウェイ・アリア）があります。HTML要素の属性に aria-* を追加することで音声読み上げの精度を高められます。 WAI-ARIAの特徴として、状態を示す属性が存在します。たとえば、aria-selected 属性。名前の通り、該当のHTML要素が選択状態であるかを示すことができます。ウェブサイトのUIパーツにはタブやアコーディオンなど動的なものがあります。こういった動的なパーツの「状態」はHTMLのマークアップだけでは示すことが難しく、JavaScriptの実装が不可欠です。 ▲本記事で解説するサンプル。タブの切り替えによって、aria-selected属性を動的に切り替えている。JavaScriptの制御が必要である。 よく利用される例としてタブ型のユーザーインターフェイスを題材とし、流行りのJSライ

CONTACT 製品のご購入、書籍やセミナー、 CGWORLDに関するお問い合わせはこちら 購入者向けソフトウェアサポート に関するお問い合わせはこちら 個人情報に関する お問い合わせはこちら ボーンデジタルへのお問い合わせは上記の各種お問い合わせフォームからお願いいたします。状況によっては、お返事にお時間をいただくことがございます。

CONTACT 製品のご購入、書籍やセミナー、 CGWORLDに関するお問い合わせはこちら 購入者向けソフトウェアサポート に関するお問い合わせはこちら 個人情報に関する お問い合わせはこちら ボーンデジタルへのお問い合わせは上記の各種お問い合わせフォームからお願いいたします。状況によっては、お返事にお時間をいただくことがございます。