より良いAltテキストを書く5つの方法

12858 ワード
html a11y webdev テキストリンク
この記事はもともと公開されたDevYarns . 閉じるこの動画はお気に入りから削除されています.
最小限に準拠したALTテキストを書くのは簡単です.そこにすべての何かをスティックし、自動化されたテストツールが幸せになります.しかし、あなたが実際に盲目のユーザーのための高品質の経験を提供することを気にするならば、ALTテキストを書くことは、より挑戦的です.
今日は、実際に意味のある効果的なALTテキストを書く練習を少し簡単にする5つのヒントを共有しています.
あなたがウェブ開発者でなくて、ちょうどより良いALTテキスト(例えば社会的メディアのために)を書く方法を知っていたいならば、あなたはこの記事でコードサンプルを飛ばしていくことができます.残りはまだ適用されます!
本稿では
  • Don't say "photo", "image," etc.
  • Focus on the image's purpose.
  • Use alt="" for decorative images.
  • Keep it brief.
  • Don't repeat yourself.

    • 「写真」「イメージ」などとは言わないでください。

    One of the most common mistakes I have seen is to start your alt text with something like "an image of". This creates a worse experience for screen reader users because screen readers already announce images as such. For example, VoiceOver for macOS reads the alt text first, followed by the word "image."

    Take the following possible alt text for a picture of a cat:

    Photo of a brown tabby cat curled up on the couch.

    The readout from VoiceOver will be something like, "Photo of a brown tabby cat curled up on the couch, image." While technically correct, announcing both "image" and "photo" is redundant and a worse user experience.

    Instead, try something like this:

    A brown tabby cat curled up on the couch.

    Or, in your HTML:

    <img src="myCuteCat.jpg" alt="A brown tabby cat curled up on the couch." />

    The readout would then be something like, "A brown tabby cat curled up on the couch, image." Much better, don't you think?

    Since there is usually an exception to every rule, I would argue that it might be helpful to identify the type of image something is, when it is important to the meaning. For example, if you are sharing a digital illustration of your cat, it might be appropriate to say so in the alt text, as long as the fact that the image is an illustration is relevant to the point you trying to make.

    画像の目的に焦点を当てる

    When composing alt text, it can be tricky to know what to write! You might think you need to describe literally everything in the image, but that's usually not the case.

    Instead, consider what the purpose of the image is, in context.

    Take the example of this photo of some knitting and a cup of coffee I tweeted the other day:
    これは私のつぶやきの内容だった.

    Today's up early, before work activity is knitting! I finished some short sleeves for a top and now I'm going to wind yarn for a hat.

    P.S. I really miss travel. 😭


    私のイメージに次のaltテキストを追加しました.

    Two flat pieces of knitting in front of a full coffee mug. The mug is the Vancouver edition of the Starbucks 'You Are Here' collection.


    この場合、イメージを共有する私の意図は私の編み物プロジェクトを示して、私が旅行を逃すと伝えることでした.私はバンクーバーのマグを朝から選んだ.私はそれが私が旅行を逃すことを伝えるのを助けたので、私のALTテキストでコーヒーマグについて説明しました.
    このイメージのもう一つの潜在的な目的を考えましょう!
    もしこれがプロモーションの写真の編み物や広告を手に染めた糸は、プロジェクトで使用されるか?Altテキストは次のようになります.

    A stockinette knitting project worked using a mostly pink variegated colorway with blue, darker pink, and purple speckles distributed evenly.


    それは写真の目的とは関係ないので、私はコーヒーのマグカップも言及しなかったことに注意してください.

    アイコン


    私は、特に、リンクとして使われるとき、彼らのALTテキストが何度も間違って行われるのを見たので、特にアイコンを呼び出したいです.
    私はTwitterのプロファイルへのリンクとして使用するTwitterのロゴのイメージを持って想像してください.このようなことをするべきだと思うかもしれませんが、そこではイメージAltテキストは「Twitterロゴ」です.
    <a href="https://twitter.com/rleggos">
  <img src="twitterLogo.png" alt="Twitter logo" />
</a>
    しかし、画面リーダーがこれを発表すると、読み取りは“リンク、Twitterのロゴ、画像のようなものになります.”どのように盲目のユーザーは、このリンクがどこにあるか知っている?
    このような場合、ALTテキストをリンクテキストとして考えるのがベストです.私が私のTwitterプロフィールにテキストリンクを作っていたならば、私は「Twitterロゴ」を書きません.代わりに、「My Twitter」のようなものを書くかもしれません.
    それで、より良いaltテキストは、以下のように「私のTwitter」であるかもしれません:
    <a href="https://twitter.com/rleggos">
  <img src="twitterLogo.png" alt="my Twitter" />
