info343au16-accessibility
This is a live streamed presentation. You will automatically follow the presenter and see the slide they're currently on.
This is a live streamed presentation. You will automatically follow the presenter and see the slide they're currently on.
# configure git (lab machines)
git config --global user.email "your-email-address"
git config --global user.name "your-full-name"
# change to desktop
cd Desktop
# clone the repo
git clone https://github.com/github-user-name/02-accessibility
# change into the repo
cd lecture02-accessibility# create a development branch called 'classwork'
git branch classwork
# remember to switch to that branch!
git checkout classwork
# (or create and switch at once)
git checkout -b classwork
# check branch status
git branchwarmup.html and
css/warmup.css files from the repo.
# add changed files to staging area
git add .
# commit the changes. REMEMBER THE COMMIT MESSAGE!
# "If applied, this commit will {your message}"
git commit -m "Complete the warmup"
# when in doubt, check the status!
git status# check you're on the correct branch
git branch
# push development branch to GitHub
git push -u origin classwork
e.g., your notes, lecture slides, etc
e.g., MDN, w3schools, Resources page
or come to
office hours!
Agreed-upon specification for how web pages should be rendered by a browser (and thus written by the developer)
| 1990 | HTML original specification (Tim Berners-Lee) |
| Nov 1995 | HTML 2.0 (Internet Engineering Task Force) |
| Jan 1997 | HTML 3.2 (World Wide Web Consortium [W3C]) |
| Dec 1997 | HTML 4.0 (W3C) |
| Jan 2008 | HTML 5 draft (W3C) |
| Oct 2014 | HTML 5 (W3C) |
HTML Standard History
Check if your HTML conforms to the standard.
Note that in some browsers pages may still seem to "work" (look correct) even if they are not compliant.
Tracy is a 19-year-old college student and was born blind. In high school she did well as she could rely on audio tapes and books and the support of tutors, so she never bothered to really learn Braille. She is interested in English literature and is very fond of short stories; her dream is to become an audiobook author.
Tracy uses the Internet to share her writing and to connect with other writers. She owns a laptops and uses a screen reader called JAWS: a computer program which reads her screen out loud to her in an artificial voice.
persona adapted from
http://scidok.sulb.uni-saarland.de/volltexte/2007/1098/pdf/personas_access.pdf
Gerald is 68-years-old, and recently retired from his position as an investment banker for an international bank. Although retired, he still is
interested in business, economics, and banking; he uses the Internet to do research and manage his personal investments and pension funds.
Gerald has stage 2 Rheumatoid arthritis, that primarily affects his wrists, hands, and fingers. He has trouble manipulating a computer mouse, clicking on content on the computer screen, or doing any complex/fine motor movement that requires his hands. Gerald has voice-recognition software that he utilizes when his pain makes typing difficult or impossible.
persona adapted from https://wiki.jasig.org/display/UPC/Disabled+Personas
Need to make sure a web page supports all users, even if they have disabilities or other impairments.
Users may access a web page using specialized technologies:
Screen reader built into Mac OS X.
cmd-f5)
We'll make web pages support screen readers in two parts:
Web Accessibility Initiative - Accessible Rich Internet Applications
blog.html file...
h1,
h2, etc).
Give non-semantic elements (e.g.,
<div>) a
role attribute to provide semantic meaning about the purpose of that element.
| "banner" | site-oriented content; not page-specific |
| "main" | main content of the page |
| "contentinfo" | visible information about the document (author, etc). |
| "navigation" | collection of site links |
| "region" | a "section" of a web page. Not technically a landmark! |
| "progressbar" | a widget role for an element (e.g., a stylized div) that acts as a progress bar. Not a landmark! |
Roles
HTML5 introduced new tags that provide similar semantic meanings (also keep landmark roles for compatibility).
<!DOCTYPE html>
<html>
<head>...</head>
<body>
<header>
header information (title, etc)
<nav>navigation bar</nav>
</header>
<main>
<article>
<section>article 1, section 1</section>
<section>
article 1, section 2
<aside>an aside</aside>
</section>
</article>
<article>article 2</article>
</main>
<footer>
footer information (copyright, etc)
</footer>
</body>
</html>We can refer to a specific element in a page by giving that element a
unique
id attribute.
We can then refer to the element from a link using
#element-id.
<section id="first">
...
</section><a href="#first">Help screen readers understand images by including alternate text.
<!-- an image -->
<img src="baby_picture.jpg" alt="a cute baby">leave off "picture of"
ARIA include additional attributes that can be used to describe visual elements.
<!-- aria-label provides descriptions for
arbitrary elements -->
<div class="green-rect"
aria-label="a giant green rectangle"></div>
<!-- aria-describedby refers to an element that
contains the description -->
<div class="green-rect"
aria-describedby="#rectDetail"></div>
<p id="rectDetail">
The above rectangle is giant and green.</p>
replaces read description
added after read description
Structural Semantics:
figure
Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
aside
Defines content aside from the page content.
details (demo) Defines additional details that the user can view or hide.
Not supported by all browsers!
Formatting Semantics:
mark,
abbr,
cite,
address,
time,
code,
etc.
Look up details at http://www.w3schools.com/tags/
Represents a form that the user can fill out, providing a way to get information from the user.
<form role="form">
<label for="commentbox">Leave a comment:</label>
<input type="text" name="comment" id="commentbox">
</form> <input type="text" name="comment">
landmark role!
no content so no closing tag
Forms contain
fields (usually
input tags).
We create dropdown lists ("combo-boxes") with the
<select> and
<option> elements. Note that
<option>'s value can be different than the displayed text.
<form id="signup">
<select name="birthMonth">
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
...
</select>
</form>And other elements as well!
http://www.w3schools.com/html/html_form_elements.asp
<button> elements also have a type!
<form id="signup">
<label for="nameField">
<input type="text" name="name" id="nameField">
<button type="button">I'm a button!</button>
<button type="submit">Submit Form</button>
<button type="reset">Clear Form</button>
</form>
Monday: Getting stylish with CSS!