Slide 1

Slide 1 text

#SEOnerdSwitzerland Why Accessibility is More than Just a Lighthouse Metric Ruth Everett, Technical SEO Analyst at DeepCrawl

Slide 2

Slide 2 text

Allow: /dogs Allow: /SEO Allow: /python Empathetic human Hungry dog

Slide 3

Slide 3 text

🌱 Making the internet accessible for everyone

Slide 4

Slide 4 text

What We Will Cover ▪ The Importance of Web Accessibility ▪ The Intersection of SEO & Accessibility ▪ Testing Accessibility ▪ Accessibility Business Case

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

SEO 🤝 Accessibility

Slide 8

Slide 8 text

What is Web Accessibility?

Slide 9

Slide 9 text

What is Web Accessibility? The act of making sure websites are accessible and usable for everyone.

Slide 10

Slide 10 text

What is Web Accessibility? ✅ Perceive ✅ Understand ✅ Navigate ✅ Interact

Slide 11

Slide 11 text

What is Web Accessibility? ✅ Auditory ✅ Cognitive ✅ Physical ✅ Neurological ✅ Visual

Slide 12

Slide 12 text

What is Web Accessibility? Temporary impairments - a user with a broken arm - someone recovering from surgery

Slide 13

Slide 13 text

What is Web Accessibility? Situational impairments - people on moving trains - users with limited internet connection

Slide 14

Slide 14 text

What is Web Accessibility? Environmental impairments - being in a brightly lit room - unable to play audio aloud

Slide 15

Slide 15 text

4 Principles of Accessibility

Slide 16

Slide 16 text

Principles of Accessibility Perceivable Operable Understandable Robust

Slide 17

Slide 17 text

4 Principles of Accessibility Perceivable Removing any barriers that a user may have to accessing your content.

Slide 18

Slide 18 text

Perceivable Example Bad: “img1234567” Also bad: “ Better: “Golden Best: “Golden

Slide 19

Slide 19 text

4 Principles of Accessibility Operable A website must be able to be usable, despite the device they are browsing on.

Slide 20

Slide 20 text

Operable Example Giving users enough time to read content or perform an action, for example - Not using moving or blinking content - Avoiding alerts or pop ups that can’t be minimised - Prevent having a time alert to complete a task

Slide 21

Slide 21 text

4 Principles of Accessibility Understandable Being able to understand the information displayed on a webpage, as well as clearly understand the user interface and navigate the site.

Slide 22

Slide 22 text

Understandable Example Ensuring content is easy to read and follows a structure, for example - Breaking up content with logical headings - Utilising bullets and lists (correctly marked up)

Slide 23

Slide 23 text

4 Principles of Accessibility Robust A website must be able to be accessed and interpreted by different technologies and platforms, including screen readers.

Slide 24

Slide 24 text

Robust Example - Ensure there are no errors in code so that the pages are easy for assistive technologies to follow and understand - Use ARIA components to provide additional information to assistive technologies

Slide 25

Slide 25 text

Why Is Accessibility Important?

Slide 26

Slide 26 text

Why Is Accessibility Important? Ensuring the websites we work on are accessible for everyone should be a primary concern for anyone who works on websites.

Slide 27

Slide 27 text

Why Is Accessibility Important? An accessible website helps all users: ✅ Easily navigate the site ✅ Improve their experience ✅ Find information they are looking for

Slide 28

Slide 28 text

Why Is Accessibility Important? 62% of accessibility practitioners surveyed in March and April 2020 reported that “COVID-19 has raised the awareness and impact of accessibility on the digital channel.” Deque Report

Slide 29

Slide 29 text

Why Is Accessibility Important? User Experience When websites aren’t accessible it can make it incredibly difficult for some users to perform necessary tasks or find the information they are looking for.

Slide 30

Slide 30 text

Why Is Accessibility Important? Legal Implications In addition to being imperative to user experience, an accessible website is also required by law in most cases. - European Accessibility Act - Americans Disability Act (ADA) - UK Equality Act

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

The Intersection of SEO & Accessibility

Slide 35

Slide 35 text

SEO & Accessibility 2020 study by WebAim to assess end-user accessibility barriers and web content accessibility guideline failures found: ● 98% of homepages had detectable WCAG failures Source

Slide 36

Slide 36 text

SEO & Accessibility 2020 study by WebAim to assess end-user accessibility barriers and web content accessibility guideline failures found: ● 97% of the deeper content pages also failed the accessibility testing Source

Slide 37

Slide 37 text

SEO & Accessibility Source

Slide 38

Slide 38 text

Source

Slide 39

Slide 39 text

