3. What is Web Accessibility?
Web accessibility means that websites, tools, and technologies are
designed and developed so that people with disabilities can use them.
More specifically, people can:
⢠perceive, understand, navigate, and interact with the Web
⢠contribute to the Web
-From W3C Web Accessibility Initiative website
5. Americans with Disabilities Act (ADA) 1990
This civil rights law was designed to eliminate discrimination
on the basis of disability for employment, state and local
government services, public accommodations, commercial
facilities, and transportation. It was also designed to mandate
establishment of TDD/telephone relay services.
6. Section 508 of the Rehabilitation Act 1998
This act required electronic and information technology to be
accessible for persons with disabilities so that their level of
access and usability would compare to that of persons
without disabilities.
Aligns with WCAG 2.1
7. Web Content Accessibility Guidelines 2.1
(WCAG 2.1) Updated 2018
Web Content Accessibility Guidelines (WCAG) 2.1 covers a
wide range of recommendations for making Web content
more accessibleâŚto a wider range of people with disabilities,
including accommodations for blindness and low vision,
deafness and hearing loss, limited movement, speech
disabilities, photosensitivity, and combinations of these, and
some accommodation for learning disabilities and cognitive
limitations⌠These guidelines address accessibility of web
content on desktops, laptops, tablets, and mobile devices.
9. Personas
Sean - blind Andy â deaf and
colorblind
Phil â low vision, TBI Linda â mobility
impaired
10. Sean
⢠Page language identified
⢠Page title
⢠Headings used in order
⢠Meaningful link text
⢠Tables with a caption and headers
⢠Labeled buttons and form fields
⢠Images described in alt text
⢠ARIA landmarks
⢠Skip-to-content links
⢠Logical read order
11. Language, Page Title & Headings
<html lang="en">
<head>
<title>Page title<title>
</head>
<h2>Main heading</h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequent.</p>
<h3>Sub heading</h3>
14. Headings
<h1>Main heading</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h2>Sub heading</h2>
Mark up headings and use in order
Mark up headings and use in order
15. Link Text Code
<a href=âhttps://linkaddressâ>Title of page, article,
video, or document being linked to</a>
NOT
<a href=âhttps://linkaddressâ>Click here, here, or read
more</a>
19. Sean also needs
⢠Labeled buttons and form fields
⢠Images described in alt text
⢠ARIA landmarks
⢠Skip-to-content links
⢠Logical read order
20. Phil
⢠Good color contrast
⢠Good quality images
⢠Readable fonts
⢠Magnification to 400%
⢠Responsive
⢠Consistent navigation
30. Practice WAVE WAVE Tab
Page title Yes â should be descriptive Styles
Page language
identified
Yes Styles
Skip-to-content links Yes â flags if link is broken Styles
ARIA landmarks Yes â shows the presence of landmarks Styles
Headings used in
order
Yes â flags skipped headings and empty H tags, and
no headings
Styles
Meaningful link text Yes â flags empty link text and suspicious link text
such as âclick hereâ and links to documents
Styles
Labeled buttons and
form fields
Yes Styles
31. Practice WAVE WAVE
Tab
Non-WAVE
Tables have captions and
headers
Yes and no â shows the
presence of a table and if
there are headers
Styles
Images described in alt
text
Yes â flags missing,
suspicious, and long alt text
Styles
Read order Yes No Styles
Good color and color
contrast
yes Contrast
Responsive/magnification
400%
no Needs manual check
Audio elements have text
equivalent
no Needs manual check
Works with keyboard and
has visual focus
no Needs manual check
32. IAAP Certifications
⢠Certified Professional in Accessibility Core Competencies (CPACC)
⢠Web Accessibility Specialist (WAS)
⢠CPACC+WAS = Certified Professional in Web Accessibility (CPWA) â if
you earn the CPACC and WAS
Deque University provides low-cost, high quality, online training and
other free resources (https://www.deque.com/training/online-deque-
university/)
34. Resources
⢠W3C Introduction to Accessibility -
https://www.w3.org/WAI/fundamentals/accessibility-intro/#what
⢠WebAIM - https://webaim.org/projects/million/update#wcag
⢠WAVE - https://wave.webaim.org/
⢠IAAP, International Association of Accessibility Professionals â
certifications - https://www.accessibilityassociation.org/certification
⢠Persona website - https://sites.psu.edu/personas/
⢠Sonya Woods - szw151@psu.edu
Editor's Notes
Hi. My name is Sonya Woods and I am an accessibility consultant for World Campus. I have been in this role for close to 7 years and primarily work with people who are designing or teaching courses online.
I am going to give you a quick introduction to technical web accessibility. We will cover laws, disability types, assistive technology, and best practices, focusing on what the WAVE accessibility checker checks for and why.
Before I get into all that I want to talk about Domino's Pizza.
Has anyone ever ordered pizza using their website?
Dominos is being sued because a blind person argued he was unable to order a custom pizza with the screen reading software he normally used.
And he thinks he should be able to order pizza they way anyone else would. Dominos thinks that people who can't use the website, can call the store and he argues that is not the same experience because when he calls, he does not give all the information about what is on the menu and all the deals that are available.
Dominoes tried to get the lawsuit dismissed but was unsuccessful. They argue that the guidelines on how to make a website accessible are unclear and that having to do that for every website at every store is too difficult.
People in the accessibility community find this case very interesting because most lawsuits have some against government institutions and institutions that get government funding - such as Penn State. We were sued by the NFB back in 2011. Suing a private business and arguing that their website is covered under the ADA because it is an extension of their physical store could set a new precedent.Â
Deque â an accessibility consulting firm just published a bâlog about a study, "which conducted in-depth interviews with 73 U.S. adults who are blind or have severe visual impairments, revealed that two-thirds of the Internet transactions initiated by people with vision impairments end in abandonment because the websites they visit arenât accessible enough. Ninety percent of those surveyed said they regularly call a siteâs customer service to report inaccessibility and have no choice but to visit another, more accessible site to make the transaction."
Why am I tell you this? Because sooner or later businesses will realize they need to make their websites and apps accessible and they will want to hire people who know how to do that.
The Dominos website was inaccessiable because a person with a disability could not use it. And that leads into the official definiton of accessibility which is
Okay so let's talk about the laws and standards related to this.
Normative section https://www.w3.org/TR/WCAG21/
Informs the laws
Let's talk about people.
These are design personas - fictional people based on real data. Sean is blind and uses a screen reader called JAWS. How many of you know what that is?
Imagine you have a computer with no monitor or mouse. If you have screen reading is software installed you can still use your computer. You can open apps and browsers and read the text on the page, fill out forms. everything a person would want to do on a computer, assuming the content is accessible. Unlike Dominoes
Phil has low vision due to a traumatic brain injury so he also struggles with mental focus and short term memory.
Andy is deaf and colorblind, and Linda has a mobility impairment so while she can see, she does not use a mouse. She is a type of user many forget about - they imagine their user is either totally blind and using a screen reader like Sean or has perfect vision and uses a mouse. Linda needs everything to work with her keyboard and some users use other input devices.
Next I am going to talk best practices for web accessibility based on what Sean, Phil, Andy, and Linda need.
First Sean who is a blind screen reader user
This type of person is a main focus of the WCAG guidelines because he is totally dependent on someone coding the page correctly otherwise it won't work for him. Remember the frustration of the guy trying to order the pizza?
That's why I have a fairly long list here for what Sean needs. I am going to give you some examples of these.
On this slide I have some code to show you what it looks like to specify the page language, have a page title, and good heading structure. I know this text is hard to read so...
This is a close up of the language tag for the page. If the page has content in another language that should also be indicated with a span tag. The reason for this is that a screen reader will read the text with different accents based on what the page language is.
This is the page title. It is the first thing a screen reader will read and it will let Sean know what page he is on.
The next thing the screen reader does is say the page has 12 headings and 47 links - or whatever the case is. Sean can bring up a list of headings and he will also get their heading level which helps him form a mental picture of the page content. That's why it is important to use headings in order.
Sean can also bring up a list of links outside the context of the page so if the links say "here" or "click here" he won't know where the link goes. It is better practice and more useful for everyone to make the linked text descriptive. For example, use the title of the page, document, or video you are linking to. You also want to name menu items descriptively.
The last code example I am going to give you is a table. For Sean to understand a table and know which headers go with which data cells, the table needs headers. And without a caption, the screen reader will contatinate all the informaiton in the table into one long string of gibberish.
The table title goes in a caption tag like this.
This is what the headers should look like. These are column headers but they could also be row headers and the table could have both row and column headers. What it should not have is more than one row or column of headers.
Sean also needs buttons and form fileds to be labeled, images described in alt text, ARIA landmarks will make the page easier to navigate, and skip to content links will allow him to bypass repetitive navigation at the top of the page. Linda who is using a keyboard will also appreciate the skip to content link.
The WAVE tool will check for everything I just told you Sean needs.
Remember that Phil has low vision which means he likes to magnify content to see it better. He counts on high quality images good color contrast and a reponsive design that does not break when magnified to 400%.
He also does not like horizontal scrolling and he often prefers the mobile version of a website because of the simpler interface. And he has trouble with short term memory so consistent navigation will help him know where he is and how to back to the home page.
4.5:1 is the minimum color contrast standard set by the WCAG guildelines. I have a couple examples here so you can see what that looks like. Black text on while has a contrast ratio of 21:1.
Incidentally this is the most common error on the 1 million most popular websites and this is also checked by the WAVE tool.
This is a real world example of poor color contrast. It looks like there is a blank section in the middle but that is actually green text on a blue background.
The text that is almost invisible says Register with this link. It is green for emphasis. It is hard to believe people make these kinds of mistakes but it happens all the time. That's why being aware of the standards and checking your work will help you make content that works better for everyone.
Andy is deaf and colorblind so he need captions on video and transcripts for audio files.
And please don't use color alone for meaning.
The example is one where red text is used to indicate required fields on a form. One text is to look at something in grayscale and see if it still makes sense. This type of form won't work for Any or Sean and may cause Phil some problems as well. Adding an asterix as a second way to indicate a required field is simple way to solve this problem.
Linda can see but she has trouble using her hands so she counts on everything working with her keyboard. One of the easiest accessibility tests is to start at the top of a webpage and tab through it to see if you can get to everything and use the enter key to activate links and buttons. You might be surprised at how many websites will not work with just a keyboard.
This is an example of keyboard focus. this is important because lInda needs to know where she is on the page.
To review I am going to recap the best practices I just talked about.
I also want to mention that the WAVE tool has 3 tabs: Styles, No Styles, and Contrast, so in the checklist I am giving you, I indicate that WAVE checks and what it does not and which tab you will find the results under.
These are the things I told you Sean needs: page title, language specified, skip to content links ARIA landmarks, headings, good link text, labeled buttons and form fields. These are all checked by WAVE under the Styles tab.
This is a continuation that lists more of what Sean needs - tables with captions and headers and images described in alt text - both also checked by WAVE under the Styles tab
One thing have not mentioned is read order. This is the order page elements are read by a screen reader and may be different from the visual display if items are ordered using CSS. Screen readers ignore visual styling, so the No Styles tab shows you the page with CSS disabled so that you can check that the read order makes sense.
Color contrast is check on the Contrast tab of the WAVE tool.
The items that Phil, Andy, and Linda need are not checked by WAVE but can easily be checked by magnifying to 400%, checking audio elements, and doing a manual keyboard test.
https://www.accessibilityassociation.org/content.asp?contentid=356
If you are interested in accessibility as a profession or in getting certified, let me know. There are two certifications. One is in core competencies. I have that one. The other is in web accessibility. if you have both they call the combination the CPWA.
I will send Bryan a copy of the slides so he can share those with you. I have some resources listed here one of which is the persona website if you want to learn more about Sean, Phil, Linda and Andy and our other 3. We have information on how we made them and some other things.
Thank you.