Accessible Web INTRODUCTION

TO HTML5

Accessible Web

Thanks to Scott Williams at the UM Office for

Institutional Equity for his materials
https://accessibility.umich.edu/
Accessible Web INTRODUCTION
TO HTML5

Goals
• Learn what a web accessibility professional does
• Understand how disabilities relate to the web
• Introduce the four principles of accessible interface
design
Accessible Web INTRODUCTION
TO HTML5

What does a “web accessibility coordinator” do?

• Helps guide policy and purchasing decisions
• Evaluates web interfaces for accessibility
• Assists those with disabilities to access online
infrastructure
• Keep pace with changing technology
Accessible Web INTRODUCTION
TO HTML5

1in 5 People Have a Disability

• There are 60 million people with disabilities
in the U.S.
• Half are impeded using the internet
• Visual Issues
• Hearing Issues
• Motor Issues
• Cognitive Issues
Accessible Web INTRODUCTION
TO HTML5

Visual Disabilities
• Blindness, low-vision, color-blindness

• 8 million have difficulty reading ordinary newsprint

(even with glasses)

• 1.8 million are completely blind

• How is your font-size, color-contrast, font-style?

Accessible Web INTRODUCTION
TO HTML5

Hearing Disabilities
• Partial to total deafness
• 8 million have difficulty hearing a normal
conversation
• 1 million are completely deaf
• Do your videos include closed-captioning? Are you
blaring music?
Accessible Web INTRODUCTION
TO HTML5

Motor Disabilities
• Inability to use a mouse or physical keyboard, slow
response time, limited fine motor control

• Dexterity issues—8 million Americans have difficulty

using their arms or hands

• What happens when someone tries to “tab” through

your page? Do you require a steady hand?
Accessible Web INTRODUCTION
TO HTML5

Cognitive Disabilities
• Learning disabilities, distractibility, dyslexia, inability to
remember or focus on large amounts of information
• Adults with ADD/ADHD: 16 million
• 38% of soldiers, 31% of Marines and 49% of National
Guard members returning from combat report
psychological conditions such as TBI and PTSD
• Cognitive disabilities number greater than physical and
perceptual disabilities combined
Accessible Web INTRODUCTION
TO HTML5

More Stats
• 8.3% of the U.S. population have 2 or more disabilities

• 40,000 people the in U.S are both deaf and blind

• 41 percent of adults 65 and older have a disability

• 8.7 million people with disabilities are poor

• 70% of disabled are unemployed or underemployed

Accessible Web INTRODUCTION
TO HTML5

The web offers unprecedented

opportunities for disabled
• Education
• News
• Commerce
• Social
• Benefits of web are amplified for disabled!!
• Web is an enabling technology
Accessible Web INTRODUCTION
TO HTML5

Legal
• DOJ is in the process of revising Title II and III of the
ADA to include online resources of state and local
entities
• Case law—individuals or entities can file civil rights
complaints, e.g., Penn State, NYU, Northwestern,
FSU, Target, Southwest Airlines, Priceline.com,
Ramada, Kindle, etc.
Accessible Web INTRODUCTION
TO HTML5

What is web accessibility?

• Making the web accessible for the widest possible audience
• This audience includes Temporarily Able-Bodied users (TABs)
• Currently, online infrastructure is hostile to those with
disabilities
• Inseparable from SEO, mobile, and usability: improve one and
you improve the others
• Best way to accomplish accessibility? Adherence to standards.
Accessible Web INTRODUCTION
TO HTML5

W3C WCAG 2.0

• W3C Web Content Accessibility Guidelines are
principle-, not technology-based
• The four principles (POUR):
○ Perceivable
○ Operable
○ Understandable
○ Robust
Accessible Web INTRODUCTION
TO HTML5

Review
• Designing with accessibility in mind is the right thing
to do for many reasons
• Adhering to standards (not flashy, cool effects) is key
• Pay special attention to the semantics behind the
HTML5 tags
Accessible Web INTRODUCTION
TO HTML5

© Colleen van Lent

University of Michigan
School of Information

Unless otherwise noted, this work is licensed under the

CC BY-NC 4.0 license.
Validating Your Site INTRODUCTION
TO HTML5

Validating Your Site

Check your code!

Validating Your Site INTRODUCTION
TO HTML5

Why validate?
• Browsers are the helicopter parents of programming
• As your pages become more complex “hidden”
areas can be devastating
Validating Your Site INTRODUCTION
TO HTML5

Three approaches
• Validate by URI

• Validate by Filename

• Validate by Direct Input

Validating Your Site INTRODUCTION
TO HTML5

Don’t freak out!

• Errors propagate, so always start at the top
• Search for solutions online and in forums
Validating Your Site INTRODUCTION
TO HTML5

Accessibility Validation
• You can use wave.webaim.org to validate
accessibility

• You can install an extension to check local pages.

Validating Your Site INTRODUCTION
TO HTML5

Review
• Validated sites are more robust and more accessible
Validating Your Site INTRODUCTION
TO HTML5

© Colleen van Lent

University of Michigan
School of Information

Unless otherwise noted, this work is licensed under the

CC BY-NC 4.0 license.
Hosting Your Site INTRODUCTION
TO HTML5

