Recherche avancée

Sur d’autres sites (11677)

• A systematic approach to making Web Applications accessible

  22 février 2012, par silvia

  With the latest developments in HTML5 and the still fairly new ARIA (Accessible Rich Interface Applications) attributes introduced by the W3C WAI (Web Accessibility Initiative), browsers have now implemented many features that allow you to make your JavaScript-heavy Web applications accessible.

  Since I began working on making a complex web application accessible just over a year ago, I discovered that there was no step-by-step guide to approaching the changes necessary for creating an accessible Web application. Therefore, many people believe that it is still hard, if not impossible, to make Web applications accessible. In fact, it can be approached systematically, as this article will describe.

  This post is based on a talk that Alice Boxhall and I gave at the recent Linux.conf.au titled “Developing accessible Web apps – how hard can it be ?” (slides, video), which in turn was based on a Google Developer Day talk by Rachel Shearer (slides).

  These talks, and this article, introduce a process that you can follow to make your Web applications accessible : each step will take you closer to having an application that can be accessed using a keyboard alone, and by users of screenreaders and other accessibility technology (AT).

  The recommendations here only roughly conform to the requirements of WCAG (Web Content Accessibility Guidelines), which is the basis of legal accessibility requirements in many jurisdictions. The steps in this article may or may not be sufficient to meet a legal requirement. It is focused on the practical outcome of ensuring users with disabilities can use your Web application.

  Step-by-step Approach

  The steps to follow to make your Web apps accessible are as follows :

  1. Use native HTML tags wherever possible
  2. Make interactive elements keyboard accessible
  3. Provide extra markup for AT (accessibility technology)

  If you are a total newcomer to accessibility, I highly recommend installing a screenreader and just trying to read/navigate some Web pages. On Windows you can install the free NVDA screenreader, on Mac you can activate the pre-installed VoiceOver screenreader, on Linux you can use Orca, and if you just want a browser plugin for Chrome try installing ChromeVox.

  1. Use native HTML tags

  As you implement your Web application with interactive controls, try to use as many native HTML tags as possible.

  HTML5 provides a rich set of elements which can be used to both add functionality and provide semantic context to your page. HTML4 already included many useful interactive controls, like <a>, <button>, <input> and <select>, and semantic landmark elements like <h1>. HTML5 adds richer <input> controls, and a more sophisticated set of semantic markup elements like such as <time>, <progress>, <meter>, <nav>, <header>, <article> and <aside>. (Note : check browser support for browser support of the new tags).

  Using as much of the rich HTML5 markup as possible means that you get all of the accessibility features which have been implemented in the browser for those elements, such as keyboard support, short-cut keys and accessibility metadata, for free. For generic tags you have to implement them completely from scratch.

  What exactly do you miss out on when you use a generic tag such as <div> over a specific semantic one such as <button> ?

  1. Generic tags are not focusable. That means you cannot reach them through using the [tab] on the keyboard.
  2. You cannot activate them with the space bar or enter key or perform any other keyboard interaction that would be regarded as typical with such a control.
  3. Since the role that the control represents is not specified in code but is only exposed through your custom visual styling, screenreaders cannot express to their users what type of control it is, e.g. button or link.
  4. Neither can screenreaders add the control to the list of controls on the page that are of a certain type, e.g. to navigate to all headers of a certain level on the page.
  5. And finally you need to manually style the element in order for it to look distinctive compared to other elements on the page ; using a default control will allow the browser to provide the default style for the platform, which you can still override using CSS if you want.

  Example :

  Compare these two buttons. The first one is implemented using a <div> tag, the second one using a <button> tag. Try using a screenreader to experience the difference.

  Send	<style> .custombutton cursor : pointer ; border : 1px solid #000 ; background-color : #F6F6F6 ; display : inline-block ; padding : 2px 5px ; </style> <div class="custombutton" onclick="alert(’sent !’)"> Send </div>
  Send	<button onclick="alert(’sent !’)"> Send </button>

  2. Make interactive elements keyboard accessible

  Many sophisticated web applications have some interactive controls that just have no appropriate HTML tag equivalent. In this case, you will have had to build an interactive element with JavaScript and <div> and/or <span> tags and lots of custom styling. The good news is, it’s possible to make even these custom controls accessible, and as a side benefit you will also make your application smoother to use for power users.

  The first thing you can do to test usability of your control, or your Web app, is to unplug the mouse and try to use only the [TAB] and [ENTER] keys to interact with your application.

  

  Try the following :

  • Can you reach all interactive elements with [TAB] ?
  • Can you activate interactive elements with [ENTER] (or [SPACE]) ?
  • Are the elements in the right tab order ?
  • After interaction : is the right element in focus ?
  • Is there a keyboard shortcut that activates the element (accesskey) ?

  No ? Let’s fix it.

  2.1. Reaching interactive elements

  If you have an element on your page that cannot be reached with [TAB], put a @tabindex attribute on it.

  Example :

  Here we have a <span> tag that works as a link (don’t do this – it’s just a simple example). The first one cannot be reached using [TAB] but the second one has a tabindex and is thus part of the tab order of the HTML page.

  (Note : since we experiment lots with the tabindex in this article, to avoid confusion, click on some text in this paragraph and then hit the [TAB] key to see where it goes next. The click will set your keyboard focus in the DOM.)

  Click	<style> .customlink text-decoration : underline ; cursor : pointer ; </style> <span class="customlink" onclick="alert(’activated !’)"> Click </span>
  Click	<style> .customlink text-decoration : underline ; cursor : pointer ; </style> <span class="customlink" onclick="alert(’activated !’)" tabindex="0"> Click </span>

  You set @tabindex=0 to add an element into the native tab order of the page, which is the DOM order.

  2.2. Activating interactive elements

  Next, you typically want to be able to use the [ENTER] and [SPACE] keys to activate your custom control. To do so, you will need to implement an onkeydown event handler. Note that the keyCode for [ENTER] is 13 and for [SPACE] is 32.

  Example :

  Let’s add this functionality to the <span> tag from before. Try tabbing to it and hit the [ENTER] or [SPACE] key.

  Click	<span class="customlink" onclick="alert(’activated !’)" tabindex="0"> Click </span>
  &lt;script&gt;<br /> function handlekey(event) {<br /> var target = event.target || event.srcElement;<br /> if (event.keyCode == 13 || event.keyCode == 32) { target.onclick(); }<br /> }<br /> &lt;/script&gt; Click	<span class="customlink" onclick="alert(’activated !’)" tabindex="0" onkeydown="handlekey(event) ;"> Click </span> <script> function handlekey(event) var target = event.target || event.srcElement ; if (event.keyCode == 13 || event.keyCode == 32) target.onclick() ; </script>

  Note that there are some controls that might need support for keys other than [tab] or [enter] to be able to use them from the keyboard alone, for example a custom list box, menu or slider should respond to arrow keys.

  2.3. Elements in the right tab order

  Have you tried tabbing to all the elements on your page that you care about ? If so, check if the order of tab stops seems right. The default order is given by the order in which interactive elements appear in the DOM. For example, if your page’s code has a right column that is coded before the main article, then the links in the right column will receive tab focus first before the links in the main article.

  You could change this by re-ordering your DOM, but oftentimes this is not possible. So, instead give the elements that should be the first ones to receive tab focus a positive @tabindex. The tab access will start at the smallest non-zero @tabindex value. If multiple elements share the same @tabindex value, these controls receive tab focus in DOM order. After that, interactive elements and those with @tabindex=0 will receive tab focus in DOM order.

  Example :

  The one thing that always annoys me the most is if the tab order in forms that I am supposed to fill in is illogical. Here is an example where the first and last name are separated by the address because they are in a table. We could fix it by moving to a <div> based layout, but let’s use @tabindex to demonstrate the change.

  Firstname : Address : Lastname : City :	<table class="customtabs"> <tr> <td>Firstname : <input type="text" id="firstname"> </td> <td>Address : <input type="text" id="address"> </td> </tr> <tr> <td>Lastname : <input type="text" id="lastname"> </td> <td>City : <input type="text" id="city"> </td> </tr> </table>
  Click here to test this form, then [TAB] : Firstname : Address : Lastname : City :	<table class="customtabs"> <tr> <td>Firstname : <input type="text" id="firstname" tabindex="10"> </td> <td>Address : <input type="text" id="address" tabindex="30"> </td> </tr> <tr> <td>Lastname : <input type="text" id="lastname" tabindex="20"> </td> <td>City : <input type="text" id="city" tabindex="40"> </td> </tr> </table>

  Be very careful with using non-zero tabindex values. Since they change the tab order on the page, you may get side effects that you might not have intended, such as having to give other elements on the page a non-zero tabindex value to avoid skipping too many other elements as I would need to do here.

  2.4. Focus on the right element

  Some of the controls that you create may be rather complex and open elements on the page that were previously hidden. This is particularly the case for drop-downs, pop-ups, and menus in general. Oftentimes the hidden element is not defined in the DOM right after the interactive control, such that a [TAB] will not put your keyboard focus on the next element that you are interacting with.

  The solution is to manage your keyboard focus from JavaScript using the .focus() method.

  Example :

  Here is a menu that is declared ahead of the menu button. If you tab onto the button and hit enter, the menu is revealed. But your tab focus is still on the menu button, so your next [TAB] will take you somewhere else. We fix it by setting the focus on the first menu item after opening the menu.

  Menu item1 Menu item2 Menu &lt;script&gt;<br /> function displayMenu(value) {<br /> document.getElementById(&quot;custommenu&quot;).style.display=value;<br /> }<br /> &lt;/script&gt;	<div id="custommenu" style="display:none ;"> <button id="item1" onclick="displayMenu(’none’) ;">Menu item1</button> <button id="item2" onclick="displayMenu(’none’) ;">Menu item2</button> </div> <button onclick="displayMenu(’block’) ;">Menu</button> <script> function displayMenu(value) document.getElementById("custommenu").style.display=value ; </script>
  Menu item1 Menu item2 Menu &lt;script&gt;<br /> function displayMenu2(value) {<br /> document.getElementById(&quot;custommenu2&quot;).style.display=value;<br /> document.getElementById(&quot;item1&quot;).focus();<br /> }<br /> &lt;/script&gt;	<div id="custommenu" style="display:none ;"> <button id="item1" onclick="displayMenu(’none’) ;">Menu item1</button> <button id="item2" onclick="displayMenu(’none’) ;">Menu item2</button> </div> <button onclick="displayMenu(’block’) ;">Menu</button> <script> function displayMenu(value) document.getElementById("custommenu").style.display=value ; document.getElementById("item1").focus() ; </script>

  You will notice that there are still some things you can improve on here. For example, after you close the menu again with one of the menu items, the focus does not move back onto the menu button.

  Also, after opening the menu, you may prefer not to move the focus onto the first menu item but rather just onto the menu <div>. You can do so by giving that div a @tabindex and then calling .focus() on it. If you do not want to make the div part of the normal tabbing order, just give it a @tabindex=-1 value. This will allow your div to receive focus from script, but be exempt from accidental tabbing onto (though usually you just want to use @tabindex=0).

  Bonus : If you want to help keyboard users even more, you can also put outlines on the element that is currently in focus using CSS”s outline property. If you want to avoid the outlines for mouse users, you can dynamically add a class that removes the outline in mouseover events but leaves it for :focus.

  2.5. Provide sensible keyboard shortcuts

  At this stage your application is actually keyboard accessible. Congratulations !

  However, it’s still not very efficient : like power-users, screenreader users love keyboard shortcuts : can you imagine if you were forced to tab through an entire page, or navigate back to a menu tree at the top of the page, to reach each control you were interested in ? And, obviously, anything which makes navigating the app via the keyboard more efficient for screenreader users will benefit all power users as well, like the ubiquitous keyboard shortcuts for cut, copy and paste.

  HTML4 introduced so-called accesskeys for this. In HTML5 @accesskey is now allowed on all elements.

  The @accesskey attribute takes the value of a keyboard key (e.g. @accesskey="x") and is activated through platform- and browser-specific activation keys. For example, on the Mac it’s generally the [Ctrl] key, in IE it’ the [Alt] key, in Firefox on Windows [Shift]-[Alt], and in Opera on Windows [Shift]-[ESC]. You press the activation key and the accesskey together which either activates or focuses the element with the @accesskey attribute.

  Example :

  Send &lt;script&gt;<br /> var button = document.getElementById('accessbutton');<br /> if (button.accessKeyLabel) {<br />  button.innerHTML += ' (' + button.accessKeyLabel + ')';<br /> }<br /> &lt;/script&gt;

  <button id="accessbutton" onclick="alert(’sent !’)" accesskey="e"> Send </button> <script> var button = document.getElementById(’accessbutton’) ; if (button.accessKeyLabel) button.innerHTML += ’ (’ + button.accessKeyLabel + ’)’ ; </script>

  Now, the idea behind this is clever, but the execution is pretty poor. Firstly, the different activation keys between different platforms and browsers make it really hard for people to get used to the accesskeys. Secondly, the key combinations can conflict with browser and screenreader shortcut keys, the first of which will render browser shortcuts unusable and the second will effectively remove the accesskeys.

  In the end it is up to the Web application developer whether to use the accesskey attribute or whether to implement explicit shortcut keys for the application through key event handlers on the window object. In either case, make sure to provide a help list for your shortcut keys.

  Also note that a page with a really good hierarchical heading layout and use of ARIA landmarks can help to eliminate the need for accesskeys to jump around the page, since there are typically default navigations available in screen readers to jump directly to headings, hyperlinks, and ARIA landmarks.

  3. Provide markup for AT

  Having made the application keyboard accessible also has advantages for screenreaders, since they can now reach the controls individually and activate them. So, next we will use a screenreader and close our eyes to find out where we only provide visual cues to understand the necessary interaction.

  Here are some of the issues to consider :

  • Role may need to get identified
  • States may need to be kept track of
  • Properties may need to be made explicit
  • Labels may need to be provided for elements

  This is where the W3C’s ARIA (Accessible Rich Internet Applications) standard comes in. ARIA attributes provide semantic information to screen readers and other AT that is otherwise conveyed only visually.

  Note that using ARIA does not automatically implement the standard widget behavior – you’ll still need to add focus management, keyboard navigation, and change aria attribute values in script.

  3.1. ARIA roles

  After implementing a custom interactive widget, you need to add a @role attribute to indicate what type of controls it is, e.g. that it is playing the role of a standard tag such as a button.

  Example :

  This menu button is implemented as a <div>, but with a role of “button” it is announced as a button by a screenreader.

  Menu	<div tabindex="0" role="button">Menu</div>

  ARIA roles also describe composite controls that do not have a native HTML equivalent.

  Example :

  This menu with menu items is implemented as a set of <div> tags, but with a role of “menu” and “menuitem” items.

  Cut Copy Paste

  <div role="menu"> <div tabindex="0" role="menuitem">Cut</div> <div tabindex="0" role="menuitem">Copy</div> <div tabindex="0" role="menuitem">Paste</div> </div>

  3.2. ARIA states

  Some interactive controls represent different states, e.g. a checkbox can be checked or unchecked, or a menu can be expanded or collapsed.

  Example :

  The following menu has states on the menu items, which are here not just used to give an aural indication through the screenreader, but also a visual one through CSS.

  Left Center Right

  <style> .custombutton[aria-checked=true]:before content : "\2713 " ; </style> <div role="menu"> <div tabindex="0" role="menuitem" aria-checked="true">Left</div> <div tabindex="0" role="menuitem" aria-checked="false">Center</div> <div tabindex="0" role="menuitem" aria-checked="false">Right</div> </div>

  3.3. ARIA properties

  Some of the functionality of interactive controls cannot be captured by the role attribute alone. We have ARIA properties to add features that the screenreader needs to announce, such as aria-label, aria-haspopup, aria-activedescendant, or aria-live.

  Example :

  The following drop-down menu uses aria-haspopup to tell the screenreader that there is a popup hidden behind the menu button together with an ARIA state of aria-expanded to track whether it’s open or closed.

  Justify Left Center Right &lt;script&gt;<br /> var button = document.getElementById(&quot;button&quot;);<br /> var menu = document.getElementById(&quot;menu&quot;);<br /> var items = document.getElementsByClassName(&quot;menuitem&quot;);<br /> var focused = 0;<br /> function showMenu(evt) {<br />    evt.stopPropagation();<br />    menu.style.visibility = 'visible';<br />    button.setAttribute('aria-expanded','true');<br />    focused = getSelected();<br />    items[focused].focus();<br />  }<br />  function hideMenu(evt) {<br />    evt.stopPropagation();<br />    menu.style.visibility = 'hidden';<br />    button.setAttribute('aria-expanded','false');<br />    button.focus();<br />  }<br />  function getSelected() {<br />    for (var i=0; i &lt; items.length; i++) {<br />      if (items[i].getAttribute('aria-checked') == 'true') {<br />        return i;<br />      }<br />    }<br />  }<br />  function setSelected(elem) {<br />    var curSelected = getSelected();<br />    items[curSelected].setAttribute('aria-checked', 'false');<br />    elem.setAttribute('aria-checked', 'true');<br />  }<br />  function selectItem(evt) {<br />    setSelected(evt.target);<br />    hideMenu(evt);<br />  }<br /> function getPrevItem(index) {<br />    var prev = index - 1;<br />    if (prev &lt; 0) {<br />      prev = items.length - 1;<br />    }<br />    return prev;<br />  }<br />  function getNextItem(index) {<br />    var next = index + 1;<br />    if (next == items.length) {<br />      next = 0;<br />    }<br />    return next;<br />  }<br /> function handleButtonKeys(evt) {<br />    evt.stopPropagation();<br />    var key = evt.keyCode;<br />    switch(key) {<br />      case (13): /* ENTER */<br />      case (32): /* SPACE */<br />        showMenu(evt);<br />      default:<br />    }<br />  }<br />  function handleMenuKeys(evt) {<br />    evt.stopPropagation();<br />    var key = evt.keyCode;<br />    switch(key) {<br />      case (38): /* UP */<br />        focused = getPrevItem(focused);<br />        items[focused].focus();<br />        break;<br />      case (40): /* DOWN */<br />        focused = getNextItem(focused);<br />        items[focused].focus();<br />        break;<br />      case (13): /* ENTER */<br />      case (32): /* SPACE */<br />        setSelected(evt.target);<br />          hideMenu(evt);<br />          break;<br />      case (27): /* ESC */<br />        hideMenu(evt);<br />         break;<br />      default:<br />    }<br />  }<br />  button.addEventListener('click', showMenu, false);<br />  button.addEventListener('keydown', handleButtonKeys, false);<br />  for (var i = 0;  i &lt; items.length; i++) {<br />    items[i].addEventListener('click', selectItem, false);<br />    items[i].addEventListener('keydown', handleMenuKeys, false);<br />  }<br /> &lt;/script&gt;

  <div class="custombutton" id="button" tabindex="0" role="button" aria-expanded="false" aria-haspopup="true"> <span>Justify</span> </div> <div role="menu" class="menu" id="menu" style="display : none ;"> <div tabindex="0" role="menuitem" class="menuitem" aria-checked="true"> Left </div> <div tabindex="0" role="menuitem" class="menuitem" aria-checked="false"> Center </div> <div tabindex="0" role="menuitem" class="menuitem" aria-checked="false"> Right </div> </div> [CSS and JavaScript for example omitted]

  3.4. Labelling

  The main issue that people know about accessibility seems to be that they have to put alt text onto images. This is only one means to provide labels to screenreaders for page content. Labels are short informative pieces of text that provide a name to a control.

  There are actually several ways of providing labels for controls :

  • on img elements use @alt
  • on input elements use the label element
  • use @aria-labelledby if there is another element that contains the label
  • use @title if you also want a label to be used as a tooltip
  • otherwise use @aria-label

  I’ll provide examples for the first two use cases - the other use cases are simple to deduce.

  Example :

  The following two images show the rough concept for providing alt text for images : images that provide information should be transcribed, images that are just decorative should receive an empty @alt attribute.

  Image by Noah Sussman

  <img src="texture.jpg" alt=""> <img src="lolcat.jpg" alt="shocked lolcat titled ’HTML cannot do that !"> <img src="texture.jpg" alt="">

  When marking up decorative images with an empty @alt attribute, the image is actually completely removed from the accessibility tree and does not confuse the blind user. This is a desired effect, so do remember to mark up all your images with @alt attributes, even those that don’t contain anything of interest to AT.

  Example :

  In the example form above in Section 2.3, when tabbing directly on the input elements, the screen reader will only say "edit text" without announcing what meaning that text has. That’s not very useful. So let’s introduce a label element for the input elements. We’ll also add checkboxes with a label.

  Doctor title : Firstname : Lastname : Address : City : Remember me :

  <label>Doctor title :</label> <input type="checkbox" id="doctor"/> <label>Firstname :</label> <input type="text" id="firstname2"/> <label for="lastname2">Lastname :</label> <input type="text" id="lastname2"/> <label>Address : <input type="text" id="address2"> </label> <label for="city2">City : <input type="text" id="city2"> </label> <label for="remember">Remember me :</label> <input type="checkbox" id="remember">

  In this example we use several different approaches to show what a different it makes to use the <label> element to mark up input boxes.

  The first two fields just have a <label> element next to a <input> element. When using a screenreader you will not notice a difference between this and not using the <label> element because there is no connection between the <label> and the <input> element.

  In the third field we use the @for attribute to create that link. Now the input field isn’t just announced as "edit text", but rather as "Lastname edit text", which is much more useful. Also, the screenreader can now skip the labels and get straight on the input element.

  In the fourth and fifth field we actually encapsulate the <input> element inside the <label> element, thus avoiding the need for a @for attribute, though it doesn’t hurt to explicity add it.

  Finally we look at the checkbox. By including a referenced <label> element with the checkbox, we change the screenreaders announcement from just "checkbox not checked" to "Remember me checkbox not checked". Also notice that the click target now includes the label, making the checkbox not only more usable to screenreaders, but also for mouse users.

  4. Conclusions

  This article introduced a process that you can follow to make your Web applications accessible. As you do that, you will noticed that there are other things that you may need to do in order to give the best experience to a power user on a keyboard, a blind user using a screenreader, or a vision-impaired user using a screen magnifier. But once you’ve made a start, you will notice that it’s not all black magic and a lot can be achieved with just a little markup.

  You will find more markup in the WAI ARIA specification and many more resources at Mozilla’s ARIA portal. Now go and change the world !

  Many thanks to Alice Boxhall and Dominic Mazzoni for their proof-reading and suggested changes that really helped improve the article !

