Recude motion on a website for better accessibility

This is my secon blog post in the #FocusAccessibility themed January. Today I want to talk about a topic, that is probably not so common when talking about accessibility. Many of you might know how to optimize websites for visually impaired or blind people. But there are many different types of disabilities. Today I want to hightlight one, that probaly not many of you are aware of.

Motion-triggered vestibular spectrum disorder

The topic is pretty big, although largely unknown. In summary, it means that animations, motions, effects, etc. can harm people viewing a website. I can be a real thread to their health and can lead to epileptic seizure or other symptoms.

Yes, animations and effects are really nice and can make a website even more amazing. But do you really want to harm the visitors of your website? Probably not? But what can you do about it? First of all, get yourself familiar with this issue. There are good articles by Mozilla and A List Apart on that topic. There are also many different elements on your website, that can cause this issue. As I cannot cover all of them, I want to show you a simple way to reduce animations in your CSS code.

The „prefers-reduced-motion“ media query

Fortunately modern browsers and operating systems can help you to improve your website to make it less harmful for those users. You can use the prefers-reduced-motion media query to either wrap all of your animations into it and only play them, when the settings is not set by the visitor of your site. Or you disable animations in this media query. You can find more information about that media query on a blog post by CSS-Tricks.

As an example, you can visit the website of WordCamp Europe 2020. The front page has an animation of the logo. Even though the logo is not an extreme example of harmful animations, there might still users who would prefer to have a static logo.

The Design Team of WordCamp Europe did an amazing job creating this animation with pure HTML and CSS code. But the animation was not wrap into the media query. If the CSS code would be wrapped into it, the animation would not start at all and the logo would not become visible. So how can we easily fix is?

„Fast foward“ the animation

The fix was pretty easy. I just searched for all elements with a CSS animation on it and „fast fowarded“ the animation by setting all delays and durations to zero second, so the logo would be fully visible on page load. The code looks like this:

@media (prefers-reduced-motion: reduce) {
    .wceuicon *,
    .wceuicon:before,
    .wceuicon:after,
    .wceu-logo-text * {
        animation-delay: 0s !important;
        animation-duration: 0s !important;
    }
}

With these few lines, the logo animation is deactivated and the website becomes more accessible.

Reduce the animation

Another solution would be a reduction of the animation. One problematic part of the logo is probably the „blinking cursor“ and the „dots flying in“. We could create an animation, where the dots and the cursor would simply fade in on the designated positions in a slow animation. So we still have an animation, but one with a truely reduced motion.

Test the media query

Now you may wonder how to test the new media query. Many modern operating systems offer options. Mozilla has an overview of the supported browsers and where to find the option in different operating systems. On Google’s Developer platform you also find some more useful tips on the media query and how to test them.

Windows 10

If you use Windows 10, you find the option at „Control Panel | Ease of Access |Ease of Access Center | Make the computer easier to see“:

Just activate the „Turn off all unnecessary animations (when possible)“ checkbox. This setting will not only recude animations in the browser, but in all programs supporting that setting. After you applied the setting, reload the website with the animation. You should now see the optimized/reduces version.

Android 9

I have also found a setting on my mobile phone. Just search for „accessibility“ in the settings. You will then find the switch as „Display | Remove animations“.

There are similar settings on macOS and on iPhones. I was unfortunately not able to find such a settings on my work laptop running on Manjaro linux. But if you know where to find it, please let me know!

Summary

Making a website fully accessible is not an easy task, as many aspects are not as well known as other ones. But when it somes to prioritizing the things to solve first, always start with the things that can harm your visitors. Only then continue with other aspects. I can highly recommend the talk „Prioritizing Accessibility“ by Sarah Brodwall from the last Accessibility Club Summit Berlin.

I hope you have learned a new aspect of accessibility today and I could convice you to use it on your website. If you already have a great reduced animation on one of your sites, please leave a link in the comments, so we can all learn from it.

A few easy steps to make a navigation more accessible

