How to engineer accessible websites

1. Rachel Cherry @bamadesigner  bamadesigner.com wpcampus.org HOW TO ENGINEER ACCESSIBLE WEBSITES

2. #heweb18 @bamadesigner • Intro to accessibility and why it’s important • Overview of WCAG accessibility standards • ARIA and how to best implement for assistive technology • How to add accessibility testing to your development workflow • Common markup errors and how they affect users • Easy accessibility fixes that make a big impact This workshop will cover:

3. Everything from this workshop: https://bamadesigner.com/heweb18

4. #heweb18 @bamadesigner Web accessibility refers to   the inclusive practice of   removing barriers that prevent interaction with, or access to, websites by people with disabilities.

5. #heweb18 @bamadesigner Data shows 1 in 5 people have a disability.   You could be excluding 20%   of your students (and humanity) from access to education and information. Why is accessibility important?

6. #heweb18 @bamadesigner Indifference: - lack of interest, concern, or sympathy. unimportance. Ignorance: - lack of knowledge or information Why do we publish inaccessible websites?

7. #heweb18 @bamadesigner The web, by default, is accessible.

8. #heweb18 @bamadesigner The web, by default, is accessible. If your web site is inaccessible, its because you made it that way.

9. #heweb18 @bamadesigner Accessibility is not add-on functionality.

10. #heweb18 @bamadesigner Accessibility is an inclusive practice   which creates a high quality UX for all.

11. #heweb18 @bamadesigner Accessibility is:

12. #heweb18 @bamadesigner Accessibility is: understanding diverse needs

13. VISUAL HEARING MOTOR COGNITIVE Deafness and hard-of-hearingBlindness, low vision,   color-blindness Inability to use a mouse,   slow response time,   limited fine motor control Learning disabilities, inability to remember or focus on large amounts of information

14. Everyone uses technology  DIFFERENTLY. #heweb18

15. #heweb18 @bamadesigner Accessibility is: understanding diverse needs thoughtful design/UX

16. #heweb18 @bamadesigner To provide accessible technology,   we have to consider diverse needs during every step of a project.

17. #heweb18 @bamadesigner Working together during every step: PLANNING CONTENT DESIGN (UI/UX) ENGINEERING MAINTENANCE DEAN DECIDES THEY   WANT A SLIDER

18. #heweb18 @bamadesigner Much easier and cheaper   to design for (and maintain) accessibility during your project than to handle after the fact.

19. #heweb18 @bamadesigner Accessibility is: understanding diverse needs thoughtful design/UX building with valid markup

20. #heweb18 @bamadesigner • Study how the web works • Learn web standards, valid HTML • Learn WCAG, find accessibility courses Will help you understand common barriers,  which will help you unlearn poor practices Most important for engineers? Education Quality  Assurance

21. #heweb18 @bamadesigner • Use tools to validate HTML markup • Test for keyboard only, screen readers, etc. • User testing is better than software •Test constantly while in development •Test often once its published Most important steps for engineers? Education Quality  Assurance

22. #heweb18 @bamadesigner Accessibility is: understanding diverse needs thoughtful design/UX building with valid markup

23. <body> <h1>How to engineer accessible websites</h1> <p>When your website is accessible, everyone can consume your information freely. Visually-impaired users can visit your website using a screen reader.</p> <h3>This workshop will cover:</h3> <ul> <li>Intro to accessibility, universal design, and why it’s important</li> <li>Overview of WCAG accessibility standards</li> </ul> </body>

24. <body> <h1>How to engineer accessible websites</h1> <p>When your website is accessible, everyone can consume your information freely. Visually-impaired users can visit your website using a screen reader.</p> <h2>This workshop will cover:</h2> <ul> <li>Intro to accessibility, universal design, and why it’s important</li> <li>Overview of WCAG accessibility standards</li> </ul> </body>

25. • Web accessibility is more prominent in higher education   because the only laws that exist are for organizations that receive federal funding. Legal implications