• Google Analytics Now Illegal in Austria ; Other EU Member States Expected to Follow

  18 janvier 2022, par Erin — Privacy

  Breaking news : The Austrian Data Protection Authority (“Datenschutzbehörde” or “DSB” or “DPA”) has ruled that Austrian website providers using Google Analytics are in violation of the GDPR. 

  This ruling stems from a decision made in 2020 by the Court of Justice of the European Union (CJEU) that stated that cloud services hosted in the US are incapable of complying with the GDPR and EU privacy laws. The decision was made because of the US surveillance laws requiring US providers (like Google or Facebook) to provide personal data to US authorities. 

  The 2020 ruling, known as “Schrems II”, marked the ending of the Privacy Shield, a framework that allowed for EU data to be transferred to US companies that became certified. 

  The tech industry was sent into a frenzy following this decision, but many US and EU companies decided to ignore the case. The choice to ignore is what landed one Austrian business in the DPA’s line of fire, damaging the brand’s reputation and possibly resulting in a hefty fine of up to €20 million or 4% of the organisation’s global turnover. 

  About the Austrian DPA’s Model Case 

  In this specific case, noyb (the European Center for Digital Rights) found that IP addresses (which are classified as personal data by the GDPR) and other identifiers were sent to the US in cookie data as a result of the organisation using Google Analytics. 

  This model case led to the DPA’s decision to rule that Austrian website providers using Google Analytics are in violation of GDPR. It is believed that other EU Member States will soon follow in this decision as well.

  "We expect similar decisions to now drop gradually in most EU member states. We have filed 101 complaints in almost all Member States and the authorities coordinated the response. A similar decision was also issued by the European Data Protection Supervisor last week."

  What does this mean if you are using Google Analytics ?

  If there is one thing to learn from this case, it is that ignoring these court rulings and continuing to use Google Analytics is not a viable option. 

  If you are operating a website in Austria, or your website services Austrian citizens, you should remove Google Analytics from your website immediately. 

  For businesses in other EU Member States, it is also highly recommended that you take action before noyb and local data protection authorities start targeting more businesses. 

  "Instead of actually adapting services to be GDPR compliant, US companies have tried to simply add some text to their privacy policies and ignore the Court of Justice. Many EU companies have followed the lead instead of switching to legal options."

  Removing Google Analytics from your site doesn’t mean that you need to give up website analytics altogether though. There are a variety of Google Analytics alternatives available today. Matomo in particular is a powerful open-source web analytics platform that gives you 100% data ownership and GDPR compliance. 

  

  Matomo is one of the best Google Analytics alternatives offering privacy by design on our Cloud, On-Premise and Matomo for WordPress. So you can get the insights you need while remaining compliant. As the GDPR continues to evolve, you can rest assured that Matomo will be at the forefront of these changes. 

  In addition, all Google Analytics data can be imported into Matomo so no historical data is lost. To make your migration as seamless as possible, we’ve put together a guide to migrating from Google Analytics to Matomo. 

  Ready to begin your journey to GDPR compliance ? Check out our live demo and start your 21-day free trial now – no credit card required.

  If you are interested in learning more about GDPR compliance and Matomo, check out our GDPR resources below :    

  • GDPR Manager user guide
  • How to fill in the information asset registration when using Matomo
  • How to make Matomo GDPR compliant in 12 easy steps
  • How to not process any personal data with Matomo and what it means for you
  • PII, personal data and GDPR. Discover what this means for your privacy
  • How should I write my privacy notice for Matomo Analytics under GDPR
  • Lawful basis for processing personal data under GDPR with Matomo
  • How to complete your privacy policy with Matomo Analytics under GDPR
  • GDPR compliance for Premium Features
  • How to get your Matomo plugin ready for GDPR
  • Subprocessors on Matomo Cloud (subprocessors not applicable to On-Premise)
  • Privacy in Matomo

  What does this mean if you are using Matomo ? 

  Our users can rest assured that Matomo remains in compliance with GDPR as all data is stored in the EU (Matomo Cloud) or in any country of your choice (Matomo On-Premise). With Matomo you’re able to continue analysing your website and not worry about GDPR.

  Final thoughts

  For EU businesses operating websites, now is the time to act. While Google pushes out false narratives to try and convince users that it is safe to continue using Google Analytics, it’s clear from these court rulings that the data protection authorities across the EU disagree with Google’s narrative.

  The fines, reputational damage and stresses mounting from using Google Analytics are imminent. Find an alternative to Google Analytics as this problem is not going away. 

  Getting started with Matomo is easy. Make the switch today and start your free 21-day trial – no credit card required. 

