Html 中高音？朗迪斯？标题什么会去哪里，特别是对于图像密集型站点？_Html_Image_Seo_Accessibility_Alt

Html 中高音？朗迪斯？标题什么会去哪里，特别是对于图像密集型站点？

html image seo

Html 中高音？朗迪斯？标题什么会去哪里，特别是对于图像密集型站点？,html,image,seo,accessibility,alt,Html,Image,Seo,Accessibility,Alt,因此，我一直在努力使我的网站尽可能容易访问（对于非JavaScript用户、网络爬虫、屏幕阅读器等），我遇到了一个很大的障碍我正在开发的网站非常形象化。（我在业余时间画一些愚蠢的东西，网站就像一个“展示”一样。）网站中的每个页面都有一个单独的图片（或者多个，如果需要上下文，或者图片是多个面板的话），下面通常有一个标题。因此，当我不得不添加可访问性选项时，我不知道该怎么办。例如，假设我有一个男人吃苹果的图像，笑话是里面有一条虫子。所以我做的第一件事就是添加一个可笑的描述性alt文本，因为这是为屏

因此，我一直在努力使我的网站尽可能容易访问（对于非JavaScript用户、网络爬虫、屏幕阅读器等），我遇到了一个很大的障碍

我正在开发的网站非常形象化。（我在业余时间画一些愚蠢的东西，网站就像一个“展示”一样。）网站中的每个页面都有一个单独的图片（或者多个，如果需要上下文，或者图片是多个面板的话），下面通常有一个标题。因此，当我不得不添加可访问性选项时，我不知道该怎么办。例如，假设我有一个男人吃苹果的图像，笑话是里面有一条虫子。所以我做的第一件事就是添加一个可笑的描述性alt文本，因为这是为屏幕阅读器提供“等价物”的唯一方法

<img src="appleeat.png" alt="A man bites into an apple. As it turns out, there's a worm in it!">

起初这似乎还可以，但后来事情很快就出了差错，我突然发现自己需要添加多达300个字符的alt文本（！！！）以获得更复杂的笑话和图像。不仅如此，很显然

所以我有这些问题：

Alt text表示等价物，而不是描述。但是，在这种情况下，提供等价物的唯一方法是提供描述

longdesc

似乎更适合这一壮举，但任何浏览器都不支持

longdesc

（至少根据W3Schools的说法是这样的）

似乎是一个不错的选择，但它最终会在有问题的图像下显示文本，这对我的网站来说肯定不是很有吸引力，尤其是如果我想在

标签或其他东西中添加额外的标题和上下文

那我该怎么办？我会放什么，放在哪里？我完全被这个问题难住了，坦率地说，我不确定完全基于图像创建一个网站是否是一个好主意。

我认为在

中添加描述性文本是一个好主意。当然，浏览器支持存在问题，这应该可以通过CSS解决：

figcaption{display:block；}

然后，您可以在默认情况下隐藏此文本figcaption{display:none；}并在某个位置包含一个链接，该链接将使用通过另一种样式显示的标题刷新页面-

figcaption{display:block；}

然后，该选项消除了对javascript解决方案的需要，只为那些专门请求它们的人提供标题

您可以使用一点php来设置：

<head>
    <style type="text/css">
        <?php if(isset($_GET['CaptionDisplay']))
            {
                echo 'figcaption { display: block; }';
            }else{
                echo 'figcaption { display: none; }';
            }
        ?>
    </style>
</head>

HTML链接-

这完全出乎我的意料：）让我知道我是否能更好地解释任何事情。

属性

alt

用于替代文本，即图像的文本替换，因此在示例中，如果它合理地讲述了与图像相同的故事，就足够了。在现实中，大多数图像不能有完整的“替代品”或“替代品”文本；如果可能的话，通常需要捕获一些最重要的信息

alt

文本可以是任意长度。

alt

文本不应作为描述的声明并不意味着如果需要就不能详细说明。关键是，有太多的描述是在没有传达信息的情况下谈论某个图像（如“大红子弹”或“独木舟上的人”）

一些软件支持

longdesc

属性，但争议很大，它不是W3C HTML5 CR的一部分，而是作为一个独立的“扩展”开发的

figcaption

元素用于与图像一起显示的标题。它根本没有解决备选案文的问题。无论用户是否看到图像，它都要呈现给用户。

如果您想提供复杂的替代文本（“复杂”可能意味着：包含列表、表格、音频/视频等），您可以使用带有

longdesc

属性的

img

元素，或者是

对象

元素，而不是

img

longdesc

在HTML4.01中，是规范的一部分。在HTML5中，它被删除了，现在被开发为一个（但它是更新的：）
问题：您可能必须在同一页面上包含内容，但不应在视觉上隐藏它（因为不仅屏幕阅读器用户可能希望访问此内容）。或者，您必须为内容添加单独的页面（但搜索引擎不会将此内容与图像关联，也就是说，您错过了排名潜力）

对象
可用于任何类型的媒体。它的内容是回退内容，允许您对备选文本使用标记

<object data="appleeat.png" type="image/png">  <p>A man bites into an apple. As it turns out, there's a worm in it!</p> </object>

一个人咬苹果。事实证明，里面有条虫子
以下是一些可能适用于您的情况的alt文本讨论：

虽然我同意长的alt文本本身不是问题。确实，“alt text不用于描述”，但这只是因为alt text用于等效内容。如果某个特定图像的等效内容是对它的描述，那么就可以了
只是对于网络上使用的大量图像来说，这是不正确的。例如，此页面顶部堆栈溢出徽标的最佳alt文本不是
Stack Overflow徽标：纸盘中的摘要溢出，后跟单词“Stack”，粗体为单词“Overflow”
这只会是“堆栈溢出”，因为这为视力不全的人提供了同等的体验（即，它告诉他们在哪个网站上）
但如果你的图像是卡通，我想为它们编写alt文本有点像为电影做音频描述。如果你想的话，你需要更具描述性
<figure aria-labelledby="myimage1" > <img id="image1" src="myimage.jpg" width="100" height="100" alt="image:My Image" title="Image of Something Cool" /> <figcaption id="myimage1">This is My Image Caption!</cite></figcaption> </figure>

<div role="img" aria-labelledby="myimage2"> <img id="image2" src="myimage.jpg" width="100" height="100" alt="image:My Image" title="Image of Something Cool" /> <p id="myimage2">Larger description of my image...</p> </div>