Daniel Koskinen

  • Three Things to Instantly Improve the Quality of Your Front-End Code

    Today is Global Accessibility Awareness Day, which exists as a yearly reminder that about 1 billion people in the world have some form of disability, and that among other things, digital products and services should be usable and accessible to all regardless of ability. In this post I’ll list three simple things you can do to increase the accessibility and overall quality of your digital product. There are many other things that should be done too, like manual accessibility evaluation and testing with real users, but this will get you started.

    1. Use real buttons

    If you’re about to add a click event handler on a span or div, stop. There are very rarely any good reasons for doing this. What you probably want is a button.

    <button>: The Button element on MDN.

    Yes, it is possible to turn a div or span into an accessible button, but you have to take care of keyboard accessibility yourself and make sure it won’t break later. Hardly worth it.

    If you’re a code reviewer and you see a click event handler on something which is not a native interactive element, reject the pull request unless there is very good justification for making the code more complex than it probably needs to be, accessibility has been taken care of and there are tests in place to make sure it stays accessible.

    If you’re building something more complex, follow the specs instead of reinventing the wheel:

    2. Do keyboard testing

    When you’re developing things for the web, you’re probably doing this on a keyboard. This means it should hardly take any extra time at all to start doing keyboard testing. Also consider whether you’d be able to use your fancy custom component with a keyboard without instructions. If not, add instructions or even better, fix the user interface. Follow WAI-ARIA specs for common components instead of inventing your own.

    3. Do automated testing

    Begin by installing a browser extension such as axe by Deque or Wave by WebAIM (or both). Automated testing can catch only a subset of accessibility issues, but it doesn’t mean it’s not useful.

    When you’ve got the hang of using the browser extensions to fix issues, try adding automated accessibility testing to your pipeline for example with one of the many packages in the axe-core-npm repository.

    Hope you found these tips useful, for more about Global Accessibility Awareness Day, see the official GAAD website.

    ,

  • Detecting Windows High Contrast Mode for New and Old Browsers

    There was a good post by Scott O’Hara last Thursday on how to detect Windows High Contrast mode in JavaScript and CSS.

    The most straight forward way to do this is to use their media queries in CSS (forced-colors: active and prefers-color-scheme: dark, respectively).

    While the media query for forced-colors works well with all modern browsers in Windows (Chromium Edge, Chrome, Firefox), it doesn’t work in IE or old Edge. Since many people using assistive technology might still be stuck on IE for various reasons (see e.g. WebAIM’s latest survey), it might be a good idea to support the old proprietary media query -ms-high-contrast.

    As detailed in a Microsoft blog post from 2020 on styling for Windows high contrast, you can support both old and new in CSS with
    @media (forced-colors: active), (-ms-high-contrast: active) { /* ... */ }     and in JavaScript matchMedia('(forced-colors: active), (-ms-high-contrast: active)').

    ,

  • Automated accessibility tools don’t catch HTML parsing errors

    It would save a lot of time in the day of an accessibility practitioner if automated tools could catch more accessibility errors. However, I think it’s a reasonable assumption that they should catch errors with incorrect nesting of HTML or ARIA. Unfortunately this is not the case, and Adrian Roselli has a nice breakdown with tests on his blog:

    Developers who build a broken thing, but do not have the necessary testing or even standards experience might rely on automated tools and produce problematic content as a result.

    Source: Beware False Negatives | Adrian Roselli

  • Accessibility and Progressive Enhancement

    Thinking with a progressive enhancement mindset, that is starting with the most basic HTML features and enhancing with more advanced stuff, is in my opinion the best way to go about building inclusive, accessible websites. Jeremy Keith wrote about some accessibility feedback he got and how his originally robust code made the solution an easy fix:

    Drag’n’drop revisited

    ,
    ,

  • Clouds and Ice

    Thick clouds above an icy lake, sunlight coming through in distance
    View South-West from Pispala, Tampere over Lake Pyhäjärvi. Taken on March 10, 2019 with Canon EOS 100D
    EF40mm f/2.8 STM @ f/8, 1/1600s

  • Getting into Night Sky Photography

    Since a child, I’ve been a space nerd. Go and ask 14-year-old me about space and he could tell you a whole lot about black holes, quasars and quantum mechanics. Weirdly enough this interest in space did not extend to observing the actual night sky that much. Possibly this was because most of the time we’d lived near the center of town where light pollution ensured that the night sky didn’t look very interesting. Recently, though, this has changed, thanks to a growing interest in photography. Digital camera sensors can gather a whole lot more photons than the naked eye is able to perceive.

    (more…)
    ,

  • The First WordCamp Nordic

    A little bit over a week ago, 600 people from all over the Nordics and beyond gathered in Helsinki for the first-ever WordCamp Nordic. I enjoyed it very much, not least because it was the first time at a Finnish WordCamp that I wasn’t speaking at or organising the event. Huge thanks to my former colleague Marco Martins and the other organisers who put in a lot of work to make it happen.

    I wrote about the event in Finnish on the company blog

  • Christmas Pudding, Revisited

    Nine years ago I wrote a post on my first experience making my own Christmas Pudding at home, just like my mum used to make them. I haven’t been bothered to make my own for a few years now, especially since they are easier to find these days in Finland. Like I wrote in my 2009 post, they should be steamed for up to 6 hours, which is A Bother. This year my wife and I made them ourselves again, but it turned out we had made twice the amount of pudding mixture required to fill the two Pyrex bowls we had bought specially for them. My wife then had an excellent idea: let’s make pudding cupcakes!

    (more…)
    ,

  • Talk: What You Need to Know about the EU Accessibility Directive

    This is a transcript of a talk I did at WordCamp Turku on the 28th of September, 2018. The slides to my talk are on Slideshare. I will update this post with a video when that is available.

    (more…)
    ,

  • End of An Era

    Today I gave a talk on the EU Web Accessibility Directive at WordCamp Turku. The slides to my talk are on SlideShare, but a blog post summarising the talk will be up here next week. Today was also my last day at Zeeland Family.

    I joined H1 in 2012 as the third employee. It was my first “real” web development job working for a company, after almost 4 years of working as a freelancer. In 2016 our small team was acquired by Zeeland Family, and overnight we gained over 130 new colleagues. During these years I’ve had the priviledge of working with extremely talented, smart people and all-round fun and lovable human beings. Thank you, you know who you are.

    Now though it’s time to move on, meet new people, face new challenges and learn new things. 

    ,