You decide whether people are able to use the web.

Transcript

1. You decide whether people are able to use the web.
2. We have a huge responsibility.
3. We are privileged; not everybody is.
4. Probably you
5. Many other people
6. Aesthetics >
7. Respect >
8. Responsible Web Design
10. The internet is important. Make it possible for everyone to use it.
11. Code ! "
13. <div contenteditable></div> <input type="text" id=“twitter" aria-invalid="true">
14. <span class="label">Twitter Name</span> <div contenteditable class="input"></div> <label for="twitter">Twitter</label> <input type="text" id="twitter" aria- invalid="true">
15. <span class="label">Twitter Name</span> <div contenteditable class="input"></div> <label for="twitter">Twitter</label> <input type="text" id="twitter" aria- invalid="true"> “Edit text” “Twitter, invalid data, edit text”
16. Example ! "
18. <div class=“header-input”> <span contenteditable=“true” placeholder=“Demo time yay!” class=“header-input__field”> </span> </div>
19. .header-input { max-width: 400px; margin: 40px auto; &__field { border: 0; outline: none; font-weight: bold; color: black; font-size: 20px; border-bottom: 1px solid #E3E3E3; } }
20. .header-input__field { &[contenteditable=true]:empty:before{ content: attr(placeholder); color: #E3E3E3; border-bottom: 1px solid #E3E3E3; width: 150px; display: block; } }
22. Find a solution together.
23. So? What should I do?
24. So? What should I do?
25. So? What should I do? • use appropriate HTML elements (there are a lot)
26. So? What should I do? • use appropriate HTML elements (there are a lot) • the browser handles a lot for you
27. So? What should I do? • use appropriate HTML elements (there are a lot) • the browser handles a lot for you • improve user experience
28. So? What should I do? • use appropriate HTML elements (there are a lot) • the browser handles a lot for you • improve user experience • improve accessibility
29. jonas@reitmann.me / @jonicious
30. jonas@reitmann.me / @jonicious