Free Course

网站易用性

by
Google

怀着同理心去开发

开始学习
纳米学位项目

前端开发(进阶)

by Google

创造让人惊艳的前端用户体验

获得纳米学位证书,加速你的职业发展。

关于此课程

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

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

Rich Learning Content

Interactive Quizzes

Taught by Industry Pros

Self-Paced Learning

Student Support Community

开始你的旅程

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

免费课程

网站易用性

合作企业 Google

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

Icon steps 54aa753742d05d598baf005f2bb1b5bb6339a7d544b84089a1eee6acd5a8543d
 
 

课程讲师

Alice Boxhall

Alice Boxhall

讲师

Rob Dodson

Rob Dodson

讲师

Michael Wales

Michael Wales

优达学城讲师,课程策划

你将学到什么

lesson 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.
lesson 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.
lesson 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.
lesson 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.
lesson 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.
lesson 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。

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

为什么学习这门课程?

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

我将获得什么?
Instructor videos Learn by doing exercises Taught by industry professionals