A new year, a new blogging project. Torsten Landsiedel restarted the idea of blogging more regularily. But instead of one blog post per week, he reduced it to one new blog post every two weeks, as well as one comment per two weeks. As I have also participated in previous editions, I will try my best to succeed again. But as this blog is still bilingual, I will post in English in the first week and German in the second week. So I will hopefully post 26 posts, both in English and German.

Focus on Accessibility

Simon Kraft, another long time member of the German WordPress Community, also declared Janurary 2020 to the month with a focus on accessibilty and asks bloggers to focus on that topic. This is why my first two blog posts will have a focus on accessiblity. But probably also some other blog posts this year, as it is a topic I deeply care about.

Accessible navigations

In this first blog post of 2020, I want to show you, how you can easily make your websites navigation more accessible, if it currently is not. The main focus will be on visual and keyboard accessibility.

Improve the visual accessibility

The navigation is maybe the most important element of a website. Both sigthed and visually impaired users will find most sub pages using the navigation. Therefore, the navigation has to be „visually accessible“. Not only for users, but also for assistive technilogies, such as screen readers.

Don’t hide sub menus

When visitors are using a screen reader or similar assistive technology, only elemens that are „visible“ will be announced. If a sub menu is hidden using a CSS rule, than those sub menus are not visible to such a visitor.

Hide them differently

For a classical horizontal top navigation, a typical CSS rule may look like this (example from the Yoko theme from Elmastudio):

#branding #mainnav ul ul {
	display: none;
	float: left;
	position: absolute;
	top: 2em;
	left: 0;
	z-index: 99999;
}
#branding #mainnav ul li:hover > ul {
	display: block;
}

The sub menu is hidden by default. On a hover, the display property is switched to block, so the sub menu becomes visible.

Instead of hiding the element, you could move it out of the viewport, so a sighted visitor cannot see it, but a screen reader can:

#branding #mainnav ul ul {
	display: block;
	opacity: 1;
}
#branding #mainnav ul li:not(.focus):not(:hover) > ul {
	position: absolute;
	left: -999em !important;
	opacity: 0 !important;
}

With this code, we show the sub menu on default. We then move the sub menu out of the viewport and set the opcacity to „invisible“, when the top level menu item is not focused and does not have the CSS class focus applied.

Provide a focus style

In order to make the navigation keyboard accessible, it’s not only imporant, that a user can access all item, it is also important to give a visual feedback on the menu item, the visitor is currently navigating to using the keybord.

Unfortunately, many themes globally remove ony outline property from any element. You can either just set the outline for the navigation item back to the default styles, or you simply use the same styles on focus as you use for the hover state. For Yoko it could look like this:

#branding #mainnav ul li a:focus,
#branding #mainnav ul li a.focus {
	background:#F0F0F0;
	color: #999;
}

We set the styles both for the focus state and CSS class, which will help us with the second step.

Improve the keyboard accessibility

In most navigations, the hover state is used to show a sub menu. When using a website with the keyboard only, this state is not triggered or active in CSS. In order to make a navigation usable using the keyboard tab key only, we use some JavaScript, which will add a CSS class focus, when/while a menu item or one of it’s sub menu items is focused:

( function() {
	var container, menu, links, i, len;
	var navigationContainerId = 'mainnav';
	var menuItemFocusedClass  = 'focus';
	container = document.getElementById( navigationContainerId );
	if ( ! container ) {
		return;
	}
	menu = container.getElementsByTagName( 'ul' )[0];
	if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {
		menu.className += ' nav-menu';
	}
	// Get all the link elements within the menu.
	links = menu.getElementsByTagName( 'a' );
	// Each time a menu link is focused or blurred, toggle focus.
	for ( i = 0, len = links.length; i < len; i++ ) {
		links[i].addEventListener( 'focus', toggleFocus, true );
		links[i].addEventListener( 'blur', toggleFocus, true );
	}
	/**
	 * Sets or removes .focus class on an element.
	 */
	function toggleFocus() {
		var self = this;
		// Move up through the ancestors of the current link until we hit .nav-menu.
		while ( -1 === self.className.indexOf( 'nav-menu' ) ) {
			// On li elements toggle the class .focus.
			if ( 'li' === self.tagName.toLowerCase() ) {
				if ( -1 !== self.className.indexOf( 'focus' ) ) {
					self.className = self.className.replace( ' focus', '' );
				} else {
					self.className += ' focus';
				}
			}
			self = self.parentElement;
		}
	}
} )();

