Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

[インデックス 12594] ファイルの概要

このコミットは、Go言語の公式ドキュメントツールであるgodocが提供するWebインターフェースにおいて、特定のUI要素（「ポップアウト」ボタン）のアクセシビリティとユーザビリティを向上させるための変更です。具体的には、このボタンを表す<img>タグにalt属性とtitle属性が追加されました。これにより、画像が表示されない環境や、視覚障がいを持つユーザーがスクリーンリーダーを使用する際に、画像の目的を理解できるようになります。また、マウスカーソルを合わせた際にツールチップが表示され、ユーザーエクスペリエンスが向上します。

コミット

commit 170301d44bf6fbe0613ca755517d8cb899949f7f
Author: Francisco Souza <franciscossouza@gmail.com>
Date:   Tue Mar 13 12:57:48 2012 +1100

    godoc: added alt and title attributes to the "pop out" button
    
    R=adg
    CC=golang-dev
    https://golang.org/cl/5777071

GitHub上でのコミットページへのリンク

https://github.com/golang/go/commit/170301d44bf6fbe0613ca755517d8cb899949f7f

元コミット内容

godoc: added alt and title attributes to the "pop out" button

変更の背景

この変更の背景には、Webコンテンツのアクセシビリティとユーザビリティの向上という重要な目的があります。

  1. アクセシビリティの向上（alt属性）:

    • Webページ上の画像は、視覚障がいを持つユーザーがスクリーンリーダーを利用する際に、その内容を読み上げることができません。alt属性（代替テキスト）は、画像が表示されない場合や、スクリーンリーダーが画像を読み上げる際に使用されるテキストを提供します。これにより、画像が何を表しているのか、どのような機能を持つのかを、視覚に頼らずに理解できるようになります。
    • また、ネットワークの遅延や画像ファイルの破損などにより画像が表示されない場合にも、alt属性のテキストが表示されるため、ユーザーはコンテンツの欠落を感じにくくなります。

  2. ユーザビリティの向上（title属性）:

    • title属性は、要素にマウスカーソルを合わせた際に表示されるツールチップテキストを提供します。これにより、ユーザーはクリックする前にボタンの機能や目的を直感的に理解することができます。特にアイコンのみで表現されたボタンの場合、title属性はユーザーがその機能を推測する手助けとなり、操作の迷いを減らします。

godocはGo言語の公式ドキュメントツールであり、多くの開発者が利用します。そのため、そのインターフェースが可能な限り多くのユーザーにとって使いやすく、アクセスしやすいものであることが重要です。このコミットは、小さな変更ながらも、これらの原則に則った改善と言えます。

前提知識の解説

godoc

godocは、Go言語のソースコードからドキュメントを生成し、Webサーバーとして提供するためのツールです。Go言語のパッケージや関数のコメント、構造体、変数などから自動的にドキュメントを生成するため、開発者はコードとドキュメントを密接に連携させることができます。godocは、Go言語の標準ライブラリのドキュメント（pkg.go.devなどで見られるもの）を生成する際にも利用されています。このコミットで変更されたdoc/root.htmlは、godocが提供するWebインターフェースの一部であり、特にコードを実行できる「Go Playground」のような機能に関連するUI要素を含んでいます。

HTMLの<img>タグと属性

HTMLの<img>タグは、Webページに画像を埋め込むために使用されます。このタグには、画像の表示や動作を制御するための様々な属性があります。

  • src属性: 画像ファイルのURLを指定します。このコミットでは/doc/share.pngが指定されており、これは「ポップアウト」ボタンのアイコン画像です。
  • alt属性 (Alternative text):
    • 画像が表示できない場合に代わりに表示されるテキスト、またはスクリーンリーダーが画像を読み上げる際に使用するテキストを指定します。
    • Web Content Accessibility Guidelines (WCAG) において、すべての非テキストコンテンツには代替テキストを提供することが推奨されています。これは、視覚障がいを持つユーザーがWebコンテンツにアクセスできるようにするために不可欠です。
    • このコミットではalt="View full screen"が追加されており、画像が「フルスクリーンで表示」する機能を持つことを示しています。
  • title属性:
    • 要素にマウスカーソルを合わせた際に、ツールチップとして表示されるテキストを指定します。
    • ユーザーが要素の機能を事前に把握するのに役立ち、ユーザビリティを向上させます。
    • このコミットではtitle="View full screen"が追加されており、alt属性と同じく「フルスクリーンで表示」という機能を示しています。

Webアクセシビリティ (A11y)

Webアクセシビリティとは、年齢、身体的制約、技術環境などに関わらず、すべての人がWebコンテンツにアクセスし、利用できるようにすることを目指す考え方です。alt属性の追加は、特に視覚障がいを持つユーザーにとって、Webコンテンツの理解を深める上で非常に重要なアクセシビリティの側面です。

技術的詳細

このコミットは、doc/root.htmlという単一のHTMLファイルに対する変更です。変更内容は非常にシンプルで、既存の<img>タグに2つの新しい属性を追加するだけです。

変更前:

<img class="icon share" src="/doc/share.png">

変更後:

<img class="icon share" src="/doc/share.png" alt="View full screen" title="View full screen">
  • class="icon share": この画像がアイコンであり、共有（またはポップアウト）機能に関連するスタイルが適用されていることを示します。
  • src="/doc/share.png": 表示される画像のパスです。
  • alt="View full screen": 画像の代替テキストとして「View full screen」が設定されました。
  • title="View full screen": マウスオーバー時に表示されるツールチップとして「View full screen」が設定されました。

この変更により、godocのWebインターフェースにおいて、この「ポップアウト」ボタンのアイコンが、より情報豊かでアクセスしやすいものになりました。

コアとなるコードの変更箇所

--- a/doc/root.html
+++ b/doc/root.html
@@ -5,7 +5,7 @@
 <div class="left">
 
 <div id="learn">
-<img class="icon share" src="/doc/share.png">
+<img class="icon share" src="/doc/share.png" alt="View full screen" title="View full screen">
 <div class="rootHeading">Try Go</div>
 <div class="input">
 <textarea spellcheck="false" class="code">// You can edit this code!

コアとなるコードの解説

上記の差分は、doc/root.htmlファイルの5行目から7行目にかけての変更を示しています。

元のコードでは、<img>タグはclass属性とsrc属性のみを持っていました。これは、画像が表示されることだけを目的とした基本的な記述です。

変更後のコードでは、同じ<img>タグにalt="View full screen"とtitle="View full screen"という2つの属性が追加されています。

  • alt属性の追加は、この画像が視覚的に利用できない状況（例: スクリーンリーダーの利用、画像読み込み失敗）において、「View full screen」というテキストでその機能が説明されることを意味します。これにより、Webアクセシビリティが向上します。
  • title属性の追加は、ユーザーがこの画像にマウスカーソルを合わせた際に、「View full screen」というツールチップが表示されることを意味します。これにより、ユーザーはアイコンの機能をより迅速に理解でき、ユーザビリティが向上します。

この変更は、HTMLのセマンティクスとアクセシビリティのベストプラクティスに従ったものであり、godocのWebインターフェースの品質を高めることに貢献しています。

関連リンク

  • Gerrit Change-ID: https://golang.org/cl/5777071
    • これはGoプロジェクトがコードレビューに利用しているGerritシステム上の変更リスト（Change-ID）へのリンクです。Goプロジェクトでは、GitHubにコミットされる前に、Gerrit上でコードレビューが行われます。このリンクを辿ることで、このコミットに至るまでの議論やレビューの履歴を確認できます。

参考にした情報源リンク