of the

June 22, 2017 – Francesco Schwarz – @isellsoap

Screenshot einer view-source-Ansicht im Browser.
Blogartikel 'Aesthetics of the invisible'.

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.

Screenshot von einem Tweet von @isellsoap
Screenshot vom Projekt 'The front-end side of news'.
Screenshot der Website
Screenshot der Website
Screenshot der Website


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.

Screenshot of the chart.

☝️ 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.”

HTML 5.2 specification


“In case of conflict, consider users over authors over implementors over specifiers over theoretical purity.”

HTML Design Principles

☝️ 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.

Screenshot von einem Tweet von Amol Rajan.
Screenshot von einem Tweet von Keith J. Grant.

Expression of quality awareness, craftsmanship, and professional self-conception. ⭐️

Better maintainability through expressive code.

Better product, happier users, more reach, more revenue.

Screenshot Microsofts Website 'Inclusive Design'.

Making a product accessible doesn’t mean targeting a specific subset of people.

Screenshot vom Inclusive Design Konzept von Microsoft.

Thank you.


Links #1

Links #2