Slide 1

Slide 1 text

@brucel, www.brucelawson.co.uk

Slide 2

Slide 2 text

@brucel §

Slide 3

Slide 3 text

@brucel

Slide 4

Slide 4 text

@brucel

Slide 5

Slide 5 text

@brucel

Slide 6

Slide 6 text

@brucel

Slide 7

Slide 7 text

@brucel The web must be for ALL • people with disabilities (whether permanent, temporary or situational • people on lower-powered devices, contained networks, expensive data plans.

Slide 8

Slide 8 text

MEDIAN DESKTOP 2485.7 KB ▲397.1% MEDIAN MOBILE 2175.9 KB ▲1402.7% Web pages keep getting bigger https://httparchive.org/reports/state-of-the-web#bytesTotal

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

Don’t Panic – The Facts About Population - Gapminder

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

https://www.gapminder.org/fw/income-levels/

Slide 16

Slide 16 text

https://www.visualcapitalist.com/cost-of-mobile-data-worldwide/

Slide 17

Slide 17 text

Mind the gap the highest average cost is 30,000% more than the cheapest average price https://www.visualcapitalist.com/cost-of-mobile-data-worldwide/

Slide 18

Slide 18 text

Android majority median UK speed is 28.51 Mbps, USA is 54.99 Mbps, and Hong Kong is 112.32 Mbps Android %age Download speed (Mbps) Rwanda 80% 0.81 Cambodia 60% 1.29 India 96% 4.09 Indonesia 92% 1.88 Laos 83% 1.99 Philippines 87% 2.05 Thailand 74% 14.90 Vietnam 68% 16.39 Connection speed data: https://www.fastmetrics.com/internet-connection-speed-by-country.php Android stats: statcounter https://gs.statcounter.com/os-market-share/mobile/worldwide

Slide 19

Slide 19 text

Downloading a typical app with 20 MB APK can take more than 30 minutes on a 2G network, and the download is likely to fail before completion, due to the flaky nature of the network. “ - How we built Facebook Lite for every Android phone and network Facebook Lite

Slide 20

Slide 20 text

Twitter “Twitter Lite is network resilient. To reach every person on the planet, we need to reach people on slow and unreliable networks … Twitter Lite is interactive in under 5 seconds over 3G on most devices. Most of the world is using 2G or 3G networks; a fast initial experience is essential.” https://blog.twitter.com/engineering/en_us/topics/open-source/2017/how-we-built-twitter-lite.html

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

Best-selling device last year https://www.gsmarena.com/samsung_galaxy_a12-10604.php

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

https://themarkup.org/still-loading/2022/10/19/dollars-to-megabits-you-may-be-paying-400-times-as-much-as-your-neighbor-for-internet-service

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

Howdy

Hello, world!

(77 bytes) 48 KB, after minifying, optimising and gzipping

Slide 32

Slide 32 text

https://medium.com/walmartglobaltech/the-bene fi ts-of-server-side-rendering-over-client-side-rendering-5d07 ff 2cefe8

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

https://medium.com/walmartglobaltech/the-bene fi ts-of-server-side-rendering-over-client-side-rendering-5d07 ff 2cefe8

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

React accessibility Nothing inherently inaccessible, if ▪ you choose the right components, eg one that produces rather than

▪ you manually manage focus -all the time!- if making a Single Page Application

Slide 44

Slide 44 text

https://careers.twitter.com

Slide 45

Slide 45 text

https://twitter.com/aardrian/status/1629269332856373250

Slide 46

Slide 46 text

https://platforms.barnardos.org.uk/standards/web-performance/

Slide 47

Slide 47 text

Battery use is a safeguarding issue One fundamental problem that homeless and vulnerable people currently face is the issue of recharging their devices. Many homeless people put themselves in danger in order to access power for their devices, trespassing private property and using outdoor power sockets… This puts them at risk of altercations, violence, or even arrest. The potential for empowering homeless people through digital technology (Lemos&Crane 2013, PDF)

Slide 48

Slide 48 text

React Native

Slide 49

Slide 49 text

From the vendor "we found that React Native APIs provide strong support for accessibility. However, we also found many core components do not yet fully utilize platform accessibility APIs and support is missing for some platform specific features." Facebook, March 2021 The Accessibility API for React and React Native enables you to make any React-powered experience usable by someone who may use assistive technology, like a screen reader for the blind and visually impaired. Facebook, November 2015

Slide 50

Slide 50 text

https://github.com/facebook/react-native/issues/31820

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

Reactembengularbonestraphubpack.js

Slide 53

Slide 53 text

Good HTML is foundational Start off with just good quality code. That’s by far and away the best thing you could do for accessibility, especially screen reader accessibility. Screen readers are absolutely dependent on plain old semantic HTML. Divs and spans are the absolute worst thing you can do to us because they’re meaningless. HTML5 introduced a whole bunch of elements nav, main, header, footer, aside and such. And from a screen reader user point of view these were one of the most amazing strides forward I can remember coming across. https://f-word.dev/episodes/19/ - Léonie Watson

Slide 54

Slide 54 text

@brucel

Slide 55

Slide 55 text

@brucel Accessibility is part of Usability “high conformance with web accessibility guidelines may provide bene fi ts to users without disabilities.” 

Slide 56

Slide 56 text

@brucel Schmutz, Sonderegger and Sauer   • Sixty-one participants without disabilities used one of three websites di ff ering in levels of accessibility • A high level of web accessibility led to better performance (i.e., task completion time and task completion rate) than low or very low accessibility. • Likewise, high web accessibility improved user ratings (i.e., perceived usability, aesthetics, workload and trustworthiness) compared to low or very low web accessibility. Department of Psychology, University of Fribourg, Fribourg, Switzerland https://journals.sagepub.com/doi/10.1177/0018720816640962

Slide 57

Slide 57 text

@brucel • Picture of TBL “web developer”

Slide 58

Slide 58 text

@brucel Sir Uncle Timbo: The web is for everyone and collectively we hold the power to change it. It won’t be easy. But if we dream a little and work a lot, we can get the web we want. https://webfoundation.org/2019/03/web-birthday-30/

Slide 59

Slide 59 text

@brucel What can you do? Learn the semantics of HTML. There are 120(ish) elements, that’s all!

Slide 60

Slide 60 text

@brucel Most 2-year-olds can say about 100 words.

Slide 61

Slide 61 text

@brucel By the time your toddler is 2 1/2, she'll probably know close to 300

Slide 62

Slide 62 text

@brucel

Slide 63

Slide 63 text

Use the force

Clicky click

Slide 64

Slide 64 text

Visual impaired

Clicky click

Slide 65

Slide 65 text

Keyboard

Clicky click

wrapper.addEventListener("keydown", e => { if (e.key === " " || e.key === "Enter" || e.key === "Spacebar") { toggleBtn(e.target); } });

Slide 66

Slide 66 text

Style its states [aria-disabled] { pointer-events: none; opacity: 0.5; }

Slide 67

Slide 67 text

Or .....

Slide 68

Slide 68 text

Bruce’s law of web dev Built-in beats bolt-on. Bigly.

Slide 69

Slide 69 text

HTML popover Show popover

Popover content

::backdrop { backdrop-filter: blur(3px);}

Slide 70

Slide 70 text

I’m a modal

Show the dialog const dialog = document.querySelector("dialog"); const showButton = document.querySelector("#show"); const closeButton = document.querySelector("dialog button"); // "Show the dialog" button opens the dialog modally showButton.addEventListener("click", () => { dialog.showModal(); }); // "Close" button closes the dialog closeButton.addEventListener("click", () => { dialog.close(); });

Slide 71

Slide 71 text

HTML accordions FAQ 1

This is the answer to Q1

FAQ 2

This is the answer to Q2

FAQ 3

This is the answer to Q3

All browsers Speci fi cation stage

Slide 72

Slide 72 text

https://microsoftedge.github.io/Demos/selectlist/index.html

Slide 73

Slide 73 text

http://www.html5accessibility.com/index.html

Slide 74

Slide 74 text

https://learn.microsoft.com/en-us/compliance/regulatory/o ff ering-section-508-vpats

Slide 75

Slide 75 text

@brucel Progressive Web Apps • Web sites ++ • Can save to home screen, open full-screen • Can work o ff l ine (using Service Workers) • Much smaller initial install, instant updates but only the changes • Twitter, Wordle, Farmbound web.dev/learn/pwa/

Slide 76

Slide 76 text

@brucel

Slide 77

Slide 77 text

Google PM https://twitter.com/b1tr0t/status/1364996531527380993

Slide 78

Slide 78 text

Early progressive web apps in Asia & Africa

Slide 79

Slide 79 text

No content

Slide 80

Slide 80 text

https://daverupert.com/2023/05/getting-started-view-transitions/

Slide 81

Slide 81 text

@brucel

Slide 82

Slide 82 text

@brucel APIs not in Safari

Slide 83

Slide 83 text

@brucel Rule 2.5.6 Apps that browse the web must use the appropriate WebKit framework and WebKit Javascript. https://developer.apple.com/app-store/review/guidelines/#software-requirements

Slide 84

Slide 84 text

@brucel The illusion of competition

Slide 85

Slide 85 text

@brucel https://arstechnica.com/security/2023/10/hackers-can-force-ios-and-macos-browsers-to-divulge-passwords-and-a-whole-lot-more/

Slide 86

Slide 86 text

@brucel For your comfort and security. • The researchers have successfully leveraged iLeakage to recover YouTube viewing history, the content of a Gmail inbox—when a target is logged in—and a password as it’s being auto fi lled by a credential manager. • While iLeakage works against Macs only when running Safari, iPhones and iPads can be attacked when running any browser because they’re all based on Apple’s WebKit browser engine.

Slide 87

Slide 87 text

@brucel

Slide 88

Slide 88 text

@brucel open-web-advocacy.org

Slide 89

Slide 89 text

@brucel

Slide 90

Slide 90 text

@brucel

Slide 91

Slide 91 text

@brucel Browsers are powered by an ‘engine,’ which is fundamental to browser performance.… Apple bans alternatives to its own browser engine on its mobile devices; a restriction that is unique to Apple. This restriction also seriously inhibits the capability of web apps – apps that run on a browser rather than having to be individually downloaded – depriving consumers and businesses of the full bene fi ts of this innovative technology. https://www.gov.uk/government/news/cma-plans-market-investigation-into-mobile-browsers-and-cloud-gaming

Slide 92

Slide 92 text

@brucel

Slide 93

Slide 93 text

@brucel

Slide 94

Slide 94 text

@brucel Gatekeepers and core services Gatekeepers should therefore not use their position to require their dependent business users to use any of the services provided together with, or in support of, core platform services by the gatekeeper itself as part of the provision of services or products by those business users gatekeepers should also be prohibited from requiring end users to use such services

Slide 95

Slide 95 text

@brucel https://ec.europa.eu/commission/presscorner/api/ fi les/document/print/en/ip_23_4328/IP_23_4328_EN.pdf

Slide 96

Slide 96 text

@brucel Big teeth from March 2024 If a gatekeeper violates the rules laid down in the legislation, it risks a fi ne of up to 10% of its total worldwide turnover. For a repeat o ff ence, a fi ne of up to 20% of its worldwide turnover may be imposed.

Slide 97

Slide 97 text

@brucel There is still a dif fi cult fi ght ahead Apple has a legal budget of over $1 billion USD annually. “work out how to get closer to a particular risk but be prepared to manage it it it does go nuclear, ... steer the ship as close as you can to that line because that's where the competitive advantage occurs. Apple had to pay a large fi ne, Tim [Cook]’s reaction was that's the right choice, don't let that scare you, I don't want you to stop pushing the envelope.’ Bruce Sewell - Former Apple General Council

Slide 98

Slide 98 text

https://chromium.googlesource.com/chromium/src/+/main/docs/ios/build_instructions.md

Slide 99

Slide 99 text

@brucel Apple employees are very sad :-(

Slide 100

Slide 100 text

@brucel Set Safari free!

Slide 101

Slide 101 text

@brucel Consider making a Progressive Web App next time, for cross- device joy, tasty HTML semantic goodness (h1 - h6!) and accessibility. Until the Apple Browser Ban is ended, use something like Capacitor.js to get it into App Store. Follow and support Open Web Advocacy.

Slide 102

Slide 102 text

No content

Slide 103

Slide 103 text

No content

Slide 104

Slide 104 text

@brucel • [image of a crowd of people - terrible stock photo?]

Slide 105

Slide 105 text

@brucel

Slide 106

Slide 106 text

@brucel

Slide 107

Slide 107 text

@brucel

Slide 108

Slide 108 text

@brucel

Slide 109

Slide 109 text

@brucel

Slide 110

Slide 110 text

No content

Slide 111

Slide 111 text

THANKS ’N’ SNOGS! https://speakerdeck.com/brucel/ijs-munich brucelawson.co.uk * Other Bruce Lawsons are available. ** known to cause nausea in some jurisdictions.