Aesthetics
of the invisible
June 22, 2017 – Francesco Schwarz – @isellsoap
Screen reader example #1 🤓
Usage of invisible semi-colon.
Screen reader example #2 🤓
Usage of title attribute and invisible text.
Details matter. Above all, the supposedly invisible makes for a good website. 👊
📉 Don’t think about SEO.
😀 Think about the user.
📈 Which will result in good SEO.
😭
Screen reader example #3 🤓
Usage of aria labels.
How can I get better at this? 🤔
☝️ Using div and span should be the exception, not the rule.
☝️ Read the specification and learn the semantics of elements.
💁
“Setting the lang attribute to a language which does not match the language of […] document parts will result in […] users being unable to understand the content.”
👏
“In case of conflict, consider users over authors over implementors over specifiers over theoretical purity.”
☝️ Always think
“with closed eyes”.
Optical state must have an equivalent representation in code semantics.
How do I make people see the importance of semantic markup and accessibility? 😍
This is the WWW.
Expression of quality awareness, craftsmanship, and professional self-conception. ⭐️
Better maintainability through expressive code.
Better product, happier users, more reach, more revenue.
Making a product accessible doesn’t mean targeting a specific subset of people.
Thank you.
Links #1
- Inclusive Design at Microsoft
- “Image May Contain…” – Alt Text and Other Breakthroughs in Assistive Technology
- Watch Microsoft’s Seeing AI help a blind person navigate life
- Inclusive Components
- Practical ARIA Examples
- Einführung in Barrierefreiheit | Aktion Mensch
- Accessibility matters—and here's what we're doing about it