Following Web Content Accessibility Guidelines (WCAG) will make your website easy to use for everyone and, therefore, increase your sales and brand loyalty.
What is website accessibility?
An accessible website means that it’s easy to use for everyone. ¼ of people on Earth suffer from permanent disabilities of different kinds, and even more experience temporary difficulties. But all those people still use the internet to shop, learn and be entertained, and making your website accessible will help them do that (and, as a consequence, will increase your market share). And, even not taking into account the additional profit, it’s just the right thing to do.
You can help people:
- with auditory, cognitive, neurological, physical or visual disabilities.
- who suffer from a broken hand or arm, or other injuries.
- who experience age-related problems, such as poor eyesight or bad coordination.
And also:
- that girl on the subway, who wants to watch your ad, but left her headphones at home.
- that person who wants to place an order in your store, but their mouse is broken and the new one hasn’t arrived yet.
- simply to all those people with a poor internet connection (we’ve all been there, huh?).
1
billion people
in the world live with some form of disability
$6.9
billion annually
is lost by non-accessible eCommerce retailers to their accessible competitors
Why you should care
Around 18% of internet users are people with disabilities.
The number of lawsuits based on accessibility discrimination is rising each year.
Only 2% of websites on the internet are accessible.
Eliminating profit loss can bring increased sales
An accessibility audit conducted by our expert consists of 5 main steps and includes checking your website for:
- Technical errors
- How accessible it is from the keyboard
- The contrast level
- The text alternatives for the graphic content, labels for buttons, and links
- The page structure
WCAG compliance is checked according to the official guidelines.
WCAG standards on accessibility
WCAG
WCAG is an international project aimed at creating a single standard for accessible web content. The guidelines are a set of recommendations on how to make the web accessible to everyone, and especially people with disabilities.
There are three versions of these guidelines:
- WCAG 2.0 & WCAG 2.1
The WCAG 2.1 guidelines are the second generation of recommendations, which include the original 2.0 version – so, if your website follows the WCAG 2.1 standards, it’s automatically compliant with WCAG 2.0 as well.
- WCAG 2.2
We work in accordance with the latest WCAG 2.2 version, which is mostly focused on mobile accessibility for people with poor eyesight and cognitive disabilities.
ADA compliance requirements
At the moment there are different pieces of legislation in different countries that are aimed at making the internet accessible for everyone. One of them is the Americans with Disabilities Act (ADA), which sets specific requirements for websites in certain businesses.
Section 508 compliance
Section 508 of the Rehabilitation Act of 1973 is one of the other laws that states that government websites must be accessible to people with disabilities, regardless of whether or not they work for the government.
Want to check how accessible your website is?
WCAG levels
There are 3 different WCAG levels based on the needs of different groups of people in different situations
For eCommerce and Shopify,
accessibility level AA is required.
WCAG level A
Basic accessibility requirements;
the simplest, but insufficient level.
WCAG level AA
Medium accessibility requirements;
the minimum level required by law.
WCAG level AAA
High scale accessibility requirements; a must for the websites
aimed at people with permanent disabilities.
Check the accessibility examples
Initial Design
HTML lacks
semantics
Background and
foreground colors do not have a sufficient contrast ratio
Images’
alternative text is missing
Links don’t have a
unique text
Color is the only
visual means of conveying information or status (links, form validation)
Form elements do
not have associated labels
Focus state is
invisible
Latest news
These are the most important
and latest news on our web site
The Boutique opening
Our first Boutique location, right in the heart of Paris. The perfect place to discover and buy the collection.
Read More
New Pochette
Double leather pouch suitable for carrying your 13-inch computer and your accessories.
Read More
Take care of leather
Leather is a living and natural material. A well-treated leather can become even more beautiful and unique over time.
Read More
Subscribe to our newsletter
Level A
Appropriate type
to form elements are added (elements now have default validation and actions)
Color contrast is
fixed according to the level
Alternative text
is added to all images (and ATs will now read out text instead of the URL)
The repeated “Read
More” links’ text is replaced with unique text for each link
All links get
underlined (for the same reason as in the previous case)
Labels to form
elements are added - now assistive technologies (ATs) are able to read out the name of each element
Graphics and clear text are added to all form validation messages (helping users with colorblindness to
indicate the purpose of the element)
*Press Subscribe button to see
Latest news
These are the most important
and latest news on our web site
The Boutique opening
Our first Boutique location, right in the heart of Paris. The perfect place to discover and buy the collection.
Read about the Boutique opening
New Pochette
Double leather pouch suitable for carrying your 13-inch computer and your accessories.
Read about the New Pochette
Take care of leather
Leather is a living and natural material. A well-treated leather can become even more beautiful and unique over time.
Read how to take care of leather
Subscribe to our newsletter
Level AA
The HTML semantics
are added to sections (they now have a region role which is visible to ATs)
Color contrast is
fixed according to the level
Headings are
added to the News items (which is additional semantics for structuring the content)
Visible focus
for the interactive elements is added (to help users determine where the focus is on the page)
Form fields are
connected with an error message (it helps ATs to highlight current errors to the users)
Latest news
These are the most important
and latest news on our web site
The Boutique opening
Our first Boutique location, right in the heart of Paris. The perfect place to discover and buy the collection.
Read about the Boutique opening
New Pochette
Double leather pouch suitable for carrying your 13-inch computer and your accessories.
Read about the New Pochette
Take care of leather
Leather is a living and natural material. A well-treated leather can become even more beautiful and unique over time.
Read how to take care of leather
Subscribe to our newsletter
Level AAA
ARIA attributes
are added to connect sections with their headings (which makes the page structure easily readable by
ATs)
Color contrast
is fixed according to the level
Latest news
These are the most important
and latest news on our web site
The Boutique opening
Our first Boutique location, right in the heart of Paris. The perfect place to discover and buy the collection.
Read about the Boutique opening
New Pochette
Double leather pouch suitable for carrying your 13-inch computer and your accessories.
Read about the New Pochette
Take care of leather
Leather is a living and natural material. A well-treated leather can become even more beautiful and unique over time.
Read how to take care of leather
Subscribe to our newsletter
They do what matters
Be the next!
F.A.Q.
Why is website accessibility important?
Making your website accessible means helping all people to use all the services available on it.
Why do I need accessibility if I work in eCommerce?
If your shop is accessible, it means that all people can use your services and place an order, whether they suffer from permanent or temporary disabilities or not, so accessible website improves your website’s SEO and increases your market share.
What is WCAG?
The Web Content Accessibility Guidelines (WCAG) are the standards and recommendations that describe how to make the web accessible for all people, including the blind, deaf, and those who must navigate by voice, screen readers or other assistive technologies.
Why is ADA compliance important?
The Americans with Disabilities Act (ADA) was enacted to ensure that people with disabilities are given the same opportunities that non-disabled people are given, and is mostly focused on government websites.
