well hello amsterdam i hope you enjoy your coffee break,
today i'm going to talk about accessibility and how
it is important for you to tackle in 2020.
my name is margot gable as you might heard and i'm french
i designed at build since 2015 and i'm not an accessibility expert, so
watch me as i get really uncomfortable and accept my
ignorance in front of this full room, and how i will share with you with what
we learned learned so far at build, we are build in
amsterdam, what do we do? we build digital flagship
stores, how do we do that? by combining strategy,
branding, and e-commerce. sorry we aim to set the
industry benchmark so it worked pretty well so far because
it led to a lot of award-winning projects,
he or my boss accepting various awards around the world,
and now let me introduce you to our client
which is mooi, and mooi means "nice" in Dutch with an extra o and their
philosophy is a live extraordinary, they
been starting in 2001 by created by muscle wonder and casper
visser and is the strong of a strong individual
creating beautiful furniture, lightning, wall covering, and accessories. you might
know from them the life-size horse lamp which is quite recognizable,
or maybe the random light made by birch and pot it's in a lot of hotels and
restaurants around the world. you might know their
flagship store in amsterdam - but they also have other stores around the world.
and now i'm gonna talk about the one in new york, because this is
where our story starts, and it all started with a lawsuit
moy got sued in the us because it's illegal to have an
inaccessible website only last year there was more than 2
200 web accessibility lawsuits just in one year
and it's um you might have heard of the beyonce.com website but also
domino's pizza case who was really famous and some of our clients also get
sued suit supply adidas reebok and this is
coming to you because in europe it is now mandatory
to have a digital access digitally accessible website
since june 2019 so if there is one thing i'm sure about is that you or your
client might be the next one to get sued so i'm going to talk about really
shortly i can reassure you what is accessibility
why you need it and how we apply it to our project with moy
so if i had to simplify it to one sentence it would be
that you have to ensure that your platform it can be used by anyone and
it's anyone regardless of their physical disability
but also other type of disability it can be
situational a permanent temporary so for example if
you forget your glasses in the morning this is a temporary disability the same
as just having a broken arm for a few months
or if you like to eat sandwiches in your car while driving then
this is a situation disability i don't recommend to do that by the way
if you try to look at your phone or on your laptop in
in the sunlight then this is again a situation disability
so these are use cases you have to consider while designing
i picked this quote from f anderson who's the head of activity team at
google and she said accessibility is a basic human right it
benefits everyone i think it sums it up pretty
pretty well now you might ask why do i need it why do i need it for my
client it is pretty simple there is an estimated 1 billion people
around the world with a recognized disability
so the math is quite simple here imagine that you could reach all these people
it's suddenly 15 more reach on your website
so instead of tweaking every little pixel or
trying to yeah increase your conversion then if you make your website accessible
you just reach more users it's that simple as
this so other benefits for making your website
fully accessible the list is quite long i select a few one here
yeah while you support inclusion you have better google ranking
but you also encourage good coding practices
and it's future-proof in the end the best benefit is
that you don't get a lawsuit so now i'm going to show you how we apply it to
our project and how did we start that was a bit scary we had to go
through this these are the web content accessibility guidelines that you have
to match it's incredibly long it's impossible to
read i tried it's scary so what we've done
is that we had to seek for help human help we went to see the dutch
accessibility institute there is an equivalent in every
european country i guess so if you need help making your website accessible
you have to meet some humans who can help you understand
this huge list that we just saw and just make sense out of it
so we start working for more by making it
sorry we think brands not websites so what we've done is that we immerse
ourselves into the more universe so we start
reading all their catalogues all their flyers and books we went to milano
to meet their new product we also touch and smell
everything looked at how their products are made
and we also test all their products in the store
so with all of this in mind with all of this um
beautiful content we came up with this overarchic concept that would guide us
through the through the whole process and we called it the multi-sensory
shopping experience meaning that um any choices that will
make food through the food at project would
be leaded through this idea now i'm going to show
you how we applied it to our website in four
really short points and so first is the look and feel
and what we usually do is that we seek for inspiration
and this is the inspiration in fully accessible website it looks
terrible it looks really template-ish we were a bit
disappointed while doing our research so we decided
that we have to be accessible and beautiful we don't do not want to end up
with this kind of things so good design starts with good
typography so we start making pairings with this beautiful some
blue from swift's typeface maybe you know them or
the tiempos from cleantype and we start testing them on different
colors because making something accessible is also
about contrast so we had to test everyone every each one of our
colors you can see they get a rating so aaa the
numbers is the ratio it always needs to be at
least above 4.5 for example so we test it on page on our specific
black or when we use it over typography over
sorry video and image then it also needs to be above a certain level
and to reach this we use different tools so
figma able plug-in i really recommend this one or the sip mac
app which allows you to pick up colors all over your desktop so it's also
useful to try on your website live
so with this tool we start building a full accessible design system
each one of these elements has been forcefully tested
all the colors have been tested and tested and tested
i come more emphasize on this so everything is designed encoded in an
accessible way and with this building blocks we made
a modular page system that the client can use
and um reorganize to build their their own pages so you have product highlights
quotes stories um and all put together
well we have a nice website and each block
can be fully customized we also add animation layers to it
an animation that needs to be fully accessible so as you can see
there is a few things moving but they do not exceed five seconds
they are not obstructing the text they are not blinking for people who have
epilepsy so we always
design everything with accessibility in mind
now i'm going to show you how we approach navigation
so what we've done is that we took this physical elements this is
an nfc chip that is on every product of muy and you can scan it
to to prove the ownership and what we've
done is that we brought it to a website directly from
uh the wireframe phase so these are a beautiful wireframe and you can see that
if you go to the website the final design the button made it so
far if you open the website now on your
phone you can see that you could use it in different ways we
can move it around if you're left or right handed we were inspired
by the ios accessibility menu options if you don't want to use
your fingers you can use your voice so that's why we made a prominent voice
search so if i say rabbit lamp or horse lamp
to my computer or my phone then this is what shows up if you don't want to use
your voice you can use your keyboard so now if i start pressing tab on our
website this is what happened we designed specific focus states and
hidden links like the skip to content that you just
saw to accommodate keyboard users so you can make custom ones here we have a
dot on the menu so it still looks nice or this dutch dashed line
which highlights everything that is clickable on your website
if we take a look at the content now how we about content that build is quite
special we say that 80 of the design is the content so
it's even truer when you have to approach exit with
accessibility in mind because this is a beautiful image but if you forget your
glasses this morning this is what you might see so if you use
your screen reader every image that is uploaded on the
website is has an invisible text called alt text
and your screen reader will read it to you
and the sound is not working imagine your screen reader just reading this to
you
and the products are the hero at moy so we really wanted to give them a stage so
this is for example the collection page and we allow the client to update upload
different kind of sequences so you can play
turn the lamps on drag the telescoping lamps so it it is accessible but it's
still playful like this can be used through your keyboard for example
if we go to the detail page we also wanted a full visual experience
still fully keyboard navigable um with large text so you don't have to
zoom in to a hundred percent all our videos
have uh specific controls as well um so we really wanted a visual
but playful experience here and i'm gonna show you later how this work
but for um yeah for content-wise we always hand over to the clients a big
brand guideline document and that's where we explain
to them how to enter alt text how to use our fonts correctly how to
use the colors correctly and everything to make sure that
whatever is uploaded on our website is fully accessible and also looks nice
so let's take a look at our buying process now
we wanted still an immersive experience still
with accessibility in mind so that's why we can
i'm so sorry the sound is not working now
imagine wood cracking
it's it's really nice
so yeah if you if you go on a category page you have a bit of an
introduction interrupt introduction to the world of my
um imagine a violin playing now so they also play a bit with music so
it's not only about about just the sounds the products make
we also wanted to use a human language so if you use the filter function and
use a screen reader and select different kind of filters
your screen reader will read it as a real sentence it will sound like black
suspension lamp made by virgin pot it is just a bit
it's a bit more human language now if we take a look at our buying
process again fully keyboard keyboard navigable
with different kind of
like hover states and every everything is all
uh sorry have they have the right contrast
we really wanted to have a focus uh like buying experience
to avoid distraction and so that it stays
you stay focused on your screen
so this is the whole whole technology behind it
i'm not going to go in in full full details because i'm a mere designer
but if you want to have more information about how it's made under the hood
then you can send us your question through twitter or
instagram so now it's time to take some notes
so my the first point i want to make is that you have to consider
accessibility from the start you have to treat web accessibility as a necessity
not a feature so your conversion will well increase by itself if you
if you consider everyone as a user
and my second point which is really important is that you have
to get human advisors i couldn't emphasize more on that one
because like they really help us perform manual audits but also explain
to us how how it how it um how to
apply every criteria last one is that you have to set
the new industry benchmark so accessibility is an
excuse to actually have fun and try new technology a new way to interact
with your users you can really experiment with new tools
and it is challenging but it's worth
we should we should all try to make our website accessible
um and now
i want to invite you to follow us on our social if you want to know a bit
more about us or see how silly we are and on friday i would like you to join
us for some drinks
thank you for listening