yatil.net feed https://yatil.net/blog Sun, 29 Sep 2019 15:00:00 +0200 The latest updates from Eric Eggert’s blog ARIA Serious ?! @ technica11y https://yatil.net/blog/aria-serious-at-technica11y blog/aria-serious-at-technica11y Sun, 29 Sep 2019 15:00:00 +0200 It is an updated talk from the one I gave several times before but it is always nice to document new and inventive atrocities.

When: October 2, 2019, 11am ET
Where: Online, Register here

Connecting the Accessibility Dots (Workshop in Berlin in November) https://yatil.net/blog/connecting-the-accessibility-dots-workshop-in-berlin-in-november blog/connecting-the-accessibility-dots-workshop-in-berlin-in-november Sun, 29 Sep 2019 12:30:00 +0200 In this new workshop I want to help people wo have an understanding of specific parts of accessibility to get a better understanding on where this fits in the general framework of designing, writing, and developing accessible websites. The learning outcome should be a holistic approach to accessibility that leads participants to anticipate accessibility-related issues earlier.

We look at the requirements for accessibility, the needs of people with disabilities, and how assistive technologies work. We’ll answer the important questions about accessibility: Why is it important? What are the important concepts? How do people with disabilities actually use the web? How can we create accessible websites without consulting WCAG at every step? When, and how, can we make sure that we don’t step into the same traps all the time again and again?

In the second half of the workshop I’ll then answer the specific questions of the audience (provided in advance), applying the approaches learned in the morning to practical use.

When: November 17, 2019 (with Accessibility Club Summit Barcamp on Nov 16 and after beyondTellerrand, Nov 14 & 15)
Where: To be determined, Berlin

Buy tickets for the workshop at accessibility-club.org!

Open in Overcast Bookmarklet https://yatil.net/blog/open-in-overcast-bookmarklet blog/open-in-overcast-bookmarklet Tue, 27 Aug 2019 15:20:00 +0200 Unfortunately there often is no link to the Overcast URL directly on the page despite Overcast having decent web integration1. Adding a podcast to Overcast in this case means copying the title of the podcast, open the web interface or the app, searching for the podcast, searching for the episode to sample. and adding this episode.

It’s not the end of the world, but it introduces some friction that seemed unnecessary to me.

Overcast accesses the iTunes Apple Podcast Directory and its podcast URLs take the same ID as is present in that directory. Due to the nature of Apple Podcasts, every podcast has a link to their entry on the page.

JavaScript to the rescue!

I have created the following JavaScript2 which searches for podcast links (two variations). If one is found, it extracts the ID using a regular expression, adds it to the Overcast URL and opens the URL in the current window/tab.

const regex = /podcast\/id([0-9]*)/i;
var itunes = document.querySelector('a[href^="https://itunes.apple.com/"][href*="/podcast/"],a[href^="https://podcasts.apple.com/"]');

