谷歌网页审计中用户可用性及最佳操作实践包含哪些内容？

通过谷歌网页审计工具LightHouse能够对网页设计质量进行评估，该审计工具可安装在Chrome浏览器中。

这里我们讨论审计中的两个重要项目：用户可用性和最佳操作实践。

用户可用性包括：

1、网站按钮是否使用了可访问的名称；

2、文档是否具有标题元素：标题元素不仅关系用户可用性，同时也关系搜索引擎，搜索用户严重依赖文档标题。它通常决定页面是否与查询相关；

3、每个表单都要有一个标签：标签明确了表单元素的用途。虽然每个元素的用途对于有视力的用户来说都是显而易见的，但对于依赖屏幕阅读器的用户来说，没有标签无法明白这个表单；

4、每个图像元素都有alt内容：图像信息应具有alt属性，该属性包含该图像内容的文本描述。屏幕阅读器允许视障用户通过将文本内容转换为他们可以使用的格式（如合成语音或盲文）来使用您的网站。屏幕阅读器无法转换图像；

5、不要有“tabindex”属性大于0的元素。

最佳操作实践包含：

1、不使用应用程式缓存（AppCache）；

2、避免在自己的脚本中使用console.time()；

3、不使用date.now()来度量时间，请改用performance.now()；

4、避免使用不推荐的API；避免使用document.write()：对于连接速度慢的用户，如2G、3G或Wi-Fi速度慢的用户，通过document.write() 动态注入的外部脚本将使网站主页内容的显示延迟数十秒；

5、避免在自己的脚本中发生突变事件；

6、避免使用旧的CSS FlexBox，它比最新规范慢2.3倍；

7、避免在页面加载时请求地理位置权限：用户对页面加载时自动请求其位置的页面感到困惑并产生不信任。与其在页面加载时自动请求用户的位置，不如将请求与用户的操作联系起来，比如设置“查找我附近的商店”按钮。确保网页明确地表达了对用户位置的需求。

8、避免在页面加载时请求通知权限：好的通知是及时、相关和精确的。如果您的页面请求在页面加载时发送通知的权限，那么这些通知可能与您的用户无关，或者与他们的需求不完全相关。更好的用户体验是向用户发送特定类型的通知，并在用户选择加入后显示权限请求。

9、显示具有不正确纵横比的图像：如果渲染图像的纵横比与源文件中的纵横比（“自然”纵横比）有显著不同，则渲染图像可能看起来失真，可能会造成不愉快的用户体验；

10、包含具有已知安全漏洞的前端javascript库：入侵者拥有自动的网络爬虫，它扫描您的网站来查找安全漏洞。因此您的网站遭受到攻击的危险性很大。

11、防止用户粘贴到密码字段：一些网站声称阻止用户粘贴密码可以提高安全性。国家网络安全中心（NationalCyberSecurityCentre）认为此说法没有根据。密码粘贴提高了安全性，因为它允许用户使用密码管理器。密码管理器通常为用户生成强密码，安全地存储它们，然后在用户需要登录时自动将它们粘贴到密码字段中。

12、将不安全的资源升级到https：当安全（https）站点请求不安全（http）资源时，称为混合内容错误。默认情况下，某些浏览器会阻止不安全的资源请求。如果您的网页依赖于这些不安全的资源，那么当它们被阻塞时，您的页面可能无法正常工作。

13、使用HTTPS：所有网站都应该使用https进行保护，即便是那些不处理敏感数据的网站。HTTPS防止入侵者篡改或监听站点和用户之间的通信，还有更多作用。

14、使用HTTP/2传输资源：HTTP/2 可更快地提供页面的资源，并且可减少通过网络传输的数据。

15、网站使用 rel=”noopener” 打开外部锚：以前使用target=”_blank”指向另一个网站时，外部网页将与您的页面在同一个进程上运行。如果这个指向的网站有庞大的JavaScrip运行，将影响您的网站运行；

16、网站使用被动事件侦听器以提升滚动性能。

由此可见，一个高质量的网站不仅仅是漂亮的外观，快速打开的网站性能，还有以上这些大众视觉辨别不到的细节。

（来源：newloong）

以上内容仅代表作者本人观点，不代表雨果网立场！本文经原作者授权转载，转载需经原作者授权同意。