HTML中图像的ALT文本

时间:2009-07-23 15:08:22

标签: php html xhtml accessibility

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

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

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

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

有关如何进行的任何建议。有很多图像,所以我们正在寻找最佳解决方案,在服务器和加载时间上负载最小。

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

由于

11 个答案:

答案 0 :(得分:3)

我排除了EXIF,因为它不支持PNG和GIF。

db查找听起来没问题(对我来说)并且可以扩展好(只要你巧妙地做到了)。例如,您应该尝试尽可能减少查找。

您甚至可能已经拥有了一些这样的数据,并且无论如何都能获得有关图像的数据

答案 1 :(得分:2)

我建议将其存储在数据库中,因为我确定你必须保留这些图像的记录,向表中添加另一列是很少的工作。此外,如果它在数据库中,您可以在alt文本上执行搜索,以防您想拥有这样的功能。

答案 2 :(得分:2)

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

我不应该是“图像的替代文字”或“image.jpg”。相反,它应该像“Stackoverflow.com有很多问题和答案”。在显示SO截图时。但是,如果你的图片不能有一个有意义的替代文字,那么只需要使用alt =“”,然后继续前进,有时候最好不要给出替代文字而不是给出一个糟糕的替代文字。

正因为如此, 应为表示某些内容的每个图片存储替代文字,而不是放置无意义的替代文字(排除EXIF信息)。

答案 3 :(得分:1)

如果你可以使用与文件名匹配的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);
    }

答案 4 :(得分:0)

我建议使用数据库选项,因为如果某个图像必须与另一个图像切换(传输EXIF数据并不简单),EXIF选项将成为一个问题,再加上每个请求上的大量图像文件解析非常耗费资源。

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

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

答案 5 :(得分:0)

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

选项1似乎最合乎逻辑,如果您要查询数据库中的文件名,那么只需同时获取替代文字。

答案 6 :(得分:0)

也许是第三种选择:

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

答案 7 :(得分:0)

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

简而言之,如果您已使用数据库,请转到数据库路径。

答案 8 :(得分:0)

诚实的问题:你真的需要创建一个新表吗?如果你正在使用PHP上传机制,你不能简单地向数据库中添加一个新字段并添加替代文本,然后根据需要将其链接为变量吗?从那里PHP将非常简单。只是一个想法!

答案 9 :(得分:0)

如果您已经拥有一个数据库(我认为您这样做了),那么就不要添加一个全新的表,只需在图像所在的现有表中添加一列即可。然后,您可以使用填充页面的相同查询获取所有信息。我相信这是最好的选择。

答案 10 :(得分:0)

当你说“很多图片”时,我们谈论了多少?数百还是数千?

如果您是数百个,我只需创建一个包含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转义alt文本。