《Divante:2023年电商商家无障碍网页指南(英文版)(50页).pdf》由会员分享,可在线阅读,更多相关《Divante:2023年电商商家无障碍网页指南(英文版)(50页).pdf(50页珍藏版)》请在三个皮匠报告上搜索。
1、Web accessibility in eCommerceHow can you navigate accessibility to leverage your eCommerce,help millions of people,and make the internet a better place?Authors:Kamil Szymczak Pawe Bogdanik Marcin Kowalczyk Karolina Pulter Barbara SkrzyneckaWeb accessibility in eCommerce2Whats insideAll in this toge
2、ther|3Accessibility first:inclusive design that converts|6There are a billion reasons to make your hop accessible|10Necessary for some,but useful for everyone|14An aging population|18Do you want to be a winner(A),superstar(AA),or unicorn(AAA)?|21Batten down the eCommerce hatches:the European Accessi
3、bility Act is coming|24Accessibility,UX design and UX writing are a perfect match|27Seeing a true beauty beyond the valley:semantic code hidden beneath the surface|30Bring me to the top!How can you implement accessibility and make Googles algorithms love your site?|36How can you implement an accessi
4、ble website?|39Embrace yourself:A quick guide to verify if your eCommerce is accessible|42Your turn|46Authors|47All in this togetherKamil Szymczak First,sincere congratulations for downloading this eBook.We strongly believe that this is a step towards a positive change on the internet.To paraphrase
5、the words of Neil Armstrong,it may be a small step for a business,but its a giant leap for humanity.Thats because,whether we like it or not,were all in it together.Throughout this publication,youll familiarize yourself with everything you need to know about accessibility.We focus primarily on people
6、 and what accessibility means for them.This is meant for those who run digital products or online stores and,on the other hand,their customers.However,if youre just wondering what accessibility is or youre working as a product designer and striving to have the results of your daily grind more access
7、ible to users,this is also for you.In this eBook well:Briefly speak about how it all began because history allows us to understand the future better Present the reasons why your digital product needs to be accessible Broaden this perspective by analyzing why accessibility is necessary for some and v
8、aluable for everyone Shed light on how accessibility affects an aging population Walk you through the different levels of accessibility according to the Web Content Accessibility Guidelines(WCAG)Describe the legal aspects and changes in the legislative process that can have a massive impact on your
9、business Share our observations regarding the changing relationship between accessibility with user experience(UX)design and writing Present insights into the semantic structure of the code,which is crucial for the success of fully accessible digital products Share tips on how to implement accessibi
10、lity to make Googles algorithms love your site,how to implement an accessible website,and how to quickly verify if your current live product is accessibleSound interesting?Make yourself comfortable,fasten your seat belts,and set off with us on a journey through the fascinating topic of digital acces
11、sibility.Empowering eCommerce.Together.We build powerful digital productsand passionate communities aroundthe technologies that are coming next.400+global brands as clients280+eCommerce experts on board11+years on the market1000+delivered projectsLets talk about new technologiesin your eCommerce.Con
12、tact us at Web accessibility in eCommerce6Accessibility first:inclusive design that converts Pawe Bogdanik,Product Designer at DivanteWeb accessibility in eCommerce7Accessibility first:inclusive design that convertsA short history of accessibility in the U.S.The accessibility movement shares its ori
13、gins with the civil rights movement and the Civil Rights Act of 1964 because both were concerned with the structure and implementation of laws related to accessibility.The American National Standards Institute(ANSI)A117.1:Accessible and Usable Buildings and Facilities,released in 1961,was the first
14、nationally recognized accessible design standard.The standard was based on research conducted by the University of Illinois and funded by the Easter Seals Research Foundation.It became a crucial reference for private entities,and local and state governments.In 1974,the standard received federal inpu
15、t when the Department of Housing and Urban Development joined the committees Secretariat in charge of the standard.The realization that many people were unable to access buildings prompted the initial steps toward accessibility requirements.The federal government has taken action to address accessib
16、ility and its enforcement in facilities designed,built,altered,or leased using certain federal funds since the passage of the Architectural Barriers Act in 1968.Web accessibility in eCommerce8A short history of the WCAGThe WCAG 1.0 was established in May 1999,which marked the first effort to establi
17、sh accessibility guidelines for the web.The primary focus of WCAG 1.0 was on HTML,and it introduced the three conformance levels that are still in use today:A,AA,and AAA.Conformance to level A meant meeting only the success criteria for level A,while conformance to level AAA required meeting all the
18、 success criteria of A,AA,and AAA,making it the most comprehensive level.Nearly a decade later,in December 2008,WCAG 2.0 was released with the aim of making all digital content accessible regardless of the technology used.It also introduced the four principles of perceivable,operable,understandable,
19、and robust,which served as categories for the success criteria.Each success criterion addressed a barrier to accessibility in terms of these principles.In June 2018,WCAG 2.1 was released,which appended new success criteria to the existing guidelines of WCAG 2.0.This was done to address the accessibi
20、lity barriers that emerged as mobile web browsing became more popular.While many new rules were added,the old ones were not reconstituted,which reflects the care taken in establishing WCAG 2.0.Over time,further improvements were made,including better keyboard accessibility and focus.This led to the
21、development of WCAG 2.2.This update extended the definition of mobile and made some criteria less demanding,shifting some from AA to A,in recognition of the need to establish accessibility standards.This is how we come to WCAG 3.0As technology continues to rapidly evolve,its necessary to update the
22、criteria used to test websites for their accessibility to remain relevant.WCAG 2.1 and 2.2 were created to fill gaps that developed over the years since WCAG 2.0 was adopted as the standard for web accessibility.However,as we saw with the transition from WCAG 1.0 to 2.0,a complete revision of these
23、standards will be necessary in the future.WCAG 3.0 is planned to incorporate some criteria from WCAG 2.X,Authoring Tool Accessibility Guidelines(ATAG),and User Agent Accessibility Guidelines(UAAG).Web accessibility in eCommerce9The story of a projects lifeJust like the historical change of accessibi
24、lity,the shift in accessibility within the life of a project is something natural.When creating projects,we often operate in a design thinking model.This is good because it allows us to consciously and thoroughly go through the project from ideation to testing and then implementation.Working in the
25、design thinking model,we should wonder,at some stage,if we should think about accessibility and how to approach it.Theres no one good solution here,so we must be very flexible.Depending on where we are in the project and whether the project already exists,we should start thinking about accessibility
26、 from the beginning.Its safe to say that by designing with an inclusive mindset,well naturally prepare a solution accessible to all.Yes,sometimes we can face the challenge of other users needs,but inclusive thinking allows us to overcome this problem.Of course,the availability determined at the begi
27、nning of the project may change as it progresses,like,for example,due to technological limitations.Thinking about it from an early stage makes it easier for us to work on the steps that follow and protects us against legal consequences and drops in conversion.Each designer can see that a project tha
28、t exists and creates itself is“alive.”It reacts to the environment and changes in culture.This applies to all aspects as well as accessibility.It shouldnt be said that,in a project,accessibility is finite because the history of the WCAG shows that accessibility is evolving.We face various challenges
29、,such as an aging population,where accessibility will be even more important.As designers,we have to be flexible about changes and be ready for them because they are inevitable.All we can do is minimize their impact.Web accessibility in eCommerce10There are a billion reasons to make your shop access
30、ibleKamil Szymczak,Senior Product Designer at DivanteWeb accessibility in eCommerce11Shift perspective to your new customersAccording to the rough estimations for the top 1 million websites,only 2%follow basic web accessibility guidelines.Lets combine this information with World Health Organization
31、statistics that tell us there are 1 billion people with some form of disability.Because of this,theres a high probability that your online store does not meet these guidelines,and youre losing a unique opportunity to reach a vast group of potential customers.These potential customers genuinely want
32、to use the full capabilities of the online shopping experience.One billion customers!Staggering,right?When thinking about disabilities,often those that are permanent are top of mind:blindness or low vision,hearing impairments,mobility issues,and so on.However,there are many more nuances beneath the
33、surface.We have the incredible privilege of living in a time when life expectancy is at historically high levels.For example,if youre born in 2050 in the UK,youll be lucky enough to have a life expectancy of 85 years.In Germany,as another example,statistical models predict a life expectancy of 85.4
34、years for men and 89.9 years for women.Well discuss our aging population later,but its worth mentioning that vision,cognition,and physical skills decline rapidly with advancing age.Web accessibility in eCommerce12On top of that,accessibility isnt only about permanent physical impairments or those ac
35、quired in the aging process.We have to look at this issue from a much broader perspective and consider temporary accessibility needs through location,health,and equipment.When were in our prime,we feel invincible.We push boundaries to the limits.Do you want to climb to the summit of Mount Everest?Yo
36、u got this.Are you planning to chase the most significant waves at Nazare?No problem.Maybe you“just”want to run a marathon in London?You name it!At work or business,we give our best and expect the same on all other levels.Simultaneously,we want to use the full potential of the digital world.We want
37、to conveniently purchase reliable hiking equipment,a low-temperature-resistant neoprene wetsuit,or a high-performance running shoe to beat a personal record.Its all at our fingertips,no matter where life takes us.However,suppose youve suffered a sprained wrist or,even worse,a broken arm.In those cas
38、es,you might understand how difficult it can be to perform the simplest day-to-day activities,not to mention not being able to conveniently buy anything on a mobile device with a nondominant hand.Anyone can be temporarily disabled,including youAccidents do happen,unfortunately.You may say that those
39、 are extreme situations,so lets get down to earth with more literal examples of temporary disabilities negatively affecting your online store.Think about being in a noisy underground metro station without headphones,and you want to listen to an album before purchasing it,for example.Maybe you were j
40、ust about to hit confirm purchase and lost signal.In another example,imagine a new mother with limited time and a solid need to buy many things for a toddler or groceries for her family.She can do it in a narrow timeframe during nursing,the babys nap,or by driving the stroller one-handed while using
41、 her mobile device with the other hand.If the shop isnt accessible,shell automatically find another option to smoothly complete the purchase process.I know what Im talking about because I experience it each day with a 3-year-old daughter and a 3-month-old son.Believe me,the struggle is real.All the
42、cases mentioned above,whether permanent or temporary disabilities,shape the complexity of digital accessibility.Every day they affect sky-high numbers of people around the world.For example,9 million people in the UK cant use the internet independently.They need assistance from family or friends.Thi
43、s represents 16%of the entire population in the UK.Web accessibility in eCommerce13Even more interesting is that people with disabilities rely more on digital services.In other words,the people who most need our services are often the people who find them hardest to use.Adults with disabilities spen
44、d almost twice as much time online.According to the Click Away Pound Report,86%of customers with accessibility needs would spend even more time online if websites were more accessible.Time to connect the dots.It seems like its a massive business opportunity to help people fulfill their needs.As you
45、can see,these figures lead to one crucial conclusion:theres never been a greater need to focus your business on accessibility.Lets make a difference.Its a win-win for everyone!Web accessibility in eCommerce14Necessary for some,but useful for everyoneMarcin Kowalczyk,Product DesignerWeb accessibility
46、 in eCommerce15Accessibility of services isnt only about being friendly and caring.Its also about doing the right thing,especially in the online world where creating a barrier-free environment for people with special needs can yield significant benefits.Despite the common perception,digital exclusio
47、n doesnt only affect people with disabilities.Accessible solutions can be used and understood by everyone regardless of their preferences or disability level.In addition,healthy people can also benefit from accessible digital services.Social groups at risk of digital exclusion can take advantage of
48、accessibility According to WHO statistics,more than 1 billion people have some form of disability worldwide.That makes up about 15%of the total population.In the U.S.alone,19.9 million people,8.2%of the population,have difficulty lifting their arms or grasping objects,which can significantly hinder
49、using a mouse or keyboard.More than 15 million people,6.3%of the population,suffer from cognitive,mental,or emotional impairment.Visual impairment affects 8.1 million people,3.3%of the population,and hearing impairment affects 7.6 million people,3.1%of the population.When it comes to Poland,there ar
50、e more than 3 million people who have a disability certificate.Many people,4 to 7 million,have various disabilities.This includes people who are partially sighted or blind,deaf or hard of hearing,and people with color vision disorders,including color blindness.Other disabilities include motor impair
51、ment,photosensitive epilepsy,cognitive disorders,and ADHD.The rate of these rose sharply during the pandemic.About 10%of the population has symptoms of dyslexia and struggles with writing skills.Another large group at risk of digital exclusion is senior citizens.Currently,there are almost 9 million
52、people in Poland over 60.That figure is expected to rise to 10.7 million by 2030,accounting for nearly 30%of the population.This indicates that Polands population is aging.It should be remembered that its these senior citizens that often include a large number of people with disabilities.Based on th
53、ese statistics,we can see that were dealing with many users.However,it should be considered that the data presented only includes individuals with a disability certificate that every disabled person doesnt necessarily holdIts assumed that up to 20%of the population suffers from digital exclusion.Thi
54、s represents a significant number of potential customers for online shops since,just like people without disabilities,they tend to buy almost everything online.They order pizza,groceries,everyday necessities,household appliances,air purifiers,watches,books,and so on.Web accessibility in eCommerce16B
55、rands often spend vast amounts of money on marketing campaigns to attract minor target groups while ignoring many potential new customers.This is a mistake because theyre missing out on potential revenue from a purely business perspective.Brands that are accessible are much more likely to attract th
56、ese groups of customers and boost their loyalty.In some cases,the“disability”may be temporary.Some examples include broken limbs,migraines,eye fatigue,the need to use a mobile device in a place where you have to keep quiet,etc.In these situations,each of us can find ourselves in a position where we
57、become“disabled”to a certain extent.This hinders,or even wholly prevents,the effective navigation of websites.With the help of assistive technologies,we can operate a computer with one hand or without using a keyboard or a mouse,for example,to shop online.Additional advantages of accessible websites
58、Compliance with Polish and European lawIn Poland,relevant legal obligations are imposed on public institutions,telecommunication companies,and entities benefiting from EU funds.The upcoming EU directive contained in the European Accessibility Act(EAA)are comprehensive works that are currently underw
59、ay in the EU.Theyll impose a responsibility on commercial entities to meet the WCAG.The EAA will contain standardized accessibility requirements for selected services and products.It applies mainly to computer hardware and operating systems,self-service terminals,and electronic communication service
60、s.Those communication services include emergency calls,audio-visual services,passenger transport services,banking services,eBooks,and eCommerce.Universal access to digital services in various situationsThis includes people with disabilities,healthy people using their mobile devices in harsh light,th
61、e aging population,a person who has lost their glasses but urgently needs to send an important email,and many others.Each of us can temporarily feel some kind of disability”when we least expect it.This will cause us to have problems with using digital services.SEO and better search resultsJust like
62、screen readers used by blind people,search engines need appropriate text structures to meet WCAG requirements.Accessibility principles related to page titles,headings,alternative texts,transcriptions of videos,and sound recordings can help increase a websites position on a search engine and generate
63、 more traffic.Its worth investing in better accessibility simply for better SEO positioning.Web accessibility in eCommerce17Easier and cheaper modificationsAccessibility translates into optimal,better-quality source code,faster operation,and specific website changes.A code compliant with the standar
64、ds is much easier to edit for developers.This speeds up work and makes website modifications less expensive.The steady development of online technologies forces major or minor changes every so often.These are certainly less costly for websites created based on accessibility principles.If the code do
65、esnt follow consistent rules,significant improvements forced by the dynamic changes in the tech market can entail high costs.This can include the need to completely recreate the website.UsabilityThe more accessible the website,the more valuable it is and the more advantages it offers users and the o
66、wner.Ease of use,internal logic,and legibility of various elements,such as descriptive links,are the essential aspects that facilitate and make for more pleasant website navigation.It also creates a positive impression on the user.Its worth ensuring accessibility for the sake of better usability.EU
67、subsidiesIn some cases,you may be eligible to receive EU funding for creating your website.The condition that must be fulfilled is that the website must be made based on the principles of the WCAG that contain a set of rules prepared by the World Wide Web Consortium(W3C).For example,website forms sh
68、ould have a specific look and functionalities in terms of feedback,design of controls,descriptions,contrasting focus,data grouping,etc.This offers a business advantage over competitors.Offering universal services accessible to everyone is not yet a standard and is rare.This can be used as a business
69、 advantage that can generate added value for the owners brand image.Universal accessibility The benefits of having a website accessible to everyone are indisputable.Thats why more and more online shops are adapting to WCAG standards to ensure that their services are compliant with current legislatio
70、n,simpler,and less expensive to modify.To put it in simple terms,it pays off.Even if blind,deaf,or otherwise disabled people dont visit the website,everyone,including the owner,will benefit from accessible services.Web accessibility in eCommerce18An aging populationPawe Bogdanik,Product Designer at
71、DivanteWeb accessibility in eCommerce19Its no secret that the worlds population is aging.What exactly is an aging population?Some define it as people aged 58 to 76,who were the Baby Boomers,and Generation X,who are now becoming older and are between 42 and 57 years old.For others,its simply an aging
72、 society thatll continue to be consumers.Its interesting because weve reached the point where we have four or five,when counting the younger generations,different age groups of consumers with entirely different values in the labor and sales market.As designers,we should ask ourselves how to design f
73、or different groups.After all,theyre entirely different from each other.This is a tough challenge,but technology is the one common denominator between these groups.All these groups are able,with more or less advanced abilities,to use technology.Some grew up with it,and others got to know it later in
74、 life,but its with them daily.In 2013,over 20%of the population in Poland were people over 60 years of age.According to a report prepared by the HelpAge International association,in 2050,itll be 35%.Poland is ranked 62 out of 91.This means that older peoples quality of life and support from the stat
75、e is relatively low.The best indicator is income security.”Thats the financial security of these people.It turns out that they have nothing to complain about in this respect because Poland is in 20th place in this category.This should signal to manufacturers and service providers that its a powerful
76、 and financially secure group.“According to the Golden Age Index report,increasing the employment level of mature workers to the level of countries such as Germany,Great Britain,or Sweden(above 40%)would increase GDP by up to$66 billion in the long term.So far,there are no effective multi-source act
77、ivation programs for this professional group,but employers should carefully look at the benefits of employing a diverse workforce.”-Jolanta Samul-Kowalska,Managing Director at Morgan Philips Group Polska.Web accessibility in eCommerce20In 2017,a person reaching age 65 had an average life expectancy
78、of 19 additional years.A child born in 2017 could expect to live more than 30 years longer than a child born in 1900.In 2060,nearly 25%of the population will be older than 65.As you can see,well have an older society in the near future.For this article,lets call this person a new senior.”Whats a new
79、 senior characterized by?Theyre a senior who knows and can use technology.Remote online shopping,subscribing to services,or paying bills is typical for them.If we add social media,intelligent homes,etc.,we have an example of a new senior.How can you design for this type of person?Of course,there are
80、 many possibilities,and,at the moment,theres no single correct way.From what can be deduced,it will be a flexible and personalized design.New seniors can use the interface and have no problem using it.The problems that arise are motor-manual or cognitive problems,so the interface must be changed wit
81、h flexibility in mind.There must be an easy and simple way to resize the interface,for example.Understanding the information architecture will also be vital so individuals can move through the process as efficiently as possible.Complicated interfaces can lead to misunderstandings about whats happeni
82、ng.The biggest challenge will not be learning the user interface(UI)or swipe and tap patterns but being able to control them easily.This new senior doesnt need to be persuaded to buy online or educated on how the interface works.You need to help them use it easily and efficiently.Of course,some thin
83、gs wont change,such as cybersecurity reminders,but seniors know a lot.Designing for an aging population is our responsibility right now.Of course,this is a challenge,but,at the same time,its directly related to inclusive design,which allows for social change.The aging population will be part of all
84、of our lives,so the only option is to adapt for them.Its a process that starts now.Web accessibility in eCommerce21Do you want to be a winner(A),superstar(AA),or unicorn(AAA)?Karolina Pulter,Senior UX Researcher/UX Designer at DivanteWeb accessibility in eCommerce22When you go to the mall or a gover
85、nment office,you want to complete your shopping list or do things that you need to get done.When youre young and healthy,shopping is easy.You probably dont even notice what type of tram or bus you take,how many steps lead to the building,or on which floor the shop is located.Now,imagine that youre o
86、ver 60 years old or in a wheelchair.Would everyday shopping or visiting the office be just as easy for you?Most of us dont notice,but using the internet can cause similar obstacles for people with disabilities,even temporary ones.These are called architectural barriers.In an online environment,these
87、 barriers are just less visible.As an owner of a website,you want to ensure that users can easily achieve their goals.Otherwise,they might not come back to the site.Unfortunately,sometimes we forget that what is pretty easy for most users might be difficult or even impossible to do for others.Which
88、standard is the best fit for you?The WCAG rules were created to help us identify these“invisible”barriers.There are three standards that tell us how accessible a website is.How can you know which level of accessibility you should strive for?Is the A grade enough?Maybe you should try to achieve AAA?I
89、s it worth optimizing the accessibility of your existing website,or should you design a new one from scratch?The good news is that,even if your website is already live,you can still improve its accessibility.You dont have to work on the entire site at once.You can upgrade it piece by piece to achiev
90、e the desired standard.Does every page have to be AAA?The standard A grade is the absolute minimum when it comes to accessibility.If your website doesnt meet it,it may cause problems with readability for every type of user and not just for those with disabilities.However,just being ranked as A isnt
91、enough for your website to be considered accessible to a broad group of users.To reach the AA level,you must first meet all the requirements included in the A standard.Without achieving A level compliance,your site wont reach Level AA.According to the WCAG rules,the AA level is the one that allows m
92、ost users to interact with your website easily.According to WCAG 2.2 guidelines,58 criteria,according to WCAG 2.1,49,must be met to achieve AA level requirements.Web accessibility in eCommerce23We already know that the A standard is insufficient and that at least an AA grade is optimal for most case
93、s.Lets assume that all A and AA requirements are met.Whats next?Is it necessary to get to the AAA level?The websites content must follow all of the WCAG to be AAA compliant.Some AAA criteria are challenging to implement,like providing sign language translation of all audio recordings or subtitles fo
94、r live videos.To sum up,by default,you should strive to get to the AA standard so that the website is accessible to most users.The AAA level should be considered when you know that the primary audience of your content are people with a specific disability or that the nature of your business is relat
95、ed to,for example,broadcasting live material.Then,getting your website to the AAA level will enable all your users to enjoy the content you provide.Web accessibility in eCommerce24Batten down the eCommerce hatches:The European Accessibility Act is comingMarcin Kowalczyk,Product DesignerWeb accessibi
96、lity in eCommerce25The European Accessibility Act(EAA),also known as Directive 2019/882,came into effect in April 2019.EU member states needed to have passed implementation laws by June 2022,and,by June 2025,they must ensure the implementation of the necessary accessibility measures.The main goal of
97、 this legislation is to increase and standardize the accessibility of digital products and services,especially for people with disabilities and functional limitations,whether permanent or temporary.The legislation will affect 12 areas,including eCommerce and mobile apps.Not complying with the new re
98、gulation can result in an interim service suspension.If your business is operating in the EU,this is something that needs your attention because the clock is ticking.What exactly is the European Accessibility Act?The EAA is a document that establishes accessibility standards to remove barriers that
99、are faced daily by people with disabilities in the EU.These standards apply to,among others,websites and mobile apps,including eCommerce,computers and operating sys-tems,payment terminals,ATMs,ticketing and check-in machines,smartphones,and eBo-oks.The EAA directive sets WCAG 2.1 Level AA as a stand
100、ard that businesses need to comply with.Complying with the WCAGThe WCAG is a collection of guidelines to make digital content accessible to people with disabilities.These disabilities could be permanent but also temporary or situational.The four main rules of accessibility that the WCAG and EAA focu
101、s on state that the interfaces need to be:PerceivableUsers must perceive the information displayed in the interface,and the interface itself,with the available senses.OperableUsers need to be able to use all the different controls and navigational elements of the interface.UnderstandableThe content
102、needs to be comprehensible and presented in a way thats easy to grasp.Web accessibility in eCommerce26RobustThe content must be designed to allow users to use the technology of their choice to interact with it.Building products and services with the above rules will ensure accessibility for all user
103、s.Thats true regardless of their habits,technical and cognitive skills,or levels of disability.Does my business need to comply with EAA?The EAA covers all products and services sold or used in the EU.Even foreign-based companies must comply with the Act if they sell relevant products or services wit
104、hin the EU.However,the EAA does not cover microenterprises,which are businesses that employ fewer than 10 people and have an annual turnover of less than 2 million.Also,websites and mobile apps registered before June 28,2025,dont need to comply with the directive.Penalty for noncompliance The penalt
105、ies for noncompliance need to be“effective,proportionate,and dissuasive.”Each EU member state is responsible for enforcing the directive on its territory.This means that they can independently decide on the penalties and appoint the body in charge of enforcement.For example,in Germany,the penalty fo
106、r noncompliance might be pulling the product from the market or limiting its presence.In Poland,the product or service could also be withdrawn from the market,or the business could face a financial penalty of up to 10 times the average national gross pay.Benefits Besides avoiding penalties,complianc
107、e with the EAA will enable more people to access digital products and services.This kind of universal access translates into higher profits for businesses through,for instance,promoting online shopping.Web accessibility in eCommerce27Accessibility,UX design,and UX writing are a perfect matchKamil Sz
108、ymczak,Senior Product Designer at DivanteWeb accessibility in eCommerce28The trend of pampering the user experience with digital products to the limit,taking care of users customer journeys,and testing individual user interface solutions to develop the best possible experiences is still on the upswi
109、ng.Businesses increasingly notice the value of design,great UX,powerful words,and research to validate success in a competitive market.We need to understand that the web is for everyone.Creating frustration,denying access,failing to represent individuals,and disenfranchising groups dont underline th
110、e goals of any product design team.Or at least we want to believe that because these types of rules are close to our vest.When we started to experiment with accessibility,we were already familiar with the crucial immersion needed in projects.Im referring to the immersion between UX design,UX writing
111、,UI design,SEO,data-driven design,and technology to create leverage for business and great user experiences.With the development of knowledge and awareness,weve observed that accessibility is a key and inseparable component of this puzzle combined with the rest of the pieces to complete the picture.
112、While delving into the WCAG,we realized how accessibility permeates the projects UX/UI design and copywriting.In the digital product design process,we ask ourselves countless questions to verify our theses or assumptions adopted in the early discovery phase.This is done in order to solve information
113、 architecture,visual structure,or the usability of the implemented solutions.Aiming to make the product more accessible,we add another dimension to our work by shaping more inclusive solutions.The key to a projects success is thinking equally about those ingredients,especially accessibility,at the s
114、ame level rather than adding this issue as a cherry on top later in the process.Frankly,its hard to achieve usability without accessibility.However,it also works in reverse because those two areas interchange.Usability is like a frozen treat,and accessibility is its container.No one will be fascinat
115、ed by a container without treats.If you combine both,youll be able to enjoy a tasty dessert.Web accessibility in eCommerce29To be more specific,UX design asks questions about whether a product or service is effective and efficient while accessibility focuses slightly more on questioning if people wi
116、th impairments perceive,operate,and understand it.Theyre different questions but entirely related to the same thing.On top of that,usability is subjective and can change over time.It absolutely needs testing with users.Accessibility,on the other hand,is essentially objective because you can prove mo
117、st guidelines by answering yes or no.At first glance,there might be some differences,but those two areas complement each other.Going further,when we develop a design system at the UI level and work on the buttons,its enough to ask ourselves whether the contrast ratio between the typography and the s
118、elected fill color is sufficient to be visible enough.The same approach applies to UX writing,which is the art of crafting the texts that appear throughout the interface of digital products.We shouldnt be guided solely by the conversion rate when composing our content,but we also need to consider th
119、e Gunning fog index,which determines the readability and understandability of the content.Our observations and experiences indicate that these elements are undoubtedly a system of connected parts.Because of this,its crucial to consistently think about all of them to remain on the right path to every
120、 digital products success.Web accessibility in eCommerce30Seeing a true beauty beyond the valley:semantic code hidden beneath the surface Kamil Szymczak,Senior Product Designer at DivanteWeb accessibility in eCommerce31If I were to give one ultimate truth about code structure and accessibility,Id sa
121、y that the correct use of HTML eliminates approximately 70%of errors related to accessibility.The rest seems to be just additions.Well,maybe I simplified the last part a bit.However,we should emphasize that the semantic structure of digital products is crucial.The origins of HTML date back to the ye
122、ar 1980.In other words,this technology has been with us for over 40 years.And still,as we mentioned previously,of 1 million top websites,only 2%follow basic web accessibility guidelines.In the meantime,the World Wide Web Consortium brought to life a dedicated accessibility markup called Web Accessib
123、ility Initiative Accessible Rich Internet Applications(WAI-ARIA),a set of code attributes that expand HTMLs capabilities.This makes it easy to optimize the site for screen readers.Theres also one straightforward rule about its application:dont use ARIA if you can do it with plain HTML.Even though HT
124、ML seems obvious and relatively simple,hundreds of thousands of people struggle daily with inaccessible digital products.How come?Presumably,a lack of knowledge about accessibility and a missing willingness to take responsibility or ownership for such changes is fundamental.Correspondingly,were here
125、 to help you indicate the key elements of the accessibility-driven semantic structure.At the same time,we encourage people responsible for digital products to implement an accessibility approach and culture.We realize that its hard to execute these changes overnight,but youre in the best position to
126、 kick it off.Code accessibility issues lurking around the cornerWe dont intend to make you bored with exten-sive lines of code.However,wed like to lucidly present most of the problems related to the code in the context of accessibility.First,when working on a brand-new product,its ideal to start fro
127、m a prototype level and consider the structure of individual elements in the code hierarchy.A common problem is poor information structure of headings,paragraphs,tables,etc.Product designersare leading when considering the form of individual elements in the code order.Web accessibility in eCommerce3
128、2Before we take a deeper dive into the analysis of an individual elements semantic code structure,its worth noting that unusual interaction methods can blow up the layer of code.This approach can make accessibility technologies struggle to process the pages source.If something works with JavaScript,
129、its a good idea to code it so that it works decently without it,and then add JS to the top.It often happens that when you turn off JavaScript,it all goes awry.Disabling JavaScript is often the first step people with impairments take when interacting with a website.Skip to the contentLets skip to the
130、 content.Many users with disabilities navigate web pages using the tab stop on the keyboard across all active elements on each page.Imagine a situation where,for example,the online store has an extensive main menu with various categories.Users navigate between different product pages and want to fam
131、iliarize themselves with the product description.They must then manually click over each item from the menu to reach the content theyre looking for.This must be done repeatedly on every product card page.It sounds like a nightmare.No worries.A simple skip-to-content link solution hidden in the code
132、is here to help.Skip links are little internal navigation links that allow users to move smoothly around a page.You may have never seen one before because theyre often hidden from a standard view.Theyre used as an accessibility enhancement that lets keyboard users and screen readers jump from the to
133、p of the page to the content without tediously navigating through every element each time.This solution is a simple must-have accessibility function embedded in the code that can be a lifesaver for many people.Of course,its alright to use more than one link.Your users will love it.Its atrap:keyboard
134、 focus trapsSpeaking of keyboard navigation,we need to highlight focus traps.Its straightforward.A programmer should avoid creating a website where any interface element binds the cursor.In such a situation,the cursor is held in the given field until some additional mouse action.However,what if the
135、user doesnt have a mouse or cant use it?In that case,navigation must be done by standard methods,like with the cursor,tab,and space keys,or the navigation needs to be clearly defined,such as using keyboard shortcuts.Web accessibility in eCommerce33SitemapsIts also fundamental to help people understa
136、nd your sites structure.A sitemap dedicated to assisting peoples understanding helps visitors figure out your contents structure.It improves accessibility by allowing users to better orient themselves on the website.Its beneficial in the case of complex websites with nested categories and pages.Of c
137、ourse,there are various kinds of sitemaps.Those for search engines contain an unstructured list of pages on your website.Provide this sitemap to ensure good SEO.If a search engine finds what your potential visitors search for,they can become actual visitors.As you can see,implementing sitemaps in yo
138、ur code structure may also benefit your customers and SEO.Double win!Lets move on to the more advanced nuances in the semantic structure of the code.Alternative textOne of the most common problems is alt text missing for images.The general rule is to set up an alternative text on every picture.We sh
139、ould enter an empty alt tag if the image has only decorative value.Itll inform screen readers not to include them in the reading process.However,if we place a picture of crucial importance in the context of the content,we must provide it with an adequate alternative text.Itll provide information for
140、 the screen readers to translate text into synthetic speech.A correlating semantic tag that completes the alternative text is.In this tag,we can add a detailed description of whats happening in the photo with a broader context.The content of this tag is complementary to alt texts and visible to all
141、users.Inputs and labelsWe often use various types of forms across websites.Its one of the most critical components of the network.When it comes to online stores,theyre practically indispensable for completing the purchase.To complete the transaction,we must fill in,for example,the name,address,email
142、,or telephone number.Its good not to use disappearing placeholders in inputs or floating label options because they may not be visible to some screen readers.The placeholder option might be annoying even for users without any kind of impairments because its easy to forget the label of a particular i
143、nput field.That makes it much more difficult to adjust later in the process.The default placeholders also often have shallow contrast,making it difficult to read them correctly.Web accessibility in eCommerce34The solution is relatively simple.Just add tags with permanent labels to each input field.T
144、here are several ways to do this.Its a good idea to wrap each field item in a label tag.Then well automatically get an additional option to focus input even if we dont hit this field directly.Its an excellent solution for people with motor problems.We can also avoid wrapping the input tag around the
145、 label attribute and reference it to the ID of another HTML element.This method works similarly but provides you with more styling flexibility.IconsIcons are a great carrier of condensed information that saves screen space and can be legible in multiple languages.However,leaving the icon itself with
146、out proper semantic care isnt a good idea.So,the best idea is to label your icons simply.Its a rarely developed area,and we can easily design this solution early at the prototyping stage.If the context of the icon is ambiguous or just not sufficient,the label combined with the icon provides a clear
147、signal of what action a user will trigger after clicking on it.This solution will also be much more straightforward for users using supportive technologies.Its simple yet highly effective.Links without contextUsers can navigate through the linking elements with arrows by searching the keywords acros
148、s the links or around different links by tab stop from the keyboard.Some links might be self-explanatory,and of course,theyll work.However,imagine a crucial call-to-action button called“purchase”or“add to basket.”It might be straightforward to understand when you have the overall context of the prod
149、uct.But what if the impaired user reaches this link without context and hearing“purchase,link”?What am I going to purchase after clicking this link?Confusion will arise for sure.You could also have a carousel with multiple recommended product thumbnails but all with the same button called“add to car
150、t.”How is the user supposed to know which product is added to the cart?Web accessibility in eCommerce35However,imagine a crucial call-to-action button called“purchase”or“add to basket.”It might be straightforward to understand when you have the overall context of the product.But what if the impaired
151、 user reaches this link without context and hearing“purchase,link”?What am I going to purchase after clicking this link?Confusion will arise for sure.You could also have a carousel with multiple recommended product thumbnails but all with the same button called“add to cart.”How is the user supposed
152、to know which product is added to the cart?The best solution would be to use a hidden semantic class attribute with additional information.Such visually hidden clip patterns,like a simple aria attribute,should solve this like a charm.Youll thank us for your new and happy customers.Of course,we cant
153、cover the entire subject exhaustively in this publication.The semantic structure of the code is a vast and extensive topic.We could talk for hours about non-scalable texts,content language,skip links,focus indicators,etc.However,we wanted to show that using elementary solutions or implementing good
154、practices may sometimes change the games rules.If youre just about to kick off a new project,its perfect to think about code structure in terms of accessibility at the very beginning.If you already have a live digital product,then no worries.An accessibility audit may work for you as well.Just get s
155、tarted.If you need a hand,well be more than happy to accompany you on this journey because we believe making the digital world a better and more accessible place for all is worth the effort.Web accessibility in eCommerce36Bring me to the top!How you can implement accessibility and make Googles algor
156、ithms love your site?Barbara Skrzynecka,Team Leader&Product DesignerWeb accessibility in eCommerce37Accessibility is great,but having an eCommerce to run means you sometimes need to prioritize.For example,SEO is sometimes more important,right?But wait!Google bots are about users and rewarding sites
157、with a good user experience.Although“accessibility”is not a ranking factor per se(yet!),good accessibility will be cited overall with,for example,a lower bounce rate.Theres more to it,though.There are several areas that,if done right,help users with special needs and bots skimming the page.Alt text
158、for imagesEvery image that has a meaning for the content and isnt purely decorative should have a description available for screen readers and bots alike.This one is tricky,though,because many SEO specialists put a lot of marketing fluff inside alt text that hinders users who cant see the images.So,
159、dont overdo it.You can use keywords that help your SEO and still be concise and descriptive at the same time.Oh,and dont forget about descriptive file names for the images.These will help,too.Link anchor textA link that says“click here”isnt helpful without the visual context.When browsing a page wit
160、h a screen reader,users often tab through the available links first.A description of where a link will lead helps them determine whether they want to click it or not.Similarly,search engine crawlers use anchor text to understand what the destination page is about.HeadingsFor both bots and users of s
161、creen readers,the H1 heading gives a hint about the main content on the page,and the rest of the headings suggest the sites structure.The structure should be logical because only then can the site be understood appropriately.ContrastAlthough Google doesnt check“accessibility”when ranking your page,t
162、heres another context where contrast does matter.Good contrast between text and background,a ratio of at least 4.5:1,is essential for mobile-friendliness,and this,my friend,influences your position in the ranking.Sometimes,you use mobile devices in adverse light conditions,so if you use text that is
163、 light on contrast,it makes the font illegible,and the user will just leave.Web accessibility in eCommerce38ReadabilityTheres no direct confirmation that Google uses a particular algorithm to check readability.However,pages that are easy to read are correlated with higher search rankings.The text sh
164、ould be easy enough so that a 14-year-old can understand it.The same goes with accessibility.Try to focus on verbs instead of nouns,dont use jargon,make sure all your call-to-action buttons are intuitive,and use short sentences.To sum up,do you want great SEO?Dont forget about accessibility,too.If y
165、ou want someone to take care of both for you,contact us.Well gladly help.Web accessibility in eCommerce39How can you implement an accessible website?Marcin Kowalczyk,Product DesignerWeb accessibility in eCommerce40We must focus on various aspects to create a fully accessible website.First of all,we
166、need to find out and understand how people with disabilities navigate the internet,what their needs are,and what they struggle with when using digital services.We als need to know what technological solutions they use,like,for example,screen readers.The next step is to take care of the technical asp
167、ect.The standard we can use for this purpose is the WCAG prepared by the W3C.This eBook is a compilation of the best practices of the worlds largest tech companies that have become a reference standard in countries worldwide.The manual consist of four principles,13 guidelines,61 success criteria,and
168、 three levels of conformance:A,AA,and AAA.PerceivableInformation and user interface components must be presented to users in a way accessi-ble to their senses.Content should have different display options,like a more straightforward layout or up to 200%zoom,without losing information and a structure
169、 without the need to scroll horizontally.Appropriate font size and contrast between different page elements should be ensured.Operable All functionalities of the website and its navigation should be operable in different ways.Giving users enough time to read the content.Designing the website so that
170、 its operable through a keyboard interface.Adding functionalities to the website to allow easy navigation between its elements.Unique,clearly understandable labels on buttons or forms.Web accessibility in eCommerce41RobustContent on the website must be robust enough that it can be interpreted reliab
171、ly by additional external software,including assistive technologies like a screen reader.Elements must have complete start and end tags to ensure that content is implemented using markup languages.13 Guidelines The above principles can be classified into 13 guidelines and 61 specific success criteri
172、a requirements.For example,criterion 3.2.3:consistent navigation from level AA,states that navigational mechanisms,like a menu on individual pages,should be consistent,logical,and repeatable within the entire website.In addition,the interface should be navigable with a keyboard.Three levels of confo
173、rmance:A,AA,and AAAThe level of conformance determines the difficulty of implementing the criteria and the level of support provided to the user.A is the minimum level that must be ensured for users to be able to use the website.Level AA is recommended for many users to use the website without probl
174、ems.Level AAA provides comfortable use of the website for almost all users.How much should an accessible website for people with special needs cost?An accessible website isnt a premium version and shouldnt cost more than a regular version.Its enough to follow the appropriate rules when creating a ne
175、w product.Unfortunately,due to a lack of awareness,knowledge,and a focus on aesthetics,most websites fail to meet the standards requirements and dont follow the principles.The internet,like any business,follows specific rules,and compliance with the standards should be ensured.Web accessibility in e
176、Commerce42Embrace yourself:A quick guide to verify if your eCommerce is accessibleBarbara Skrzynecka,Team Leader&Product DesignerWeb accessibility in eCommerce43Are you ready to check if your site is accessible even before testing it with users?Its time for an audit.Youll need six tools A screen rea
177、der will help you access the page,as a blind person does,through hearing only.There are several available on the market,including JAWS,VoiceOver,and NVDA.However,if you have the Chrome browser,I recommend the ChromeVox plugin because it works on Windows and macOS.Accessibility Insights is another Ch
178、rome plugin thatll help you understand the hierarchy on the page thanks to the tab flow option.Itll also automatically look for accessibility mistakes you havent caught yourself,but treat this as an additional checkup and not a primary source for an audit.To test the site more thoroughly,check out t
179、he tool I describe in number six below.A contrast checker will show you problems with your background and foreground contrast.Im using A11Y Color Tester.Inspect panel helps you see the code behind the element,especially the alt text and the ARIA labels if your shop is using them.You bring up this pa
180、nel with a right-click on any element on the page,and from the menu,you pick“inspect.”Alternatively,you can press command+option+i on your Mac or F12 on your PC to do the same.A readability test can check how understandable the content is on your site.An example can be found here.Auditing software.W
181、hy am I putting this at the end?Because it should only complement the audit and not drive it.It doesnt show the usage logic,and its better to understand that before seeing other errors.However,it might lead you in the right direction if you missed something important.Several are available for free.I
182、m using an aXe browser extension.You will audit these areas Navigation:headings,tab flow,and sitemap.To navigate the page,we need a proper heading structure and tab flow.Well use Accessibility Insights,the second tool above,for both.Another thing is a sitemap,which is also helpful for navigation.Web
183、 accessibility in eCommerce44To check the heading order,go to the“Assessment”tab and then“Headings.”Verify if the heading structure is logical.Its like in a book:H1 should be similar to the chapter title and singular for every subpage,H2 would be a subchapter,H3 would be a paragraph title,and so on.
184、To check tab order,go to“Fast pass,”and then“Tab stops.”Then tab through the page to visually show the flow.This is how a keyboard user will access your site.Is the order easy and logical?Are all the necessary elements accessible through tabs?At the very end,check if a sitemap for visitors is availa
185、ble on the site.There are two types of sitemaps.One is for search engines,and you can reach it after adding/sitemap.xml to your main URL.The other is for visitors,and its a hierarchical list of links.You can see an example here on the WAI site.It should be linked in the footer.Forms:login,sign up,an
186、d contactCheck if the labels have proper contrast and are visible even after typing.Its a common mistake that they disappear after typing information in.For users with a shorter attention span,that might mean they need to delete the text to remind themselves what the label is for.Check the order of
187、the fields when you tab through them to see if its logical.Check if submit buttons work via keyboard and not just a mouse.Checkout flowUsing ChromeVox or another reader of your choice,go through the entire buying process,especially the checkout.After all,this is where mistakes will lose you money an
188、d cause the user the most frustration.Pay the most attention to the submit buttons,payment accessibility,and the purchase completed page.Also pay attention to the links and buttons to make sure its clear where theyll take you.Check the anchor tag text as well.Contrast and colorPay special attention
189、to the contrast of the text.By that,I mean the contrast ratio of the background color and the text color.For this,use WebAIM or another contrast checker.Also check the amount of white space around the text.This is the area in-between lines and paragraphs.Some users will increase the font size two ti
190、mes,so change this setting in your Chrome browser to check if the contrast and readability are still OK.Another thing to remember is that if users are color blind,theyll not see color coding correctly,like,for example,red stands for unavailable and green means available.In such contexts,you always n
191、eed to use labels and colors.Web accessibility in eCommerce45 Alt text for images and iconsLook through all the images and icons on your site using Inspect panel.The purely decorative ones should have no alternative text.In code,it appears as alt text=“”.All the others should have succinct descripti
192、ons in the alt tag and where theyll take you in the link tag if they are interactive.The most important buying decisions are the product images and the color variants,so ensure these have the best descriptions possible.ReadabilityCheck if the language you use on your site is easy to understand.Try t
193、o focus on verbs instead of nouns,dont use jargon,make sure all your call-to-actions are intuitive,and use short sentences.Check if there are no other problems,like auto-playing videos,links that open in a new tab without informing the user,or flashes that might provoke epilepsy.Make sure to add sub
194、titles to the videos you use.At the very end,to ensure you caught everything,you can run through a WCAG checklist and/or run auditing software like aXe.Also,audit your site on both desktop and mobile.Write down all the problems and think of recommendations on how to fix them.Some of them will strict
195、ly concern code,and some might be more in the design area,so its good to work with a front-end developer and a designer in this step.After you make sure all the basic mistakes are fixed,you can go and test it with your users.Dig deeper to find nonobvious stuff.Good luck!If,however,you think the audi
196、t might be a tad too complicated to do on your own or will take up too much of your time,contact us.Well gladly do it for you along with user tests and a redesign if you wish.Web accessibility in eCommerce46We can help with that.Check out our offer!The first step to achieve accessibility is to audit
197、 your website.Your turnThats all from us in this eBook.Together,weve explored the subject of digital accessibility and the development of this fantastic movement.The ball is in your court now.We know from experience that a bit of courage is enough to start.Then,just keep pushing.We guarantee that,so
198、oner or later,uch an attitude will bring benefits and make the digital world a much better place.However,if you need our support or expertise and want to design an available digital product or run an accessibility audit in your live store,feel free to reach out to us.Were happy to help you.Wed also
199、be delighted if you want to share these materials with your friends or whoever may be interested in this topic.Lets spread the good word and rock out with accessibility to shape a better future for the digital world!Web accessibility in eCommerce47AuthorsWeb accessibility in eCommerce48Kamil Szymcza
200、k Senior Product Designer at Divante Kamil strives to make perfect connections between business,design,and technology.He often aims to push pixels thoughtfully to design great digital products with a strong focus on accessibility that can change the world,even for a little bit.In his so-called“free”
201、time,as a dad of two,he mainly builds sand castles,climbs trees,and chases pigeons.Pawe Bogdanik Product Designer at Divante Pawe,in his life as a designer,uses the Bauhaus motto“form follows function.”This can be seen in the projects he creates.Hes a great enthusiast of accessible,minimalistic,and
202、functional designs.He discovered his passion for accessibility thanks to legal design and Wroclaws University of Social Sciences and Humanities leader.Privately,hes a great fan of dance and the Polish mountains.Marcin KowalczykProduct DesignerI try to evoke positive feelings in the end user.For busi
203、ness purposes,I am looking for a balance between aesthetics,functionality,and usability.I know when creating something is pleasing to the eye,when its functional,and when its understandable but still accessible to everyone.After work,I run a small carpentry shop,run in the mountains,think,and spend
204、time with my girls.Web accessibility in eCommerce49Barbara Skrzynecka Team Leader/Product DesignerBarbara is a big enthusiast of both accessibility and data-driven design to make great digital products.She believes in the magic of soft skills in the work of designers,especially when it comes to coop
205、erating with developers.In her free time,she enjoys walking in the mountains,learning foreign languages,and great storytelling in any form possible,whether it be a movie,game,or book.Karolina PulterSenior UX Researcher/UX Designer at DivanteKarolina believes that the best products are created togeth
206、er with users.Shes an enthusiast of combining data-driven design,real user needs,and accessibility to make perfect-fit digital products.In her spare time,she enjoys road cycling,hiking in the mountains,and painting.Shes a coffee lover and mother of two cats;)Has anything caught your eye?Lets talk ab
207、out the technologies for your eCommerce and get it ready for the years to come.If youre reading this,youre probably getting ready for a big move with your eCommerce technology.Lets discuss your options.We can help you go through all the technologies available on the market,pick the best one for your online store,and deliver a perfect project that will open up new opportunities for your business.Lets talk about your needs at 400+global brands as clients280+eCommerce experts on board11+years on the market1000+delivered projects