Web 无障碍设计指南:如何为你的网站打造全盲用户可用的设计?

阅读时长 4 分钟读完

什么是无障碍设计

无障碍设计是指为所有用户提供可访问的、易于理解的、易于操作的网站。 网络无障碍可以让那些使用屏幕阅读器、键盘导航、语音识别等辅助技术的用户,更好的浏览和使用网站。

通常,网站上的元素实际上可以按照可读性的程度分为以下几类:

  • 声音和视频文件
  • 文本
  • 图像(有一个文本变体)
  • 链接
  • 表格
  • 表单

因此,无障碍设计通常将网站元素的书写和结构等方面优化,以使其易于辅助技术获取和响应,允许用户轻松访问它们。

全盲用户如何使用网站

对于完全盲的用户,通常使用屏幕阅读器,以帮助他们阅读网页上的内容。屏幕阅读器声音化显示文字内容,使得盲人在网页上可以使用它们来浏览页面内容。 如果您想为您的网站打造完全适用于全盲用户的设计,请遵循以下几个关键点:

1. 使用适当的 html 标记:

网页只有使用正确的HTML,才能被用户上网者和屏幕阅读器稳定性地读取。您的HTML需要具体化表格、表单、标题、列表等元素,从而使得屏幕阅读器可以读懂和正确理解该网页的结构和内容。

-- -------------------- ---- -------
---- ----------- ---
---- --- --------------------------------
---- -------------

---- ---------- ---
-------
  -----------------------
  -------
    ----
      --- -------------------
      --- ---------------------
      --- -------------------
    -----
  --------
  -------
    ----
      --- -------------------
      ----------------
      ------------------------
    -----
  --------
--------

---- ------------- ---
----
  -------------
  ----------------------------

  --------------
  -----------------------------------------------
-----

2. 使用描述性的链接文本

描述性链接可以帮助盲人使用网页内容,因为链接的文本内容很可能是该链接所指向页面或者资源的下一个步骤或导航的提醒。 关键点在于使用带描述性文本的链接,而不是一些像“点击这里”这样的无意义链接。

3. 使用标题和标题标记

标题和标题标记让全盲用户更容易找到网页内容的主题,这有助于他们完成目标和网页浏览。 大多数屏幕阅读器和浏览器都支持使用"标题"来进行元素分级,通常情况下 h1 最多出现一次,h2-h6 用于划分子级标题。

-- -------------------- ---- -------
---- --- ------ ---------
   
   -------------- ------
   
   ------------- 
   
   ---- ----------------- 
   
   ---- --- -- --- -- -- -------- ------

4. 避免使用flash

由于flash无法被屏幕阅读器及时读取,盲人用户无法使用 flash 传达的信息,因此应尽量避免使用flash。

5. 适当清晰的标记文本属性

所有显示的表格、链接、图像和页面其他元素都应该给予清晰的命名和对应的属性,以便于隐藏元素和无障碍工具对元素的识别和理解。

结论

无障碍设计能让您的网站更直观和易于访问,且将其适应于辅助工具使用者,这包括全盲用户,这将有助于您扩大您的受众群体。使用合适的HTML标记、描述性的链接文本、使用恰当的标题及妥善标记您网页的所有元素,是实现无障碍设计的关键。

This is a article about how to create a fully accessible web page design for blind users, by using appropriate HTML tags, descriptive link texts, clear labeling of text attributes and other important features!

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/66f6e857c5c563ced58d07ff

纠错
反馈