Responsibly Architecting for the

World-Wide Web

🌏🌐🌍🌐🌎

the www• Authoring the world–wide web is a great

power. With it comes a responsibility to at least consider world–wide accessibility needs of a broad audience

• Both you and your audience profit from inclusive design patterns

• World–Wide Web !== Wealthy Western Web

financial cost• Think of a public building; an art gallery. Even if

you open it to the public with no admission each person spends time and money to arrive💸⏱

• The web is no different🌐💰

financial cost• Lost access is lost revenue. Make sure everyone

can enter the store, browse, and checkout to maximize conversions 🚫💰

moral cost• Imagine denying entry to 11 out of every 1,000

concert attendees with no explanation and giving them no refund. That is what putting your initial content behind scripts is doing🚫🎤

• Users show up, pay the admission fee in bytes, and may be left with no content💸😭

moral cost• Ableism affects everyone because a more

accessible experience benefits everyone🌐👍

• Dictation is useful not only to the blind but also the driver who needs to keep their eyes on the road👀🚙

moral cost• Accessibility isn’t just about contrast, screen

readers, and disability 🤔♿

• An accessible design keeps primary features within reach to all users😀👥

reusable process• Determine what is bringing users to your

experience. Odds are it is your content!

• Deliver content interpretively as HTML🎭📦

• Progressively enhance content with stylesheets and scripts

storms of the web• poor network connectivity 📵

• outdated browsers 👾

• conflicts with browser plugins 😔

• firewalls 🔥

• unreachable CDNs 👋

• uncaught errors ⁉

⛈

delivering content• Sending content as part of a semantic HTML

document is the quickest and most accessible way to deliver it to web users ⚡

• GZIP, HTTPS, HTTP/2 for optimal delivery. Test on gh-pages, it will do it for you 📊

• The interpretive nature of HTML allows a user’s device, browser, and preferences to decipher your content to the best of its ability 🖐

performant content• Web Performance is about reliability not speed🐢🏁

• Even if only part of an HTML document is received, or it is malformed somehow, the content will still be accessible📃

HTML–first• Putting content behind JavaScript is declarative

delivery

• Declarative delivery is designed for logic, not content

• When we write an algorithm we need precessions, so we use JavaScript

• The aspects of front–end JavaScript that qualify it to asynchronously enhance web pages disqualify it from initially delivering synchronous content

👏

JavaScript is good• Front–End JavaScript is bad for delivering

initial content

• This does not mean that JavaScript is “bad”. It means that JavaScript is good……at what it is designed for.

👍

JavaScript is really good• JavaScript can be used to improve accessibility

through progressive enhancement

• localStorage API

• History (Push) API

• Service Workers

• Offline Support

• Asynchronous Content & Interaction

👍👍

ARIA is salt• The Accessible Rich Internet Applications Suite

defines defines a way to make web applications more accessible

• A sprinkle of ARIA here and a dash there as needed can make for a delicious experience, but an unmeasured overdose can ruin the meal

• Initially work within the limitations of HTML. Use native interpretative components when possible. Add ARIA if and as needed

🍴

ARIA example• Screen reader user be either contextually or

physically blind

• To deliver a notification to a screen reader user we need to interrupt the narrator

• The aria-live attribute allows developers to specify whether or not and how urgently an element should interrupt the reader when its content is updated

📣

ARIA example• <aside role="alert" aria-live="assertive" id="alert-banner" hidden><p>Live Preview, Export, and Keyboard Shortcut enhancements loaded lazily</p></aside>

• A hidden aria-live banner can be used to audibly relay events that are otherwise implied visually

📣

HTML–first examples• Media Browser

• Manage Users Progressively Enhanced Web App

• Tree Component

• To-Do App

• Favicon Generator

• Tic-Tac-Toe

• Availability Grid

🤗