DEV Community: Matthias Ott

:focus-visible Is Here

Matthias Ott — Sat, 10 Oct 2020 21:52:08 +0000

This post was first published on my personal website.

One of the most important features of a website that is built with accessibility in mind is that it can be navigated with a keyboard. Most blind users and many users with motor disabilities rely on keyboard navigation, either with a standard keyboard or with a device that mimics the functionality of a keyboard. Providing strong visual indicators that highlight the element that currently has keyboard focus is therefore indispensable. In CSS, the focus styles for an element can be changed via the :focus pseudo-class.

a:focus {
  outline: 3px solid blue;
}

Hiding Focus Styles Is Bad Practice

Besides accessibility requirements, there are also design considerations to be made, though: For some users, a strong visual focus indicator once they click an element with a mouse or touch it with their finger can be irritating or feel “clunky”. Often, the focus highlight is only visible for a short time just before a page change occurs. This is an additional visual change in the interface that users have to process and understand. Without the knowledge that this highlight around the element is actually an accessibility feature, people might be distracted or irritated. Sometimes, it is even perceived as an error. And while some designers certainly are far more sensitive to the aesthetic qualities of an interface than its users – and would be well-advised to get used to a bit more accessibility-oriented, contrasted designs –, it is still relatable that focus indicators can feel like an intrusive break in an otherwise carefully balanced visual design.

Many clients and designers, therefore, insist that developers remove the focus styles altogether for purely aesthetic reasons.

a:focus {
  outline: none;
}

This is bad. It is an uninformed decision that actively excludes people and should not be an acceptable solution in 2020 anymore. So don’t do that. We have to do better. But how?

One way out of this dilemma would be to cleverly design the focus state of an element so that it is perceived as a natural part of the transition from one state of the interface to the next. This, however, is not always easy or possible.

:focus-visible to the Rescue

Luckily, there is now another option: The :focus-visible pseudo-class. According to the spec, “the intent of :focus-visible is to allow authors to provide clearly identifiable focus styles which are visible when a user is likely to need to understand where the focus is, and not visible in other cases.” Or, in other words, it lets you show focus styles only when they are needed, using the same heuristic that the browser uses to decide whether to show the default focus indicator:

/* Hide focus styles if they're not needed, for example, when an element receives focus via the mouse. */
:focus:not(:focus-visible) {
  outline: 0;
}

/* Show focus styles on keyboard focus. */
:focus-visible {
  outline: 3px solid blue;
}

Chrome 86 just shipped with support for :focus-visible, Firefox supports it via the :moz-focusring pseudo-class since 2011 and Mozilla is currently working on adding support for :focus-visible, too. So you can start using it now. And once more, progressive enhancement is your friend here. You can define regular focus styles for non-supporting browsers and then overwrite them for browsers that support :focus-visible.


:focus {
  outline: 3px solid blue;
}

:focus:not(:focus-visible) {
  outline: 0;
}

:focus-visible {
  outline: 3px solid blue;
}

You can try it out in this Codepen:

Note that :focus-visible always applies in combination with :focus. So if you inspect it in Chrome’s Developer Tools, for example, make sure to tick both boxes to see the appropriate focus styles.

A Polyfill for Older Browsers

If you need to support a wider range of browsers, including Safari, there is also a polyfill. It simply adds a focus-visible class to all focused elements in situations in which otherwise the :focus-visible pseudo-selector would match.

Once the script is added to your page, the code looks much like in the examples above. The only difference is that now we are using classes to define the visible focus styles in our CSS:

.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

.js-focus-visible .focus-visible {
  outline: 3px solid blue;
}

If you decide to use the polyfill, make sure to pay attention to how it behaves in combination with your existing focus styles. It might still be a valid choice to only use the polyfill until Safari also adds support for :focus-visible. But regardless of which method you decide to use, it is fabulous that we now have a solution to a problem that was often “fixed” by developers and designers by making websites less accessible. :focus-visible now offers a solution that is accessible and makes users, designers, and developers happy.

Into the Personal-Website-Verse

Matthias Ott — Fri, 17 May 2019 11:17:01 +0000

More and more people are rediscovering their personal websites as an alternative to social media that provides more control and freedom of expression. It's time to connect our sites even further and create a decentralized fabric of interconnected personal sites that enables each individual to engage in an open discussion – answering, challenging, and acknowledging the ideas of others through a universe of personal sites.