</a>
    あなたがアイコンフォントを使用していて、それらをラベルしているならば、同じ原則は適用されますaria-label , しかし、それはこの記事の範囲を超えています.

    装飾的なイメージのために

    The header image at the top of this post is a good example of a decorative image. It does not add any meaning to this post and it isn't necessary to understand this content. If it wasn't there, it wouldn't matter.

    The best way to handle alt text for decorative images is to include the alt attribute, but leave it blank, as in the following:

    <img src="decorativeImageFileName.png" alt="" />

    You might think you could just leave off the alt attribute altogether, but that would result in a worse experience for screen reader users. When the alt attribute is missing, most screen readers will read out the name of the image file. Users might be left wondering what they are missing.

    Including this alt attribute, but leaving it blank, lets screen readers know that the image is decorative and should be skipped over when reading the page. A screen reader won't tell the user anything about the image at all.

    キープイットブリーフ

    There is no technical limitation on the length of alt text. However, the generally accepted purpose of alt text is to provide a short description, so it's best to keep it brief.

    Since alt text is meant to be short, screen readers don't allow users to pause alt text and resume it where they left off. This means long alt text descriptions are bad for usability.

    There is no consensus for the optimal length of alt text, but a variety of online sources suggest lengths between 80 and 150 characters.

     Deque , 創造主axe , 今日の最も広く使われているアクセシビリティテストツールの一つです.recommends limiting alt text to about 150 characters . あなたがその長さを概念化するのを手伝う必要があるならば、彼らは古い学校140文字つぶやきのようにそれを考えることを提案します.

    あなたが長い説明を必要とするならば


    時には、短いAltテキスト記述であなたのイメージを完全に記述することができないかもしれません.この場合は、HTMLのどこかほかの記述を書くことができますaria-describedby .
    この例については、このスクリーンショットをWPCampus 2020 Online talk on website performance :

    私がこのスクリーンショットを含む内容を書いているならば、人々がスクリーンショットに含まれるすべてのテキストを読むことができることは重要です、私は若干の代わりのテキストを必要とするつもりです.しかし、私はすべてのものをalt イメージがあまりに長いので、属性.代わりに、情報を伝えるために無順序のリストを使用して、それを使用してイメージと関連付けるかもしれませんaria-describedby . ここでは、マークアップがどのように見えるかを示します.
    <img
  src="performanceScoreScreenshot.png"
  alt="Results of a Lighthouse performance audit."
  aria-describedby="audit-results"
/>

<ul id="audit-results">
  <li>Overall score: 63 out of 100.</li>
  <li>First contentful paint: 3.9 seconds.</li>
  <li>Speed index: 3.9 seconds.</li>
  <li>Largest contentful paint: 5.5 seconds.</li>
  <li>Time to interactive: 5.2 seconds.</li>
  <li>Total blocking time: 170 milliseconds.</li>
  <li>Cumulative layout shift: 0.308.</li>
</ul>
    さて、私audit-results リストは、私のイメージと画面の読者は、“ライトハウスのパフォーマンス監査の結果”を発表した後、追加の説明としてそのリストを読むことになるでしょう.
    もちろん、このソリューションはため息をつくユーザーにも見えます.視覚的にコンテンツを非表示にする方法がありますが、画面の読者には、このようなthose described by The A11y Project in their article on hiding content .
    しかしながら、この特定のケースでは、私はテキスト説明を視覚的なユーザーに利用可能にしておくことを勧めます.ユーザーの多くは、コンテンツを表示したり、視覚障害者を収容するコンテンツの色とコントラストレベルを変更するために支援技術を使用してズームのようなものを行います.これらのタイプのユーザーに最適なサービスを提供するには、テキストをイメージに含めるたびに、ため息をつくユーザーにも表示されるテキストの代替を含めることができます.
    重要な注意:使用する誘惑される可能性がありますaria-labelledby 代わりに、しかしない!ほとんどのスクリーン読者は優先順位を与えるaria-labelledby オーバーalt , 読む意味aria-labelledby Altテキストの代わりに、それに加えてではなく.

    自分を繰り返すな

    This commonly cited programming advice is good for alt text, too.

    Let's revisit my knitting and coffee mug photo tweet from above.
    つぶやきテキスト:

    Today's up early, before work activity is knitting! I finished some short sleeves for a top and now I'm going to wind yarn for a hat.

    P.S. I really miss travel. 😭


    テキスト

    Two flat pieces of knitting in front of a full coffee mug. The mug is the Vancouver edition of the Starbucks 'You Are Here' collection.


    編み物が平らであること(ラウンドで働いていることとは対照的である―私のつぶやきに遭遇するかもしれないどんな編み物にでも意味がある区別)であると言う以外に、私はALTテキストで編み物を説明しませんでした.
    私のつぶやきは、すでにプロジェクトが短い袖のペアだと言うので、それを繰り返す必要はありません.実際には、画面リーダーが同じ情報をユーザーに2回発表した場合、それはより悪いユーザの経験になります.

    結論


    これらの5つのヒントは、次の時間を覚えて画像を共有する.
  • “写真”、“画像”などとは言わないでください.
  • 画像の目的に焦点を当てる.
  • 用途alt="" 装飾的なイメージのために.
  • 簡単にしておきなさい.
  • 自分自身を繰り返すな.
    • ちょうどつぶやきやInstagramのキャプションを書いている場合でも、ウェブサイトを構築する、これらのヒントを適用します.我々はすべての品質のALTテキストを書く練習すると、我々はより包括的なWebを一緒に作成することができます.❤️

    更なる読書


    詳細と追加の例については、チェックアウトWebAIM article on alternative text .
    rails sをするとCould not find a JavaScript runtime.が出てきてしまう時の対処法
    Props