Springe zum Inhalt

Blog

After adding a print stylesheet, I tried browsing my upcoming cooking website using both VoiceOver and the text-based browser lynx. If you thought, different imple­men­tations of Flexbox and Grid bugs or optimizing for IE 11 are frustrating, try out browser features, that are less in the spotlight, but have a high impact on the acces­si­bility of your site.

Wanna print that?

Before you start making fun of me, because I added a print stylesheet to a website in 2019, let me please explain why I did it at all. You might think, the time where corporate bosses where smoking cigars in their offices while their secretary printed out every email for them are mostly over. And I really hope, you are right with that assumption. But there are some exceptions, where people use to print websites quite often: Invoices, cooking recipes, event tickets, technical manuals or gift vouchers — to name just a few. As I am currently working on a cooking website, having a good print stylesheet is still worth it in 2019 without any doubt. It’s probably more important for most of your users, than using some fancy markup such as Schema​.org or Micro­formats to make the recipes machine-readable and thus importable into a digital recipe manager.

Writing a relatively simple print stylesheet took me the better time of two whole days, because the state of print support in browsers is almost as bad, as it was about 10 years ago. Okay okay, we don’t have to make our pages print nicely in IE 6 any longer, but besides that, things still work differently from what we are used to, when using modern CSS. Do you use flexbox for imple­menting a sticky footer even on short pages, where the screen becomes much taller than your content? Congra­tu­lations, Firefox (v66) will only print the first page and nothing beyond it. Grid is also incon­sistent across different browsers, so you can neither use that for defining your layout. Both Flexbox and Grid are fine for smaller sections, though. But you gonna have to use <table>s , floats and absolute positioning again, if you want to do just a bit more than having a centered text block on your printed page. Oh, and don’t even think of using mask-image or your masked elements will not get printed at all. The latter one is obviously a bug, but I’m sure almost no one is aware of that behaviour.

The only positive aspect of the current situation — namely, that browsers vendors don’t care enough about printing websites — is, that you can safely rely on older articles and tutorials, that have been published a decade ago and most of the tips given there are still valid for the latest and greatest browsers. I can also recommend reading Designing For Print With CSS, which was published in 2018 by Smashing Magazine and is a good starting point to get into the topic. But as always, try to test with as many devices and browsers possible, if you’re expecting a decent result.

Link: Learn more about screen readers SINGLE RIGHT-POINTING ANGLE QUOTATION MARK

Screen readers are a different topic though. While not every website needs to be printable, we should try our best to make websites accessible. Bonus: if you’re using aria-* attributes a lot, it can save your HTML from classitis, because every browser beyond IE 6 allows you to hook into these attributes for managing things such as states, plus displaying and hiding of content, without the need of using additional class names as styling hooks. As aria-attributes are not project-specific, you don’t have to remember different naming conventions for states (e.g. .btn.is-active, .btn.isActive, .btn--is-active etc.) over and over again.

So I fired up VoiceOver on my MacBook to read throught the page and ended up with many awful-sounding text like in the headline above. But Fabian, haven’t you thought of that before? Yes I did! I though that using aria-hidden, aria-label and other properties would make my page just sound fine in any screen reader, but aparently I was kind of naïve. After googling about these issues for a while, it turned out that support for aria-attributes is much worse and incon­sistent, than I could ever imagine. I stumbled across four years old unresolved a11y bugs in Blink, Gecko and WebKit and couldn’t stop to bang my head against the wall after that. How in the world could an average developer be able to deal with this? Seemingly, the most prioritized goals set by browser vendors are not found in the field of acces­si­bility. But hey, we got WebUSB (at least in Chrome)!

But what really makes me mad about the situation is, that we are leaving people out, because we don’t seem to care enough. And in comparison to making a sticky footer and test it across all relevant browsers, testing different screen readers doesn’t come for free. I’m using macOS, so VoiceOver was already installed on my computer, but some competing products have to be bought separately. And most developers will never/​are not able to spend hundreds or even thousands of Euros for testing e.g. in JAWS, which seems to be a popular choice. I cannot blame anyone who does not want to spend the price of a decent notebook computer for a software, they just use for testing their websites. The only thing that will help here, is to have diverse teams, including visually-impaired or blind members, who use screen readers on a daily basis. But to be honest: that’s not realistic for every (small) team or freelance developer. Never­theless, we should never treat people with disabi­lities as an edge-case.

lynx https://​fabian​michael​.de/en

Okay, we’re getting ridicoulous here (who uses text-based browsers in 2019?). But I once read the tip to use a text-based browser such as lynx or w3m to test acces­si­bility. Why? Because a text-based browser sees only text, which is similar to a search engine and — more important in this context — a screen reader. Okay, let’s go: Special chars broken? No problem — set document encoing to UTF-8 (and don’t forget to save settings to disk). Ahh, here comes the real trouble: Lynx has awfully bad support for HTML5, which results in links not being selectable, once you place a block element like a <div>, <h2> or <figure> within them. Also, don’t expect handy attributes like hidden to work in lynx or any other text-based browser. But besides that, you can still get some insights into how you pages will be read by a screen reader and without any JavaScript. I hope, these browsers will finally catch up and get basic HTML5 support one day. You might wonder, why I even care? Because I want the web to be accessible for everyone as many people as possible. Text-based browsers are especially great when being logged into a terminal, when browsing from a remote location without a broadband connection or after disaster, when your connection speed feels like it’s 1998. You might say: »But these are edge-cases …«. You will keep call them edge-cases only as long as long as you’ve never found yourself in such a situation. There’s a reason, why CNN Lite exists. It’s for the sake of giving people access to news, when they need it the most. 

Conlusion

