Talk title

Interactive <cAAnvas>

Abstract

One goal we are aiming for while building our new creative editor at img.ly is its WCAG 2 AA-level conformity. While reaching the conformance for most regular UI elements was a small adventure by itself, facing the <canvas> element (and its interactive content) felt like reaching the endboss level. 👾

People using our editor are capable of directly interacting with different type of content which is drawn on the <canvas>, like e.g. manipulating images, adding vector shapes and layouting typography.
While having many advantages over drawing everything with the DOM, the big disadvantage of this approach comes with its disability to access the drawn content via assistive technolgies in a proper way.

In this talk I want to show you the problems we were (or still are) facing, how we got to working solutions and what we have learned during this process.

Your name (and pronouns)

Daniel Henning (he/him)

Contact Details

• Website: hnnng.dev
• eMail: [email protected] (personal) - [email protected] (job-related)
• Github: https://github.com/puresick
• imd.social (Mastodon instance): https://imd.social/@puresick

Code of Conduct

• I've read and agree to the HHTML Code of Conduct

Talk title

Creating Accessible CSS Art

Abstract

CSS art has been a thing since the creation of CSS itself. It is a great way of practicing and learning and it makes for an interesting coding challenge. But it has a big problem: CSS art is inherently not accessible. In this talk, I'll explain different HTML and CSS techniques to make your CSS art more accessible to all: from adding "alternative text", to avoiding some properties that will create trouble.

I did this as a lightning talk for a SydCSS meetup (5-10 minutes), but I could extend it to 20 minutes and apply everything on an CSS art example.

Your name (and pronouns)

Alvaro Montoro (he/him)

Contact Details

Twitter: @alvaro_montoro

Code of Conduct

• I've read and agree to the HHTML Code of Conduct

Talk title

Building native, cross-platform apps for mobile and desktop using plain old HTML, CSS, and JavaScript!

Abstract

Use the web technologies you know and love to create software that runs anywhere! No need to learn any new languages or make any compromises.

Your name (and pronouns)

Heapwolf (It/That)

Contact Details

paolo at socketsupply dot co

Code of Conduct

• I've read and agree to the HHTML Code of Conduct

Easy dark mode with color-scheme

It's just black and white. But should it be?

Abstract

A mashing together of two talks - either of which alone would be a lightning talk sort of length - the length of this one may end up somewhere around 15mins:

• how to use color-scheme
• a discussion on contrast levels

I have hashed out the main points I'd cover as follows:

• default html theme (light)
• dark default also exists!
• color-scheme meta tag and CSS
• relationship to prefers-color-scheme
• system colours
• contrast of default color-schemes
• when contrast is too high
• astigmatism & halos
• migraine study
• ravelry case study
• tempering color-scheme defaults
• takeaway: give lots of options if you can!

Your name (and pronouns)

Sara (she/her)

Contact Details

Mastodon: @[email protected]

Code of Conduct

• I've read and agree to the HHTML Code of Conduct

Talk title

Eco Bytes: Crafting for a Sustainable Web

Abstract

(draft)

In today's digital world, websites are getting heavier and slower, often at the expense of the environment. In this talk I will discuss different perspectives how to serve sustainability in web development and share practical insights to create low(er)-impact websites from own and client's projects.

Your name (and pronouns)

Mario Hamann (he, him)

Contact Details

[email protected]

Code of Conduct

• I've read and agree to the HHTML Code of Conduct

---

PS: I'm a colleague of @pepelsbey (who encouraged me to join the round), but unfortunately not from Berlin, but from (eco city 🌱) Freiburg. If you're interested in the talk I would need to clarify my final trip to Hamburg first before being able to finally accept myself. 🙏

Talk title

The road to HTMHell is paved with semantics

Abstract

HTML semantics is a nice idea that helped us to get through years of HTML spec crisis and markup nihilism. We got our ”new HTML5 hope” and a bunch of new semantic tags, accompanied by a few repurposed old ones. But does it really make a difference? There’s a huge gap between HTML spec’s good intentions and what browsers are willing to implement. And there’s even a bigger one between all of that and what screen readers actually support. Writing semantic markup only because the good spec is a spec and it is good and it’s a spec is not the worst approach you can take, but it might lead you to HTMHell.