26. The only laws that exist are for organizations that receive federal funding.

27. Requires all electronic and information technology developed, procured, maintained, or used by federal agencies to be accessible. • Including computer hardware and software, websites, phone systems, and copiers. • From 2000 to 2018, Section 508 had its own standards. Federal law: Section 508

28. As of January 2018, Section 508 said “nevermind” and declared that websites have to meet WCAG 2.0 AA. • Much less confusing! Federal law: Section 508

29. Do universities get sued?

30. Other businesses and organizations are not required by law, but still receive civil suits. To name a few: What about other businesses?

31. • Web Accessibility Laws & Policies • https://www.w3.org/WAI/policies/ • Introduction to Laws Throughout the World • https://webaim.org/articles/laws/world/ What about other countries?

32. The Web Content Accessibility Guidelines (WCAG) are published by the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C). • WCAG has 3 levels: A, AA, and AAA • WCAG version 2.0 AA is the industry standard • Version 2.0 was published in December 2008 • WCAG released version 2.1 in June 2018 Web accessibility standards:

33. WCAG 2.0 Quick Reference https://www.w3.org/WAI/WCAG20/quickref/ Walks you through techniques and failures!

34. WCAG 2.0 Checklists: • http://webaim.org/standards/wcag/checklist • https://a11yproject.com/checklist • https://www.wuhcag.com/wcag-checklist/ • Create your own!

35. #heweb18 @bamadesigner The four principles of accessibility: • Perceivable • Operable • Understandable • Robust

36. #heweb18 @bamadesigner Perceivable: Information (and user interface components)   must be presentable to users in ways they can perceive. Must be available to the senses either through the browser or through assistive technologies (e.g. screen readers, screen enlargers, etc.)

37. Perceivable: •Provide text alternatives for non-text content, like images, video, and audio •Offer captions, transcripts, and audio descriptions for audio and video •Design content to be easy to read and listened to, e.g. good contrast, volume control

38. #heweb18 @bamadesigner Operable: User interface components and navigation cannot require interaction that a user cannot perform. Users can interact with all functionality using either the mouse, keyboard, or an assistive device.

39. Operable: •All functionality should be available using a keyboard •There should be enough time to read content and perform functionality •Avoid designing content that might cause seizures •Help users navigate and find content

40. #heweb18 @bamadesigner Understandable: Users must be able to understand the information as well as the operation of the user interface. Content is clear and limits confusion and ambiguity. 

41. #heweb18 @bamadesigner •Write easy-to-read text with assistive technologies in mind •Design content and the interface to behave in   predictable ways •Help users to avoid and correct mistakes when   entering input Understandable:

42. Robust: Content must be robust enough that it can be interpreted reliably by as many web browsers and agents as possible, including assistive technologies. Users must be able to access the content as technologies advance.

43. Pages without proper heading structure/order • Are your headers in order? h1, h2, h3, etc. • Allows content to be readable without a stylesheet, for those who do not navigate visually. Common website barriers:

44. Non-text content without a text equivalent • Provide alt attributes or captions for images • Provide captions and audio descriptions for videos • Provide transcripts for audio recordings Common website barriers:

45. Without alternative text, life-saving information in this   graphic is not available to visually impaired users.

46. .screen-reader-text {  clip: rect(1px, 1px, 1px, 1px); clip-path: polygon(0 0, 0 0, 0 0, 0 0); position: absolute !important; white-space: nowrap; height: 1px; width: 1px; overflow: hidden; } How to hide content visually:

47. The point of providing a text equivalent is to convey the same information and context as people   who can see the image. DO NOT: Simply write “red car”. DO: Ask yourself “why is this picture   of a red car on the page? PRO TIP for writing image alt text:

48. Being unable to access functionality by keyboard • Can you access all actions, functionality and content? • Can you open “popups”, interact with them, close them? • Does any functionality have keyboard trap? Common website barriers:

