Inherently Accessible Web: Rachele DiTullio's Expertise
The Web is
Inherently Accessible
Rachele DiTullio
Accessibility Engineer
Rachele DiTullio
•
2000
: First job as a web
developer
•
2009-2012
: Master of
Science degree with
specialization in User
Experience Design
•
2019-2020
: Certified
Professional in Web
Accessibility
•
2021
: Accessibility
Engineer
P
r
o
n
o
u
n
s
:
s
h
e
/
t
h
e
y
Agenda
Overview
What is web accessibility?
Semantics
Headings
Form labels
Buttons and links
Tables
Images
Web accessibility provides an inclusive experience
What is web accessibility?
Web accessibility is the extent to which a website or web
application can be used by
disabled people
.
Web Content Accessibility Guidelines
Perceivable
Operable
Understandable
Robust
W
C
A
G
V
e
r
s
i
o
n
s
•
2.0
•
2.1
C
o
m
p
l
i
a
n
c
e
L
e
v
e
l
s
•
A
•
AA
•
AAA
S
u
c
c
e
s
s
c
r
i
t
e
r
i
a
:
5
0
Did you know?
The WCAG guidelines were
first published in
1999
.
Semantic Markup
N
a
t
i
v
e
H
T
M
L
e
l
e
m
e
n
t
s
<
l
a
b
e
l
f
o
r
=
"
"
>
<
/
l
a
b
e
l
>
<
a
h
r
e
f
=
"
"
>
<
/
a
>
+
A
R
I
A
<
b
u
t
t
o
n
i
d
=
"
"
a
r
i
a
-
e
x
p
a
n
d
e
d
=
"
f
a
l
s
e
"
>
.
.
.
<
i
n
p
u
t
t
y
p
e
=
"
"
a
r
i
a
-
r
e
q
u
i
r
e
d
=
"
t
r
u
e
"
>
.
.
.
CodePen example
https://
tinyurl.com
/
LonghornHTML
Headings
Headings
break up
content into meaningful
sections.
Screen readers can
navigate headings.
<
h1
>Accessible Web</
h1
>
...
<
h2
>Semantics</
h2
>
<
h3
>Headings</
h3
>
<
h3
>Form labels</
h3
>
<
h3
>Buttons & links</
h3
>
<
h3
>Tables</
h3
>
<
h3
>Images</
h3
>
<
h4
>Alt text</
h4
>
<
h4
>SVG</
h4
>
<
h4
>Charts & maps</
h4
>
Form Labels
Labels
provide visible
and accessible names
to form inputs when
they are
programmatically
linked.
<form>
<
label
for="email"
>Email</
label
>
<input type="email"
id="email"
autocomplete="
email">
<button
type="submit">Send</button>
</form>
Buttons
and Links
Link
: Moves focus to a
new URL.
Button
: Performs an
action.
<
a
href
="https://accessibleweb
.net/">
Accessible Web</
a
>
<
button
>play video</
button
>
<
button aria-
expanded="false"
>Menu
</
button
>
Tables
Tables
format tabular
data into a grid that
assistive technology
can navigate.
<
table
>
<
caption
>About my Cats
</
caption
>
<
tr
>
<
th
>Cat's name</
th
>
<
th
>Cat's colors</
th
>
</
tr
>
<
tr
>
<
td
>Luna</
td
>
<
td
>orange, black</
td
>
</
tr
>
...
</
table
>
Images
Provide accurate
text
equivalents
for all
graphical objects such
as images, SVG and
charts/graphs.
<img src="cats.jpg"
alt=
"two cats on an easy
chair under a blanket"
>
<svg width="500"
height="160"
aria-labelledby="svg-
title"
>
<title
id="svg-
title"
>Purple Hexagon
</title>
<polygon...></polygon>
</svg>
Thank you!
Please reach out to me with questions or comments.
:
@racheleditullio
:
rditullio@tpgi.com
Website
:
https://racheleditullio.com/
Rachele DiTullio, an Accessibility Engineer, delves into the realm of web accessibility, highlighting key aspects such as headings, form labels, buttons, and more. Discover the significance of web accessibility guidelines and the inclusive experiences they offer, all in a visually engaging format.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.
E N D
Presentation Transcript
The Web is Inherently Accessible Rachele DiTullio Accessibility Engineer
Rachele DiTullio 2000: First job as a web developer 2009-2012: Master of Science degree with specialization in User Experience Design 2019-2020: Certified Professional in Web Accessibility Pronouns: she/they 2021: Accessibility Engineer
Agenda Overview Headings Form labels What is web accessibility? Buttons and links Tables Semantics Images
What is web accessibility? Web accessibility is the extent to which a website or web application can be used by disabled people. Less More Web accessibility
Web Content Accessibility Guidelines Versions Perceivable Operable 2.0 2.1 Compliance Levels WCAG A AA AAA Understandable Robust Success criteria: 50
Did you know? The WCAG guidelines were first published in 1999.
Semantic Markup Native HTML elements <label for=""></label> <a href=""></a> + ARIA <button id="" aria-expanded="false">... <input type="" aria-required="true">...
CodePen example https://tinyurl.com/LonghornHTML
<h1>Accessible Web</h1> ... <h2>Semantics</h2> <h3>Headings</h3> <h3>Form labels</h3> <h3>Buttons & links</h3> <h3>Tables</h3> <h3>Images</h3> <h4>Alt text</h4> <h4>SVG</h4> <h4>Charts & maps</h4> Headings Headings break up content into meaningful sections. Screen readers can navigate headings.
<form> <label for="email">Email</label> <input type="email" id="email" autocomplete=" email"> Form Labels Labels provide visible and accessible names to form inputs when they are programmatically linked. <button type="submit">Send</button> </form>
Buttons and Links <a href="https://accessibleweb .net/">Accessible Web</a> <button>play video</button> Link: Moves focus to a new URL. <button aria- expanded="false">Menu </button> Button: Performs an action.
<table> <caption>About my Cats </caption> <tr> <th>Cat's name</th> <th>Cat's colors</th> </tr> <tr> <td>Luna</td> <td>orange, black</td> </tr> ... </table> Tables Tables format tabular data into a grid that assistive technology can navigate.
<img src="cats.jpg" alt="two cats on an easy chair under a blanket"> Images <svg width="500" height="160" aria-labelledby="svg- title"> <title id="svg- title">Purple Hexagon </title> <polygon...></polygon> </svg> Provide accurate text equivalents for all graphical objects such as images, SVG and charts/graphs.
Thank you! Please reach out to me with questions or comments. Twitter: @racheleditullio Email: rditullio@tpgi.com Website: https://racheleditullio.com/