Your name (and pronouns)

Vadim Makeev, he/him

Contact Details

• [email protected]

Code of Conduct

• I've read and agree to the HHTML Code of Conduct

Web Components: not Just Another Framework

Abstract

HTML is the bedrock foundation of everything that happens in a web browser. JavaScript frameworks present a compelling story of a certain kind of web development, but they must by definition limit their users in certain fundamental ways. Web components offer an alternative and complementary perspective on our craft: the ability to define our own HTML elements. In this talk, we will learn what similarities web components have to framework components models, and what advantages they have over them. We'll review some popular use cases for web components, and we'll discover a future for web development in which framework authors and users rally around standards and "move up the stack" together.

Your name

Benny Powers

Contact Details

available at https://bennypowers.dev

Code of Conduct

• I've read and agree to the HHTML Code of Conduct

Talk title

ARIA - Why we struggle so much with accessibility

Abstract

This talk shows why the traditional approach to web development causes so many accessibility problems and how it can be improved.

Your name (and pronouns)

Marco Bretschneider

Contact Details

https://www.linkedin.com/in/marco-bretschneider-norderstedt

Code of Conduct

• I've read and agree to the HHTML Code of Conduct

React in Vue - Gracefully moving into our new apartment 🦢✨📦

Abstract

Image you have the duty to migrate from Vue to React while implementing new features.
Here I can give an little input on How?, WHY?, When, and wHAt?
And maybe that is a nice conversation starter within the Meetup.

Can create some minor slides and hold in English primary and german second if wished.

Repo: https://github.com/h2xd/react-in-vue
Demo: https://h2xd.github.io/react-in-vue/

Also possible to do that tomorrow in Hamburg.

Your name (and pronouns)

Andrej Schujkow (he/him)

Contact Details

@h2xd

Code of Conduct

• I've read and agree to the HHTML Code of Conduct

Talk title

HTML: The Good Parts

Abstract

I have two descriptions. The funny one just lists all the tags:

html, head, title, base, link, meta, style, body, article, section, nav, aside, h1, h2, h3, h4, h5, h6, hgroup, header, footer, address, p, hr, pre, blockquote, ol, ul, menu, li, dl, dt, dd, figure, figcaption, main, div, a, em, strong, small, s, cite, q, dfn, abbr, ruby, rt, rp, data, time, code, var, samp, kbd, sub, sup, i, b, u, mark, bdi, bdo, span, br, wbr, ins, del, picture, source, img, iframe, embed, object, video, audio, track, map, area, table, caption, colgroup, col, tbody, thead, tfoot, tr, td, th, form, label, input, button, select, datalist, optgroup, option, textarea, output, progress, meter, fieldset, legend, details, summary, dialog, script, noscript, template, slot, canvas.

Together with the title it might be enough. If not, there’s a formal one:

The best and the most valuable parts of HTML from the practical point of view: what spec to read and how to read it, streaming and rendering in browsers, elements nesting rules and possible problems, the most critical structural and content elements, new and less known attributes, tools for validation and minification, ways to extend HTML.

Your name (and pronouns)

Vadim Makeev, he/him

Contact Details

• [email protected]
• @pepelsbey_dev

Code of Conduct

• I've read and agree to the HHTML Code of Conduct

Talk title

Pragmatic Responsive Images

Abstract

The topic of responsive images is full of confusion and misunderstandings. This is not a coincidence because it is a complicated subject with a lot of historical baggage. I've been searching for the perfect solution for years and instead found a pragmatic approach that has served me well in numerous web projects. And I think that I can present it in 5-10 minutes.

Background: In 2017, I created a 3rd-party-package for TYPO3 CMS that generates responsive image markup.

Your name (and pronouns)

Simon Praetorius (he/him)

Contact Details

on Mastodon: @[email protected]

Code of Conduct

• I've read and agree to the HHTML Code of Conduct