HTML 中图像的 ALT 文本答案

【问题标题】：ALT text for images in HTMLHTML 中图像的 ALT 文本
【发布时间】：2010-11-13 10:23:41
【问题描述】：

我们正在开发一个拥有大量图片的网站，其中一项要求是为每张图片（JPG、JPEG、PNG、GIF 等）提供 ALT 文本。因此，每当 HTML 显示和图像时，该图像的 ALT 文本也会与 IMG SRC 一起写入 HTML。

在我们与开发人员讨论后，出现的解决方案是

1) 创建一个新表来保存所有这些图像名称。然后每次使用图像时都会完成数据库查找并添加适当的 ALT 文本。

2) 另一种解决方案是在每个文件中写入一些 EXIF 信息，每次使用它们时，都会根据需要读取文件的 EXIF 信息并将其添加到 HTML 中。

关于如何进行的任何建议。有很多图像，因此我们正在寻找服务器负载和加载时间最少的最佳解决方案。

附加信息 - 我们在服务器上运行 PHP 以选择图像等。

谢谢

【问题讨论】：

获取额外数据（在选项 1 中）是否需要额外调用数据库？换句话说，是否已经有与每个图像相关联的数据库记录，您可以简单地加入这个新表以获取 alt 数据？
是的，目前所有的图像文件都存储在文件系统中。不在数据库中。

标签： php html xhtml accessibility

【解决方案1】：

我会排除 EXIF，因为它不支持 PNG 和 GIF。

db 查找听起来不错（对我而言）并且可以扩展（只要您巧妙地做到了）。例如，您应该尽量减少查找。

您甚至可能已经拥有一些此类数据，并且无论如何拥有有关图像的数据会很有用

【讨论】：

【解决方案2】：

我建议将其存储在数据库中，因为我确信您必须维护这些图像的记录，向表中添加另一列几乎没有什么工作。此外，如果它在数据库中，您可以对 alt 文本执行搜索，以防您想要拥有这样的功能。

【讨论】：

【解决方案3】：

如果您不想给图片添加替代文字，it should be something that works correctly if the image is not there。

我不应该是“图片的替代文本”或“image.jpg”。相反，它应该类似于“Stackoverflow.com 有很多问题和答案”。显示 SO 屏幕截图时。但是，如果您的图片不能有一个有意义的替代文字，那么只需设置 alt=""，然后继续，有时不提供替代文字比提供一个错误的替代文字更好。

因此，您应该为每张意味着某事的图像存储替代文本，而不是放置无意义的替代文本（排除 EXIF 信息）。

【讨论】：

【解决方案4】：

如果您可以使用与文件名匹配的 alt 标签，则可以使用一些 javascript 来获取所有图像并根据文件名添加一个 alt 标签。

类似这样的：

    //get all the img tags
    var images = document.getElementsByTagName('img');    
    for (i=0;i<images.length;i++)
    {
      //get the filename from the src
      filename = images[i].src.substring(images[i].src.lastIndexOf('/')+1,images[i].src.lastIndexOf('.'));
      //do any formatting here
      filename = filename.replace('_',' ');
      //set alt/title tags
      images[i].setAttribute('alt', filename);
      images[i].setAttribute('title', filename);
    }

【讨论】：

很少有图像文件名能产生像样的替代文本。像样的 alt 能做出像样的标题文本就更罕见了。添加对客户端脚本的依赖也无助于解决上面提到的可访问性问题。

【解决方案5】：

我会避免使用选项 2，因为如果您想更新替代文本，则每次都需要写入图像文件，如果您想处理图像，例如。生成缩略图，元数据可能会丢失。

选项 1 似乎是最合乎逻辑的，如果您要从数据库中查询文件名，那么只需同时获取 alt 文本。

【讨论】：

【解决方案6】：

也许是第三种选择：

在文件名中存储 ALT 文本 :)

【讨论】：

是的，在某些情况下这将是一个很长的文件名:)
如果你没有正确引用的话，还有很好的文件系统级插入攻击。

【解决方案7】：

虽然这两种解决方案对我来说都很好，但关于所需负载的问题有点棘手：如果你从数据库中获取图像，我也会将 alt 标记值存储在数据库中。如果文件是从目录提供的，则取决于您是否使用数据库。如果您不使用数据库，则使用 EXIF 路径听起来是一个合理的选择，但可能会比使用额外的数据库产生更多的负载，因为您需要打开每个文件来检索 EXIF 数据。

简而言之，如果你已经使用了数据库，那就走数据库路线。

【讨论】：

【解决方案8】：

我建议使用数据库选项，因为如果必须以某种方式将图像与另一个图像切换（传输 EXIF 数据并非易事），EXIF 选项将成为一个问题，并且在每个请求上解析大量图像文件将是非常消耗资源。

但无论是使用数据库还是 EXIF 选项，我强烈建议您生成一个充当缓存的 php 文件，其中包含 image_name => alt_text 的关联数组，因为您不希望每个 30 个 sql 查询页面加载。 php 文件将作为引导程序包含在内，因此每个脚本都可以通过全局变量访问关联数组。

您将拥有一个生成此文件的脚本，因此每当更改 alt 文本时，您都可以轻松地重新生成包含关联数组的缓存文件。

【讨论】：

jhead 工具 (sentex.ca/~mwandel/jhead) 可以将 EXIF 数据从一个文件传输到另一个文件。

【解决方案9】：

诚实的问题：你真的需要创建一个新表吗？如果您仍然使用 PHP 上传机制，您不能简单地向数据库添加一个新字段并添加 alt 文本，然后根据需要将其链接为变量吗？ PHP 从那里将非常简单。只是一个想法！

【讨论】：

【解决方案10】：

如果您已经有一个数据库（我假设您有），那么不要添加一个全新的表，只需在您的图像所在的现有表中添加一列。然后，您可以使用填充页面的相同查询来获取所有信息。我相信这是最好的选择。

【讨论】：

【解决方案11】：

当您说“很多图像”时，我们指的是多少？几百还是几千？

如果你有数百个，我会创建一个包含 imagePath/altText 对数组的 PHP 文件。然后在您引用图像的任何位置包含此 PHP 文件。为了抽象实现，在 PHP 文件中有一个方法来返回给定完整图像路径的 altText。


$texthash = array(
  "/some/path/imageName.png" => "some alt text"
, "/some/path/imageName2.png" => "some other alt text"
);

function get_alt_text($imgpath) {
  return $texthash($imgpath);
}

这种策略速度很快，只要图像数量仍然相对较少，就不会减慢您的页面速度。唯一棘手的部分是确保在添加新图像时保持数组按图像路径排序。

一旦图像数量变得足够大以至于此方法会降低性能，请将信息移至数据库，并更改 PHP 文件中的方法以查询数据库。由于您已经抽象了实现，因此您不需要更改任何引用的 PHP 文件。

还要确保在 HTML 中使用 alt 文本之前对其进行 HTML 转义。

【讨论】：