When using this snippet, you can simply set the id attribute of the navigation container and the CSS class that should be added on a focus state in lines 3 and 4. This JavaScript does not even need a library like jQuery and should work with any theme that is using the default WordPress navigations and no other JavaScript enhancements on the navigation. This JavaScript is a slighly modified version of code from the _s theme.

With this JavaScript applied, a visitor can use the keyboard to tab-navigate throught the navigation an all it’s sub menus both forward and backward.

Bonus: Improve the usabilty on tablets

Another issue with a hover state horizontal navigation is the fact, that a mobile device like a tablet does not have a hover. When a visitor would click on any top level item, it would only show the sub menu for a split second, before navigating to this top level item.

We want a top level item with a sub menu to show the sub menu on the first click and only navigate on a second click. For top level items without a sub menu, we want those item to navigate on the first click. This can be done with this additional snippet:

( function() {
	var container;
	var navigationContainerId = 'mainnav';
	var menuItemFocusedClass  = 'focus';
	container = document.getElementById( navigationContainerId );
	if ( ! container ) {
		return;
	}
	( function( container ) {
		var touchStartFn, i,
			parentLink = container.querySelectorAll( '.menu-item-has-children > a, .page_item_has_children > a' );
		if ( 'ontouchstart' in window ) {
			touchStartFn = function( e ) {
				var menuItem = this.parentNode, i;
				if ( ! menuItem.classList.contains( menuItemFocusedClass ) ) {
					e.preventDefault();
					var menuItemLength = menuItem.parentNode.children.length;
					for ( i = 0; i < menuItemLength; ++i ) {
						if ( menuItem === menuItem.parentNode.children[i] ) {
							continue;
						}
						menuItem.parentNode.children[i].classList.remove( menuItemFocusedClass );
					}
					menuItem.classList.add( menuItemFocusedClass );
				} else {
					menuItem.classList.remove( menuItemFocusedClass );
				}
			};
			var parentLinkLength = parentLink.length;
			for ( i = 0; i < parentLinkLength; ++i ) {
				parentLink[i].addEventListener( 'touchstart', touchStartFn, false );
			}
		}
	}( container ) );
} )();

This snippet will use the ontouchstart event to provide the necessary fixes for a drop down navigation on mobile devices.

Conclusing

It is not really hard to make a website’s navigation accessible. You just have to change your CSS a bit and introduce some JavaScript. This is best done in a child theme. You can also provide the fixes to the initial theme developer, so the fix can be provided to all users of the theme. For the Yoko theme in this example, I have created a small plugin, which bundles all the fixes. Just give it a try! Install the Yoko theme and try to keyboard navigate on your page using only the tab key. Then install and activate the plugin and do the same. Also test the navigation on a tablet using your browsers device emulation function.

After that, test your own theme! Is it accessible? Can you easily make it accessible by using the techniques from this blog post? In case your theme is using a „hamburger menu“, take a look on the code from the _s theme, with provides a very user-friendly and accessible way for a mobile navigation with sub menus.

Allow visitors to call you easily

In the last blog post I wrote about how to customize a web font to add some social media icons to your website. In the project was I’ve mentioned there was the wish to add an icon to call the site’s owner.

Protocols to call from a website

In order to allow visitors to call a number, you simply have to wrap it into a link and use the tel protocol. A link would look like this:

<a href="tel:+1-555-2401">555-2401</a>

In this example, I have used the country code for the US. This is technically not necessary, but it helps when the number might be used from visitors outside of the US. You can add dashes to make the number more readable, but you can also write it like +15552401. The link text can be in any format. It could also be some text like Call us, just as with any other link.

What happens, when clicking the link?

On a mobile phone, as soon as a visitor clicks the link, it will either directly call the number or ask for the app to use, if there is more than one app (like the regular phone app and Skype installed).

And what about desktop browsers?

