关于此课程

在这门课程里,你将亲身体验如何使网络应用具有无障碍功能。你将理解用户何时需要无障碍功能,为何需要。然后你将深入学习“如何”实现无障碍性:使网页能够使用屏幕阅读器,并能控制输入焦点(即用制表符浏览表格时能突出显示相关内容)。你将了解对于网页来说,“语义学”和“语义标记”是什么意思,并添加 ARIA 标记以便使用各种辅助设备来浏览界面。最后,你将学习一些样式技巧,帮助视力受损的用户轻松可靠地浏览你的网页。

学费
免费
学习时间
大约 6 周
难度
高级
你将获得

丰富的教学材料

互动随堂练习

业界专业导师

自主掌握进度

开始你的旅程

学习这门单项课程,迈出通往前端开发(进阶)职业道路的第一步。

单项课程

网站易用性

合作企业Google

通过创新性的自主学习方式,掌握新技能,提升竞争力。

Icon steps
 
 

课程讲师

Alice Boxhall

Alice Boxhall

讲师

Rob Dodson

Rob Dodson

讲师

Michael Wales

Michael Wales

优达学城讲师,课程策划

你将学到什么

课程 1

Overview

  • Learn why accessibility matters, and who it affects.
  • Get a first look at the web accessibility guidelines (WAI – Web Accessibility Initiative).
  • Understand “POUR” means for accessibility, and locate checklists to help make your own sites accessible.
课程 2

Focus

  • Learn how to make a page usable for anyone navigating with the keyboard.
  • An exploration of focusable elements.
  • Learn how to manage focus in forms, in custom components, pop-ups, and off-screen content.
课程 3

Semantics Basics

  • Make a page work for people who are unable to use a standard user interface.
  • Use a screen reader to try out ordinary form elements and add markup to make them work even better.
  • Understand the accessibility tree the browser constructs from the DOM.
课程 4

Semantics Extras

  • Dive deeper into the screen-reader experience to add hyper-fast navigation.
  • Learn how to arrange headings and label links so screen reader users can fly through your pages!
  • Call out “landmarks” into your page to speed up navigation even more.
课程 5

Semantics - ARIA

  • Move beyond the native elements of HTML into building custom controls and interactions.
  • Accessible Rich Internet Applications (ARIA).
  • Learn how to add attributes to your custom interactions to make them as accessible as native elements.
课程 6

Style

  • Learn the third pillar of Accessibility (after Focus and Semantics): Styling.
  • Highlight the focus, indicate ARIA states, zoomed in or out, and support limited color or contrast vision.
  • Audit your page with the Chrome Accessibility Tools and correct any styling issues that pop up.

先修知识及要求

学员应该了解 HTML、CSS 和 JavaScript。

查看使用优达学城的技术要求

为什么学习这门课程?

并非所有用户都能毫无障碍地使用应用。无论是年龄受限、视力问题、听力问题、截肢或其他障碍,每个人都应不受限制地使用你的应用。这门课程将介绍为何要使网络应用具有无障碍性,以及如何实现。此外,无障碍网站对所有人来说,都更易于使用!

我将获得什么?
教学视频随堂练习专业导师