Johan Ronsse

  • Home
  • Projects
  • Blog
  • We need a standards-based way to detect high contrast mode

    November 19, 2018 - Posted in accessibility css

    So, contrast. It’s one of the most important success criteria for passing WCAG.

    It was top of mind in this design project recently where a lot of the branding was orange, and the problem was that white text on orange buttons didn’t pass WCAG 2.1. The project was government-related and for a large audience so I felt like I had an extra responsibility to do things right.

    In a design like this the button at the bottom would totally fail accessibility tests:

    A design containing a button with low contrast

    I wanted a simple way to switch the orange in my designs to a darker orange (a11y orange) in order to pass WCAG requirements.

    2 variations of orange colors, one that has enough contrast to pass WCAG and one that doesn't

    Basically I wanted to write CSS like this… (warning, pseudocode, this does not actually work!)

    .button {
        background: #F96830;
    }
    
    @media (prefers-high-contrast) {
        .button {
            background: #D03F06;
        }
    }
    

    …to get a result like this:

    A design containing a button with high contrast

    The @media (prefers-high-contrast)  would check if high contrast mode is turned on in the user’s OS. For example in macOS, it looks like this:

    macOS Accessibility settings

    Currently, there is no standards-based way to detect high contrast mode. There is an old implementation that only works on Windows (and I suppose only in IE) – which ties into the Windows theme settings I believe:

    @media (-ms-high-contract: active) {}
    @media (-ms-high-contract: white-on-black) {}
    @media (-ms-high-contract: black-on-white) {}

    I wished this was available in a standardized way. Now I often have to choose between accessible or ugly.

    Some applications try to solve the high contrast problem with their own implementation. In KBC Touch (banking app) this is a global on/off switch:

    In teamweek there are more fine-grained settings, that also help with other disabilities (e.g. color blindness).

    But in my opinion a setting per app is kind of pointless. What’s funny is that in the above Teamweek example the control to check the high contrast doesn’t have high enough contrast itself.

    It’s super great that the team of the two above apps thought about accessibility, which makes them already superior to most apps out there. But local settings in apps for teams that think about it and go great lengths to make a custom implementation, that’s not good enough.

    We need a standards-based way to tie into an OS system setting; and the persons suffering from low vision need to be educated to put this setting on. It will help them across the board.

    I filed some bugs and participated in discussions but I need your help to bring this to the attention of browser vendors.

    Here are some links:

    • [mediaqueries-5] high-contrast media feature
    • Bug 1506364 – Implement the prefers-contrast media-query.

    If you have an account on Github and/or Bugzilla please participate in the discussion or voice the need for this from the standpoint of web developers.

    You can also share this post, hopefully it can reach the right people that way.

  • Digitalisering van de Go Pass/Rail Pass is nodig

    November 18, 2018 - Posted in apps belgische-problemen nederlands public-transport - 2 comments

    KBC is de 1e bank om de aanschaf van treintickets toe te voegen aan de mobiele app. Ik kan dit alleen maar toejuichen. De kwaliteit van de mobiele KBC app is erg hoog. Ik hoop dat ze dezelfde kwaliteit kunnen bewaren in deze ervaring.

    Ik meen dat het al langer mogelijk is om trein tickets te kopen via derde partijen, maar dan voor internationale ritten, niet voor nationale.

    Mijn treinticket-ervaring, ondanks de vele campagnes rond de NMBS app en hoe gemakkelijk hij te gebruiken is, is nog altijd grotendeels op papier. Dit is een rechtstreeks gevolg van de prijszetting van de Rail Pass.

    Voor diegenen die het niet weten, een Rail Pass kost 76 euro in 2e klass en 109 euro in 1e klas. De Rail Pass is goed voor 10 ritten van eender welke bestemming in België naar eender welke bestemming in België.

    Een vaste prijs per rit dus, op voorwaarde dat je binnen het jaar je pass “opgebruikt”.

    De praktijk van mijn treinwezen is dus een pen bijhebben, mijn route op op een Rail pass en het bonnetje of de Rail Pass bijhouden voor mijn boekhouding.

    Allemaal goed en wel maar ik probeer net zo weinig mogelijk op papier te hebben.

    Nu, de kans dat ik dit systeem digitaal kan gebruiken (ook al zou ik het wel willen) is nogal klein, want dit zou voor mij eigenlijk betekenen dat alles duurder wordt.

    Er is namelijk geen goed prijsmodel voor iemand die vaak in meerdere Vlaamse centrumsteden moet zijn. Daarom gebruik ik een Rail Pass. Digitaal kan je enkel maar een enkel ticket kopen.

    Een abonnement zegt u? Er is, ondanks mijn frequent treingebruik, geen abonnement dat goedkoper is dan de Rail Pass te gebruiken. Zodus zou ik een verwelkoming van de Rail Pass verwelkomen. Ik zie dit dan als een soort interne counter van hoe vaak je de trein hebt genomen met een korting als je vaak genoeg de trein hebt genomen.

    Want dit is effectief het principe van de Rail Pass – je krijgt een korting omdat je belooft tenminste 10 keer de trein te nemen.

    Voor korte ritten heb ik nu geen goede oplossing; ik moet een bonnetje gaan halen en dat kost loket/machine tijd. Want ik ga nu ook geen 7,6 euro betalen om de trein te nemen van Antwerpen Berchem naar Antwerpen Centraal, of van Berchem naar Mechelen.

    Een ander “probleem”. Ik gebruik ook al jaren een combinatie tussen een 1e klas Rail Pass en een 2e klas Rail Pass. Zo kan ik dynamisch wisselen tussen de klasses afhankelijk van hoe druk het is, welke trein het nu juist is (1e klas comfort verschilt per trein) en afhankelijk van hoeveel zin/energie ik heb om te werken op de trein.

    Al dit gezegd zijnde, zou ik het management van de NMBS willen aansporen om de formule van de Go Pass/Rail Pass te digitaliseren.

  • Set up a keyboard shortcut for tags in macOS Mojave

    November 9, 2018 - Posted in computers macos workflow - 3 comments

    I wanted to bind ⌥+⌘+T to be able to use macOS’s tags feature using a keyboard shortcut in Finder.app.

    The way to set it up is super vague, so I figured I would share that you need to do to make it work.

    First, set it up in System Preferences > Shortcuts. Attach the shortcut to Finder.app. Make sure to use a … (ellipsis) character instead of typing 3 periods (…).

    Then, make sure that in Finder preferences you have no favorite tags, otherwise it will not work. In the screenshot below you will see that there are no favorite tags.

    This seems like a bug in OSX so I filed it as a Radar.

  • On taking care of your digital belongings

    November 3, 2018 - Posted in computers web

    I tweeted “Just self-host your things. External services can change the rules at any minute and they will.”

    This was mostly in response to people complaining about Flickr’s recent policy change, which limits free accounts to show the 1000 latest photos.

    It’s also sort of a retort against Medium, a service I have been using on and off but that I should really stop using since the end user experience of people visiting articles has become pretty shit. For a service that once was focussed on reading they can throw an awful lot of cookie-like banners in your face. And the promise of paying writers is not happening at all, but that’s a different discussion.

    The point to self-host is mostly a point about taking care of your digital belongings.

    I got responses that argued not everyone is as technical (as me) – or that most people don’t care to learn all of these things. I absolutely understand there is a learning curve to taking care of you digital belongings, but if you really care about what you make, you will either make the effort or pay someone to do the “digital conservation” for you.

    This can be as simple as paying a company you trust (i.e. Apple) for a service that you think will be around for years (i.e. iCloud). Or if you like to pay with your data you can do the same with Google.

    But if you really care about digital conservation while sharing your content at the same time, you should have a combination of local backups in different places and this thing called a website where you share your things.

    The thing is, if you are not paying for a service, you are effectively at the grace of their policy change, and if you do pay for a service, it’s still the same, except there’s a bigger chance that the service in question will remain in existence.

    But in the end, things will shut down, companies change, or they start to suck over the years. I recently cancelled my CloudApp subscription because the service just got worse over the years instead of better. I think most services progressively worsen over the years instead of getting better.

    Also, instead of worsening, they can also just stop being in business. How many apps and social networks have died over the years? There’s a graveyard of apps that just shut down. If you depended on any of them heavily, you had to do the work of getting your data out, if it was even possible.

    We recently started using Notion and one of my first worries was how to get data out of Notion. Thankfully there is a export option – otherwise I would probably not use the service.

    Now, some of these things I am writing about might make you think that I’m a hardcore digital archivist.

    I agree that over the years I have taken measures that are probably a bit techier than others to try and do some “digital preservation”.

    I changed my mind about what needs to be online at some point in time (i.e. I once believed that since Cool URIs don’t change I should keep everything I ever published online) but regardless the way that information can be preserved over years is a topic of interest to me.

    I quite like that I can link to photography.johanronsse.be – a website that I made 6 years ago – and know that it’s still there.

    On the other hand I was quite pissed that a static website I made hosted on Github.io just died because Github changed their internal logic. My fault for depending on Github to host my stuff.

    What I want to say in a nutshell is – if you depend on an external service, realize it can shut down at any second. Have local backups. Make redundant backups. Take care of your digital belongings.

  • Make a website dark according to user preferences

    October 31, 2018 - Posted in web

    In macOS Mojave, you can set your preference to dark UI.

    You can target this preference with CSS using code like this:

    @media (prefers-color-scheme: light) {
      body {
        background-color: #FFF;
        color: #000;
      }
    }
    
    @media (prefers-color-scheme: dark) {
      body {
        background: #000;
        color: #FFF;
      }
    }

    See this Codepen for a demo.

    This only works on Safari 12.1 for now, which you can get by downloading Safari Technology Preview.

  • Minder technologie, niet meer

    October 21, 2018 - Posted in Uncategorized

    Ik las voor de gemeenteraaadsverkiezingen in politieke folders dat Antwerpen de “City of Things” moet worden en dat wij de eerste moeten zijn met de uitrol van een 5G netwerk.

    Ik heb mijn bedenkingen bij de constante adoratie van technologie. Mijn boodschap is eenvoudig: bezint eer ge begint. Gedane zaken nemen geen keer.


    Als iemand die erg geïnteresseerd is in technologie ben ik enthousiast over wat je tegenwoordig allemaal kan doen met erg kleine computers.

    De “Internet of Things” beweging is heel interessant. Met technologie experimenteren om coole dingen te maken. Dat kan ik enkel toejuichen. Met een 3D printer, een Arduino kit en wat creativiteit en techniek kan je je eigen product maken.

    Het proces van maken is compleet gedemocratiseerd. Software en hardware die vroeger duizenden euros kostte, kost nu veel minder of zelfs helemaal niets. Bij de software een gevolg van het internet en de aandacht-economie. Bij de hardware een iets moeilijker verhaal, maar het heeft ook weer te maken met internet, globalisering en productie in lage loon-landen.

    Als kleine jongen was één van mijn “defining moments” een bezoek naar het Huis van de Toekomst (nu: Living Tomorrow) in Vilvoorde. Ik zag een glaspaneel dat je kon wisselen van doorzichtig naar niet doorzichtig met een knopje. Ik zag een ijskast met een belofte om ooit verbonden te zijn met het internet – een ijskast die kon detecteren of er iets nieuws gekocht moest worden. Mijn ogen glunderden en ik vond het helemaal top.

    We zijn nu 20 jaar later, en de technologie die toen baanbrekend was is nu mainstream. Ga naar de Mediamarkt, koop een Philips Hue starter kit en voilà, je bent op weg naar een “connected” huis.


    Omdat het zo gemakkelijk is om de “connected” technologie ergens in te proppen wordt het ook snel gedaan.

    Op de Twitter account Internet of Shit wordt de keerzijde van het internet der dingen getoond. Het uur niet kunnen lezen omdat je de end user license agreement van je horloge niet hebt geaccepteerd. Je niet kunnen wegen omdat de firmware van je weegschaal updaten. Je zou een hele lijst kunnen maken van dingen die niet noodzakelijk beter zijn geworden door nieuwe technologie.

    Amazon kondigde ergens vorige maand bijvoorbeeld een connected Alexa microgolf aan; je kan er eten in steken en dat eten dan beschrijven aan de microgolf; waarna de microgolf zichzelf inselt om het eten correct op te warmen.

    Als ontwerper vind ik het een interessant idee om zulke zaken eens uit te proberen, want wie heeft er nog niet gesukkeld met de interface van een microgolf?

    Aan de andere kant leidt dit uitproberen soms tot resultaten die slechter waren dan wat er daarvoor was. Als je een beetje weet wat je doet, is dan het aantal minuten en de sterkte tussen 1 en 5 instellen niet de juiste interface?


    Mijn moeder kwam onlangs langs met een nieuw strijkijzer. Ik had het een beetje druk op het werk en ze ging me helpen strijken. Er was een promotie op een strijkijzer dat ze wel vertrouwde en ze ging het voor mij kopen.

    Het probleem waar we op stootten was dat het nieuwe strijkijzer geen temperatuurknop had. Hoe zet je het zachter voor delicate kleding? Het antwoord bleek dat het een “slim” strijkijzer was, dat automatisch detecteerde wat er nu juist onder zit.

    Hier wederom: wat als je dan switcht van iets niet-delicaats naar iets delicaat en het strijkijzer is nog altijd super warm? Bye bye mooi hemd. Is de oplossing in plaats van “slim” proberen te zijn niet meer een beetje “dommer” te zijn?

    Als iemand die zelf software maakt en ontwerpt vertrouw ik dit soort “slimme” dingen niet altijd. Software is moeilijk. Dat is iets dat ik elke week herhaal in ons bedrijf.  Ik heb weinig vertrouwen in de capaciteiten van anderen om goede software te maken, net omdat het zo moeilijk is om goede software te maken.


    Eén van de uitdagendere delen in software is data management.

    Een record in een database maken is op zich niet zo moeilijk, maar het record verwijderen, en de rest van de app nog altijd correct te laten werken, is al een uitdaging op een moeilijker niveau.

    De meeste programmeurs zullen hier dan op reageren dat het wel gemakkelijk is, maar dan vraag ik mij af waarom de “delete account” functionaliteit in zoveel web applicaties mist. En waarom het kunnen verwijderen van zaken altijd naar achter wordt geschoven in product backlogs.

    Een record anonimiseren na verloop van tijd en de app nog altijd goed laten werken is weer een trapje moeilijker. Dit is duidelijk een topic door de GDPR – we kunnen niet zomaar onze databases laten groeien en groeien. We moeten ze ook doen slinken. Digitale vervuiling is een ding.

    De overheid heeft de voorbije jaren bewezen dat ze op software vlak nog wel iets bij te leren hebben. Ik weet ook zelf dat ik het niet meteen beter zou doen op programmatorisch vlak (misschien wel op het vlak van user interface :))


    Tegelijk ijveren politici voor meer features in diezelfde software die nog altijd een ramp is.

    Ik hoor dan plannen om vingerafdrukken in de eID op te slaan, terwijl op hetzelfde moment de profielgegevens van 50 miljoen Facebook gebruikers lekken. Als Facebook het op vlak van veiligheid niet kan, kan een leger consultants die werken in een overheidsgunning-logica het dan wel? Ik denk het niet.

    Een ander topic is het neerzetten van slimme camera’s. Die slimme camera’s beloven dat ze vanalles kunnen detecteren dat magisch het probleem van de politieker in kwestie oplost. De realiteit is dat iemand die output ook moet controleren, en dat de accuraatheid van de output van zulke camera’s betwist kan worden. Wat je uiteindelijk creëert is een nieuw probleem, geen oplossing.

    Het aantal onbemande camera’s in Antwerpen is verhoogd van 350 in 2012 naar 1200 in 2017. Is het effectief veiliger in Antwerpen nu dan 5 jaar geleden? Willen we effectief naar een CCTV-situatie zoals in het Verenigd Koninkrijk?

    Misschien is de betere keuze om mínder te doen, in plaats van meer? Laten we opletten dat we niet de City of Shit worden.

  • Rename layers using regular expressions in Figma

    October 20, 2018 - Posted in Uncategorized

    Since a few weeks you can batch rename layers using regular expressions in Figma. This is pretty freaking awesome.

  • Expand stroke-based SVGs in batch using an Illustrator script

    October 18, 2018 - Posted in workflow - 5 comments

    I was in the situation where had a bunch of SVGs, but they were stroke-based, from feather-icons.com.

    I don’t trust the cross-browser rendering of SVG strokes. It leads to problems when trying to color the icons with CSS as well – so I needed the expanded versions. There are over 200 icons in the set. Expanding them manually took too much time so I looked around and found a script.

    Convert SVG icons that are stroke-based to expanded shapes in Illustrator. Use the Scripts functionality to run this script.

    It took about 10 minutes to expand everything but at least I didn’t have to do it manually ?.

    Original script found at Adobe Forums.

  • “Mag ik uw identiteitskaart voor de garantie?”

    October 16, 2018 - Posted in other - 1 comment

    Als ik een game in de Mediamarkt ga halen vragen ze aan de kassa of ze “mijn identiteitskaart mogen voor de garantie”.

    Ik zie de mensen voor mij dan vaak schaapachtig hun kaart afgeven. Mediamarkt zal er wel bij varen, bij een hoop adresinformatie van hun klanten.

    Volgens de Europese garantiewetgeving lijkt het me zeker geen verplichting om je eID te laten inlezen bij een aankoop. Een bewijs van aankoop zou moeten volstaan, lijkt mij.

    Dat inlezen is de bedoeling van de eID écht helemaal voorbij. Ik snap niet dat dit nog mag of nog niet stopgezet is in GDPR-tijden.

  • pug-textmate2-bundle

    October 16, 2018 - Posted in software

    From the README:

    If you are one of the holdouts who is still using Textmate and codes in Pug, you will find that there are a lot of outdated bundles out there. I use this one which provides the correct syntax highlighting.

    It’s not perfect but it’s the best I have. It’s a modified version of an original Jade bundle. I figured I would share on Github.

← older
newer →
  • ©2025 Johan Ronsse
  • X
  • Mastodon
  • Portfolio 2024