-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathSpeech Notes:
125 lines (83 loc) · 5.39 KB
/
Speech Notes:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
Speech Notes:
---------------------------------------------------------------------------------------------------------------------
INTRO:
---------------------------------------------------------------------------------------------------------------------
Good Afternoon Everyone.
My Name is Nancy Pang and I'm an intern on the Platform Accessibility Team.
I'd like to start off my presentation talking about Ramps.
Ramps
It's a structure we've all seen.
They've existed since 2600 B.C.E, an essential tool created by the Ancient Egyptians to improve the accessibility of stone blocks.
Ramps allowed massive stones to be raised and transported easily making the construction of The Great Pyramid of Giza, a World Wonder, possible.
The Ancient Egyptians realized the impact of accessible design, it made life easier and dreams possible.
As Tim Cook says:
"Accessibility rights are human rights"
Fast forward to today and accessiblity is becoming more ingrained in our culture.
Many states and provinces businesses have an obligation to make their facilities accessible by law.
The web is relatively new and doesn't have the same rigourus laws/restrictions that the physical world has.
According to WHO "About 15% of the world's population lives with some form of disability"
To put that number in perspective that's about 1 billion people.
1 billion people who have a difficult time understanding, navigating, and interacting or contributing to the Web.
That's a huge loss of human potential and this number is only growing as people age motor skills, vision and hearing degrade.
---------------------------------------------------------------------------------------------------------------------
PROJECT:
---------------------------------------------------------------------------------------------------------------------
This summer I had the oppurtunity to make Firefox Devtools more Accessible and learned a new way to navigate the web.
Worked on bug fixes to improve the sightless navigation of devtools and created a tool to help developers improve their accessible design.
---------------------------------------------------------------------------------------------------------------------
SIGHTLESS WEB
---------------------------------------------------------------------------------------------------------------------
What do we do when we visit a site we're not familiar with?
- Use Keyboard to navigate to different areas on the page. Using the Tab key will focus on a different area.
- When the keyboard focuses on an area
-a screen reader, a computer program that turns text into speech, will read out info about the area
To give you a better idea of what this is like, I'll simulate a screen reader.
Try to form an image in your head.
Search Button
Featured Link
News Link
Music Link
Sports Link
Did you imagine a navigation bar?
This is actually Twitter's navigation bar.
The screen reader read out important information like:
name, role, actions were inferred from the role
The quality of your accessible design is related to the information provided by the screen reader.
---------------------------------------------------------------------------------------------------------------------
TOOL:
---------------------------------------------------------------------------------------------------------------------
Now if only there was a TOOL for developers where they can inspect areas of a website and predict what the screen reader would read out?
A tool that developers could use to improve the accessible design of their site.
Wouldn't that be USEFUL?
Workflow of Tool:
Select element on page, show properties like name, role, actions.
---------------------------------------------------------------------------------------------------------------------
USE CASES:
---------------------------------------------------------------------------------------------------------------------
Examples of how you can use the tool.
Search:
Fixed by aria-label
Image:
Fixed by putting name in alt
Dropdown:
has-pop
---------------------------------------------------------------------------------------------------------------------
What'S NEXT
---------------------------------------------------------------------------------------------------------------------
Make this tool accessible.
Developer's who are impaired visually can quickly identify elements on a page.
---------------------------------------------------------------------------------------------------------------------
THANK YOU:
---------------------------------------------------------------------------------------------------------------------
University Team: Giving me this oppurtunity
Other Interns: Making the experience so much fun
Mozillian Community: Supporting and encouraging us
David being an awesome manager, Yura for being an amazing mentor.
---------------------------------------------------------------------------------------------------------------------
GOODBYE
---------------------------------------------------------------------------------------------------------------------
This is not goodbye, I'm walking away from this experience as a Mozillian
and will continue to support Mozilla's Mission after my internship.
---------------------------------------------------------------------------------------------------------------------
QUESTIONS?
---------------------------------------------------------------------------------------------------------------------