49. Unable to visually determine if an element has focus • If someone is navigating your site by keyboard,   could they determine where they are on the page? • Could they determine which form field has focus? • Could they determine if a button can be pressed? Common website barriers:

50. NEVER: Remove :focus CSS styles EASY FIX:   Search your CSS for usage of :hover. Test those elements on your site and make sure there are equivalent :focus styles. PRO TIP to ensure element focus:

51. PRO TIP to ensure element focus: button { background-color: #d8d8d8; color: #222; &:focus, &:hover { background: #222; color: #fff; } }

52. Unable to skip large blocks of repeatable content • The most common barriers for guests are having to tab through the header and menu on every page. • Do you use ARIA to help label sections of your page? Common website barriers:

53. <a id=“skip” href="#content">Skip to Main Content</a> #skip { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overﬂow: hidden; } #skip:focus { position: static; width: auto; height: auto; } How to provide “Skip to content”:

54. Actions without deﬁned purpose or context • Do your actions (links and buttons) provide clear context about what’s going to happen? Never use “click here”. • Is the HTML markup for your actions valid? • Are you using a link when you should be using a button? Common website barriers:

55. Using color to convey information / insufﬁcient contrast • Is there clear contrast between the color of your text   and its background color? Minimum: 4.5:1 • If a guest is color blind, would they have the same experience as any other guest? Common website barriers:

56. Web accessibility means that people with disabilities can perceive, understand, navigate, interact with, and contribute to the Web. If color is the only method for conveying a link:

57. The link is invisible to those who can’t see blue: Web accessibility means that people with disabilities can perceive, understand, navigate, interact with, and contribute to the Web.

58. Web accessibility means that people with disabilities can perceive, understand, navigate, interact with, and contribute to the Web. If a different color AND an underline is used:

59. Then the link would become visible: Web accessibility means that people with disabilities can perceive, understand, navigate, interact with, and contribute to the Web.

60. While not an official standard, responsive web design is important to ensure your site can be viewed on assistive devices of various sizes. Other considerations:

61. Another important consideration is download speeds/order to ensure access to those who don’t have access to high speed Internet. Other considerations:

62. Be mindful of your language. Avoid sentences like “See our home page for   more information”. Use non-sensory language instead, e.g. “Visit our home page”. Other considerations:

63. <body> <h1>How to engineer accessible websites</h1> <p>When your website is accessible, everyone can consume your information freely.</p> <frame src=“ad.html" style="border:none;"></frame> </body>

64. <body> <h1>How to engineer accessible websites</h1> <p>When your website is accessible, everyone can consume your information freely.</p> <iframe src=“ad.html" style="border:none;"></iframe> </body>

65. <body> <h1>How to engineer accessible websites</h1> <p>When your website is accessible, everyone can consume your information freely.</p> <iframe src=“ad.html" style=“border:none;"   title=“Advertisement”></iframe> </body>

66. CHALLENGE! It’s time for a good ole’ fashioned #heweb18 #youbetterwork

67. 1.Open your web pages 2.Navigate to every action element on the page 3.Interact with all functionality on the page 4.BUT YOU CAN’T USE YOUR MOUSE 5.Document any issues. Challenge #1

68. #heweb18 @bamadesigner Spec created to improve accessibility of applications by providing extra information to screen readers via HTML attributes. ARIA (Accessible Rich Internet Applications)

69. #heweb18 @bamadesigner Defines what an element is or does. Main features in ARIA: Roles •role=“navigation” (<nav>) •role=“complementary” (<aside>) •role=“banner” •role=“search” •role=“tabgroup"

70. #heweb18 @bamadesigner <form role=“search”></form> Main features in ARIA: Roles

71. #heweb18 @bamadesigner Define properties of elements, which can be used to give them extra meaning or semantics. Main features in ARIA: Properties • aria-required=“true" • aria-labelledby=“label" • aria-current=“page”

72. #heweb18 @bamadesigner ARIA can add extra labels and descriptive text that   is only exposed to assistive technology APIs. <button aria-label=“Conﬁrm your membership">Conﬁrm</button> Main features in ARIA: Properties

73. #heweb18 @bamadesigner Special properties that define the current conditions of elements. 3 main features in ARIA: States • aria-hidden=“true" • aria-disabled=“true” • aria-live=“true"

74. #heweb18 @bamadesigner ARIA can make parts of your page "live", so they inform assistive technology when they change. <div aria-live="true"> <p>I’m a live feed of alerts for an event that   needs to update every 30 seconds. </div> 3 main features in ARIA: States

75. ARIA example: <div role="contentinfo"> <p>HighEdWeb 2018 is the annual conference of the Higher Education Web Professionals Association, created by and for higher education professionals exploring the unique digital issues facing colleges and universities.</p> </div> <div role="alert"> <p>It’s a day ending in “y” so the weather is beautiful outside.</p> </div>

76. <body> <h1>How to engineer accessible websites</h1> <p>When your website is accessible, everyone can consume your information freely.</p> <iframe src=“analytics.html” title=“Analytics”   aria-hidden=“true”></iframe> </body>

77. an accessibility evaluation tool from WebAIM http://wave.webaim.org • Free in-browser testing • Free Chrome extension • Premium API TESTS FOR: WCAG 2.0 A/AA

78. an accessibility visualization toolkit http://khan.github.io/tota11y • Alt text and confusing link text • Color contrast • Heading structure • Form labels • ARIA landmarks TESTS FOR: • Javascript file that places button on site • Free Chrome extension

79. client-side script that checks HTML source code and detects violations of a deﬁned coding standard http://squizlabs.github.io/HTML_CodeSniffer • Copy/paste code for quick testing • Free bookmarklet for in-browser testing TESTS FOR: WCAG 2.0 A/AA/AAA

80. an automated accessibility testing library http://pa11y.org • WCAG 2.0 A/AA/AAA TESTS FOR: • Web dashboard • JSON web service • Command line PROVIDES:

81. Javascript library that executes automated accessibility testing inside your testing framework or browser of choice http://www.deque.com/products/axe • Free Javascript library • Free Chrome extension

82. Material Design:  Color Tool https://material.io/color/ Allows you to measure   the accessibility level of   any color combination.

83. wA11y - The Web Accessibility Toolbox  https://wordpress.org/plugins/wa11y/ WORDPRESS PLUGINS

84. WORDPRESS PLUGINS

85. BROWSER TOOLS

86. BROWSER TOOLS

87. BROWSER TOOLS

88. Take advantage of   in-browser testing tools to evaluate product demos before you purchase. ACCESSIBILITY PRO TIP: #heweb18

89. 1.Open https://bamadesigner.com/heweb18 2.Install at least 2 different tools 3.Use them to test your web pages 4.Document common and surprising issues Challenge #2

90. 1.Fix at least one accessibility issue. 2.Add at least one ARIA role, property, and state. Challenge #3

91. So what’s required   to engineer accessible websites? #a11y

92. #1:  Learn/follow web standards. Learn/follow WCAG. #a11y

93. #2:  Understand user needs and common barriers. #a11y

94. #3:  Use valid HTML markup. #a11y

95. #4:  Learn/use ARIA to ﬁll gaps. #a11y

96. #5:  Test constantly while building. Test often once published. #a11y

97. #6:  Priority on user testing. #a11y

98. #heweb18 @bamadesigner When you plan for accessibility, YOU WON’T WORK HARDER. YOU’LL WORK SMARTER.

99. Everything from this workshop: https://bamadesigner.com/heweb18

100. A community and conference for web professionals, educators and people dedicated to the confluence of WordPress in higher education. https://wpcampus.org  @wpcampusorg / #WPCampus I HAVE SWAG!

101. ANY QUESTIONS? #heweb18 Rachel Cherry @bamadesigner  bamadesigner.com wpcampus.org