概观
HTML5 现在允许 <svg>和<math>标记HTML文档而不依赖于外部命名空间(这里的体面概述).两者都有自己的 - alt属性类似物(见下文),今天的屏幕阅读器软件实际上忽略了它们.因此,盲人用户无法访问这些元素.
是否有计划为这些新元素实施标准的alt-text约定？我已经仔细检查了文档并且已经干了!
更详细信息
关于SVG: SVG的替代文本可以被认为是根title或desc标记的内容.
<svg>
<title>An image title</title>
<desc>This is the longer image description</desc>
...
</svg>
我找到了一个读取它的屏幕阅读器,但这个标准是什么？以前插入SVG的方法也存在可访问性问题,因为<object>标签被屏幕阅读器视为不一致.
关于MathML: MathML的替代文本应存储在alttext属性中.
<math alttext="A squared plus B squared equals C squared">
...
</math>
由于屏幕阅读器似乎不承认这一点,因此数学呈现库MathJaxaria-label在运行时将文本插入属性中.
<span aria-label="[alttext contents]">...</span>
不幸的是,NVDA,JAWS和其他人也无法可靠地阅读这些标签.(有关WAI-ARIA的更多信息)
关于两者:在很大程度上不支持ARIA属性方面缺乏成功,我尝试使用title属性.这些"外来"HTML元素似乎也被忽略了.
包起来
不仅仅是快速破解,我正在寻找在这些新HTML元素上放置替代文本的推荐方法.也许有一个我忽略的W3C规范？或者它还处于游戏的早期阶段？
我们有一个关于Web可访问性合规性的项目.从发布开始大约一周后,我们让无障碍委员会审查我们的网站,以给予最后的赞许.然而,他们向我们报告说,我们应该在我们的一些图标上设置alt ="",因为它们不向网站提供任何额外的内容,因此仅仅分散了屏幕阅读器的注意力,但没有产生任何好处.
评论表示赞赏.
我希望使用JQuery而不是普通的JavaScript更改几个图像,并同时更改图像alt属性以便访问.
它应该是容易的,因为我不打算对变化做一些特殊的影响,但我仍然没有找到任何关于它的东西.
这是我使用JS的方式(不更改alt属性):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Change Image using Javascript</title>
<script type="text/javascript">
function changeImg(image_id, image_folder){
document.getElementById(image_id).src = image_folder;
}
</script>
</head>
<body>
<div align="center">
<img id="image1" src="images/nameofthesubfolder/originalimage1.jpg" alt="Original Image 1" />
<br />
<label><input type="radio" name="radio_btn1" onclick="changeImg('image1', 'images/nameofthesubfolder/image1.jpg')"/>Image 1</label>
<label><input type="radio" name="radio_btn1" onclick="changeImg('image1', 'images/nameofthesubfolder/image2.gif');"/>Image 2</label>
<label><input type="radio" name="radio_btn1" onclick="changeImg('image1', 'images/nameofthesubfolder/image3.png');"/>Image 3</label>
<label><input type="radio" name="radio_btn1" onclick="changeImg('image1', 'images/nameofthesubfolder/image4.jpeg');"/>Image 4</label>
<br />
<br />
<img id="image2" src="images/nameofthesubfolder/originalimage2.jpg" alt="Original Image 2" />
<br />
<label><input type="radio" …我有一个由css样式设置为100x75的图像.如果未加载,则alt文本会加载到空间中,但会将容器扩展到100px以上的宽度.
我怎么能阻止这个？切断或包裹它.
这个问题完成了我在这里问到的第一个关于如何使用jQuery更改点击图像的问题.
我忘了说(即使我后来编辑了我的帖子)我正在寻找一种方法,每次通过点击更改图像时都有不同的alt属性.
(这是为了更好的可访问性和SEO优化.)
以下是感谢altCognito的实际html代码:
<img id="radio_btn1" src="originalimage1.jpg" />
<br />
<input type="radio" name="radio_btn1" value='image1.jpg' />
<input type="radio" name="radio_btn1" value='image2.gif' />
<input type="radio" name="radio_btn1" value='image3.png' />
<input type="radio" name="radio_btn1" value='image4.jpeg' />
和jquery:
imgFldr = 'images/nameofthesubfolder/';
$("input[type='radio']").click(function() {
$('#'+this.name).attr('src', imgFldr+this.value).attr('alt', 'newattribute');
});
它可以在jsbin上编辑.
我正在使用<picture>标签。我的目标群体使用现代浏览器，因此只要Firefox 支持 WebP，就无需使用该<img>标签。
现在：
<picture>
<source srcset="image-200px.webp 1x, image-400px.webp 2x" type="image/webp">
<img src="image-200px.jpg" alt="Description">
</picture>
很快：
<picture>
<source srcset="image-200px.webp 1x, image-400px.webp 2x">
</picture>
有没有办法在不使用标签时实现alt属性？<picture><img>
所以我有这个PHP脚本输出一个html表,其中包含一些文件的数据(如文件名,文件大小等...)
我有这个javascript函数,当你悬停属于"预览"类的标签时显示图片.例如,如果文件名是:somePic.jpg,当您将somePic.jpg悬停在表格中时,图片将显示在鼠标旁边.
现在不是所有这些文件都是图片,有些是.mp3,所以当你悬停它们时,javascript无法显示图片.为了处理这种情况,我添加了标签(由javascript函数生成),alt属性:alt ='预览不适用于此类内容.
这是我的问题,有时它有效,但有时却不行!有时您开始悬停.mp3链接,并显示alt属性,然后您将鼠标悬停在图片上,显示图片,然后再次悬停.mp3,并且不再显示alt,但"已损坏的图像"图像(显示小红十字)代替......
当然,我可以解析文件名并检测它何时是mp3,然后处理案例,但我认为alt属性是为了实现这一目标...但它是错误的......
任何的想法？有人已经遇到过这个问题吗？