The web is for everyone – but it isn't always architected that way. In this Thinkful workshop we'll explore the process and techniques of authoring an inclusive web.

1. Responsibly
Architecting for the
World-Wide Web
🌏🌐🌍🌐🌎

2. 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

3. 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
🌐💰

4. financial cost
• Lost access is lost revenue. Make sure everyone
can enter the store, browse, and checkout to
maximize conversions
🚫💰

5. 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
💸😭

6. 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
👀🚙

7. moral cost
• Accessibility isn’t just about contrast, screen
readers, and disability
🤔♿
• An accessible design keeps primary features
within reach to all users
😀👥

8. 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

9. storms of the web
• poor network connectivity 📵
• outdated browsers 👾
• conflicts with browser plugins 😔
• firewalls 🔥
• unreachable CDNs 👋
• uncaught errors ⁉
⛈

10. 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 🖐

11. 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
📃

12. 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
👏

13. 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.
👍

14. 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
👍👍

15. 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
🍴

16. 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
📣

17. 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
📣

18. HTML–first examples
• Media Browser
• Manage Users Progressively Enhanced Web App
• Tree Component
• To-Do App
• Favicon Generator
• Tic-Tac-Toe
• Availability Grid
🤗