if (itunes) {
  var itunesid = regex.exec(itunes.getAttribute('href'));
  var overcasturl = 'https://overcast.fm/itunes' + itunesid[1];
  window.location.href = overcasturl;
} else {
  alert('No Apple Podcasts link found. 😭');

I then used Peter ColesBookmarklet Creator to generate a bookmarklet.

To install the bookmarklet, drag the following link to your bookmarks/favorites bar:

Open in Overcast

While searching for the episode and to add is still needed, I hope to try out to more diverse podcasts this way.

  1. Which is one reason I switched back to Overcast twice after extended stints of trying out Castro where I prefer how podcast playlists are managed. 

  2. Not really rocket science. 

Accessible CSS Generated Content https://yatil.net/blog/accessible-css-generated-content blog/accessible-css-generated-content Sat, 13 Jul 2019 14:10:00 +0200 His1 goal was to provide text effects by layering different styles of the same font on top of each other. Designers use this technique to extend a base font style with other flourishes of the same font. The final code he came up with is this HTML, using the notranslate class to prevent translation of the heading2:

<h1 class="type-family-jakob notranslate" 

The CSS looks like this:

[class*="type-family"] { position: relative; }

[class*="type-family"]:before, [class*="type-family"]:after {
  content: attr(data-heading);
  position: absolute;
  z-index: 1;
  overflow: hidden;
  left: 0;
  top: 0;
  font-size: inherit;
  font-weight: normal;

Until a couple of years ago, the browsers did not treat generated content as “real” content. They did not expose it to assistive technologies like screen readers. That created an issue, for example when web developers used CSS to specify the file format of a document:

<a href="link/to/an/interesting.pdf">
  Get the Report
a[href$="pdf"]:after { content: " (PDF)"; }

For visual users, the link text “Get the Report (PDF)” would have been clear. But “(PDF)” was not conveyed to screen readers and other assistive technologies and thus not their users. Most developers don’t intend that behavior, so browsers started to treat generated content as actual content.

Back to Andy’s example. The “accessible name” (the label that assistive technology uses) of his heading rank 1 would include the :before and the :after version of the contentand the content of the <h1> itself. The browser “sees”:

<h1 class="type-family-jakob notranslate">
  France-Norvège France-Norvège France-Norvège

There is an ARIA attribute that we can use to overwrite3 the content of the <h1>: aria-label. So we could augment Andy’s code like this to avoid tripling the heading:

<h1 class="type-family-jakob notranslate" 

This would work, but having two attributes repeating the content of the heading feels wrong. As attr() can use any attribute, not only data- attributes4, we can use it with the aria-label and remove data-heading:

<h1 class="type-family-jakob notranslate" 
[class*="type-family"]:before, [class*="type-family"]:after {
  content: attr(aria-label);

This is where this story could end. And indeed this is where this story would have ended a couple of weeks ago. Yet, thanks to accessibility advocates, aria-label is now actually one of the attributes that is translated when using Google Translate through Google Chrome – but not in other browsers. If that is enough to remove the notranslate class from the heading depends on your circumstances. As the short clip of this example codepen shows, the aria-label attribute translates nicely:

ARIA label translates in Google Chrome [no sound]

  1. Note that this is using Andy’s use case as an example. He immediately added a note to his article when I made him aware of the accessibility implications. I wanted to write this up as a lesson in how the web changes and how different aspects of the web can work together. After all the web is constantly evolving and we’re all learning all the time. 

  2. Usually I would oppose to remove the ability for users to translate content to their language. In some circumstances, like proper names, this can be OK. 

  3. A note, because I see that in accessibility assessments all the time: If you use aria-label, the content of your element is not revealed to assistive technologies. Writing <a href="…" aria-label="opens in a new window">Visit our partner site</a> will result in a link that only says “opens in a new window”. Just don’t use it that way. OK? 

  4. Indeed, attr() was invented long before data- attributes were a thing. 

Much Ado About No Lists https://yatil.net/blog/much-ado-about-no-lists blog/much-ado-about-no-lists Sun, 13 Jan 2019 11:50:00 +0100 First things first:

What does it mean for me as a web developer that Safari is not reading lists when it doesn't look like a list?

Nothing. The first commits for “layout lists”1 have been committed to the source in 2014, the code for this particular functionality has not changed since mid-2015. Considering that the issue just came up in 2019 probably means that it did not have a negative impact on users. Instead, according to a comment made by James Craig, “Customers seem much happier in the 3 years since this change went in.”

But shouldn't browsers and screen readers respect semantics?

That was my first knee-jerk reaction on Twitter.

In a perfect world where developers would code perfect code, this principle would hold true. However, in the diverse context of the web, browsers and assistive technologies have to make judgment calls. Back in the day that was mostly about repairing HTML (before the behavior was standardized in HTML5).

Today those judgment calls revolve around how users actually use and want to read content on the web. When mobile browsers were introduced, the viewport was set to 960px by default to avoid breaking sites. It was a judgment call to not break the web.

When Safari decides that it is better not to announce lists in certain circumstances, that is a judgment call they are allowed to make whether I agree with it or not.

Indeed this already happens with tables where browsers (all of them!) make a determination of layout table, or not.2

Most screen readers also decide to not use <strong> or <em> semantics, so they are usually not announced. In fact, even such useful elements as <del> and <ins> usually have no recognition at all in browsers.3

So we need standards for screen reader output!

Yes, and no. Users of screen readers are very diverse. Many screen reader users can see the screen. Some know every bit of the screen reader’s settings, other users struggle with the essential functions. In the end, a screen reader is a highly personalized piece of assistive technology.

In principle, I’d personally prefer the behavior to be a setting in the screen reader (VoiceOver) itself, rather than Safari deciding what to do. On the other hand that has also ramifications: How would the browser communicate that it deems a list is used for “layout”? We generally don’t want assistive technologies to access the HTML directly, because this lead to issues in the past.

Next steps?

Of course, we can yell at browsers and assistive technologies for making our lives more complicated, but the reality is that we are living in a complex world and there is not a black and white answer (yet!) on how to tackle issues like this.

We really need an open conversation on what CSS is allowed to overwrite semantics. Apart from display:none/visibility:hidden, I personally think no CSS should alter the semantics of the page.

The above paragraph was my hot-take two days ago. I’m not sure if it holds up as much as I would want it to do. I think we need to define the expected or preferred behavior of user agents somehow but to flat-out forbid interpretation might be to the decrement of the users.

We have come so far to agree that websites don’t need to look the same in every browser mostly due to bugs in their rendering engines or preferences of the user.

I think the same is true for screen readers and other assistive technology: Websites don’t need to sound the same in every screen reader.

The issue with “listitis”4 stems from HTML not having a lot of ways to structure content differently. Do we really need <ul> lists in every <nav> element? Wouldn’t it make more sense to have <item>5 elements as direct children in the navigation? Do we need additional ways to group content that are not lists? Maybe we should adopt the <g> element from SVG in HTML. Maybe we should more often use <section>s as a grouping mechanism.

It is great that we have this conversation around semantics, interpretation, and standardization. It is needed. But please don’t use the discussion to frighten developers of accessibility. Best practices are useful. Semantic code is always better for accessibility, even if some users or technology decides not to use parts of it. Differences are OK as long as users have a good experience and without an indication that it hurts users, I don’t think we should “fix” it at all.

See also: Scott O’Hara’s take on the issue (with a lot of more background information and ways to force list semantics to VO/Safari users, if you really have to.)

  1. I think that saying those lists are used as “layout” is quite a misnomer, the lists are used as a generic grouping mechanism. 

  2. This is an entirely different issue than the one that removes semantics from responsive tables. 

  3. Which is a shame, they are so useful! 

  4. Using lists to structure every little part of the content. 

  5. Sorry for uninventive naming. 

Leaving Facebook https://yatil.net/blog/leaving-facebook blog/leaving-facebook Mon, 31 Dec 2018 00:00:00 +0100 For me, as for many, Facebook grew essential to be in touch with some relatives and colleagues. However, those contacts have been superficial, and Facebook is not the sole way to be in touch.

My professional contacts have blogs and twitter profiles. I can follow them using Feedbin which supports not only following RSS feeds but also Twitter profiles. This gives me a privacy-first way to read relevant information.

Of course, where it gets hard are the private contacts. Some prefer Messenger, others just use Facebook as their social network of choice. Most of my contacts are, however, not very active on Facebook or live in a right-wing bubble. The latter leads to me not following them and they not following me, so being active on Facebook is not broadening their horizon[^I try to read conservative views where I can. Right-wing propaganda is not conservative.].

While I will stop using Facebook, I’ll continue to use some of their other properties, namely WhatsApp and Instagram. The former is the basis for communication with some close relatives, so that leaves me without much choice. The conversation is encrypted, and I don’t share my contacts with the app, so it’s ok for the time being. The latter is an excellent way to keep in touch on a very superficial level. However, I’ve recently reduced publishing on Instagram and with Flickr's future in question, I hope to have a personal Pixelfed instance running at some point.

Lastly, I don’t want to be a reason for people to stay on Facebook. Being a cog in the Facebook machine makes me an involuntary helper for their extremely addictive drug. And I don’t want to be that.

If you want to stay in touch, I recommend these ways to follow me:

If you want to message me, email is the best way: mail@yatil.net[^Twitter or other social media DMs might also work, but I don’t check them regularly.]. If you have my phone number (it hasn’t changed in many years), feel free to ping me via iMessage, SMS, in WhatsApp, or Signal.

Sunday Seven for April 29, 2018 https://yatil.net/blog/sunday-seven-for-april-29-2018 blog/sunday-seven-for-april-29-2018 Sun, 29 Apr 2018 00:00:00 +0200
  • Swaziland king renames country Kingdom of eSwatini (The Guardian)

    Internationalization is hard, now you have to fit in a country with a lower case first letter.

    Meaning “place of the Swazi”, eSwatini is the Swazi language name for the tiny state landlocked between South Africa and Mozambique. Unlike some countries, Swaziland did not change its name when it gained independence in 1968 after being a British protectorate for more than 60 years.

  • Hand tremors and the giant-button-problem (Axess Lab)

    In accessibility, we usually argue for large tap areas – but they can be a problem for users with certain motor impairments.

    The user is trying to place his finger between the news stories. He’s hoping the space is unclickable, so that an accidental tap while trying to scroll will not activate a link. However, every part of the screen is linked. It’s like the whole interface is one giant button – hey what a clever comparison, let’s add that to the title of this article!

  • The BBC is letting you download more than 16,000 free sound effect samples from its archive (MusicRadar) > There can be few organisations that have used more sound effects than the BBC, so there’s bound to be great interest in the news that the corporation has now made more than 16,000 of its FX available for free download. These are being released under the RemArc licence, which means that they can be used for “personal, educational or research purposes”.

  • Time.is

    A useful site for people who need to communicate across time zones.

  • For everyone (Hidde de Vries)

    It appears ‘for everyone’ can have different meanings and I think it is important to see the difference between them, so that we are not fooled by for-profit companies that present themselves as charities. The web itself is a place where people are put first, and a place where power is not exercised on people, it is given to people.

  • Bits Up!: Cache-Control: immutable

    In recent months, I have been surprised about the amount and possibilities of HTTP headers. Immutable is certainly one to add to the tool belt.

    When a client supporting immutable sees this attribute it should assume that the resource, if unexpired, is unchanged on the server and therefore should not send a conditional revalidation for it (e.g. If-None-Match or If-Modified-Since) to check for updates. Correcting possible corruption (e.g. shift reload in Firefox) never uses conditional revalidation and still makes sense to do with immutable objects if you're concerned they are corrupted.

  • gridtoflex.com

    Good advice! (However, don’t use emojis in your CSS: It’s less understandable as you think it is, and there are likely weird edge cases in browsers.)

    CSS grid is AMAZING! However, if you need to support users of IE11 and below, or Edge 15 and below, grid won't really work as you expect (more info here). This site is a solution for you so you can start to progressively enhance without fear!

  • ]]>
    Hyphenation, Languages and Code https://yatil.net/blog/hyphenation-languages-code blog/hyphenation-languages-code Tue, 10 Apr 2018 00:00:00 +0200 Jeremy posted a solution for multi-language sites where you want to switch hyphenation on when the page language is set to (for example) German:

    [lang="de"] { hyphens: auto; }

    This works great until you have code on the page. Even if we have word-wrapping for code enabled (and we should on responsive sites), hyphenation is not what we want, usually. The same goes for code in sentences. So I’d suggest adding the following to the CSS:

    [lang="de"] pre, [lang="de"] code { hyphens: none; }
    On the #A11y Rules Podcast https://yatil.net/blog/on-the-a11y-rules-podcast blog/on-the-a11y-rules-podcast Sun, 08 Apr 2018 00:00:00 +0200 Nic @vavroom Steenhout (Blog) invited me to his #A11y Rules Podcast. We talked about my work with Knowbility and the W3C Web Accessibility Initiative (WAI) and how I got into accessibility. Nic’s podcast is short and sweet, so you don’t have to listen to me waffling on for too long. Nic makes transcripts of the episodes available. Episode 1 of the two-part interview is out now!

    Thank you, Nic, for having me!

    Sunday Seven for April 8, 2018 https://yatil.net/blog/sunday-seven-for-april-8-2018 blog/sunday-seven-for-april-8-2018 Sun, 08 Apr 2018 00:00:00 +0200 I’ve been on vacation for a bit, which was incredibly relaxing. Some pictures are available on Instagram (for now – I need an indie web solution for this).

    • Professionalism: Design’s Lost Generation (Mike Monteiro, Medium) — Everyone who helps to produce a product is a designer, every decision counts. It’s important to make ethical design decisions. There are two words every designer needs to feel comfortable saying: ‘no’ and ‘why’.
    • History: A Short History of WaSP and Why Web Standards Matter (Jay Hoffmann, thehistoryoftheweb.com) — Web standards wouldn’t be widely implemented without the volunteer groups formed in the early days of the internet.
    • Indie Web: It’s Time for an RSS Revival (Brian Barrett, Wired) — I firmly believe that the distributed web is the better model. But feeds aren’t a solution for everything: I would not want to subscribe to a newspaper because of the huge output there. Also it only furthers the information bubble. We need solutions to surface a diverse set of news.
    • Communicating Ideas: Write it down (Mark Boulton) — I often ask people to write down specifics of their problem or suggestions. It often helps me to better understand but also helps others to understand the complexity of their request or find better/other approaches. Conversations are great for brainstorming, but to nail it down, write it down.
    • Accessibility: Small Tweaks That Can Make a Huge Impact on Your Website’s Accessibility (Andy Bell, css-tricks.com) — A broad overview over some accessibility techniques. See also the W3C WAI Tips for Getting Started with Web Accessibility.
    • Malpractice on the web: Bei der „Sächsischen Zeitung“ wird Auschwitz zum Genuss-Moment (Stefan Niggemeier, übermedien.de, English machine translation) — There’s a new advertising form that content publisher can use: A swirly overlay that advertises a product inside the article image. It’s just really bad when the article image depicts the Auschwitz entrance gate and there’s no way for publishers to exclude sensitive material. (The whole ad form was disabled after the incident.)
    • Code examples: carbon — If you want to use images of code in your presentation, carbon adds a window frame around it. It looks very sharp. There is a way to export SVG, but I have not looked into the accessibility of it. (Provide a link to the code or add an alternative text.)
    Sunday Seven for March 18, 2018 https://yatil.net/blog/sunday-seven-for-march-18-2018 blog/sunday-seven-for-march-18-2018 Mon, 19 Mar 2018 00:00:00 +0100 I’m in San Diego where I’ll attend the W3C WAI Education and Outreach WG Face-to-Face meeting, and CSUN, the biggest accessibility conference. It’s always amazing to be able to work with my colleagues in one room and to meet all accessibility experts in one place.

    • Beta: W3C/WAI Website – We managed to launch the beta for the new WAI site last week. There are still a few rough edges, but it is essential to get it in front of people. A lot of work from many people went into the site, from design, user testing, development. I made sure we can edit resources in their respective Jekyll projects on GitHub and then integrate it into one repository using git submodules. All repositories use one common theme, so changes to it will be reflected in all resource previews, hosted on GitHub pages.
    • Color: Colorblind Accessibility on the Web – Fail and Success Cases – An excellent overview of colorblindness and common pitfalls.
    • Principles: Accessibility Interview Questions – Everyone should have answers to the question collected by Scott O’Hara. Most aim at general principles than specific techniques.
    • Notifications: Inclusive Components: Notifications – Another excellent write-up by Heydon Pickering.
    • Buttons: Designing Button States – Tyler Sticka on different aspects of button design. Sweating details like this can greatly improve the usability and accessibility of your website or application.
    • PWA: Minimal viable service worker – I don’t know enough about Progressive Web Apps to implement them correctly, yet. However, Jeremy Keith’s article feels like a good starting point to learn more about it.
    • Fonts: Shipping system fonts to GitHub.com – Interesting article on a very particular approach to shipping fonts.
    Sunday Seven for March 11, 2018 https://yatil.net/blog/sunday-seven-for-march-11-2018 blog/sunday-seven-for-march-11-2018 Sun, 11 Mar 2018 00:00:00 +0100 This was a long work week, so here are some games and apps instead of articles as I couldn’t find time to concentrate on pieces.

    • TV: Jessica Jones, Season 2 – While work was plenty, some of it was also repetitive, so I managed to watch the new Season of Jessica Jones. Very intense storytelling.
    • iOS: Altos Odyssey – When I downloaded Alto for the first time, I dismissed it as being too similar to its precursor. However, it has more facets, and it’s easier to achieve goals.
    • Podcast: Playing for Fun with Tiffany Arment and Myke Hurley – Two people talk about the positive of a video game. It’s refreshing and fun. Episode 2 is about “Celeste” which I have never played, but Episode one was about one of my favorite games…
    • Switch: Super Mario Odyssey – Such a refreshing re-imagination of Mario games. Certainly one of the best titles on the Switch to date.
    • Version Control: Tower – Tower is a fantastic app for git version control. The people behind the app also have published a comprehensive learning resource for git.
    • CSS: Third party CSS is not safe by Jake Archibald – Whenever you embed any resource from a third-party server, you are building a tunnel under your site’s security. The same also applies to CSS. Great list of examples from Jake.
    • Browser: Firefox Developer Edition & its inspector – Working with grids and other newer CSS benefits from a good inspector and Firefox has stepped up the game. Especially inspecting grids is impressive. The browser also has a beautiful and distinct dark theme.
    Is this thing still on? https://yatil.net/blog/is-this-thing-still-on blog/is-this-thing-still-on Sun, 04 Mar 2018 00:00:00 +0100 Let’s wipe some dust off this old blog, shall we? There’s a lot to do, including accessibility fixes, but sometimes you just have to start somewhere.

    Sunday Seven for March 4, 2018 https://yatil.net/blog/sunday-seven-for-march-4-2018 blog/sunday-seven-for-march-4-2018 Sun, 04 Mar 2018 00:00:00 +0100 In Sunday Seven I publish a list of seven links to things on the internet. The only criteria to make it in this category is that it is interesting to me.

    • Accessibility: Apple Park’s Visitor Center by twitter user @xarph – An interesting twitter thread about the many small details build for accessibility.1 (If you enjoy twitter threads as much as I do2, read the whole thread as one article on “Thread reader”.)

    • AMP: “Ends and Means” by Jeremy Keith – Insightful post by Jeremy on how companies can act together to help good and how sometimes they go a step too far. To use new CSS properties in Firefox, websites need to support HTTPS before those are available to them. This behavior creates a whole layer of CSS that is harder to be used while learning.

    • Accessibility: “WAI-ARIA Screen Reader Compatibility” – An overview of ARIA support which is good, but there are always edge-cases. It also shows the tests used to determine support, so if you want to get an impression on how different ARIA roles or attributes are voiced, you can look it up here.3

    • Layout: “Layout Land” by Jen Simmons – Lots and lots of short videos that describe how to create different layouts with the new capabilities in CSS & Browsers.

    • TV: “The Tick” (Amazon Originals) – Sometimes, especially while coding, I need to distract parts of my brain while working. The Tick is funny and not hard to follow. I enjoyed it.

    • Podcast: Game Show by The Incomparable – I’m late picking up this particular podcast because I dismissed the idea that game shows as podcasts could work. Boy, was I wrong! I love “Random Pursuit,” “Inconceivable,” “Low Definition,” and the text adventures and they had me spontaneously laughing out loud several times in the last few weeks.

    • Action: #WHOagainstGuns – Over 40 Doctor Who podcasters are supporting actions for gun control in the U.S. and plan to produce an exclusive series of commentary podcasts for the classic story “The War Games.” Access to those unique recordings will be only available to donors. More info, including a list of possible organizations to donate to, is available on the Reality Bomb website.

    1. I don’t necessarily agree with the marking of the AED which should arguably be easier to find, but all in all, it is a testament that accessibility does not need to look ugly.
    2. Which means “not very much.”
    3. Beware: As those test cases are there for testing ARIA attributes the code might not be an example of a best practice but of a possibility.
    My #ID24 talk https://yatil.net/blog/my-id24-talk blog/my-id24-talk Mon, 12 Jun 2017 00:00:00 +0200 On Friday, I was invited to talk at #ID24 about WAI-ARIA, with a special focus on the ramifications of bad ARIA. You can view the slides or watch the video.

    Speaking at Inclusive Design 24 #ID24 https://yatil.net/blog/id24-2017 blog/id24-2017 Mon, 05 Jun 2017 00:00:00 +0200 I am thrilled to be speaking at the annual Inclusive Design 24 event on June 9th. At 5 am UTC time (that is 7 am CEST), I’ll speak about my growing frustrations of ARIA implementations in the wild. The talk is called “ARIA Serious.” Check the event website for a schedule in your time zone and to see the other 23 amazing speakers. As every year, the talks will be available on Youtube after the event and I’ll make sure to link to them from here. Find all the other events, and a backlog of 72 talks, in the recent years on the pages for 2014, 2015, and 2016. The event is organized and sponsored by The Paciello Group.

    Web Accessibility Tutorials updated https://yatil.net/blog/a11y-tutorials-updated blog/a11y-tutorials-updated Sun, 07 May 2017 00:00:00 +0200 As many of you might know, I have been the primary editor of the W3C WAI Web Accessibility Tutorials which provide practical guidance on how to implement web accessibility. A few days ago, the Education and Outreach Working Group and I were able to publish a major update. We added three new tutorials (which were released as a draft before). A lot of thought went into framing the tutorials the right way, and we addressed one of the issues with WAI resources that we often hear about by making it very streamlined and not wordy. I am proud of the new tutorials: Page Structure, Carousels, and Menus. I hope they can be a valuable building block for learning about and teaching web accessibility. As always, we are happy to take suggestions via GitHub; a change log is available. I want to thank my colleagues in the Education and Outreach Working Group for helping me to shape the tutorials. It’s invaluable feedback.

    Teaching at AccessU 2017 https://yatil.net/blog/teaching-at-accessu-2017 blog/teaching-at-accessu-2017 Sat, 22 Apr 2017 00:00:00 +0200 Next month I will continue the tradition of flying over to Austin, TX, USA to attend the annual AccessU conference and teach some classes. Organized by Knowbility, the conference is a gathering of brilliant minds around accessibility and is an excellent opportunity to broaden your accessibility knowledge. Here’s an overview of my four classes:

    • Responsive and Accessible Images (March 17, 2017 – 2:15pm–3:45pm)Images are an important part of the web. This course will give an overview of the considerations for accessible images and their alternative texts, but also take a look from a content strategist perspective on how to present pictures in a responsive context. You will learn how to write good alt text, when longer descriptions are necessary, using resolution-independent images, and how to use different images in different responsive contexts for art direction.
    • Advanced Accessibility: Deep Dive for Developers (March 17, 2017 – 4pm–5:30pm)This session gives a general overview of good development practices that ensure a more accessible web product. It includes ARIA, styling, and advice for making your website more semantic and thus more accessible to everyone.
    • Use ARIA Responsibly (March 18, 2017 – 8:30am–10:00am)How to build web components, websites, and web applications in a way that leverages the capabilities of HTML5. Add ARIA on top to enhance the user experience. You’ll learn where to find information on how to implement ARIA correctly, and shows you a practical example.
    • Simplify Your Development Life with Tools, Tests, and Procedures (March 18, 2017 – 10:15am–11:45am)A condensed overview on how developers can simplify their life by making sure that procedures and tests are in place to ensure accessibility in every step.

    Tickets for AccessU are still available.Also, Knowbility is organizing the Inaugural Knowbility AccessibilityLeadership Symposium on May 15th and 16th: The opportunity for senior management to collaborate, confer and learn about accessibility challenges in the enterprise and how to address them, leading to a more diverse customer base. After AccessU, I’ll attend the W3C Education and Outreach Working Group’s Face to Face Meeting on May 19 and 20.

    :focus-ring https://yatil.net/blog/focus-ring-video blog/focus-ring-video Sat, 25 Mar 2017 00:00:00 +0100 Great video over at the Google Chrome Developers channel about the upcoming CSS Level 4 :focus-ring selector (draft). The focus is often removed for stylistic reasons when using the mouse, but then keyboard users also have no indication of where they are on the website. :focus-ring solves that issue.


    The video includes a shout out to this handy polyfill on Github. There are other videos about accessibility, also presented by Rob Dodson, available on the channel as well. Captions are available.

    My personal review of the 2016 MacBook Pro https://yatil.net/blog/the-2016-macbook-pro blog/the-2016-macbook-pro Sat, 28 Jan 2017 00:00:00 +0100 In 2006 I got my first Mac ever, the 2006 Apple MacBook “Core Duo” 1.83 13”. After owning a humongous Acer 15” Laptop in the previous years, the experience of owning this computer was something from another world. Since 2013 I owned a 13” MacBook Air with 8GB RAM and an 1.7GHz Intel Core i7 processor and while I loved the portability of the device, I recently started to feel the limits of the processor and the disk space (just 128 GB).

    What I got

    I bought a 13” MacBook Pro 2016 with a Intel Core i5 3.1 GHz processor and Touchbar and 16GB of RAM and 512 GB of SSD storage. In Space Grey. ## What I use it for

    I mainly do web development, lots of writing and editing – not something you necessarily need “Pro” hardware, to be honest. But then there are some operations, like optimising images and decoding videos, that happen often enough so I can use the power. It’s also amazing how quickly Jekyll and Middleman projects build. I sometimes need to test websites in Windows, and firing up a virtual machine is now obviously less of an hassle. In addition, I occasionally play Cities: Skylines and while there is a bug with the (unsupported) Intel graphics card, it is really cool to see houses and cars that are not just mushy blobs of textures. ## What I like

    • The Screen is just great. I never had a “Retina” screen before and this is really good. Type looks crisp and icons do, too. However parts of the web look awful as many people are not optimising their graphics. It’s especially appalling with icons. Use SVGs, everyone!
    • The Speakers are phenomenal. I have never really used the built-in speakers in my previous Macs, and I don’t really plan to use the ones built into this machine, but wow, they sound really good.
    • The Touchbar is a great gimmick. When apps support it, it shines, but without support it’s only mildly useful. The Touchbar is empty in that case, so you got a gap on the keyboard. I usually don’t need to use function keys and if I do pressing fn (like I used to do) brings them back. I have accidentally touched the Touchbar while typing and when it happens it is irritating. However it happens less and less. The bar is well integrated into Safari, so you can play and pause video playing in the browser from the bar and also scrub around the video which is much more intuitive and precise than using the touchpad and drag the handle. The only thing that is really annoying is that the Touchbar crashes occasionally – putting the computer to sleep and waking helps.
    • TouchID goes without saying. Unlocking the Mac or 1Password is blazingly fast. Now hurry to provide Apple Pay in Germany, Apple!
    • The built quality and portability. It’s incredible how dense this computer is, when you put the Air and the Pro on top of each other, the Pro is much smaller. It is thicker, but not by much. The space grey color is stunning.

    Other observations

    • The Keyboard is right in my ballpark. It is clicky, it is responsive, it is totally fine. But I don’t have a very specific taste in keyboards and I found every Mac keyboard that I typed on at least OK. Not having the inverted-T shape for the arrow keys is throwing me off however as it is hard to feel for the position of the arrow keys.
    • The Trackpad is working as expected. As a “tap to click” person it’s totally good for me. I haven’t used any force touch features a lot, but using it for the occasional dictionary lookup is useful.
    • Thunderbolt 3/USB-C works as expected. I can charge my Mac from either side, which is great, as the socket is on the right when I’m sitting on my couch. I miss MagSafe though. I bought one USB-C to USB-A and one USB-C to VGA/USB-A/Power adapters from Apple. I also got a two pack of the Aukey USB-C/USB-A adapters (affiliate link). My external display (that I only use for referencing stuff when needed) and microphone are plugged in into the VGA/USB-A/Power adapter all the time. I still need a good SD card adapter but did not find one that I think is worth buying.


    • I chose to start fresh and not use Migration Assistant to move my data.
    • I migrated most apps via the Mac App Store and SetApp and downloaded others directly.
    • I moved my data almost exclusively by AirDrop, which worked very well for my 6GB MailMate archive and my 10GB ~/projects folder (yes, I need to clean that up at some point).
    • Other data was synced using iCloud (works well for me, ymmv), Dropbox (where I downgraded to the free plan after moving most of my data to iCloud), and iCloud Photo Library.
    • The most inconvenient part was installing all the command line tools, like Middleman, Jekyll and Gulp. In the end this was just a small portion of the migration experience which took about one day.


    This is not a Mac for everyone. It might not be for you if you have special needs, or need more power. However I think it is very versatile and while the USB-A to USB-C transition is inconvenient, it is where the future lies. This might be my last PC-type of computer (if there comes more pro functionality to the iOS platform), so being future proof is important.

    Tom Scott: The Little-Known Patterns on British Streets https://yatil.net/blog/tom-scott-tactile-pavement blog/tom-scott-tactile-pavement Tue, 10 Jan 2017 00:00:00 +0100

    Tom Scott on tactile pavement

    Aleppo https://yatil.net/blog/aleppo blog/aleppo Wed, 05 Oct 2016 00:00:00 +0200 Over the last year, the name of a city is coming up in German news more often than I like it to be: Aleppo. It is not just a city involved in the war in Syria, it is the scene of a standoff that is lasting for months. This city, the mention of its name on the news, the descriptions of the cruelty that happens there, is especially painful for me. When I was in elementary school, we had Syrian neighbors who fled during the Gulf War. Mohammad and I shared a class. We were good friends, played football together, learned together. I still long for his family’s traditionally baked bread sometimes. After a few years, that felt like a whole life for me as a child, they had to go back. Although quite well integrated, there was no way for them to get a permanent working permit, and they were happy to get back into their home country. (Of course I don’t know if that was really really the case, but that was what I gathered as a child.) The children, Mohammad had a little brother and – I think – a baby sister, were not too happy to leave, having their friends in that small town where I grew up. One day, we said goodbye, and they made their way to their home city of Aleppo in Syria. The thought alone, that those people, including my elementary school friend, might be injured or dead is gruesome to me. Hearing from injured or dead children makes me think about the potential children of Mohammad and his siblings. For most, the war in Syria is far, far away. For me, it feels close. This is why I think getting to know other people, other cultures is so important. It allows us to be close with people and to not brush this conflict away as “someone else’s problem”. Image: Palmyra – Temple of Bel: A cultural heritage that was destroyed during the war. Uploaded by Juan Llanos on Flickr. See how that site looks today.

    Speaking at… Accessing Higher Ground https://yatil.net/blog/speaking-at-accessing-higher-ground blog/speaking-at-accessing-higher-ground Tue, 04 Oct 2016 00:00:00 +0200 I’m happy to announce here that I will be speaking at Accessing Higher Ground in November, representing Knowbility. The conference is in Westminster, Colorado and coins itself as an “Accessible Media, Web and Technology Conference”. I will do two three-hour long workshops:

    • Advanced Accessibility: A Deep Dive for Developers
      Tuesday, Nov. 15th, 9am

      Focused on UI widgets, WAI-ARIA techniques and semantics, with some JavaScript as a garnish, this workshop will teach how to implement complex widgets in an accessible way that is true to the nature of the web.
    • Simplify your development life with tools, tests and procedures
      Tuesday, Nov. 15th, 1:30pm

      Developers are lazy. I know this because I am one. So having tools, tests and procedures in place that help developers to produce accessible templates and widgets is helping everyone. This workshop will give a broad overview about the possibilities and will also show how to implement some of the provisions in day-to-day work.

    Also, I will give two talks:

    • Semantic Subtleties
      Thursday, Nov. 17th, 8am

      This talk takes some of the semantic particularities that come also up in the workshop and will put them under the microscope and examine their meaning.
    • ARIA Serious?
      Thursday, Nov. 17th, 4pm

      Here, I will presumably give a few good and lots of bad examples of ARIA implementation and show where the pitfalls and chances of using ARIA are.

    If you are still thinking about going, maybe the fantastic lineup of speakers can lure you in. Register now at accessinghigherground.org.

    The web accessibility basics – Marco's Accessibility Blog https://yatil.net/blog/the-web-accessibility-basics-marcos-accessibility-blog blog/the-web-accessibility-basics-marcos-accessibility-blog Sun, 24 Jan 2016 00:00:00 +0100

    I always thought that it is not so difficult to find resources about these basics, the recurrence of that question prompted me to finally write my own take on this topic. So here it is, my list of absolute web accessibility basics every web developer should know about.

    A very solid overview of basic web accessibility techniques by Marco Zehe.

    My Facebook Time-Out https://yatil.net/blog/my-facebook-time-out blog/my-facebook-time-out Sat, 23 Jan 2016 00:00:00 +0100 Over the past years my social web interaction shifted from Twitter and this very blog more and more to Facebook. I have so many contacts and interactions there that it feels very overwhelming and occupying a good chunk of my free time that I would love to spend otherwise: Hiking through the sun, having random thoughts and ideas, read long-form articles or play video games. I was under the impression that engaging on Facebook – and to a lesser extend on Twitter – would allow me to relax, to have social interactions and would be worth the time. I have realized that this became less and less the case. Either things are fairly irrelevant for me, or there is in-depth political discussion. This made Facebook feel like a burden for me now, and the only way to reevaluate my usage is to stop using it almost completely. While I had a pinned tab with Facebook open at all time, as well as the mobile app installed, I have now closed that tab and removed the app from my iPhone. I have disabled all notifications. This is day three and I only had brief looks into Facebook on the mobile web version to check for important notifications. I also allow myself to syndicate content to Facebook – like this blog post and via an iOS extension called Linky (which doesn’t currently support sharing to WordPress, e.g. this blog hint hint) but also using custom Workflows. Although my brain doesn’t yet know what to do with those free cycles, it feels like a change for the better. I want to continue at least for another week or two. Then I probably need to make significant changes to the websites and people I follow to reduce the load. The experiments of CGP Grey and Myke Hurley inspired me for this time-out. They outline their methods of “Dialing Down” in an Episode of their (much recommended) Cortex podcast. (Image by Jonathan Bean via Unsplash.)

    2015 in Review https://yatil.net/blog/2015-in-review blog/2015-in-review Sun, 03 Jan 2016 00:00:00 +0100 Wowza, that was a densely packed year 2015 for me. Here is my short,long, personal review of the year:


    Slow start into the year, attended a reading by Max Goldt at Zeche Carl (Carl Mine), a former mine and now event location, and even got a poster signed (yes, I’m used to my name being misspelled with a “k” in Germany): Max Goldt signature for Sandra and ErikA week later we’ve been back to Zeche Carl to see the “Terje Rypdal Trio”. It was a nice evening of jazz music and very relaxing. Then winter happened: some snow fell from the sky on the 24th and we decided to do a nice hike through the snow: !Gull on a post More photos on Flickr.[/caption] ## February

    February started with a huge disappointment: We had tickets for Tenacious D in the Paladium in Cologne. The concert itself was fine, but the venue is built in a way so that you are unable to see anything from farther back in the room. It felt like the money for the tickets was pretty much wasted. The weather on Valentine’s day was really nice and as it was a Saturday, we used the opportunity to do a hike and then had our traditional Valentine’s menu. !A walkway with trees More photos on Flickr.[/caption] The month concluded with an intercontinental flight to one of my most favorite cities: San Diego, CA for CSUN. As one of the best ways to cope with jet-lag is to just continue as if it is a loooooong day, we didn’t pass up the opportunity to visit a Nukem show in the Brick by Brick venue to see Norman Leggio of Psychotic Waltz play and have a chat with him. ## March

    It was quite cold and rainy in the first days in San Diego, but I have been at the CSUN conference all day anyway. I met all the nice accessibility folks and it is always refreshing to speak to people face to face instead of over the phone. The conference went swiftly by, including my two panel appearances and a lot of small meet-ups and 1:1 discussions. Afterwards we rented a car and got out to the Anza Borrego Desert State Park. It was beautiful, with all the nice landscape, cactus blossoms and animal wildlife. We even got to see some of the endangered Bighorn Sheep. I am always blown-away by the sheer size of the park. I got to drive a nice SUV for the week and it came in really handy when navigating the dirt roads. !Cactus blossom More photos on Flickr.[/caption] For one day only, we returned to Ocean Beach in San Diego, saying goodbye to the Pacific. !Sea-Gull on the Ocean Beach Pier More photos on Flickr.[/caption] The rest of the month, we were occupied getting out of jet-lag and adjusting to the freezing temperatures in Germany… ## April

    Slow-starting April had its first highlight with a Damian Wilson concert in Düsseldorf, which was really funny and entertaining, we will certainly visit again. Damian WilsonDamian WilsonThen I hopped on a plane again, to Austria this time. I attended BarCamp Graz and met the students of the Content Strategy program that I lectured in the following weeks. As the master program is directed at people who are already in jobs, the lectures were on the evenings or weekends, so it had little impact on my usual work. It was a fun time and I think the students really took something away regarding multi-screen design and accessibility. To close off the month we needed to make up for the disappointing Tenacious D concert in February. Good that Kyle Gass visited with Kyle Gass Band, this time playing in the Turock venue in Essen. We got premium spots on the staircase and could see very well. An enjoyable evening. Kyle Gass Band## May

    In May we visited the local botanic garden called Grugapark where we saw ducklings and goslings. !A Duck More photos on Flickr.[/caption] Just a few days later, I hopped on a train to Paris to attend the W3C@20 symposium, set in one of the nicest venue I’ve been to, and AC meeting. Another great opportunity to get into contact with the W3C members. !Thalys train to Paris More photos on Flickr.[/caption] And to continue the maniac travel, I again took the plane to the US, shortly after arriving from France. The destination this time: Austin, Texas. I was invited to give two presentations at the lovely AccessU conference and we did some light user testing of the How to Meet WCAG 2.0 prototype I worked on. In addition we had a two-day Education & Outreach Working Group meeting. I had half a day off and got to see a nice squirrel: Squirrel in a treeOf course there needed to be some more live music that month as well, and thus we attended the Rock Hard Festival, which is conveniently located just around the corner in the Amphitheater Gelsenkirchen. It was really awesome, three days of Metal and the festival allows for strolling around in the surrounding Nordsternpark. Venom @ Rock Hard Festival## June

    In early June, we took the opportunity to attend a Jan Delay concert that was “free and outside”. The concert was given at the nice world cultural heritage site of Zeche Zollverein here in Essen. Jan Delay at Zeche ZollvereinAlso in June, I got my Apple Watch (finally!). I still find it useful and wear it every day, but it is not as indispensable as a smartphone. Of course I also got onto a train that month. this time my destination was Utrecht in the Netherlands where I attended the face-2-face meetup of the AutoWCAG CG. I again collected user feedback sessions on the How to Meet WCAG 2.0 redesign. Afterwards another train ride brought us to my home town for a few days where we also attended Everyman, a reinterpretation of the classic play in a rock-opera style with support of the there-local band Vanden Plas. I can’t recommend seeing this enough. !Everyman at Pfalztheater Kaiserslautern Photo by @screenorigami.[/caption] ## July–August

    The month of the Sankt Peter Ording and Wacken Open Air vacation in a camper came. Luckily I have already blogged about this muddy mess, so no need to repeat that here. Shortly after coming back from the vacation, the annual Turock Open Air was in full swing. I think we only attended the Sunday because we had to harvest our field that was neglected while we were away. The week after that another short-range trip to Hamm where we stayed in the vegan hotel next to the Kurpark, where we got to watch the reggae night featuring Gentleman and _Jahcoustix._For me, that was a welcome change to the whole Metal this year. Stage at the Kurpark Hamm## September

    In early September I attended the NightlyBuild conference which had a few interesting talks. NightlyBuild.io Conference is about to goThe day before speaking at A-Tag in Vienna, we had planned to attend a concert in Hamburg, so I took Thursday evening off and we traveled to Hamburg, had a look at the Speicherstadt and then attended a concert of the band Eclipse. It was totally worth the hassle to take the really early flight to Vienna the next morning. ## October

    …or Fronteers month, as I prefer to call it. I did my usual talk at the Jam session and attended two extraordinary great days of talks in the main conference. The week after Fronteers, I started going to the gym and do exercises. I am still rolling with it although a medical annoyance has forced me to pause my efforts over the holiday break. View on the display of a cycling device in a gymIn the same week, we hit the Turock again to attend the concert of The Poodles. The concert was so great that we decided to attend the concert the following day in Cologne. The venue was also a bit smaller and thus the whole concert more intimate. On October 21st there was a showing of all three Back to the Future movies in the historic local cinema called Lichtburg which we attended, it was lots of fun and I enjoyed seeing all three back to back. The cinema also hired someone who parked a historic DeLorean in front of the cinema: DeLorean in Front of the CinemaAs my working groups did not meet, there was no need for me to travel all the way to Sapporo, Japan to meet my colleagues, which was a bummer, but honestly, I was traveling enough that year anyway… Instead we went to Bochum to see Eric Martin of Mr. Big play a nice solo concert. ## November

    We attended a show of the very entertaining comedian Willy Astor in Cologne, and watched James Bond: Spectre in the aforementioned Lichtburg cinema. I flew to Graz, Austria (and back) to speak at UX Day Graz, which was a very well organized event with great speakers. I can’t recommend it enough. Uhrturm GrazSunset as seen from Graz AirportThen I flew to Vienna (and back) to speak at DrupalCamp Vienna 2015, which was also a very good event with a very diverse audience and very diverse speakers. I also took the opportunity to visit my colleague Shadi and talk face to face about work. Somewhere in between I celebrated my birthday… Vienna Subway Train## December

    December was rather uneventful, I made it through without travel of any kind. I was published in the 24ways and Webkrauts advent calendars which made me quite happy. Of course we watched Star Wars: The Force Awakens. We also took advantage of the good weather over the holidays and hiked a lot through the sun. Kettwig Mühlengraben with the market churchMintarder Ruhrtalbrücke over the river RuhrWe also played the Thrash’n Roll board game, which has been tremendous fun. Thrash’n Roll board game## Review & Outlook

    I have the feeling that I have forgotten to mention so many of the little things that happened. 2015 was a really dense year but it was totally worth it. Let’s see what 2016 brings.

    The Incomparable on “Star Wars Episode VII: The Force Awakens” https://yatil.net/blog/incomparable-force-awakens blog/incomparable-force-awakens Wed, 23 Dec 2015 00:00:00 +0100 My personal thoughts about “The Force Awakens” are very well mirrored by the discussion on last week’s The Incomparable, Episode 277: Stormtroopers Are People. The panel consists of Jason Snell, Serenity Caldwell, Dan Moren and the hypercritical John Siracusa. I think that Siracusa’s characterization of the movie (around the 2h45 mark) is especially noteworthy, where he states that he managed to judge the movie for its own merits and not to have unfair expectations.

    Sunset https://yatil.net/blog/sunset blog/sunset Wed, 23 Dec 2015 00:00:00 +0100 As seen from the balcony.

    Line-On-Sides Headers Reloaded https://yatil.net/blog/line-on-sides-headers-reloaded blog/line-on-sides-headers-reloaded Sat, 19 Dec 2015 00:00:00 +0100 I read the Webkrauts advent calendar article by Jens Grochtdreis earlier today, it is about headers with lines on the side, quite like in the article image above. Actually exactly like the example above. (There is a similar article by Chris Coyier on CSS-Tricks for English-speaking people out there.) He presents a solution with one or two pseudo elements and an extra <span> in both cases and has a pretty simple code for it, as well. I wondered if there is an even simpler solution and I believe I have found one that doesn’t need the other <span> and just uses the pseudo elements. One caveat: the solution depends on flexbox, so older browsers are out of look and you might need some prefixes. But yeah, progressive enhancement!

    Heading – oh look, no span!

    h2 {
      display: flex;
      align-items: center;
      color: rebeccapurple;
    h2::before, h2::after {
      flex: 1;
      height: 3px;
      content: '';
      background-color: currentColor;
    h2::before { margin-right: 10px; }
    h2::after  { margin-left:  10px; }

    We define the heading as a flex container, align-items centers the pseudo elements. The ::before and ::after pseudo elements are set to the height that defines the width of the line. Using flex: 1 distributes the pseudo elements evenly, ans as they are before and after the text, they push it to the center. Margins help to have a gap between the text and the lines. To add the left and right variants, these two “modifier classes” (also known as layout classes) can be defined:

    .left-aligned::before {
      flex: 0;
      margin-right: 0;
    .right-aligned::after {
      flex: 0;
      margin-left: 0;

    Voilà! The effect works perfectly, is scalable and works when you don’t have tight control over the HTML, such as when you get output from a CMS WYSIWYG editor. You can play with the code in the following codepen:

    See the Pen Line-On-Sides Headers with Flexbox by Eric Eggert (@yatil) on CodePen.


    Of course, while writing this article, Gunnar Bittersman had already posted the flexbox approach to the article comments. He knows everything. But while reading the comments, the topic of more words per line came up and how the solution looks when there are more lines involved. Turns out: Not too good. The lines shrink to 0 and the only thing you see is the margin. Flexbox to the rescue. Again! The flex shorthand can take the values of three other properties: flex-grow, flex-shrink, and flex-basis. If we set flex-basis to 20%, this is the default width of the element. flex-shrink is set to 0 to avoid shrinking below those 20% but the flex-grow is set to 1 to allow growing larger than 20%:

    h2:before, h2:after {
      flex: 1 0 20%;
      height: 3px;
      content: '';
      background-color: currentColor;

    And a codepen for you to play around with this solution:

    See the Pen Line-On-Sides Headers with Flexbox and minimal lines by Eric Eggert (@yatil) on CodePen

    And here is another example. This time we use border-image and an SVG to have an ornament around the heading:

    See the Pen Line-On-Sides Headers with Flexbox and border images by Eric Eggert (@yatil) on CodePen.

    Line-On-Sides-Header https://yatil.net/blog/line-on-sides-header-2 blog/line-on-sides-header-2 Fri, 18 Dec 2015 00:00:00 +0100