Social media in 2019 is a garbage fire.

What started out as the most promising development in the history of the Web – the participation of users in the creation of content and online dialogue at scale – has turned into a swamp of sensation, lies, hate speech, harassment, and noise.

Your Unfriendly Neighborhood

Craving for attention and engagement, our timelines have changed. Algorithms now prioritize content from people with a huge following and everything that is loud and outrageous. It’s all about what the masses and the bots “want”, what they will like, share, and click. This strategy might be driving sales of ads because traditional online marketers are obsessed with quantity and it is – besides selling user data – the only answer they found for venture capital constantly demanding a bang for the buck. Yet it leads to an experience that is so often just more of the same and at the same time much less predictable, less organic, and less adjustable to your own preferences. As Craig Mod writes, “social networks seem more and more to say: You don’t know what you want, but we do.”

Consequently, it has become substantially harder for people with a small to medium following to get their voices heard and find a practical and creative use for services like Twitter or Medium. Twitter, for example, used to be that place where you would meet nice and brilliant people from the web community and make new friends, where you could find and share ideas and inspiration. But Twitter has changed so drastically and I’ve seen so many people turning quiet or leaving completely, that I don’t know how long this journey will continue. As with so many technologies before, the initial hopeful enthusiasm that accompanied the rise of social media has given way to disillusionment.

One day, Twitter and other publishing platforms like Facebook, Instagram, or Medium will indeed die, like so many sites before them. And every time this happens, we lose most of the content we created and with it a fair amount of our collective cultural history.

Data loss isn’t our only problem, though. If you decide to publish your work on a platform like Medium, you’re giving away control over it. What if Medium suddenly decided to extend the already existing paywall to all articles? There’s not much you could do about it. Simply because you don’t own your content anymore.

Maybe this wouldn’t be a big issue if owning your content today wasn’t more important than ever. Especially, but not only, if you are working as an independent or freelancer, your content is not just something you happen to have created – and for which you own the copyright of, by the way – but it is also part of your identity. It is part of who you are, what you’re thinking about, what you believe in, and what you’re up to. It is part of the story you are about to tell. It is part of the change you seek to make. Your content is one of your most valuable assets and thus owning it is invaluable.

So it comes as no surprise that more and more people are looking for alternatives. Not only for alternatives to Twitter or Medium per se but to the way social media currently works in general. Many are craving for more control, less noise, and for having more real and meaningful conversations again.

Homecoming

There is one alternative to social media sites and publishing platforms that has been around since the early, innocent days of the web. It is an alternative that provides immense freedom and control: The personal website. It’s a place to write, create, and share whatever you like, without the need to ask for anyone’s permission. It is also the perfect place to explore and try new things, because, as Seth Godin likes to say, we now live in a world of “unlimited bowling”. It is totally up to you what you create and because you have unlimited shots on the Web, you can try out different formats, different styles, different topics. Regardless of what other people might think and although it might not work. Creation is free.

A personal website is also a powerful playground to tinker with new technologies and discover your powers. Take Rachel Andrew’s and Sara Soueidan’s word for it:

Sara Soueidan

@sarasoueidan

@mmatuzo - My first #CSS Grid implementation was on my own site
- My first service worker implementation was on my own site
- My first real-world CSS Variables implementation was/is on my own site (WIP)
- My first Variable Fonts implementation will be on my own site
- ...

08:01 AM - 08 Feb 2019

5 45

I couldn’t agree more. Building things for your own site is so worthwhile because you are allowed to make mistakes and learn without pressure. If it doesn’t work today, well, maybe it’ll work tomorrow. It doesn’t matter. And so it was on my own site that I, too, wrote my first service worker, that I first tried out CSS Grid, that I designed and implemented a custom syntax highlighting theme, that I set up an RSS/Atom and JSON feed, that I wrote three plugins for Craft CMS in PHP/Yii, and Twig, with one of those plugins adding Webmention support to my site. I also learned a ton about accessibility, performance optimization, or web font loading. All of which I then could put to use in my day-to-day work as a designer and developer.

