A look back at the Paris Web 2016 conference

What is Paris Web?

It's an association that works to bring together "the people who make the web," as they like to say! But what does that mean? In fact, it's a gathering that takes place once a year, where IT professionals—or more specifically, web professionals—meet for a few days and talk about their daily work lives. You'll find developers, designers, ergonomists (my favorites), and people who are just curious about the web!

In a crazy atmosphere filled with unicorns, kilts, blue hair, and photobombing, we began this marathon of knowledge.

This year's hot topics were:

• The security of personal data collected on the web
• Digital accessibility

Three days of fun with online monitoring...

Conference name: Anatomy of a supervised web detox

So it is with Thibault Jouannic that we open Paris Web 2016, his topic: "Anatomy of a web detox under surveillance." We learn that our data is recorded more or less without our knowledge (we knew that, right?). But he also teaches us how to see more precisely the impact of this recording of our data via the Light Beam application (https://www.mozilla.org/fr/lightbeam/).

The problem is that not everyone knows how to find or avoid the pitfalls of information gathering. That's why the first step in protecting yourself is to think about users—who never read the terms of use—and therefore support them by predefining the functional specifications:

• What data is relevant to record? Is it really important to know your date of birth or gender?
• And how to store them properly—can you put your mailing address and sexual preferences in the same place?
• propose not retaining data in order to protect your users
• encrypt data, if stored
• and simply obey the law!

Conference name: No progress, no grimaces!

Let's continue our epic journey with Thomas Gasc, who talks to us about the redesign of the Médiapart website. They were faced with security issues because it wasn't possible for the entire website to be https, which posed a problem in terms of reassurance at the time of payment. But after user testing, they found that users were reassured as long as it was stated that the payment was secure. Labeling it is reassuring!

Then they continued with the payment tunnel in:

• adding new payment methods
• information on payment terms
• Simplify the address field. After all, on a paper envelope, it's just a white square, so why have a field for the number, one for the building, one for the street name, one for the street number, one for the postal code, etc.?
• Avoid making your users leave the page, they're bugged!!! If they see a field, they want to fill it in, so if you give them the option to enter a promo code, they'll go looking for it elsewhere and boom, you've lost the sale. It's better to use a checkbox, and if it's checked, display the field to be filled in 😉
• Let's continue with creating a customer account. Well, no, let's not create one. We have all the information we wanted anyway 🙂

Once you have earned conversion points, you need to work on the return rate. And yes, once the order has been placed, don't leave the user hanging with a message saying "thank you, your order has been received." No, no, no, definitely not, because that's when everything happens, when everything is decided! You have to pamper your customers and give them more information. Okay, your order has been received, but here's what's going to happen next: 1. Packing, 2. Shipping, 3. Blah blah blah, 4. Blah blah blah. Then you'll receive an email when your order is shipped, etc. But before you go, come and check out our new arrivals 😉 In short, life doesn't stop after the purchase!

Conference name: Is launching your website internationally easy? Yes, if you think of everything!

Let's move on to the international scene with Aurélie Guillaume, a developer who shares her experience of developing a website for the international market. Here are the pitfalls to avoid:

The dates

On e-commerce sites, the date and time are imported, for example to send packages. But dates change depending on the country and where you are located.

• The ISO 8601 and UTC standards must be taken into account when automating the time change.
• Please note that some countries have multiple time zones.
• And especially if you have time-dependent activities such as contests or flash sales, be careful ^^
• And you will have to manage daylight saving time and standard time, and yes, it is not standardized or fixed; countries do what they want, and there are still wars!

The forms

• Everyone knows Google's free captcha, the one that says "I am not a robot." Well, if you choose it for your website because it's so convenient, you should know that in China, all captchas are banned, so no more security ^^
• Please note that in Asian countries, first names can consist of a single ideogram. If you set the first name or last name label to a maximum of two characters to be valid, your Asian users will not be able to log in.

SEO

• Google is not the number one search engine everywhere.
• In many cases, logging in with Facebook is mandatory, but in some countries social networks are paid services and not all of them exist.
• CDN: So you don't have to deploy a server in every country (TATA, Akamai, Amazon)
• Duplicate content for common languages & rel=canonical

And what about the law in all this?

• If you are developing in China, you must automatically have a server physically implemented in China.
• You can't sell everything everywhere to anyone; the majority changes depending on the country, for example!

Conference name: Web Security by Design

It's time for safety with Jérémie Bourdin and Benjamin Leroux.

It started well with the Yahoo security breach in 2014, followed by LinkedIn with over 100 million accounts hacked and over 300,000 passwords stolen, and then Castorama with an amateur hacker who launched a script on auto-complete (e.g., "saw uncle uncle").

However, a new regulation has come into force, the GDPR (EU General Data Protection Regulation), which is a new European text that applies to everyone. There is a two-year compliance period. The new feature is responsibility for personal data: companies must consider how to protect their data and demonstrate this in the event of an audit (privacy by design). Companies that have not paid attention to this will be penalized.

Some bad practices

If there are poor designs, you need to ask yourself what risks your project will be exposed to and what possible solutions there are. If you don't think about this, it can have major consequences for problem resolution or maintainability... Examples:

• Input data control
• Incorrect use of encryption; sometimes passwords are hardcoded in the code.
• The absence of a framework
• Hard-coded secret
• Lack of logs, because if there are logs, it is easier to see where the flaw is.
• Faulty authentication system
• Heterogeneity of environments
• Silos between architecture and development—which team thought about protection?

If you're curious, check out the code for a drone ahahah

Today, the problems are mainly due to time to market, getting a product out quickly, where no one is security-conscious yet and development practices are poor.

But what should we do?

Firstly, security is not just about antivirus software!

This is a cross-functional step that must be incorporated at every stage of the project. The fundamentals:

• Pay attention to availability; the site must be available at all times, continuously.
• Then there's confidentiality—I have to protect data, passwords, and other information.
• Integrity: if I have a 0 in a box, it must not become a 1.
• Traceability or auditability: how can I be sure of what is happening within a system?

Security can be learned! For example, with OWASP, which produces practical fact sheets and, above all, a list of the 10 most common vulnerabilities on websites, and also Open SAMM, which will allow you to find out your security level and improve it.

To go further:

• Capitalize on a Framework
• Build your toolbox as you go along
• Capitalize between projects

Day 2

Conference name: Accessibility without complexes: what it wants to do with you

Nicolas Hoffmann shares his perspective on accessibility.

This word is very fashionable... "uninhibited" and not "accessibility"! The aim is to share thoughts on this issue. I started to put tools and best practices in place, because my first instinct was to blame my colleagues around me for the mistake, but in fact that serves no purpose!

The key is to talk before criticizing.

The last intern I had asked me, "But why do we have to make things accessible?" I replied, "For everyone." Then I showed him a website. Obviously, it wasn't accessible, so I gave him a negative demonstration... And my intern didn't seem very motivated to work on it. I had created a negative association! I had shown him that accessibility is a product that doesn't work!

For the next one, I decided to explain to him that accessibility offers a whole range of new tools that we are not used to using, such as 200% zoom, screen readers, etc. I noticed the opposite effect: my intern was excited to learn about and discover new tools. Then, by showing him the before and after effects, I was able to show him the positive aspects of accessibility!

After a few years of experience, accessibility has allowed me to rework and perfect my skills, because it is cross-functional.

Accessibility is written as A11Y (because there are 11 letters between the A and the Y). So, by reworking the plug-ins, I was able to create Vani11y, where you'll find lots of accessible stuff!

Conference name: The Survival Kit

Emeline Racon recounts her experience with focus groups.

After initial setbacks in her career in ergonomics, including a card game workshop with soldiers who left because it was too childish for them and a drawing workshop that didn't work, she had to find a solution to prevent these situations from happening again.

The solution is to prepare a survival kit, which has four objectives:

• Protecting yourself = anticipating workshops more, what kind of people I will meet, identifying decision-makers, understanding the context well

The service design toolkit helps me work on it more effectively.

She uses the drawToast workshop as an icebreaker. The idea is to model how a toaster works and create synergy.

Here is the speaker's toolkit:

• Alert and communicate = you must explain, repeat, but also listen and let participants speak, and above all, clearly convey the approach.
• Stay hydrated
• Nourish yourself, seek resources to stay active = attend and participate in other workshops and provide feedback

Conference name: Progressive web apps: the future of the web is here

Hubert Slabonnière tells us about his skiing trip... To find out when it is most appropriate to use a mobile phone or a computer.

All this to say that when usage is frequent, he will prefer a native application, such as for banking, for example, whereas if usage is more occasional, he will prefer to use the web and not install the native application, such as Doodle.

The problem with the app is that we don't have URLs, so it's difficult to share with someone who doesn't have it... "URLs are life"! Today, there are more unique visitors on mobile web than on apps, and when you look at the numbers of apps downloaded per month and per visitor, it's scary! For example, in China, people share USB keys with apps because it takes too long to download them...

The 5 pillars to work on:

• It must be linkable.
• Responsive too
• Safe, when using a native app, how can you know if it's secure?
• Connectivity independence, yes, but we mustn't forget that the next million internet users are in Africa and Asia, so we need to think about offline connectivity.

At that point, you can create a service worker in JS #&@%$`£#§ blah blah blah... Anyway, it was obviously a really interesting moment for the developer, but I didn't understand a thing 😉

-> there is information available at https://developer.mozilla.org/fr/docs/Web/API/Service_Worker_API

• Architecture
• Re-engageable, encourage users to continue interacting with your app. We're keeping the push notifications!

WCAG nest – where do we go from here?

Accessibility guru John Foliot tells us all about it!

The WCAG dates back to 1999, when there were 14 recommendations and only 65 checkpoints. The approach was very superficial and the text was very rigid (as I write these words, I feel like I'm talking about today). With the new version, the goal is to ask readers to think about what accessibility is.

4 principles:

• Content perceived by the user
• Handling this content
• Comprehensibility of content
• And robustness

Today, these four pillars are still in place.

We continued with other standards such as UAAG, which mainly concerns browsers.

In December 2015, guidelines for content creation tools (ATAG 2.0) were released.

Then in 2016, we realized that we were no longer creating web pages but web applications, which led to obsolescence and shortcomings in terms of usability. With WCAG 2.0, UAAG 2.0, and ATAG 2.0, we can address all of these issues.

There are other shortcomings, such as those relating to the comprehensive consideration of disabilities.

That is why we are going to create a new AG (accessibility guidelines) standard. Called the silver process, it takes several steps into account:

• Add all perspectives to the process
• Communicating our efforts and our work
• Facilitate and open up means of communication
• Using data to build our rules
• Study the application scope
• Establish clear steps

Four possible approaches for the Silver project:

• The research and design project approach option
• Option for faster progress, doing things iteratively with short cycles
• The option with the greatest flexibility, but we haven't been able to specify it yet.
• The least expensive approach is to take what we already have and try to optimize it.

Today we don't know which option to choose.

Our roadmap is planned over 5 to 7 years to implement this new version of accessibility. But we can't wait that long to update the WCAG versions. We will ensure that 2.1 remains stable and does not impact the changes incurred by version 2.0. In version 2.1, we will be working extensively on the testability of compliance.

We will have new recommendations, such as the one concerning phone operation: "when device operation gestures are provided, a mechanism is available to operate these functions via touch, except where the underlying function requires input that cannot be provided through the touch interface, e.g. step count data, barometric pressure (level AA)."

Use case:

• Shake to undo. A user with a tablet attached to a wheelchair needs a way to undo that does not involve shaking.
• (exception) step counting apps or GPS would not need an alternative input because this data does not come directly from the user; it is integral to the device.

Other existing criteria will also change, such as 1.4.3 on minimum contrast. We want to change this criterion so that it applies not only to fonts but also to icons.

So today, at this moment, we have 50 new proposals for criteria. We are really wondering how companies will be able to take them on board.

Next step: 2.1 Q1 2018, and we will try to have a two-year cycle.

It's time for us to officially join the team:

GitHub: https://github.com/w3c/wcag21/issues

Email: w3c-wai-ig@w3.org

Section 508

Otherwise, I won a book because my question was relevant ^^ Yes, I thought about the team, because he implied that many AAA criteria would be downgraded to AA... Help... So I asked him if future versions would take into account the complexity of projects, because not all complex projects can be AAA. His answer was yes (phew), and that we should get in touch to discuss it and join the working teams.

And I was also a groupie for Mr. Accessibility.

Conference name: Attention Disorders Workshop

ADHD with or without hyperactivity

Three times as many men are affected by attention disorders as women. One hypothesis is social, or we know that there are genetic factors, but we do not know if they are dependent on gender chromosomes.

Symptoms:

• inattention and distraction
• tendency not to follow instructions; people with this tendency need to understand the purpose of the task in order to carry it out. If it is not clear to them, they will not do it, which is often the case with children.
• difficulty organizing work and time; with this disability, the concept of time is lost, and a person can spend hours on a small task
• difficulties learning tasks that require mental effort; this is not an intellectual limitation, but the person will spend so much time trying to come up with other ideas that they will lose heart.
• frequent loss of objects, loss of data, information, short-term memory problems.
• difficulty in discussions

What is inattention?

• be disorganized,
• loss of attention,
• difficulty paying attention to details, makes many careless mistakes
• often rapid speech rate
• difficulty focusing on a single topic
• ability to forget activities
• high distraction to noises and events

In short, we can all experience these symptoms at one time or another, but the disability is confirmed if the symptoms are observed for more than 6 months.

There are many comorbidities and disorders:

• opposition (30 to 50%)
• pipes (25%)
• anxious
• motor skills
• sleep
• speech learning
• emotional dysregulation

For these people, noise is a means of concentration because it allows them to stop "hearing their thoughts" and focus on their work. Noise and hubbub allow them to focus their attention on other things rather than on their thoughts.

How to help:

Avoid creating distracting thoughts

People with this disability use screen readers to avoid distracting information.

"SEO links are my main enemy."

"Every image, word, or piece of information: a new gateway." Typically, all images without alt text are gateways, meaning that they are not linked to the content and will spark my curiosity.

"For example, when I read an article, if the photo isn't really relevant and doesn't provide any additional information, it makes me think of all sorts of things. When I look at this photo—a hacker wearing a hoodie and an Anonymous mask—I think to myself that I need to go buy a new sweater and watch an action movie where the actors wear Anonymous masks, and then I lose track of what I was doing.

Animations should be used sparingly and discreetly because I can watch the sun move across the page for an hour. So make sure it stops.

The information must be available when the page is launched, not two minutes later, otherwise it may become a distraction. It is also necessary to systematically contextualize the information and avoid visual noise.

Tips from these people:

• browse in full screen
• split my browsing across multiple windows
• close Slack
• Use ad blockers to remove unnecessary content (do not use anti-ad blockers).

Exercise:

• buy a book for Fnac
• buy a train ticket on voyages-sncf
• search for information about the eruption of Réunion
• enroll in a distance learning degree program on a university's website

In conclusion, this conference was interesting in terms of verbalizing techniques that are already in use. It was rich in discoveries about accessibility, offering a preview of what awaits us in 2018 and introducing us to the disability of inattention.

Congratulations, you've reached the end of the article, and as a reward, we're going to organize a MixYourTalent event on the topic: "Become a mobile accessibility tester in just one hour!"

Keep an eye out for the date