HTML元素的可用性

2020-10-11 20:40:36

上周,我在Maps for the Web研讨会上做了一次演讲。作为讨论的一部分,我谈到了一些HTML元素对开发人员来说非常容易使用和理解,而另一些则很难。

我不知道有任何关于这方面的正式研究-我所拥有的只是我作为HTML的用户和教师的经验。如果你知道有谁更深入地调查过这件事,我很想知道。

让我们看一下将多媒体添加到页面的<;video>;和<;dio>;元素。

<;音频控件<;source src=";myAudio.mp3";type=";audio/mpeg";>;<;source src=";myAudio.ogg";type=";dio/ogg&34;>;p>;您的浏览器不支持HTML5音频。此处是指向音频<;/a>;的a<;a href=";myAudio.mp4&34;>;链接。<;/p>;<;/音频>;

<;video control width=";250";>;source src=";myVideo.mp4";type=";video/mp4&34;>;source src=";myVideo.webm";type=";video/WebM&34;>;<;p>;您的浏览器不支持HTML5视频。此处是指向视频<;/a>;的a<;a href=";myVideo.mp4;>;链接。<;/p&>;<;/video>;

语法非常清楚-如果您使用过<;img>;,就会知道src=是什么。一旦您学会了如何使用其中一个,另一个几乎是相同的。它们支持的事件列表是相同的。想象一下,如果<;音频>;用于播放,而<;视频>;用于相同的功能,那将是一场噩梦!

<;图片<;源资源=";mdn-logo-wide.png";media=";(最小宽度:600px)&34;>;<;源资源=";徽标-768.png 768w,徽标-768-1.5x.png 1.5x&34;>;<;源资源=";徽标-480.png,徽标-480-2x.png 2x";>;<;IMG src=#34;LOGO-320.png";alt=";LOGO";>;<;/Picture>;

为什么使用srcset?这与src有什么不同?为什么空格很重要?如果我省略逗号怎么办?为什么媒体中会有类似CSS的语法?W和x是什么意思?

当然,您可以通过阅读规范来了解这一切-但它与<;img>;和<;video>;元素有根本的不同。它强大吗?好的!。它容易学习和使用吗?我不这样认为。

也许我对<;Picture>;挑剔是不公平的。从我的经验来看,这对新手和有经验的开发人员都是令人困惑的。

对于规范的任何扩展,我们都需要考虑作为用户的开发人员将如何与新功能交互。

我不知道在<;video>;元素发布之前是否进行过用户调查。但我确实知道,例如,许多用户想要的不仅仅是控件的二进制开/关。

当我们考虑在HTML中添加地理地图时,我们必须创建一些对高级用户有用的东西。但对于苦恼的开发人员来说,这也必须是有用的,因为他们的老板大喊“只需在网站上添加A&F$*&;ING地图就行了!”

非英语国家的人知道经度和纬度指的是纬度和经度吗?开发人员知道zoom=0表示放大还是缩小吗?

这些只是我脑海中的一些例子。我相信你能想到其他人。

我恳请您,温和的读者,在将新事物引入规范之前,要做一些用户研究。不要只是问办公室周围的人,而是要走出去,与世界各地的用户交谈,了解您的提案如何让他们的生活变得更轻松。