But maybe the most compelling reason why a personal website and also learning how to build one is incredibly valuable is this: community. Since the days of “guest books”, personal websites have been a place to receive feedback and discuss ideas and concepts with others. Often by the means of comments, sometimes even by writing a series of follow-up articles back and forth.

Now imagine, for a moment, an environment where a decentralized fabric of connected personal sites allows everyone to publish their own content but also enables each individual to engage in an open discussion – answering, challenging, and acknowledging the ideas of others through this universe of personal sites.

As idealistic as this vision of the Web might seem these days, it isn’t that far out of reach. Much of what’s needed, especially the publishing part, is already there. It’s also not as if our sites weren’t already connected in one way or another. Yet much of the discussions and establishment of connections, of that social glue that holds our community together – besides community events in real life, of course –, mostly happens on social media platforms at the moment. But: this is a choice. If we would make the conscious decision to find better ways to connect our personal sites and to enable more social interaction again, and if we would then persistently work on this idea, then we could, bit by bit, influence the development of Web technologies into this direction. What we would end up with is not only a bunch of personal websites but a whole interconnected personal-website-verse.

Weaving Our Web

It’s, of course, safe to assume that a web of personal websites will never be an equivalent substitute for a social network like Twitter. But that’s also not the goal. Personal websites are called personal websites because they are just that: personal. Thus, the primary objective still is to have a place to express ourselves, to explore ourselves, a place that lasts while the daily storms pass by. A place of consideration, and yes, a place of proudly sharing what we do, what we think, and what we care about. A place to contribute your voice and help others. A home on the internet. A place to tell your story.

But on top of that, we have the chance to (re-)establish personal websites also as central elements of online discourse and as entry points for people who are new to the web community. For this, we need to find ways to create an ecosystem that lives up to the diversity of the personal-website-verse. Consequently, what will hold our sites together, is most possibly not one technology to rule them all, but a multitude of different and ever-evolving technologies. Things like hyperlinks, comments, Webmentions, and RSS, of course, but also other technologies that have yet to be invented. Not only would this leave enough room for individual preferences, but it would also make the whole construct more resilient while still being flexible enough to evolve over time.

The first step of this is to explore more ways to establish new and strengthen existing connections – and also to improve findability. We don’t have to reinvent everything from scratch but can build on so much that already exists. Some things that can serve as good starting points are:

Quote people and link to other sites.

Whenever you stumble upon an interesting thought on another site, write about it and link to it. Not only is it respectful to link to the person you quoted, but hyperlinks are also the magic force holding the Web together. They are both helpful and powerful. You can also add a links section to your site, where you collect interesting links you found on the web and over time build an archive for yourself and others.

By the way: What happened to the blogroll? Remember? That little box in the sidebar of blogs that would link to the websites of friends and fellow bloggers. The blogroll isn’t dead yet – some people still use it. So how about adding a little section or page to your site that does exactly the same? Link to the personal websites of people you respect and appreciate, maybe with a little description? While we’re on it, we could also bring webrings back. Charlie Owen recently also wrote about them and Max Böck was so inspired he built a starter kit for hosting your own webring.

Use RSS feeds and readers.

RSS has been pronounced dead over and over again, yet it is still not dead and I doubt that it ever will be. In fact, it is witnessing a little comeback from time to time. Personally, I have started to use it more regularly again and others have, too. RSS is a great way to follow the people whose posts, ideas, and opinions matter to you. So if you write or put any kind of content on your site, also make sure to add an RSS feed. And then go and add some sites to a feed reader like Feedbin, Feedly, or Michael Scharnagl’s Feediary. If you use a Mac or iOS device, also have a look at Reeder.

Use website directories.

There are a few really helpful directories that list RSS feeds or personal sites and that can help you find interesting content. For example, Andy Bell’s personalsit.es, Dave Winer’s feedbase, the IndieWeb Directory, or RSS lists like the ones of Sime Vidas or Stuart Robson.

Use Webmentions and Microformats – and join the IndieWeb.

Another powerful technology which can glue our sites together is Webmention. Webmention is a W3C recommendation that describes a simple protocol to notify any URL when a website links to it, and for web pages to request notifications when somebody links to them. The mentioned site can then grab a snippet of the HTML of the website that links to it and, if it is enriched with Microformats, display the mention somewhere, for example under a blog post like this one. Aside from all questions of data protection, Webmentions are a powerful tool and one of the many technologies that originated in the IndieWeb community. If you don’t know about the IndieWeb yet, take a look at my article on reclaiming control over your content, or head over to indieweb.org. Built around the basic idea that you should own your content, the IndieWeb community is the birthplace of a few powerful technologies that all have the goal to make your personal website the center of a more open, decentralized web.

