Recommended
Recommended
More Related Content
Similar to IST 402 Presentation by Sonya
Similar to IST 402 Presentation by Sonya (20)
More from btopro
More from btopro (20)
Recently uploaded
Recently uploaded (20)
IST 402 Presentation by Sonya
- 1. Accessible Web Design Sonya Woods Accessibility Consultant, World Campus
- 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.
- 8. User Stories
- 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>
- 13. Page Title <html lang="en"> <head> <title>Page title<title> </head> Add descriptive page title
- 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>
- 16. Table Code <table> <caption>Title of table</caption> <thead> <th scope=”col”>Header 1</th> <th scope=”col”>Header 2</th> <th scope=”col”>Header 3</th> </thead> <tbody> <tr><td></td></tr> <tr><td></td></tr> </tbody> </table>
- 17. Table Code <table> <caption>Title of table</caption> </table> Add a caption
- 18. Table Code <table> <caption>Title of table</caption> <thead> <th scope=”col”>Header 1</th> <th scope=”col”>Header 2</th> <th scope=”col”>Header 3</th> </thead> </table> Add table headers with scope
- 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
- 21. Color Contrast Standard Minimum standard is 4.5:1 Black text on white is 21:1
- 23. Color Contrast Example Green text that says REGISTER WITH THIS LINK
- 24. Andy Audio elements need text equivalents • Captions on videos • Transcripts for audio files Do not use color alone for meaning
- 25. Andy Color alone is not used for meaning
- 26. Linda Everything works with a keyboard and includes visual focus
- 27. Linda Everything works with a keyboard and includes visual focus
- 28. Best Practices
- 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/)
- 33. Questions?
- 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 blog 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.