Even on a desktop browser you can use such links. Here is an example of Chrome, with a left click on the link:

If you have a mobile phone connected to your profile, you can send the phone number from the link to your mobile. Alternatively you can pick another app.

On a right click you can also send the phone number to your mobile, but you don’t habe the option to use a different app:

Alternative protocols

The tel protocoll works for regular phone calls on mobile and desktop. On mobile phone, you can usually also pick a different VoIP app, such as Skype. But on desktop browsers, Skype is not offered. If you want visitors to use Skype, you can use the callto protocol.

There are also the protocols sms and fax, but the browser support is still quite limited.

Conclusion

Offering a link for your visitors to call you is really easy and helps to improve the user experience of your website. You can find an overview on the different browser behaviours and tips and tricks to style such links on CSS-Tricks. So why don’t you add such a link to your website, if you don’t already have one?

Optimize icon web fonts for your needs

On almost any modern website you find icons. They are often used on links to social media profiles. Many WordPress themes come bundled with such a web font for icons. Nowadays I usually always use SVG symbols instead of icon web fonts when building a theme from scratch. But when customizing a theme, you might have to still use them.

Load web fonts locally

Many website owners embed fonts locally due to the GDPR. For this purpose they download the web font and put it into their child theme. Tha’s a perfect time to think about which icons you really need and which not. Icon fonts for social media profiles are a good example on why you might want to customize the font you are including.

Customize a icon web font

Let’s take the popular Font Awesome as an example. It contains 1544 icons with 433 icons for brand such as social media. But do you really have a profile on all of them? If not, it might be worth to only load those icons you really need. With an SVG sprite, that would be as easy as removing al unnecessary symbols from the file, but with web fonts it’s a bit harder.

Online service for font customization

For a friends website I had to add some social media icons the web font bundled with the theme was not providing. So I had to use Font Awesome instead. While searching for a way to use just as few icons as possible I’ve found site Fontello, which offers a variety of icon font. One of them was Font Awesome.

On that website you can simply use the two searches to search for font names and icon names. Then you multi-select all the icons you need. Maybe add some you might need in the near future as well.

On another tab you can even customize the names of the icons in the resulting files and the unicode values. Then simply download your selection, which will contain the web font in different formats as well as some CSS files with the necessary definitions.

Saving a lot of bandwidth

But how much can you safe? Font Awesome uses 3 files for different icon types with 5 formats each. The woff2 files add up to around 165kB. The minified CSS file adds another 57kB.

For that friends website, I only needed 9 icons and woff2 file less then 4kB with another 2kB CSS (unminified), which can be reduced to 1kB (minifed).

In total 2 files/requests and almost 98% in bandwidth (217kB) could be saved.

Do optimize your fonts!

As you can seen, there is a huge potential to safe bandwidth and make your site load faster. The only issue you have to deal with is updating that reduced font, once you need a new icon.

When using Google Fonts, you can use the text parameter to define the characters you need. Unfortunately on Google Fonts you don’t find icon web fonts and I have not found an online service offering a similar functionality. If you know of such a website, please leave a comment below.

Compiling SASS in PhpStorm automatically with a file watcher

In the first post of this litte blog series I showed you how to install SASS manually and how to compile it using the terminal. But this way is not very user friendly and you could easily forget to start the compiler/watch when working on a project.

Adding a file watcher

The easiest way to add the file watcher is by just opening a SASS file. PhpStorm will recognize it and show you a little Notification above the file content. Just click the „Yes“ link and the settings screen will open:

If you don’t see the notification, you will find the option to add a file watcher at „File | Settings | Tools | File Watchers“. Here you just click the green plus icon to add a new file watcher and choose SCSS (not Sass, as this would be a file watcher to .sass files, the alternativ syntax, which is less frequently used):

Adjusting the file watcher settings

The default settings are quite good. PhpStorm will most probably find the path to your sass executable. In my case it’s a Windows file path:

One of the options I usually change is the „Arguments“ setting. I prefer the expanded output style and not the default nested one, as it looks more like CSS you would usually write manually. My „Arguments“ setting looks like this:

--style expanded --no-cache --update $FileName$:$FileNameWithoutExtension$.css

