Recherche avancée

Sur d’autres sites (5683)

• Homepage Design : Best Practices & Examples

  5 octobre 2022, par Erin

  Did you know users spend about 50 milliseconds deciding if they like your website’s homepage design or not ?

  With billions of websites and scrolling often done on the go, you have to make a strong first impression because the chances for a once-over are slim. 

  Learn how to design magnetically-appealing website homepages from this guide. 

  What is a homepage in web design ?

  Homepage is the front page of your website — a destination where users land when typing your website URL address. It’s located at the root of the website’s domain (e.g., matomo.org) or a subdomain (e.g., university.webflow.com).

  Design-wise a homepage has two goals :

  • Explain the purpose of the website and present overview information 
  • Provide top-level navigation to lower-level web pages (e.g., blog, sales pages, etc.) 

  Separately, a homepage is also the place where users will return each time they’ll feel stuck and want to start anew. Thus, your homepage website design should provide obvious navigation paths to other website areas.

  6 Must-Know Website Homepage Design Best Practices

  Behind every winning homepage design stands a detailed customer journey map. 

  A customer journey is a schematic representation of how site visitors will move around your website to accomplish various goals. 

  A good customer journey map lists different actions a user will take after landing on your website (e.g., browse product pages, save items to a wishlist, register an account, etc.) — and it does so for different audience segments. 

  

  Your homepage design should help users move from the first step on their journey (e.g., learning about your website) to the final one (e.g., converting to a paid customer). At the same time, your homepage should serve the needs of both new and returning visitors — prospects who may be at a different stage of their journey (e.g., consideration). 

  With the above in mind, let’s take a look at several website homepage design ideas and the reasons why they work. 

  1. Use Familiar Design Elements

  Whether you’re designing a new website or refreshing an old one, it’s always tempting to go “out of the box” — use horizontal scrolling, skip header navigation or include arty animations. 

  Bold design choices work for some brands, mainly those who aren’t using their website as a primary sales channel (e.g., luxury brands). 

  But unfamiliar design patterns can also intimidate a lot of shoppers. In one observational study, people were asked to guess where specific content (e.g., information on international calls) would be placed on a telecom website. 75% of users picked the same location. This means two things :

  • People already have expectations of where specific website information is typically placed 
  • Yet, one in four users struggles to identify the right areas even within standard website layouts

  So why make the job harder for them ? As UX consultant Peter Ramsey rightfully notes : 

  The truth is : designing the best experience isn’t about being unique, it’s about being easy. And guess what feels really easy to use ? Things that feel familiar.

  Therefore, analyse other homepage layout designs in your industry. Pay attention to the number and type of homepage screens and approaches to designing header/footer navigation. 

  Take some of those ideas as your “base”. Then make your homepage design on-brand with unique typography, icons, visuals and other graphic design elements.

  Take a cue from ICAM — a steel manufacturing company. Their niche isn’t typically exciting. Yet, their homepage design stops you in your tracks and tinkers your curiosity to discover more (even if you aren’t shopping for metalware). 

  

  The interesting part is that ICAM uses a rather standard homepage layout. You have a hero image in the first screen, followed by a multi-column layout of their industry expertise and an overview of manufacturers. 

  But this homepage design feels fresh because the company uses plenty of white space, bold typography and vibrant visuals. Also, they delay the creative twist (horizontal scrolling area) to the bottom of the homepage, meaning that it’s less likely to intimidate less confident web users. 

  2. Decide On The Optimal Homepage Layout 

  In web design, a homepage layout is your approach to visually organising different information on the screen. 

  Observant folks will notice that good homepage designs often have the same layout. For example, include a split-view “hero” screen with a call to action on the left and visuals (photo or video) on the left. 

  

  The reason for using similar layouts for website homepage design isn’t a lack of creativity. On the contrary, some layouts have become the “best practice” because they :

  • Offer a great user experience (UX) and don’t confuse first-time visitors 
  • Feel familiar and create a pleasurable sense of deja-vu among users 
  • Have proven to drive higher conversion rates through benchmarks and tests 

  Popular types of website homepage layouts : 

  • Single column – a classic option of presenting main content in a single, vertical column. Good choice for blogs, personal websites and simple corporate sites. 
  • Split screen layout divides the page in two equal areas with different information present. Works best for Ecommerce homepages (e.g., to separate different types of garments) or SaaS websites, offering two product types (e.g., a free personal product version and a business edition). 
  • Asymmetrical layout assumes dividing your homepage into areas of different size and styles. Asymmetry helps create specific focal points for users to draw their attention to the most prominent information. 
  • Grid of cards layout helps present a lot of information in a more digestible manner by breaking down bigger bulks of text into smaller cards — a graphic element, featuring an image and some texts. By tapping a card, users can then access extra content. 
  • Boxes are visually similar to cards, but can be of varying shape. For example, you can have a bigger header-width box area, followed by four smaller boxes within it. Both of these website layouts work well for Ecommerce. 
  • Featured image layout gives visuals (photos and videos) the most prominent placement on the homepage, with texts and other graphic design elements serving a secondary purpose. 
  • F-pattern layout is based on the standard eye movement most people have when reading content on the website. Eye tracking studies found that we usually pay the most attention to information atop of the page (header area), then scan horizontally before dripping down to the next vertical line until we find content that captures our attention. 

  User behaviour analytics (UBA) tools are the best way to determine what type of layout will work for your homepage. 

  For example, you can use Matomo Heatmaps and Session Recording to observe how users navigate your homepage, which areas or links they click and what blockers they face during navigation.

  

  Matomo can capture accurate behavioural insights because we track relative positions to elements within your websites. This approach allows us to provide accurate data for users with different browsers, operating systems, zoom-in levels and fonts. 

  The best part ? You can collect behavioural data from up to 100 different user segments to understand how different audience cohorts engage with your product.

  3. Include a One-Sentence Tagline

  A tagline is a one-line summary of what your company does and what its unique sales proposition (USP) is. It should be short, catchy and distinguish you from competitors.

  A modern homepage design practice is to include a call to action in the first screen. Why ? Because you then instantly communicate or remind of your value proposition to every user — and provide them with an easy way to convert whenever they are ready to do business with you. 

  Here’s how three companies with a similar product, a project management app, differentiate themselves through homepage taglines. 

  Monday.com positions itself as an operating system (OS) for work. 

  

  Basecamp emphasises its product simplicity and openly says that they are different from other overly-complex software. 

  

  Asana, in turn, addresses a familiar user pain point (siloed communication) that it attempts to fix with its product. 

  

  Coming up with the perfect homepage tagline is a big task. You may have plenty of ideas, but little confidence in what version will stick. 

  The best approach ? Let a series of A/B tests decide. You can test a roaster of homepage slogans on a rotating bi-weekly/monthly schedule and track how copy changes affect conversion rates. 

  With Matomo A/B test feature, you can create, track and manage all experiments straight from your web analytics app — and get consolidated reports on total page visitors and conversion rates per each tested variation. 

  

  Beyond slogans, you can also run A/B tests to validate submission form placements, button texts or the entire page layout. 

  For instance, you can benchmark how your new homepage design performs compared to the old version with a subset of users before making it publicly available. 

  4. Highlight The Main Tasks For The User

  Though casual browsing is a thing, most of us head to specific websites with a clear agenda — find information, compare prices, obtain services, etc. 

  Thus, your homepage should provide clear starting points for users’ main tasks (those you’ve also identified as conversion goals on your customer journey maps !).

  These tasks can include : 

  • Account registration 
  • Product demo request 
  • Newsletter sign-up 

  The best website homepage designs organically guide users through a set number of common tasks, one screen at a time. 

  Let’s analyse Sable homepage design. The company offers a no-fee bank account and a credit card product for soon-to-be US transplants. The main task a user has : Decide if they want to try Sable and hopefully open an account with them. 

  

  This mono-purpose page focuses on persuading a prospect that Sable is right for them. 

  The first screen hosts the main CTA with an animated drop-down arrow to keep scrolling. This is likely aimed at first-time visitors that just landed on the page from an online ad or social media post. 

  The second screen serves the main pitch — no-fee, no-hassle access to a US banking account that also helps you build your credit score. 

  The third screen encourages users to learn more about Sable Credit — the flagship product. For the sceptics, the fourth screen offers several more reasons to sign up for the credit product. 

  Then Sable moves on to pitching its second offering — a no-fee debit card with a cashback. Once again, the follow-up screen sweetens the deal by bringing up other perks (higher cashback for popular services like Amazon) and overcoming objections (no SSN required and multi-language support available). 

  The sequence ends with side-by-side product comparison and some extra social proof. 

  In Sable’s case, each homepage screen has a clear purpose and is designed to facilitate one specific user action — account opening. 

  For multi-product companies, the above strategy works great for designing individual landing pages. 

  5. Design Proper Navigation Paths

  All websites have two areas reserved for navigation : 

  • Header menu 
  • Footer menu 

  Designing an effective header menu is more important since it’s the primary tool visitors will use to discover other pages. 

  Your header menu can be :

  • Sticky — always visible as the person keeps scrolling. 
  • Static — e.g., a hidden drop-down menu. 

  If you go for a static header and have a longer homepage layout (e.g., 5+ screens), you also need to add extra navigation elements somewhere mid-page. Or else users might not figure out where to go next and merely bounce off. 

  You can do this by : 

  • Promoting other areas of your website (e.g., sub-category pages) by linking out to them 
  • Adding a carousel of “recent posts”, “recommended reads” and “latest products” 
  • Using buttons and CTAs to direct users towards specific actions (e.g., account registration) or assets (free eBook)

  For instance, cosmetics brand Typology doesn’t have a sticky header on the homepage. Instead, they prompt discovery by promoting different product categories (best sellers, bundles, latest arrivals) and their free skin diagnostic quiz — a great engagement mechanism to retain first time users.

  

  Once the user scrolls down to the bottom of the page, they should have an extra set of navigational options — aka footer links. 

  Again, these help steer the visitor towards discovering more content without scrolling back up to the top of your homepage. 

  Nielsen Norman Group says that people mostly use footers as :

  • A second chance to be convinced — after reading the entire homepage, the user is ready to give your product a go.
    
  • The last resort for hard-to-find content that’s not displayed in global header navigation (e.g., Terms and Conditions or shipping information pages).

  As a rule of thumb, you should designate the following information to the footer : 

  • Utility links (Contact page, Terms & Conditions, Privacy Policy, etc.) 
  • Secondary-task links (e.g., Career page, Investor Details, Media contacts, etc.) 
  • Brands within the organisation (if you operate several) 
  • Customer engagement link (email newsletters and social media buttons)

  The key is to keep the area compact — not more than one standard user screen resolution of 1280×720. 

  6. Show Users What’s Clickable (Or Not) 

  A homepage invites your site visitors on a journey. But if they don’t know which elements to click, they aren’t going to get anywhere.

  Good homepage design makes it obvious which page elements are clickable, i.e., can take the user to a new page or another segment of the homepage. 

  Here are several must-know homepage design tips for better on-page navigation : 

  • Use colour and underline or bold to highlight clickable words. Alternatively, you can change the browser cursor from a standard arrow into another element (e.g., a larger dot or a pointy finger) to indicate when the cursor hovers over a clickable website area. 
  • Make descriptive button texts that imply what will happen when a user clicks the page. Instead of using abstract and generic button texts like “see more” or “learn more”, try a more vibrant language like “dive in” for clicking through to a spa page. 
  • Use a unified hover area to show how different homepage design elements represent a single path or multiple navigation paths. When multiple items are encapsulated in one visual element (e.g., a box), users may be reluctant to click the image because they aren’t sure if it’s one large hit area leading to a single page or if there are multiple hit areas, leading to different pages. 

  Homepage of BEAUSiTE — a whimsical hotel in the Swiss Alps – embodies all of the above design principles. They change the cursor style whenever you scroll into a hit area, use emotive and creative micro-copy for all button texts and clearly distinguish between different homepage elements.

  

  How to Make Your Homepage Design Even More Impactful ? 

  Website homepage design is roughly 20% of pure design work and 80% of behind-the-scenes research. 

  To design a high-performing homepage you need to have data-backed answers to the following questions : 

  • Who are your primary and secondary target audiences ? 
  • Which tasks (1 to 4) you’d want to help them solve through your homepage ?

  You can get the answers to both questions from your web analytics data by using audience segmentation and page transition (behaviour flow) reports in Matomo. 

  Based on these, you can determine common user journeys and tasks people look to accomplish when visiting your website. Next, you can collect even more data with UBA tools  like heatmaps and user session recordings. Then translated the observed patterns into working homepage design ideas. 

  Improve your homepage design and conversion rates with Matomo. Start your free 21-day trial now ! 

  21 day free trial. No credit card required.

  Your email address
  

  Your website address
  

  Your Analytics subdomain will be .matomo.cloud (

• 10 Matomo Features You Possibly Didn’t Know About

  28 octobre 2022, par Erin

  Most users know Matomo as the privacy-focussed web analytics tool with data accuracy, superior to Google Analytics. 

  And we’re thrilled to be that — and more ! 

  At Matomo, our underlying product vision is to provide a full stack of accurate, user-friendly and privacy-mindful online marketing tools. 

  Over the years, we’ve expanded beyond baseline website statistics. Matomo Cloud users also get to benefit from additional powerful tools for audience segmentation, conversion optimisation, advanced event tracking and more. 

  Here are the top 10 advanced Matomo features you wish you knew about earlier (but won’t stop using now !). 

  Funnels

  At first glance, most customer journeys look sporadic. But every marketer will tell you that there is a method to almost every users’ madness. Or more precisely — there’s a method you can use to guide users towards conversions. 

  That’s called a customer journey — a schematic set of steps and actions people complete from developing awareness and interest in your solution to consideration and finally conversion.

  On average, 8 touchpoints are required to turn a prospect into a customer. Though the number can be significantly bigger in B2B sales and smaller for B2C Ecommerce websites. 

  With the Funnels feature, you can first map all the on-site touchpoints (desired actions) for different types of customers. Then examine the results you’re getting as prospects move through these checkbox steps.

  Funnel reports provide :

  • High-level metrics such as “Funnel conversion rate”, “Number of funnel conversions”, “Number of funnel entries”. 
  • Drilled-down reports for each funnel and each tracked action within it. This way you can track the success rates of each step and estimate their contribution to the cumulative effect.

  Segmented funnel reports for specific user cohorts (with Matomo Segmentation enabled).

  

  What makes funnels so fun (pun intended) ? The variety of use cases and configurations ! 

  You can build funnels to track conversion rates for :

  • Newsletter subscriptions
  • Job board applications 
  • Checkout or payment 
  • Product landing pages
  • Seasonal promo campaigns

  …. And pretty much any other page where users must complete a meaningful action. So go test this out. 

  Form Analytics

  On-site forms are a 101 tactic for lead generation. For most service businesses, a “contact request” or a “booking inquiry” submission means a new lead in your pipeline. 

  That said : the average on-site form conversion rates across industries stand at below 50% : 

  • Property – 37% 
  • Telecoms – 40%
  • Software — 46.83%

  That’s not bad, but it could be better. If only you could figure out why people abandon your forms….

  Oh wait, Matomo Form Analytics can supply you with answers. Form Analytics provide real-time information on key form metrics — total views, starter rate, submitter rate, conversions and more.

  

  Separately the average form hesitation time is also provided (in other words, the time a user contemplates if filling in a form is worth the effort). Plus, Matomo also tracks the time spent on form submission.

  You can review : 

  • Top drop-off fields – to understand where you are losing prospects. These fields should either be removed or simplified (e.g., with a dropdown menu) to increase conversions.
  • Most corrected-field – this will provide a clear indication of where your prospects are struggling with a form. Providing help text can simplify the process and increase conversions. 
  • Unesserary fields – with this metric, you’ll know which optional fields your leads aren’t interested in filling in and can remove them to help drive conversions. 

  With Form Analytics, you’ll be able to boost conversions and create a better on-site experience with accurate user data. 

  A/B testing

  Marketing is both an art and a science. A/B testing (or split testing) helps you statistically verify which creative ideas perform better. 

  A good conversion rate optimisation (CRO) practice is to test different elements and to do so often to find your top contenders.

  What can you split test ? Loads of things :

  • Page slogans and call-to-actions 
  • Button or submission form placements
  • Different landing page designs and layouts
  • Seasonal promo offers and banners
  • Pricing information 
  • Customer testimonial placements 

  More times than not, those small changes in page design or copy can lead to a double-digit lift in conversion rates. Accounting software Sage saw a 30% traffic boost after changing the homepage layout, copy and CTAs based on split test data. Depositphotos, in turn, got a 9.32% increase in account registration rate (CR) after testing a timed pop-up registration form. 

  The wrinkle ? A/B testing software isn’t exactly affordable, with tools averaging $119 – $1,995 per month. Plus, you then have to integrate a third-party tool with your website analytics for proper attribution — and this can get messy.

  Matomo saves you the hassle in both cases. An A/B testing tool is part of your Cloud subscription and plays nicely with other features — goal tracking, heatmaps, historic visitor profiles and more. 

  You can run split tests with Matomo on your websites or mobile apps — and find out if version A, B, C or D is the top performer. 

  

  Advertising Conversion Exports

  A well-executed search marketing or banner remarketing campaign can drive heaps of traffic to your website. But the big question is : How much of it will convert ?

  The AdTech industry has a major problem with proper attribution and, because of it, with ad fraud. 

  Globally, digital ad fraud will cost advertisers a hefty $8 billion by the end of 2022. That’s when another $74 million in ad budgets get wasted per quarter. 

  The reasons for ad budget waste may vary, but they often have a common denominator : lack of reliable conversion tracking data.

  Matomo helps you get a better sense of how you spend your cents with Advertising Conversion Reports. Unlike other MarTech analytics tools, you don’t need to embed any third-party advertising network trackers into your website or compromise user privacy.

  Instead, you can easily export accurate conversion data from Matomo (either manually via a CSV file or automated with an HTTPS link) into your Google Ads, Microsoft Advertising or Yandex Ads for cross-validation. This way you can get an objective view of the performance of different campaigns and optimise your budget allocations accordingly. 

  Find out more about tracking ad campaigns with Matomo.

  Matomo Tag Manager

  The marketing technology landscape is close to crossing 10,000 different solutions. Cross-platform advertising trackers and all sorts of customer data management tools comprise the bulk of that growing stack. 

  Remember : Each new tool embed adds extra “weight” to your web page. More tracking scripts equal slower page loading speed — and more frustration for your users. Likewise, extra embeds often means dialling up the developer (which takes time). Or tinkering with the site code yourself (which can result in errors and still raise the need to call a developer). 

  With Tag Manager, you can easily generate tags for :

  • Custom analytics reports 
  • Newsletter signups
  • Affiliates 
  • Form submission tracking 
  • Exit popups and surveys
  • Ads and more

  With Matomo Tag Manager, you can monitor, update or delete everything from one convenient interface. Finally, you can programme custom triggers — conditions when the tag gets activated — and specify data points (variables) it should collect. The latter is a great choice for staying privacy-focused and excluding any sensitive user information from processing. 

  With our tag management system (TMS), no rogue tags will mess up your analytics or conversion tracking. 

  Session recordings

  User experience (UX) plays a pivotal role in your conversion rates. 

  A five-year McKinsey study of 300 publicly listed companies found that companies with strong design practices have 32 percentage points higher revenue growth than their peers. 

  But what makes up a great website design and browsing experience ? Veteran UX designers name seven qualities :

  

  To figure out if your website meets all these criteria, you can use Session Recording — a tool for recording how users interact with your website. 

  By observing clicks, mouse moves, scrolls and form interactions you can determine problematic website design areas such as poor header navigation, subpar button placements or “boring” blocks of text. 

  Such observational studies are a huge part of the UX research process because they provide unbiased data on interaction. Or as Nielsen Norman Group puts it :

  “The way to get user data boils down to the basic rules of usability :

  • Watch what people actually do.
  • Do not believe what people say they do.
  • Definitely don’t believe what people predict they may do in the future.” 

  Most user behaviour analytics tools sell such functionality for a fee. With Matomo Cloud, this feature is included in your subscription. 

  Heatmaps

  While Session Replays provide qualitative insights, Heatmaps supply you with first-hand qualitative insights. Instead of individual user browsing sessions, you get consolidated data on where they click and how they scroll through your website. 

  

  Heatmaps are another favourite among UX designers and their CRO peers because you can :

  • Validate earlier design decisions around information architecture, page layout, button placements and so on. 
  • Develop new design hypotheses based on stats and then translate them into website design improvements. 
  • Identify distractive no-click elements that confuse users and remove them to improve conversions. 
  • Locate problematic user interface (UI) areas on specific devices or operating systems and improve them for a seamless experience.

  To get even more granular results, you can apply up to 100 Matomo segments to drill down on specific user groups, geographies or devices. 

  This way you can make data-based decisions for A/B testing, updating or redesigning your website pages. 

  Custom Alerts

  When it comes to your website, you don’t want to miss anything big — be it your biggest sales day or a sudden nosedive in traffic. 

  That’s when Custom Alerts come in handy. 

  

  With a few clicks, you can set up email or text-based alerts about important website metrics. Once you hit that metric, Matomo will send a ping. 

  You can also set different types of Custom Alerts for your teams. For example, your website administrator can get alerted about critical technical performance issues such as a sudden spike in traffic. It can indicate a DDoS attack (in the worst case) — and timely resolution is crucial here. Or suggest that your website is going viral and you might need to provision extra computing resources to ensure optimal site performance.

  Your sales team, in turn, can get alerted about new form submissions, so that they can quickly move on to lead scoring and subsequent follow-ups. 

  Use cases are plentiful with this feature. 

  Custom Dashboards and Reports

  Did you know you can get a personalised view of the main Matomo dashboards ? 

  By design, we made different website stats available as separate widgets. Hence, you can cherry-pick which stats get a prominent spot. Moreover, you can create and embed custom widgets into your Matomo dashboard to display third-party insights (e.g., POS data).

  Set up custom dashboard views for different teams, business stakeholders or clients to keep them in the loop on relevant website metrics. 

  

  Custom Reports feature, in turn, lets you slice and dice your traffic analytics the way you please. You can combine up to three different data dimensions per report and then add any number of supported metrics to get a personalised analytics report.

  For example, to zoom in on your website performance in a specific target market you can apply “location” (e.g., Germany) and “action type” (e.g., app downloads) dimensions and then get segmented data on metrics such as total visits, conversion rates, revenue and more. 

  Get to know even more ways to customise Matomo deployment.

  Roll Up Report

  Need to get aggregated traffic analytics from multiple web properties, but not ready to pay $150K per year for Google Analytics 360 for that ?

  We’ve got you with Roll-Up Reporting. You can get a 360-degree view into important KPIs like global revenue, conversion rates or form performance across multiple websites, online stores, mobile apps and even Intranet properties.

  

  Setting up this feature takes minutes, but saves you hours on manually exporting and cross-mapping data from different web analytics tools. 

  Channel all those saved hours into more productive things like increasing your conversion rates or boosting user engagement. 

  Avoid Marketing Tool Sprawl with Matomo 

  With Matomo as your website analytics and conversion optimisation app, you don’t need to switch between different systems, interfaces or have multiple tracking codes embedded on your site.

  And you don’t need to cultivate a disparate (and expensive !) MarTech tool stack — and then figure out if each of your tools is compliant with global privacy laws.

  All the tools you need are conveniently housed under one roof. 

  Want to learn more about Matomo features ? Check out product training videos next ! 

  21 day free trial. No credit card required.

  Your email address
  

  Your website address
  

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

  Choose your analytics subdomain
  

  .matomo.cloud

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

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

  » Start improving your websites now

  

• Accessibility Testing : Why It Matters and How to Get Started

  7 mai 2024, par Erin

  Nearly 96% of website homepages had failures with meeting web accessibility criteria in 2024. Aside from not complying with web accessibility laws and regulations, companies are failing a growing number of users with accessibility needs.

  With disabilities, chronic illnesses and ageing populations all rising, brands need to take accessibility more seriously. 

  In this article, we explain why accessibility testing is so important and how you can get started today.

  What is accessibility testing ?

  Accessibility testing optimises digital experiences to make them accessible for users with a range of disabilities and impairments. This includes users with vision impairments, hearing loss, neurodivergence, motor disabilities and cognitive conditions.

  The goal is to create inclusive experiences for everyone by implementing UX principles that address the usability needs of diverse audiences.

  To help developers create accessible experiences, the World Wide Web Consortium (W3C) created the Web Content Accessibility Guidelines (WCAG). The international WCAG standards define the Four Principles of Accessibility :

  • Perceivable : Information and user interface components must be presentable to users in ways they perceive.

  • Operable : User interface components and navigation must be operable.

  • Understandable : Information and the operation of user interfaces must be understandable.
  • Robust : Content must be robust enough to be interpreted reliably by various user agents, including assistive technologies.

  

  The current version of WCAG (2.2) contains 86 success criteria with three grades representing conformance levels :

  • Level A is the minimum conformance rating, indicating that web content is accessible to most users.

  • Level AA is the recommended conformance level to make content accessible to almost everyone, including users with severe disabilities.
  • Level AAA is the highest conformance rating, making content accessible to everyone, regardless of disability.

  

  Why is accessibility testing important ?

  With record numbers of lawsuits over online accessibility cases, it’s clear that companies underestimate the importance of accessibility testing. Here are seven key reasons you should pay more attention to it :

  1. Create inclusive experiences : Above all, accessibility testing creates inclusive experiences for all users.
  2. Adhere to accessibility regulations : Accessibility laws in most major markets — including the EU web accessibility policy — make it illegal for companies to discriminate against users with disabilities.
  3. Social responsibility : Companies have an ethical responsibility to cater to all users and consumers. 57% say they’re more loyal to brands that commit to addressing social inequities.
  4. Accessibility needs are growing : 16% of the world’s population (1 in 6) experience significant disability and the number will continue to grow as ageing populations rise.
  5. Improve experiences for everyone : Accessibility improves experiences for all users — for example, 80% of UK viewers aged 18-25 (2021) watch content with subtitles enabled.
  6. Maximise marketing reach : Platforms like Google prioritise accessibility yearly, making accessible content and experiences more visible.
  7. Accessibility is profitable : Inclusive companies earn 1.6x more revenue, 2.6x more net income and 2x more profit, according to Accenture (PDF).

  

  Who needs inclusive UX ?

  Accessibility testing starts with understanding the usability needs of audiences with disabilities and impairments. Here’s a quick summary of the most common impairments and some of the needs they have in common :

  • Visual impairments : Users may rely on screen readers, magnification software, braille displays, etc. or require certain levels of contrast, text sizes and colour combinations to aid visibility.
  • Hearing impairments : Users may rely on closed captions and subtitles for video content, transcripts for multimedia content and visual alerts/notifications for updates.
  • Motor or mobility impairments : Users might rely on adaptive keyboards, voice recognition and other assistive devices.
  • Cognitive and neurological impairments : Users may rely on technologies like text-to-speech software or require simplified user interfaces, contrast designs, etc., to aid comprehension.
  • Speech impairments : Users may rely on speech recognition and dictation software for any interaction that requires them to speak (e.g., automated customer service machines).

  While accessibility tools can alleviate certain accessibility challenges, inclusive design can remove much of the burden from users. This can involve using plenty of contrast, careful font selection, increasing whitespace and plenty of other design choices.

  Refer to the latest version of the WCAG for further guidance.

  How to run accessibility testing

  Now that we’ve emphasised the importance of accessibility, let’s explain how you can implement your own accessibility testing strategy.

  Create your accessibility testing plan

  Careful planning is crucial for making accessibility testing affordable and profitable. This starts with identifying the assets you need to test and optimise. This may include :

  • Website or web app
  • Mobile app
  • Videos
  • Podcasts and audio
  • PDFs
  • Marketing emails

  Map out all the assets your target audience interacts with and bring them into your accessibility testing plan. Optimising your website for screen readers is great, but you don’t want to forget your marketing emails and exclude vision-impaired users.

  Once you’ve got a complete list of assets, identify the elements and interactions with each one that require accessibility testing. For example, on your website, you should optimise navigation, user interfaces, layouts, web forms, etc.

  You also need to consider the impact of device types. For example, how touchscreens change the experience for motor impairments.

  Now that you know the scope of your testing strategy, it’s time to define your accessibility standards. Use external frameworks like WCAG guidelines and relevant legal requirements to create an internal set of standards.

  Once your accessibility standards are complete, train your staff at every level. This includes designers, developers, and content creators — everyone who works on assets is included in your accessibility testing strategy.

  Implement your accessibility standards throughout the design and development phases. Aim to create the most inclusive experiences possible before the accessibility testing stage.

  Implement accessibility practices at every level

  Treating accessibility as an afterthought is the biggest mistake you can make. Aside from neglecting the importance of accessibility, it’s simply not affordable to create assets and then optimise them for accessibility.

  Instead, you need to implement accessibility standards in every design and development stage. This way, you create inclusive assets from the beginning, and accessibility testing flags minor fixes rather than overhauls.

  By extension, you can take lessons from accessibility tests and update your accessibility standards to improve the quality of future assets.

  Set clear specifications in your accessibility standards for everyone to follow. For example, content publishers should be responsible for adding alt-text to all images. Make designers responsible for following contrast guidelines when optimising elements like CTA buttons.

  

  Next, managers can review assets and check for accessibility standards before anything is signed off. This way, you achieve higher test accessibility scores, and most fixes should be minor.

  This is the key to making accessibility testing manageable and profitable.

  Automate accessibility testing

  Automation is the other big factor in making accessibility efficient. With the right tools, you can run tests periodically without any manual workload, collecting data and flagging potential issues at almost no cost.

  For example, you can run automated accessibility tests on your website every month to check for common issues. This might flag up pages without alt-text for images, colour issues on a new batch of landing pages or a sudden drop in mobile loading times.

  Every automated test you can run reduces the manual workload of optimising accessibility. This frees up more time for the manual tests that require the attention of accessibility experts. 

  • Free up time for accessibility tasks that require manual testing
  • Identify issues with new content, assets, code, etc. faster
  • Run automated accessibility testing on new CRO changes

  Schedule manual accessibility reviews

  While it’s important to automate as much accessibility testing as possible, most accessibility standards require some form of manual testing. If we use the WCAG standards as a guideline, more than 70% of success require manual review and verification, including :

  • Testing websites with a screen reader
  • Navigating apps by only using a keyword
  • Quality assessing closed captions and subtitles
  • Testing web forms for people using speech input
  • Checking conversion actions for users with mobility issues (CTAs, forms, payments, etc.)

  Yes, you can automatically check all images for alt-text, but simply providing alt-text isn’t enough. You also have to review alt-text to make sure they’re descriptive, accurate and informative about the experience.

  Once again, the best way to minimise your time spent on manual testing is to implement accessibility standards throughout design and development. Train your content publishers to create alt-text that meets your criteria and editors to review them before pieces are signed off. 

  This way, you should always have the required alt-text before the content reaches the accessibility testing stage. The same applies to video transcriptions, web forms, website navigation, etc.

  Building a culture of accessibility makes the testing process as efficient as possible.

  What tools do you need for accessibility testing ?

  Now that we’ve covered the key essentials of accessibility testing, let’s look at some of the best accessibility testing tools to help you implement your strategy.

  accessiBe : AI-powered accessibility testing automation

  accessiBe is an accessibility testing automation and management system. It incorporates two core products : accessWidget for automating UI accessibility and accessFlow as an all-in-one solution for developers.

  

  Key features :

  • Automated accessibility testing
  • Accessibility widget for easy optimisation
  • Product accessibility for web, mobile and native apps
  • AI-powered accessibility insights
  • Compliance with WCAG, EAA and more

  As explained earlier, automation is crucial for making accessibility testing efficient and profitable. With accessiBe, you can automate the first line of accessibility checks so testers only need to get involved when manual action is necessary.

  Maze : Intelligent usability testing software

  Maze is a usability testing system that uses AI and automation to enhance traditional qualitative testing. You can run automated tests on live websites, capture survey feedback and recruit users to test experiences with real people.

  

  Key features :

  • Live website testing
  • Feedback surveys
  • Usability interviews
  • Test recruitment
  • Automated analysis

  While traditional usability interviews can provide in-depth insights, they’re expensive, time-consuming and difficult to run at scale. Maze’s solution is a hybrid testing system that automates data capture and analysis while supporting real user testing in one system.

  Matomo : Empowering people with ethical web analytics

  Matomo is a web analytics solution that gives you 100% data ownership while respecting user privacy. Think of this as a Google Analytics alternative that doesn’t use your visitors’ data for advertising purposes.

  

  Key features :

  • Privacy-friendly and GDPR-compliant tracking
  • Conversion rate optimisation features like heatmaps, session recordings, A/B testing and more
  • Accurate, unsampled data – see 40-60% more data than other analytics tools that sample data
  • Open-source

  Accessibility starts with creating quality experiences for everyone. Matomo reliably captures 100% of the data you need to optimise experiences without losing their trust. Instead of handing their personal info to Google or other tech giants, you retain full data ownership — fully compliant with GDPR, CCPA, etc.

  Try Matomo free for 21-days (no credit card required), or speak to our sales team for more info on how Matomo can enhance your site’s user experience and support your accessibility testing strategy.

  Try Matomo for Free

  Get the web insights you need, without compromising data accuracy.

  Start for free

  No credit card required

  UserTesting : Video-based user testing software

  UserTesting is the more traditional system for running usability tests with real people. The platform helps you recruit users and manage usability tests with a series of sessions and video interviews.

  

  Key features :

  • Usability testing
  • Test recruitment
  • Live interviews
  • AI-powered insights
  • Usability services

  UserTesting is a slower, more expensive approach to testing experiences, but its video-based interviews allow you to have meaningful conversations with real users.

  Siteimprove : WCAG compliance testing

  Siteimprove automates website testing, accessibility and optimisation. It includes dedicated tools for checking WCAG and DCI compliance with an automated scoring system. This helps you keep track of scores and identify any accessibility and usability issues faster.

  

  Key features :

  • Automated accessibility checks
  • Inclusivity scores
  • Accessibility recommendations
  • Accessibility tracking
  • Marketing and revenue attribution
  • Usability insights

  Siteimprove provides a first line of accessibility testing with automated checks and practical recommendations. It also tracks accessibility scores, including ratings for all three WCAG compliance levels (A, AA and AAA).

  Find the value in accessibility testing

  Accessibility testing isn’t only a moral obligation ; it’s good business. Aside from avoiding fines and lawsuits, inclusive experiences are increasingly profitable. User bases with accessibility needs are only growing while non-disabled audiences are using accessibility resources like subtitles and transcripts in greater numbers.

  Accessibility improves everyone’s experiences, and this only does good things for conversion rates, revenue and profit.

  Start building your datasets for accessibility testing today with a Matomo 21-day free trial — no credit card required. Gain 100% ownership over your analytics data while complying with GDPR and other data privacy regulations.

  Try Matomo for Free

  21 day free trial. No credit card required.

  
  

  Your email address
  

  Your website address
  

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

  Choose your analytics subdomain
  

  .matomo.cloud

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

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

  Start improving your websites now