In the end, we need better standards and more consistent imple­men­tations between browsers! The device landscape has become pretty diverse over the last years and that’s a great thing. But as a Firefox user on desktop with an iPhone SE on-the-go, I am already experi­encing the struggles of designers and developers of keeping up with that first-hand. There have been several times, when a mobile website was not optimized for my smartphone, because everyone assumes that smart­phones have bigger screens nowadays. This often leads to overlapping elements, unclickable buttons (nice if you cannot close that damn cookie banner to access the content). When I’m one the bus, I am seeing a lot of people using exactly the same phone as I do. I wonder, if they are as much frustrated as I am. When other designers ask me what canvas size to use in Sketch for the mobile layout, I always tell them to use the iPhone 5/SE screen size, because its relatively small. On the desktop-side of things, I don’t want to count how many times I had to switch my browser, because some jerk did only test a website in Chrome, but not in Firefox (or Safari or Edge). We can do better and we need to do better, if we want the web to become a better place for everyone — sometimes at the cost of our developer experience. Testing websites in many browser across different screen sizes is annoying as f*ck, but we owe it to anyone using our products. But we also need browser vendors, the W3C, screen reader vendors and anyone I possibly forgot to mention to work better together. Responsive design is already hard enough without all the incon­sis­tencies that we have to deal with on so many layers. If we want to give everyone a voice on the web, that can be heard (or read) by anyone else, the plattform has to be capable of letting everyone create accessible websites and content without calling licenses for a ton of proprietary software their own.

PS: Don’t forget to test your websites in older browsers, even if it sucks to do that. Sustaina­bility also means, that you should not force people into upgrading their devices, just because you’re lazy. Look around you, there’s a ton of people using old Android and iOS devices (the latter ones often running on iOS 9 or 10. iOS 9 means no support for CSS grid.). They may not have the money to buy a new phone or tablet, but maybe they also just don’t care, as long as their current device does its purpose just good enough. That doesn’t mean, that every CMS backend or intranet tool has to be compatible with an 8-years old iPad, but try at least to keep the frontend of public websites and online commu­nities accessible to people, even if it does not look as fancy in their browser. Progressive enhan­cement and graceful degra­dation are your strategies of choice.

Video summary: We were supposed to build a better world. Design and technology were supposed to point the way towards utopia. Instead, we designed a nightmare. Find out why this was our fault and what you can do to help fix it.

I started learning how to code websites around 2000 – that’s almost 20 years ago now. Back then, I was only 13 years old and pretty excited about the future of the web and all the marvellous oppor­tu­nities that digital technology promised to open for humanity. But in 2018, the web and the whole digital tech industry has lost a lot of its shine for me.

When I first attended to the Beyond Tellerrand conference last year, I felt a different vibe than this year. Although all the scandalous behavior of secret services and tech oligarchs in terms of surveillance and abusement of power was already well-known and has been discussed for some years now, the overall mood seemed to be much more positive and uncritial than now. I remember some discussions about Tesla’s latest car models, iPhones and stuff. And that’s okay of course, the latest technology has an important impact on our work at least. But this year, I got the impression that technology was discussed in a much more critial manner and I am really welcoming that. Some announ­cements about new tech during the last years already started to alienate me, because they often lacked any critical reflection on the topic or product by our community. But as the web industry matures and everyone can see the devas­tating effects of e.g. social media services being exploited by fascists we really need to talk about ethics — better sooner than too late! Although it might feel annoying sometimes; we must realize that being unpolitical about our work is not an option any more (has it ever been?). The web is not an isolated echo chamber and everything we build has an influence on the life of real people.

Mike Monteiro’s great talk reminds us that we cannot affort reducing ourselves to being mere service providers for building an apoca­lyptic future any longer. We are human beings at first, not designers, developers or engineers. We are more than just two hands with a bank account! And we do have a choice who and what we want to work for.

After a long break, I finally took the time to work on a new screen print. Though I have kept on drawing for the better part of the year, I haven’t done any printing (my inkjet does not count …). It almost felt like a shame to have brand-new screens and inks just catching dust in the corner without actually making good use of them. But now that the first test-run has been successfully completed, I’m looking forward for many more to come.

The workshop still needs a lot of love, because the primary focus of artge​rechtes​.de has been on producing organic/​fair-​trade fashion and thus the workshop is optimized for printing on clothes in high editions. Establishing the capabi­lities for handling paper still needs some more equipment to make the process somewhat more effective, but at least the foundation has been laid. My next project will be to improve the printing table.

If you’re interested in buying one of the print shown below, just send an E-Mail to hallo@​fabianmichael.​de or info@​artgerechtes.​de.

After more than a year, I prepared a huge update for this website. A lot has changed — especially under the hood — whereas the layout has been refined at lots of places. Looking back, I collected some thoughts on what the project meant for me and what I learned from it.

In my opinion, personal side projects are always a great way for trying out new things. However, the downside of that is always tht it takes a lot of time. As more of my work shifts towards design and conception, keeping up with the latest web techno­logies is often more than just a trivial side-task. Though I think that my CSS skills are quite good, JavaScript nowadays often feels a bit like rocket science to me. But that’s okay somehow in an industry, that constantly shifts towards more complex products and thus needs more specialists at some points. On the other hand, being a designer with some decent knowledge about web techno­logies is never a disad­vantage, especially not since the day we started to design responsive websites. But I guess the hardest thing to learn when working on personal projects, is how to cope with the non-existent deadline. I would say, the best result would be to end up with something between the minimal solution to accomplish your goal and that fancy result that tops everything comparable you had ever seen before. In the end, you should get something you can feel comfortable with and that suits your needs.

weiterlesen

Wird geladen ...