Conclusion

That’s all. Now every time you change your SCSS files (you don’t even have to save them explicitly with the default settings), your files will be compiled into CSS files. The file watcher will even recognize if you change a file that is imported into another file. If you don’t know what that means, just wait for my next blog posts, were I will explain some of the fundamentals of SASS.

Note: If you use the „Tools | Deployment“ of PhpStorm to deploy to a FTP server, make sure you activate „Upload external changes“ in the „Options“ settings, as otherwise the compiled CSS file would not be uploaded.

An intense year in review

First of all, Happy New Year to all of you! I hope you all made it well to 2018. Since you probably recognized, that I haven't blogged in the past weeks, I want to give you a small review of the past year and the plans for this year.

#Project52 bilingual

In 2017, I planed to continue to blog once a week. But unlike before, I wanted to blog English first and then translate the blog post to German the other week.

For the first 11 month it worked out really well. I blogged at least once a week and created some new plugins along the way. And then came December and the question if I could do an advent calendar in two languages.

The 2017 advent calendar

You might call be crazy or too ambitious, but I started another advent calendar for the third year in a row, with no blog posts prepared beforehand. The first 9 days went really well. Somethimes I posted them a bit after midnight, but I came up with some topics to write about. But then my streak ended.

Making priorities

After all, blogging is just a hobby for me. I really enjoy sharing knowledge and get feedback on it. But there are more important things in life and this year friends and family needed me more then my readers. So after about a week of not having the time to blog, I decided to give up on blogging for the rest of the year, as writing all the missing posts would probably have burned me out.

Plans for 2018

So what are my plans for this year? With my last posts from December 10, I started a little blog series. Although the initial reason is no longer there, I think it will still be a nice little series. I do want to blog bilingual as well this year. And I again want to do an advent calendar in 2018. Maybe I succeed in preparing some blog posts before December 1 😉

If you have any topics you want have covered and you think I could write about, just let me know in the comments below. And if you also have a new years resolution and are brave enough to tell us, please leave a comment as well 🙂

I am wishing all of you all the best for 2018 and I also hope to see some of you on an upcoming WordCamp somewhere.

  • Veröffentlicht in: Misc

Getting started with SASS

This is going to be the start of a small series of blog posts. I am not spoiling too much of the end result, but it has something to do with the special seasons of the year. The idea to this series is based on the wish for a blog posts by a very good friend. And I wanted to take the chance to introduce you into SASS. So before get to the actual code, let's start with the basics.

Installing SASS

SASS is an acronym for "Syntactically Awesome Style Sheets". You could see it was "coding in CSS". To use SASS, you write code which will then be compiled into normal CSS. To compile it, you have different options.

Using the official ruby gem

SASS was originally written in ruby. So to get started with this version, you have to install ruby first. On Windows, the easiest way it to use the RubyInstaller. On Mac you might want to you Homebrew with the following command:

brew install ruby

If you are on linux, your package manager most likely has a ruby package available. I would suggest to use ruby 2.2 and newer, but an older version might also work.

To install SASS, you simply have to install the ruby gem (the SASS "package" for ruby) with the this command:

gem install ruby

Now you should be able to run the ruby command in your terminal.

Using grunt

If you are familiar with grunt, you can also install a SASS package and use this to compile your files. It comes in two flavors. One package is using ruby while the other one is using libsass, a JavaScript implementation of SASS. For the ruby package, install this package:

npm install grunt-contrib-sass --save-dev

For the libsass version, which lacks some features of the ruby variant, use this package:

npm install grunt-sass --save-dev

Using gulp

If you preferred task runner is gulp, things a very similar to the grunt setup. For the libsass version, use this package:

npm install gulp-sass --save-dev

There is also a ruby version, but I am not sure if it's still actively maintained:

npm install --save-dev gulp-ruby-sass

Compiling SASS

Once you have SASS installed, you can compile a SASS file to normal CSS with this command:

sass style.scss style.css

This example is using the alternative SCSS syntax, which is more popular, as it is quite similar to CSS. This command will compile the file only once. As you don't want to run this command after every change you've made to a file, simply run the "watcher" which will compile the SCSS file on every detected change (usually when saved):