🌱 Page Titles

Slide 40

Slide 40 text

Page Titles - Provide context to help understand what the webpage is about - Identify whether the information on a page is relevant for users - Differentiate content when multiple tabs or pages are open Accessibility ✅

Slide 41

Slide 41 text

Page Title Example ❌ not the most informative page title

Slide 42

Slide 42 text

Page Title Example ✅ this looks better

Slide 43

Slide 43 text

🌱 Headings

Slide 44

Slide 44 text

Headings - Assistive technologies use headings to quickly navigate a page and move to a particular section of the content. - Ensure all headings are relevant to the content beneath them and only use headings if there is content below them Accessibility ✅

Slide 45

Slide 45 text

Heading Examples ❌ aka what not to do

Slide 46

Slide 46 text

Heading Examples ✅ much better :)

Slide 47

Slide 47 text

🌱 On-site Sitemaps

Slide 48

Slide 48 text

Sitemaps - Provide an overview, and clear access, to all the important pages on the site - Helpful for all users to find content they are looking for, especially if the site has a complex navigation. Accessibility ✅

Slide 49

Slide 49 text

Sitemap Example

Slide 50

Slide 50 text

🌱 Anchor Text

Slide 51

Slide 51 text

Anchor Text

Slide 52

Slide 52 text

Anchor Text - Also help users determine whether they want to click the link to visit the destination page. - Typically screen readers will tab through a page and inform users when a link has been found before announcing the anchor text. Accessibility ✅

Slide 53

Slide 53 text

Anchor Text Examples

Slide 54

Slide 54 text

🌱 Breadcrumb Links

Slide 55

Slide 55 text

Breadcrumb Links - Make sure they are placed in the same location across the site. - It is important that breadcrumb links are descriptive Accessibility ✅

Slide 56

Slide 56 text

Breadcrumb Link Examples

Slide 57

Slide 57 text

🌱 Alt Text

Slide 58

Slide 58 text

Alt Text - Used to provide textual alternatives for users with visual impairments. - Alt text is read aloud by screen readers which means they need to be accurate and relevant. Accessibility ✅

Slide 59

Slide 59 text

Alt Text Example IMG01234567.jpg ❌ doesn’t tell me anything about what is in the image

Slide 60

Slide 60 text

Alt Text Example IMG01234567.jpg Golden Labrador Running in a Field ✅ better explains the image

Slide 61

Slide 61 text

Alt Text - Computer Vision

Slide 62

Slide 62 text

Alt Text - Identify Missing Alt Text

Slide 63

Slide 63 text

Alt Text - Identify Missing Alt Text

Slide 64

Slide 64 text

Alt Text - BONUS

Slide 65

Slide 65 text

🌱 Navigation

Slide 66

Slide 66 text

Navigation - Generally, navigation links are built to be tab-able which means that all keyboards and screen readers are able to read them. - In order to ensure your navigation is accessible, make sure you only include primary pages rather than the entire site. Accessibility ✅

Slide 67

Slide 67 text

Navigation Example

Slide 68

Slide 68 text

🌱 Readability

Slide 69

Slide 69 text

Readability - Having a simplified reading level of content is one of the best ways to help users who may have cognitive disabilities. - In order to simplify the readability of a website, it’s important to avoid jargon or difficult language, ensure text is left-aligned, and lists are utilized. Accessibility ✅

Slide 70

Slide 70 text

Readability Example

Slide 71

Slide 71 text

Good semantics - Use h1 - h6 tags to markup headings - Use list elements - ol, ul & dl for list content - Use a elements with href attributes for links - Use the button element for buttons - Use the table element to describe tabular data and th element for table headers

Slide 72

Slide 72 text

🌱 User Interactions

Slide 73

Slide 73 text

User Interactions - Just like Googlebot is unable to perform physical interactions such as clicking buttons, or opening accordions, most screen readers are also unable to do this unless directed to by the user. - It’s best practice to avoid using a hover action to reveal any content, unless the hidden content is also included within the source code. Accessibility ✅

Slide 74

Slide 74 text

User Interaction Example

Slide 75

Slide 75 text

Other Considerations - Colour Contrast ● Low colour contrast makes it difficult to discern elements in the foreground from the background ● Can make links, headings or CTAs hard to read ● Ensure visual presentation of text has a contrast ratio of 4.5:1 (AA standard)

Slide 76

Slide 76 text

Resources Resources Color Contrast Checker by WebAIM

Slide 77

Slide 77 text

Other Considerations - Visual Requirements ● Don’t use colour or styling to convey meaning ● Use safe fonts ● Don’t use iframes for core content ● Ensure table layout is device friendly