Hosting Your Site

How to get your site on the Web

Hosting Your Site INTRODUCTION
TO HTML5

Requirements
• Domain name

• Hosting company
Hosting Your Site INTRODUCTION
TO HTML5

Domain Names
• Typically purchased for multiple years at cheap rate

• Most common is .com, but other extensions are

gaining acceptance

• Domain names are useless on their own

Hosting Your Site INTRODUCTION
TO HTML5

Hosting
• What is your URL right now?
• You need a registered IP address to connect with
your domain name
• Hosting services vary
• Free
• Mid-range
• Full-service
Hosting Your Site INTRODUCTION
TO HTML5

Free Services
• Little/no control of domain name

• Limited tools

• Advertising and redirects

• Familiar look and feel across them

Hosting Your Site INTRODUCTION
TO HTML5

Paid Services
• Tend to have better tools

• Support is available

• But check for free services through work/school

Hosting Your Site INTRODUCTION
TO HTML5

© Colleen van Lent

University of Michigan
School of Information

Unless otherwise noted, this work is licensed under the

CC BY-NC 4.0 license.
Final Project INTRODUCTION
TO HTML5

Final Project Demo

Final Project INTRODUCTION
TO HTML5

Final Project
● The final project gives you a chance to practice what
you have learned so far.
● The topic and content are open to you.
● There are some requirements to help with grading.
Final Project INTRODUCTION
TO HTML5

Requirements
1. Create a fully formed page with a doctype, head, and body
a. Use semantic tags, including h1 and main.
b. Include a list with at least three items
c. Include at least three images
2. Validate your site
3. Host and share your site
4. Peer review a site
Final Project INTRODUCTION
TO HTML5

Examples
● Example 1
● Example 2
● Example 3
Final Project INTRODUCTION
TO HTML5

Validate Your Site

● Use the W3 validator to check the syntax
● Use the Wave validator from WebAIM to check for
accessibility
Final Project INTRODUCTION
TO HTML5

Share Your Site

● If you are using Replit you can share your site easily.
● If not, you can utilize some of the optional videos to learn
about other ways to host your site.
Final Project INTRODUCTION
TO HTML5

Peer Reviews
● You will need to do at least three peer reviews to receive
credit for this assignment.
● The expectation is that everyone will participate in this
assignment.
● If you are not a paid learner, consider putting the link to
your site in a forum.
Final Project INTRODUCTION
TO HTML5

© Colleen van Lent

University of Michigan
School of Information

Unless otherwise noted, this work is licensed under the

CC BY-NC 4.0 license.
Closing INTRODUCTION
TO HTML5

Closing
Closing INTRODUCTION
TO HTML5

Wait? That’s It?

• With the exception of forms and some graphics the
lectures and reading have covered the bulk of the
HTML5 tags.

• But what can I do???

Closing INTRODUCTION
TO HTML5

Edit/View Files and Code

• You can use an editor to create or modify an html
file
• Creation – create shell for designers
• Modify a page created by web-authoring
software
• You know the different options for opening a file
Closing INTRODUCTION
TO HTML5

Evaluate Accessibility
• Use “View Source” to look at code from any site

• Did they use semantic tags?

• w3.validator.org checks for well-structured code

• wave.webaim.org checks for semantic structure

Closing INTRODUCTION
TO HTML5

Publish Site
• You know the basic requirements (domain/host) for
publishing

• Achieving even a small familiarity with as many

systems as you can is beneficial.
Closing INTRODUCTION
TO HTML5

What next?
• Continue to practice your skills

• Get comfortable with multiple editors

• Try uploading your code

• Begin to learn about Cascading Style Sheets!!

Closing INTRODUCTION
TO HTML5

Thank you!
Closing INTRODUCTION
TO HTML5

© Colleen van Lent

University of Michigan
School of Information

Unless otherwise noted, this work is licensed under the

CC BY-NC 4.0 license.
The Secret Lecture INTRODUCTION
TO HTML

The Secret Lecture

The Secret Lecture INTRODUCTION
TO HTML

Separating Content From Style

• Separating content from style is basic tenet of
HTML5

• Tags are meant to convey information

• But…..
 The Secret Lecture INTRODUCTION
TO HTML

Using the “style” attribute

• Every tag can utilize a style attribute.
• Similar to href, src, alt, etc.

• Style can specify color, background-color, margins, etc.

<h1 style = "color:blue;">Colleen van Lent</h1>

The Secret Lecture INTRODUCTION
TO HTML
The Secret Lecture INTRODUCTION
TO HTML
 The Secret Lecture INTRODUCTION
TO HTML

Why not use it?

• There are practical reasons for not using style
attribute
• Only applies to one element
• Difficult to change later
• Takes away from “reusability”
 The Secret Lecture INTRODUCTION
TO HTML

Cascading Style Sheets

• A better way to style your page is to use Cascading
Style Sheets

• Styling is done in a separate file and the HTML file

links to whichever style files work best for that site.
The Secret Lecture INTRODUCTION
TO HTML

© Colleen van Lent

University of Michigan
School of Information

Unless otherwise noted, this work is licensed under the

CC BY-NC 4.0 license.