如何创建网页的可访问设计

笔记本电脑的屏幕

在线商店,银行业务应用程序,酒店预订或自由职业,越来越多 通过互联网处理的任务 并且在某些情况下已经取代了传统媒体。

数字化业务的快速增长使我们更容易 多方面 生活。 由于交易速度更快,无需去任何实体机构,因此为我们节省了时间,当然, 创建了以前不存在的新媒体 现在大多数人都在使用诸如Netflix等平台上的社交网络,流电影和系列节目,或者诸如Paypal这样的在线支付系统。

随着数字世界的兴起,必不可少的 投资开发可访问性和设计良好的界面 对于用户。 但是,我们不能忘记 有些使用者有残障 身体或心理上极大地限制了他们的体验以及使用计算机和手机的能力。

尽管有些残障人士(例如使用轮椅的人)不会干扰互联网的使用,但其他残障人士(例如视力问题或失明,运动协调问题,耳聋或自闭症) 它们会严重妨碍您浏览网络的能力。 对于这些情况,已经创建了一些 设备 就像屏幕阅读器一样 协助和支持用户的人 在他们有残疾的地区。

但这仅仅是解决问题的第一步。 考虑到这些用户,我们必须 设计网页界面 有助于您的体验, 满足您的需求。 设计时需要遵循一些原则。

内容和来源

从最基础的开始,您必须 在内容设计中设置优先级。 标题和菜单栏必须在视觉上易于定位,并且必须是用户看到的第一件事。 主页上的元素,图像和相关信息将是第二个要查找的元素。

广告或广告横幅出现在许多页面上。 如果它本身对所有用户而言都是烦人的,那么对于视力障碍者来说,这是一个问题,因为它会引起很多混乱,并干扰网络图表的阅读。 这就是为什么您必须创建一个 一般社论设计 该页面的 逻辑组织 且易于理解,并且元素的大小也要适当调整,以便即使有其他干扰,用户也可以专注于重要内容。

您使用的字体 最好他们必须是 大而清晰。 方式 无衬线和粗体 对于患有阅读障碍症的人来说,它们使阅读变得容易得多。 其他推荐的字体有:Arial,Times New Roman,Helvetica,Tahoma,Calibri和Verdana。

当然,您应始终注意, 文字和背景。 不要使用相似的颜色,而是选择 对比色。

Sans Serif粗体字体

使用Sans Serif Bold字体可以更好地显示文本。

替代文字

El 替代文字或替代标签是图像上的描述 在网页上。 尽管此文本不可供用户阅读,但 写得很好的描述 是可以帮助我们实现更好的SEO定位的工具。

但是Alt标签的用途不仅限于此。 对于那些 使用屏幕阅读器的用户 对于视觉障碍,图像的描述为 他们必须知道外观的唯一参考 页面上显示的内容。 因此,如果我们要放置一些多肉植物的照片, 一个好的替代文本是: 桃红色罐的三多汁植物。 很短的文字,例如: 盆栽, 它不是提供相关细节的描述,因此不起作用。

肉质植物在粉红色的锅

桃红色罐的三多汁植物。 替代文字示例。

适应性

在设计时,我们还必须考虑所有 将在其中显示我们的界面的演示,无论在 网络或移动版本。 体验总是会有所不同,具体取决于我们所查看的媒体。

当我们使用手机时, 我们可能会暴露在不同的环境中 这使阅读困难 内容 的屏幕。 例如,如果我们在户外,太阳的亮度会使屏幕看起来非常暗,并且噪音将使我们无法很好地听到音频。 因此,必须仔细考虑这些细节,以便移动版本具有大写字母和深色,并且视频应带有字幕,以防难以听到。

手机屏幕

调整界面设计,以使其在手机和计算机上均可读取。

设计一致性

编辑设计 我们如何处理我们的网站 无论部分如何,都必须相同 你在哪与“联系人”部分中的“主页”部分中应显示相同的菜单栏图标。 我们一定不能改变风格 也不是网络上各个按键的位置。

对于我们来说放置自动播放的视频也不方便 打开页面时。 对于使用屏幕阅读器的用户,很难知道如何暂停它们。

星巴克网站

星巴克页面上的菜单栏在所有部分均相同。

键盘导航

最后,一些有运动协调问题的用户难以抓住计算机鼠标或使用笔记本电脑的触摸板,并且只能依靠键盘。 务必 您网站的设计方式 那可以完全 仅可通过键盘按钮使用。


发表您的评论

您的电子邮件地址将不会被发表。 必填字段标有 *

*

*

  1. 负责数据:MiguelÁngelGatón
  2. 数据用途:控制垃圾邮件,注释管理。
  3. 合法性:您的同意
  4. 数据通讯:除非有法律义务,否则不会将数据传达给第三方。
  5. 数据存储:Occentus Networks(EU)托管的数据库
  6. 权利:您可以随时限制,恢复和删除您的信息。