• Data Privacy Issues to Be Aware of and How to Overcome Them

  9 mai 2024, par Erin

  Data privacy issues are a significant concern for users globally.

  Around 76% of US consumers report that they would not buy from a company they do not trust with their data. In the European Union, a 2021 study found that around 53% of EU internet users refused to let companies access their data for advertising purposes.

  These findings send a clear message : if companies want to build consumer trust, they must honour users’ data privacy concerns. The best way to do this is by adopting transparent, ethical data collection practices — which also supports the simultaneous goal of maintaining compliance with regional data privacy acts.

  So what exactly is data privacy ?

  

  Data privacy refers to the protections that govern how personal data is collected and used, especially with respect to an individual’s control over when, where and what information they share with others.

  Data privacy also refers to the extent to which organisations and governments go to protect the personal data that they collect. Different parts of the world have different data privacy acts. These regulations outline the measures organisations must take to safeguard the data they collect from their consumers and residents. They also outline the rights of data subjects, such as the right to opt out of a data collection strategy and correct false data. 

  As more organisations rely on personal data to provide services, people have become increasingly concerned about data privacy, particularly the level of control they have over their data and what organisations and governments do with their data.

  Why should organisations take data privacy issues seriously ?

  Organisations should take data privacy seriously because consumer trust depends on it and because they have a legal obligation to do so. Doing so also helps organisations prevent threat actors from illegally accessing consumer data. Strong data privacy helps you : 

  Comply with data protection acts

  Organisations that fail to comply with regional data protection acts could face severe penalties. For example, consider the General Data Protection Regulation (GDPR), which is the primary data protection action for the European Union. The penalty system for GDPR fines consists of two tiers :

  • Less severe infringements — Which can lead to fines of up to €10 million (or 2% of an organisation’s worldwide annual revenue from the last financial year) per infringement.
  • More severe infringements — This can lead to fines of up to €20 million (or 4% of an organisation’s worldwide annual revenue from the last financial year) per infringement.

  The monetary value of these penalties is significant, so it is in the best interest of all organisations to be GDPR compliant. Other data protection acts have similar penalty systems to the GDPR. In Brazil, organisations non-compliant with the Lei Geral de Proteção de Dados Pessoais (LGPD) could be fined up to 50 million reals (USD 10 million) or 2% of their worldwide annual revenue from the last financial year.

  Improve brand reputation

  Research shows that 81% of consumers feel that how an organisation treats their data reflects how they treat them as a consumer. This means a strong correlation exists between how people perceive an organisation’s data collection practices and their other business activities.

  

  Data breaches can have a significant impact on an organisation, especially their reputation and level of consumer trust. In 2022, hackers stole customer data from the Australian private health insurance company, Medibank, and released the data onto the dark web. Optus was also affected by a cyberattack, which compromised the information of current and former customers. Following these events, a study by Nature revealed that 83 percent of Australians were concerned about the security of their data, particularly in the hands of their service providers.

  Protect consumer data

  Protecting consumer data is essential to preventing data breaches. Unfortunately, cybersecurity attacks are becoming increasingly sophisticated. In 2023 alone, organisations like T-Mobile and Sony have been compromised and their data stolen.

  One way to protect consumer data is to retain 100% data ownership. This means that no external parties can see your data. You can achieve this with the web analytics platform, Matomo. With Matomo, you can store your own data on-premises (your own servers) or in the Cloud. Under both arrangements, you retain full ownership of your data.

  Try Matomo for Free

  Get the web insights you need, while respecting user privacy.

  Start for free

  No credit card required

  What are the most pressing data privacy issues that organisations are facing today ?

  Today’s most pressing data privacy challenges organisations face are complying with new data protection acts, maintaining consumer trust, and choosing the right web analytics platform. Here is a detailed breakdown of what these challenges mean for businesses.

  Complying with new and emerging data protection laws

  Ever since the European Union introduced the GDPR in 2018, other regions have enacted similar data protection acts. In the United States, California (CCPA), Virginia (VCDPA) and Colorado have their own state-level data protection acts. Meanwhile, Brazil and China have the General Data Protection Law (LGPD) and the Personal Information Protection Law (PIPL), respectively.

  For global organisations, complying with multiple data protection acts can be tough, as each act interprets the GDPR model differently. They each have their own provisions, terminology (or different interpretations of the same terminology), and penalties.

  A web analytics platform like Matomo can help your organisation comply with the GDPR and similar data protection acts. It has a range of privacy-friendly features including data anonymisation, IP anonymisation, and first-party cookies by default. You can also create and publish custom opt-out forms and let visitors view your collected data.

  

  Today’s most pressing data privacy challenges organisations face are complying with new data protection acts, maintaining consumer trust, and choosing the right web analytics platform. Here is a detailed breakdown of what these challenges mean for businesses.

  Complying with new and emerging data protection laws

  Ever since the European Union introduced the GDPR in 2018, other regions have enacted similar data protection acts. In the United States, California (CCPA), Virginia (VCDPA) and Colorado have their own state-level data protection acts. Meanwhile, Brazil and China have the General Data Protection Law (LGPD) and the Personal Information Protection Law (PIPL), respectively.

  For global organisations, complying with multiple data protection acts can be tough, as each act interprets the GDPR model differently. They each have their own provisions, terminology (or different interpretations of the same terminology), and penalties.

  A web analytics platform like Matomo can help your organisation comply with the GDPR and similar data protection acts. It has a range of privacy-friendly features including data anonymisation, IP anonymisation, and first-party cookies by default. You can also create and publish custom opt-out forms and let visitors view your collected data.

  Try Matomo for Free

  Get the web insights you need, while respecting user privacy.

  Start for free

  No credit card required

  Maintaining consumer trust

  Building (and maintaining) consumer trust is a major hurdle for organisations. Stories about data breaches and data scandals — notably the Cambridge Analytical scandal — instil fear into the public’s hearts. After a while, people wonder, “Which company is next ?”

  One way to build and maintain trust is to be transparent about your data collection practices. Be open and honest about what data you collect (and why), where you store the data (and for how long), how you protect the data and whether you share data with third parties. 

  You should also prepare and publish your cyber incident response plan. Outline the steps you will take to contain, assess and manage a data breach.

  Choosing the right web analytics platform

  Organisations use web analytics to track and monitor web traffic, manage advertising campaigns and identify potential revenue streams. The most widely used web analytics platform is Google Analytics ; however, many users have raised concerns about privacy issues. 

  When searching for a Google Analytics alternative, consider a web analytics platform that takes data privacy seriously. Features like cookieless tracking, data anonymisation and IP anonymisation will let you track user activity without collecting personal data. Custom opt-out forms will let your web visitors enforce their data subject rights.

  What data protection acts exist right now ?

  

  As time goes on and more countries introduce their own data privacy laws, it becomes harder for organisations to adapt. Understanding the basics of each act can help streamline compliance. Here is what you need to know about the latest data protection acts.

  General Data Protection Regulation (GDPR)

  The GDPR is a data protection act created by the European Parliament and Council of the European Union. It comprises 11 chapters covering the general provisions, principles, data subject rights, penalties and other relevant information.

  The GDPR established a framework for organisations and governments to follow regarding the collection, processing, storing, transferring and deletion of personal data. Since coming into effect on 25 May 2018, other countries have used the GDPR as a model to enact similar data protection acts.

  General Data Protection Law (LGPD)

  The LGPD is Brazil’s main data protection act. The Federal Republic of Brazil signed the act on August 14, 2018, and it officially commenced on August 16, 2020. The act aimed to unify the 40 Brazilian laws that previously governed the country’s approach to processing personal data.

  Like the GDPR, the LGPD serves as a legal framework to regulate the collection and usage of personal data. It also outlines the duties of the national data protection authority, the Autoridade Nacional de Proteção de Dados (ANPD), which is responsible for enforcing the LGPD.

  Privacy Amendment (Notifiable Data Breaches) for the Privacy Act 1988

  Established by the Australian House of Representatives, the Privacy Act 1988 outlines how organisations and governments must manage personal data. The federal government has amended the Privacy Act 1988 twice — once in 2000, and again in 2014 — and is committing to a significant overhaul.

  The new proposals will make it easier for individuals to opt out of data collection, organisations will have to destroy collected data after a reasonable period, and small businesses will no longer be exempt from the Privacy Act.

  United States

  

  The United States does not have a federally mandated data protection act. Instead, each state has been gradually introducing its data protection acts, with the first being California, followed by Virginia and Colorado. Over a dozen other states are following suit, too.

  • California — The then-Governor of California Jerry Brown signed the California Consumer Privacy Act (CCPA) into law on June 28, 2018. The act applies to organisations with gross annual revenue of more than USD 25 million, and that buy or sell products and services to 100,000 or more households or consumers.
  • Virginia — The Virginia Consumer Data Protection Act (VCDPA) took effect on January 1, 2023. It applies to organisations that process (or control) the personal data of 100,000 or more consumers in a financial year. It also applies to organisations that process (or control) the personal data of 25,000 or more consumers and gain more than 50% of gross revenue by selling that data.
  • Colorado — Colorado Governor Jared Polis signed the Colorado Privacy Act (ColoPA) into law in July 2021. The act applies to organisations that process (or control) the personal data of 100,000 or more Colorado residents annually. It also applies to organisations that earn revenue from the sale of personal data of at least 25,000 Colorado residents.

  Because the US regulations are a patchwork of differing legal acts, compliance can be a complicated endeavour for organisations operating across multiple jurisdictions. 

  How can organisations comply with data protection acts ?

  One way to ensure compliance is to keep up with the latest data protection acts. But that is a very time-consuming task.

  Over 16 US states are in the process of signing new acts. And countries like China, Turkey and Australia are about to overhaul — in a big way — their own data privacy protection acts. 

  Knowledge is power. But you also have a business to run, right ? 

  That’s where Matomo comes in.

  Streamline data privacy compliance with Matomo

  Although data privacy is a major concern for individuals and companies operating in multiple parts of the world — as they must comply with new, conflicting data protection laws — it is possible to overcome the biggest data privacy issues.

  Matomo enables your visitors to take back control of their data. You can choose where you store your data on-premises and in the Cloud (EU-based). You can use various features, retain 100% data ownership, protect visitor privacy and ensure compliance.

  Try the 21-day free trial of Matomo today, start your free analytics trial. No credit card required.

  Try Matomo for Free

  21 day free trial. No credit card required.

  
  

  Your email address
  

  Your website address
  

  Your Analytics subdomain will be .matomo.cloud (change)

  Choose your analytics subdomain
  

  .matomo.cloud

  I accept the terms and conditions and data processing agreement (DPA)

  
  Your information will be used to create an account on our cloud service. For more information please consult our privacy policy.
  
  
  

  Start improving your websites now