sass --watch style.scss:style.css

For more options, take a look a the official documentation.

Conclusion

You should now be able to use SASS to improve your CSS development process. In the next blog post I will show you how to integrate SASS into PhpStorm, an IDE many developers are using nowadays.

Correct quotes in WordPress

Different languages use different quotation marks. In English, is usually looks like this: “…”. In Germany it looks like this: „…“. And in French they use other symbols: « … ».

Correct typography is not always easy to get, especially when you can't type those symbols using your keyboard (even with the correct language set up). But where is a way to help you, at least in blockquotes.

CSS for quotes

You can define some CSS which would automatically put the correct quotes on a q element (usually inside of a blockquote element). There is a default to that property implemented in the browser. Just add this:

 q { quotes: "\00ab" "\00bb" "\2039" "\203A"; } 

This example defines the two variants of French quotes (as quotes can have "inner quotes" as well).

Using the HTML element

But there is an easier way. Just don't define anything specifically and let the browser handle the correct quoting. All you have to do is to set the correct lang attribute on the document.

<html lang="fr">
    ...
</html>

Now you can just use a q element and the quotation marks will match the defined language.

Fixing quotes in WordPress

WordPress is adding the lang attribute to the HTML tag, but unfotunately it is using the "four digit local", so instead of "fr" it is using "fr-FR" which will break the quoting for most browser. That's why I have written a small plugin to fix that.

This blog is now ad-free

As of today, I have removed all ads from this blog. I've used Google AdSense almost since the beginning of this blog. I have also experimented with some other advertisements and until today I had two banners to the affiliate program of my web hoster (clearly noticable as ads) on my blog.

Why I put ads on this blog

Running a self hosted blog comes not for free. The costs for hosting and domains increased over time, as more performance was needed and more websites were run on this single web server. I tried to cover some of these costs putting ads on my website. In the first years, I probably only got around 15% from costs back.

Why I removed all ads

In yesterdays blog post I wrote down my feelings about affiliate links in support forums and groups. I really don't like this. I also don't like websites which are full of ads, expecially within the content. That's why I tried to put them in places where they don't distract too much.

But with ads comes also a lot of overhead. I just check my blog before I removed the ads and it had around 70 requests from 19 different domains and weight around 1MB. After removing the ads, it only has 30 requests from 9 different domains and weighs aroud 640KB.

But not only the size was one of the reasons I planed to remove the ads. The privacy of my visitors is important to me as well as the security, as ads can be exploited.

How will I finance my blog

Last year I was able to cover all costs through Google Ads (43%) and the second monetarization: VG Wort. This is the german "collecting society" for authors (57%). Now that I drop one of them, I have to cover the costs in other ways. As I host the websites of some friends on my server, I can divide the costs a bit.

How do you finance your blog or website?

What do you do to cover the costs of your personal website? Do you also use some form of advertisements or affiliate programs? Do you use crowd funding plattforms or similar things? For me, only VG Wort and my wishlist will be left for the moment.

Selfish WordPress support

I love the WordPress community. They are wonderful people and I enjoy it very much to attend as many WordCamps in new cities/countries as I can to meet even more new members of the global community.

That also the reason I really like to give support in various ways. I organize WordCamps and meetups, I contribute to different Meta teams and I answer questions in some Facebook groups.

Helping others … or rather yourself?

As the holiday season is near, many companies offering WordPress related products and services offer some great deals. But just today I had another negative incident in a Facebook group. A member was posting a special deal on a well-known premium theme. This is great, right? Anyone will make a good deal. Not really. The one persons that benefits the most is the one who posted the link. Because it turns out that it was an affiliate link.

Stop selfish help!

Maybe I am too altruistic. But I really get angry when someone is just "helping" others to benefit from that help. I have no problem with freelancers and agencies offering help and being paid for that, if they deliever a real value for an individual problem. But posting affiliate links in Facebook groups just isn't right in my opinion.

Your thoughts?

What do you think? Are you also annoyed by this type of help? Or am I just overreacting on this topic?