Nothing
We transform grand ideas into pioneering products. With the power of design.
Epiphany
Mentor in building modern, robust, and accessible websites
Nothing AG, nothing.ch 🔗
A question that bothers me since my embed days...
What technical invention would render your job obsolete?
Bastiaan / Spot
Anna-Karenina-Principle
Alle glücklichen Familien gleichen einander; jede unglückliche Familie ist auf ihre ganz eigene Art unglücklich.
Anna Karenina, Leo Tolstoi (1887)
A deficiency in any one of a number of factors dooms an endeavor to failure. Consequently, a successful endeavor is one for which every possible deficiency has been avoided. Wikipedia
What I learned about web design
- 95% of websites built on inadequate HTML (not used as intended)
- Most developers rely on "gut feeling"
- No solid theoretical background
from 7 years of accessibility consulting
Give a simple task to 10 developers, and they will probably come up with 10 very unique implementations.
Simple task: create a link!
<a href="…">
Click me!
</a><span onclick="location.href='…'"
class="link"
tabindex="0"
role="link">
Click me!
</span>
<style>
.link {…}
.link:hover {…}
.link:focus {…}
.link:active {…}
</style>Solutions that just feel right
- Some solutions are better than others
- They are elegant, simple, and straight to the point
- They are robust and performant
- They are lightweight, extensible, and maintainable
- They are cross browser / device compatible
- They serve multiple purposes (SEO, usability, accessibility)
- They make sense from a higher level view
In our experience, for most requirements usually one such outstanding solution exists.
And guess what...?
Because they use HTML the way it was intended.
The solutions that "just feel right" usually are the ones built with accessibility in mind.
Anna-Karenina-Principle
Alle hochwertigen Websites gleichen einander; jede mangelhafte Website ist auf ihre ganz eigene Art mangelhaft.
applied to implementation of modern websites
Josua Muheim (2021)
High-quality websites are inherently accessible.
Why I quit my job
- It's a pain in the ass
- Tell seasoned web experts they miserably fail their HTML
- Primary school: giving HTML 101 lessons
- Not sustainable: next project usually failing again
after 7 years of being an accessibility consultant
Accessibility consulting is broken
Conducting audits on finished projects is the least effective way of improving accessibility.
But still, it's what makes up 90% of accessibility consulting today.
(Karl Groves, CEO Tenon.io)
But how
could it come that far?!
Trying to solve problem top-down
- Lack of awareness, knowledge, and motivation
- A11y still missing on educational agendas
- Developers: "We'll take care of it when the project's finished!"
- Consultants: "Sure! We then tell you what you did wrong in the first place!"
- Fixing stuff is frustrating and cumbersome
- More effort, less satisfying results
- Internationally thousands of lawsuits
- A11y's reputation is in free fall
-
Problem #1: Services mainly target finished web projects
- "We audit your (finished) website!"
- Tenon.io, Axe, ACE, TotalValidator...
- "We improve your (finished) website!"
- SiteImprove, AccessiBe...
- "We audit your (finished) website!"
-
Problem #2: Knowledge is expected to be actively pulled by developers
- Knowledge spread all over the Internet
- Hard to discern good from bad
- Dry and boring text content
- Most developers not even aware that they lack knowledge
- "Oh, images can have an alternative text?!"
- Knowledge spread all over the Internet
Problems of today's approaches
Shift in paradigms
We desperately need a
We need to code things right
- New code written on top of earlier work
- Foundation's quality cascades through subsequent layers
- Goal: do things right from first line of HTML code!
- Prerequisite: empowerment of developers (and others)
...right from the start!
Grassroots movement
It's about time to ignite a
Epiphany
Stage clear for
What is Epiphany?
A simple tool that assists in crafting accessible web projects from the ground up. It always sticks to your side and offers advice on how to optimally achieve the things you're currently working on.
Remember Clippy / Karl Klammer?
- Gave assistance in writing letters (Word 97 to 2003)
- Addressed both problems of today's approaches to solve a11y issues
-
Problem #1: Targeting finished projects
- Clippy was eager to help from
beginning of project
- Clippy was eager to help from
-
Problem #2: Knowledge needs to be
pulled actively- Clippy offered information instantly
Admittedly...
- Clippy was rather annoying than helpful
- Subject to a lot of memes 🔗
- It had to assume what user was trying to accomplish
- Typing a few words is a bad basis for assumptions
- Provided help was generic and boring
- Even when the topic fit the current task
But imagine...
- A friendly virtual mentor watching over your shoulder while being at work
- Designing a GUI
- Implementing some components in HTML
- Writing content or producing a video
- Someone helpful because they actually get what you are doing
- HTML based assumptions are pretty specific
- Providing specific and useful help
- "The text colour of this button does not offer enough contrast to its background. Learn how to enhance it!"
- "You are currently implementing an image. Learn how to add an alt text!"
- "You just linked a video. Learn how to provide subtitles!"
Epiphany offers profound knowledge at your finger tips
Epiphany's core is an extensive library of carefully maintained rules yielding optimal solutions. Remember? The ones that "just feel right"!
The rules are based on years of experience, blending together expertise from all related fields of action.
Fields of action
- Design
- User experience (UX)
- Coding (HTML, CSS, JavaScript)
- Accessibility consulting
- Search engine optimisation (SEO)
- Content creation
- Text, image, video
One-liner; no-brainer
<html>
<head>
<title>My cool website</title>
</head>
<body>
<h2>Welcome everybody!</h2>
<p>
It's great that you're visiting.<br><br>
This is my very first website.
</p>
<img src="josua-nothing-thumbnail.png" width="150">
<!-- Include at the very bottom -->
<script src="https://epiphany.com/widget.js"></script>
</body>
</html>Insert one line of code at bottom of project
Just reload
4
🚨Epiphany found 4 issues:
- Your website's language is missing (lang attribute).
- You don't have a heading on level 1 (<h1> element).
- You're using <br> elements to separate paragraphs.
- Your image has no alternative text (alt attribute).
📋An image needs an alternative text
- If decorative, set empty alt text 💡
- If informative, add short alt text 💡
- If complex, add descriptive text below 💡
Learn more:
- Reactions: Why is this important? 🙋♂️🙋♀️
- Demos: What specific problems arise? 🎬
- Examples: Comprehend the issue! 👁️🗨️
- Resources: Instructions & references 📚
Wow
4
🚨Epiphany found 4 issues:
- Your website's language is missing (lang attribute).
- You don't have a heading on level 1 (<h1> element).
- You're using <br> elements to separate paragraphs.
- Your image has no alternative text (alt attribute).
🙋♀️Reactions 🙋♂️
- Gianfranco (blind): "I can't see images. I need a short and concise alternative text describing an image's content and meaning." 💡🎬👁️🗨️
- Andrea (SEO expert): "Although modern search engines are capable of extracting a lot of information automatically from images, they can't perceive the actual meaning of an image in context." 💡📚
- Mbembe (unstable connection): "Sometimes my Internet connection is bad and images just won't load. If this happens, my browser can present me the alternative text." 💡🎬📚
And wow
4
🚨Epiphany found 4 issues:
- Your website's language is missing (lang attribute).
- You don't have a heading on level 1 (<h1> element).
- You're using <br> elements to separate paragraphs.
- Your image has no alternative text (alt attribute).
🎬Videos
- How a screen reader announces images with different kinds of alternative text 📚
- How a browser with unstable connection displays unreachable images 💡📚
- Interview with Gianfranco: What makes up a good alternative text for an image? 👁️🗨️
And wow again
4
🚨Epiphany found 4 issues:
- Your website's language is missing (lang attribute).
- You don't have a heading on level 1 (<h1> element).
- You're using <br> elements to separate paragraphs.
- Your image has no alternative text (alt attribute).
👁️🗨️Examples
- Images without alternative text 💡
- Decorative images with empty alternative text 📚💡
- Images with alternative text
- Complex images with additional surrounding text
- When to use <img> or <figure> 📚
- When to use SVG instead of rasterised images
- How to handle icons (ie. icon fonts) 💡
Many distinct and simple rules
- Content must have enough contrast
- Every page must contain a <main>
- Every page should contain a <header> and <footer>, enclosing <main>
- There must be at least one <h1> on a page
- The heading outline must be correct (no skipped levels)
- Link/button captions must be self-speaking
- Link/button captions must be unique
- Every form control must have an associated label
- The last element of a <form> must be a <button>
- An interactive element must be able to receive focus
- The DOM should be valid
- Embedded video with language must offer closed captioning
- Etc.
Obedience expected
- Rules are inter-related and inter-dependent
- Instead of offering 10 different options to do something, offer only one!
- The one that "just feels right"
- This allows to keep a distinct, concise, and coherent set of rules
- Obedience of higher level (general) rules will unlock lower level (more specific) ones
- General rule: "Add an alt attribute to an image"
- More specific rule: "Make sure that alt texts are concise and meaningful"
Anna-Karenina-Principle
Alle hochwertigen Websites gleichen einander; jede miserable Website ist auf ihre ganz eigene Art miserabel.
applied to implementation of modern websites (again)
Josua Muheim (2021)
High-quality websites are inherently accessible.
Well-reasoned explanations
- Text explanations & tutorials
- Short, concise, to the point
- Videos
- Screen reader demos, how tos, etc.
- Created on-the-fly while doing our daily consulting work
- Personas
- Gianfranco (blind): "Headings are important for me because..."
- Andrea (SEO expert): "An image's alt text is important because..."
- Emma (elder): "High contrast is important for me because..."
- Examples
- Good vs. bad ones (or even: before and after)
- Codes, ready to copy&paste
Adapting to the audience
- Content and functionality specific to project state...
- Planning phase, design / UX, implementation, maintenance
- ...and to user profile
- Designer, developer, content creator
- For example, during implementation phase, Epiphany just displays warnings for found issues (and to be fixed right away)
- But when in maintenance, Epiphany creates tickets in Github/Gitlab
- Or at the end of implementation phase, a report of the project history can be created, serving as declaration for accessibility efforts
Integrating into the project's stack
- Epiphany based 100% on web technologies
- Insert one line of code and always have Epiphany at your side
- Integration of Github, Gitlab, JIRA, etc.
- Feeding existing audit tools
And behold...
There's money to earn!
Making money with Epiphany
- Open Source
- Attract a11y community
- Everybody can use basic (local) version for free
- Contribution to a better world
- Paid plan allows:
- Hosted solution / SaaS (ie. history log, allows to define exceptions, collaboration with multiple users, certification)
- Access to video full library
- Integration with Github, Gitlab...
Create once, sell many
From Nothing to Everything with Epiphany at your side
With the advice of Epiphany applied diligently, your project will evolve into a modern and sophisticated website (or web app), that is elegant, surprisingly simple, rock solid, performant, maintainable, and highly accessible.
Thank you!
Reach out: josua@nothing.ch
Epiphany
By Nothing
