Who is User Agent Man?

Photo of Zoltan Hawryluk
Photo: Don Kittle

I am Zoltan "Du Lac" Hawryluk (and yes, Zoltan is my real name) and User Agent Man is my blog of all things web development.

I am a web developer born and raised in Toronto, Canada. I do research on all types of web technologies. I am also the author and contributer to all sorts of open source projects including both as a primary author (e.g. Progressive Pushstate and The CSS3 Font Converter) and well as a contributer (e.g. Picturefill, Viewport Units Buggyfill and a Slack plugin for Pidgin and Adium).

When I have time, I like to write about what I learn here so I can give back to the web development community. More about me.

Recent Posts

People Aren’t Disabled. We Create Disabling Things.

July 24th, 2020 by zoltan · 4 Comments

A lot of people call people who can’t use inaccessible technology “disabled”. As someone who has a blind father and a deaf mother, I challenge the use of that word. If we make inaccessible digital experiences, we are disablers, and we need to change our ways.

Read the whole article »


How to Fix Seizure Inducing Sequences In Videos.

July 19th, 2020 by zoltan · No Comments

In the past, I have been an accessibility lead on a project that had videos with scenes that could potentially cause seizures. When I approached the video creators about these issues, they said they didn’t know how to fix these issues. When I created my own music video that had problematic sequences in them, however, I found that these issues are not really that hard to fix. This article shows that it’s not too hard and you can fix these problems in no time.

Read the whole article »


How To Style Resized Text and Quickly Fix WCAG 1.4.4 Issues

May 26th, 2019 by zoltan · No Comments

A lot of tech savvy people are over 35, which is the age when a lot of people normally lose sharpness in their vision. They use their browser’s text resize functionality in order to read pages with more ease, but a lot of sites break because designers and developers haven’t thought of this use case. Since this is a WCAG AA requirement, I made an easy-to-use fix that will save you a lot of time. This article gives the details.

Read the whole article »


Creating Accessible HTML5 Modal Dialogs For Desktop and Mobile

March 17th, 2019 by zoltan · No Comments

Accessible modals aren’t hard to make, and you can make your modal dialogs accessible if you keep four simple requirements. Implementing them can be done easily by using the code examples in this blog post, where I use the HTML5 <dialog> polyfill to do so. Read this article, and you can do the same with any modal dialog library/framework that you use today. This post includes a working demo and a video outlining how it works using both mobile and desktop screen readers.

Read the whole article »


Using PEAT To Create Seizureless Web Animations

April 2nd, 2017 by zoltan · No Comments

Photosensitive Epilepsy should be a concern to anyone creating any type of animated media. As a matter of fact, in order to pass WCAG Level A, a web page cannot “contain anything that flashes more than three times in any one second period, or the flash is below the general flash and red flash thresholds”. Testing this requirement may seem a little daunting at first, but luckily there is a free tool called PEAT that web developers can use to test if their animations and videos can cause an epileptic attack. This blog post talks about how to use PEAT, what it’s limitations are, and how to work around them.

Read the whole article »


Accessible Form Placeholder Text

February 20th, 2017 by zoltan · 3 Comments

Placeholder text is used quite a bit in modern HTML5 forms. It is not meant to replace form labels, but is intended to be a hint about the format of what the form field data should take. While checking the accessibility issues on a recent project, I noticed that placeholder text is sometimes indistinguishable with form field values when using certain screen reader/browser combinations. This post talks about how to work around this issue with just a little bit of JavaScript.

Read the whole article »


Flex Layout Fail: Fixing Firefox’s Keyboard Accessibility Bug With The CSS order Property

January 28th, 2017 by zoltan · 2 Comments

Firefox, unlike every other browser on the planet, changes the way that keyboard navigation works in designs that use the CSS order property. Since a lot of developers use flexbox, this can create a lot of cross-browser accessibility issues. This article shows a fix for this problem using a small amount of Javascript.

Read the whole article »


Implementing an Accessible Skip Navigation Link Requires More Thought Than You’d Think

December 15th, 2016 by zoltan · No Comments

One of the most common and straightforward accessible features of a web site is the “skip navigation” link. These links are intended to make it easier for users with screen readers to skip all the links in a webpage’s header navigation in order to read the content on the rest of the page. However, many developers don’t know all the tricks that are needed to use in order to implement one correctly. This article will go into this in depth.

Read the whole article »


Making Framework Agnostic Isomorphic Web Applications with Query Strings and HTML5 pushState

December 11th, 2016 by zoltan · No Comments

Do you want the state of a web page to be rendered by both the client and the server side? Is having the state of a JavaScript rendered web page to be controlled by the page’s query string important to you? Is important for you to ensure that your page’s state can be shared correctly via email and social media? If you want all of this without being tied into any specific framework (e.g. React, jQuery, Angular, etc) and done using progressive-enhancement, read on.

Read the whole article »


How To Fix Transformed Text in HTML5 Canvas In Firefox For Windows

May 10th, 2016 by zoltan · No Comments

The Firefox team has made some unique choices when rendering fonts in the Windows operating system. As a result, certain fonts under 16 pixels in size render really bad in HTML5 Canvas as well as CSS. This blog post shows how you can fix this issue and have clean, transformed typography in any OS.

Read the whole article »