Webmentions are a great way to connect and intertwine two sites and thus, two ideas. You could even build something like a commenting system around Webmention – if only it still wasn’t a bit complicated for mere mortals to implement them. Luckily, there are plugins available for content management systems like Wordpress, ProcessWire, or Perch. I will update my own Webmention plugin for Craft CMS over the coming weeks so that it supports the latest version 3 of Craft CMS.

Go to meetups and conferences and spread the word.

There are meetups for everything and they are a great place to meet like-minded people, exchange, connect, and tell others about how great having a personal website is. So look up if there’s maybe a meetup about blogging in your city. Also, meetups on topics like WordPress, writing, or publishing in general could be worth a visit. Then there are more and more Homebrew Website Clubs emerging. Homebrew Website Clubs, which are also an IndieWeb idea, are a great opportunity to work with others on your personal sites once or twice a month. And if you don’t find an appropriate meetup or event near you, how about starting one?

“Don’t do it like me. Do it like you.”

As you can see, there are many ways and many good reasons to start building your site today. But whatever you start, keep in mind that you don’t have to build something from start to finish to show it to the world. To the contrary, it can be a great idea to start as simple and rudimentary as possible, to get the fundamentals right before diving too deep into over-complicated solutions. Take your time to think about how to build a site that’s truly tailored to you and your work. What are you really trying to achieve? What content do you want to create? Who is your audience? And how does a website look like that reflects all that in terms of structure, hierarchy, complexity, visual design, and scope?

Kylie Timpani, for example, who recently worked as the lead designer on v17 of CSS-Tricks, is now doing an open redesign of her website. So she is building the website out in the open, starting with some blank and raw HTML, and will be documenting what she’s learning along the way. This, by the way, is generally a great thing to do on your site: Document your process and share all the things you learn. Amber Wilson is doing this on her site, too. Since she decided to become a web developer, she regularly writes about her experience and what she learned. Not only is this a great way to help others find their way, but it also shows that we all have to learn and we all have things we don't know. Don’t let that stop you.

Also, don’t hesitate to write about little ideas and observations that might seem too small or unimportant to share. We all have our unique perspectives and even the smallest experience is worth sharing. Someone else might be in a similar situation as you or also in a completely different situation. They both might learn something new from reading about your experiences. Each contribution to the community, even the smallest one, is useful and will make a change. So just write. By the way: If you are struggling to find something to write about and feel blocked, remember that there is no such thing as writer‘s block. The more you write and create, the easier it will get.

To Begin, Begin

When I studied design back in the early 2000s, my digital media professor, Tom Duscher, held the view that every designer should have their own blog. It was still the early days of blogging but he already saw the potential and power of writing about your craft and reflecting on your experiences. At the time, I thought I understood what he meant, but it took me over 10 years to finally overcome (or simply ignore) the fear of being wrong and start to publish on my site. I won’t ever look back.

Building and maintaining your personal website is an investment that is challenging and can feel laborious at times. Be prepared for that. But what you will learn along the way does easily make up for all the effort and makes the journey more than worthwhile. But most importantly, having a website makes you part of an amazing community of creators, forming new friendships, new connections, and new opportunities. This is invaluable.

Personal websites are the backbone of the independent Web of creators. Even after all those years, they remain a vital part of what makes the web the most remarkable and open medium to date. We shouldn’t take this for granted, though. If we don’t pay enough attention and care about the open web enough, we might lose this valuable asset. So let us protect the Web as a source of inspiration, diversity, creativity, and community. Let us maintain what we have and work together to make this little part of the magic of the Web sparkle even brighter. Let us help new members of the community to start their journey. Let us build, prototype, publish, and connect.

Let’s start today.

This post was originally published on my own website.

The header image illustration is based on photographs of the Apple Lisa by Victor R. Ruiz and the Apple Lisa mouse by Marcin Wichary, both released under a Creative Commons license (Attribution 2.0 Generic, CC BY 2.0).