Slide 78

Slide 78 text

Other Considerations - Motor Requirements ● Don’t require a mouse ● Use large link targets ● Use focus states for links ● Use default tabbing order

Slide 79

Slide 79 text

Other Considerations - Auditory Requirements ● Provide captions for videos ● Add transcripts for audio ● Add functional controls ● Don’t autoplay videos

Slide 80

Slide 80 text

Testing Accessibility

Slide 81

Slide 81 text

Testing Accessibility WAVE Evaluation Tool Free Chrome extension Developed by webAIM.org and provides visual feedback about the accessibility of content by adding icons and indicators onto the page.

Slide 82

Slide 82 text

Testing Accessibility WAVE Evaluation Tool It also provides a summary of issues that allows you to drill down into specific errors to find out more information.

Slide 83

Slide 83 text

Testing Accessibility axe Web Accessibility Testing Free Chrome extension that utilizes the axe open source JavaScript library which is developed by Deque Systems. Run within the browser developer tools to identify accessibility defects on a webpage.

Slide 84

Slide 84 text

Testing Accessibility axe Web Accessibility Testing Displays the accessibility issues detected and where they are found on the page.

Slide 85

Slide 85 text

Testing Accessibility Siteimprove Accessibility Checker Free Chrome extension provides overview of a page’s accessibility issues with clear explanations of how they affect users.

Slide 86

Slide 86 text

Testing Accessibility Siteimprove Accessibility Checker Free Chrome extension provides overview of a page’s accessibility issues with clear explanations of how they affect users. Also displays recommendations for fixing the identified issues.

Slide 87

Slide 87 text

Testing Accessibility At Scale with DeepCrawl We’ve also been able to combine the axe testing tool with a custom JavaScript script and extractions within DeepCrawl.

Slide 88

Slide 88 text

Testing Accessibility At Scale with DeepCrawl View violations across a site at scale, together with providing a score and summary, for a number of URLs.

Slide 89

Slide 89 text

Testing Accessibility Screen readers Try installing a screen reader extension to understand a user with a screen reader will interact with your website. Recommendations: - ChromeVox Screen Reader - Pericles: Text to Speech Screen Reader - Show Screen Reader Text

Slide 90

Slide 90 text

The Accessibility Business Case

Slide 91

Slide 91 text

Accessibility Business Case Source “Businesses that integrate accessibility are more likely to be innovative, inclusive enterprises that reach more people with positive brand messaging that meets emerging global legal requirements.” - W3

Slide 92

Slide 92 text

Accessibility Business Case Source ● Drive Innovation

Slide 93

Slide 93 text

Accessibility Business Case Source ● Drive Innovation ● Enhance Brand Awareness

Slide 94

Slide 94 text

Accessibility Business Case Source ● Drive Innovation ● Enhance Brand Awareness ● Increase Market Reach

Slide 95

Slide 95 text

Accessibility Business Case Source ● Drive Innovation ● Enhance Brand Awareness ● Increase Market Reach ● Improve Customer Experience and Loyalty

Slide 96

Slide 96 text

Case Study - NPR Weekly Source ● Search traffic increased 6.86% ● Ability to search text to reference a specific section of audio ● 7.23% of visitors viewed at least one transcript ● Unique visitors increased 4.18%

Slide 97

Slide 97 text

Case Study - Legal and General Group Source After implementing changes to improve their online accessibility, Legal and General the positive impact seen included: ● Doubled visitor numbers ● Cut maintenance costs by two thirds ● Increase in search traffic by 50%

Slide 98

Slide 98 text

Takeaways

Slide 99

Slide 99 text

Approach your work with more consideration and a different perspective.

Slide 100

Slide 100 text

Accessibility is extra work & effort understanding & empathy.

Slide 101

Slide 101 text

Accessibility and SEO compliment each other in the best way

Slide 102

Slide 102 text

Resources

Slide 103

Slide 103 text

Resources A11y Project Checklist

Slide 104

Slide 104 text

Resources Resources Web Content Accessibility Guidelines (WCAG) 2.0

Slide 105

Slide 105 text

Resources https://webaim.org/standards/wcag/checklist https://www.a11yproject.com/checklist/ https://github.com/accessibility/a11y-courses https://github.com/fejes713/accessibility-guide https://www.google.com/accessibility/ https://www.deque.com/blog/the-business-case-for-accessibility/ https://www.upbuild.io/blog/web-accessibility-lessons-whitehouse-gov/ https://www.smashingmagazine.com/2018/12/voiceover-screen-reader-web-apps/

Slide 106

Slide 106 text

T H A N K Y O U @rvtheverett