You either ride the wave or drown in it (yes, I am talking about the new e-commerce reality that COVID-19 has brought). So, you’ve decided to go ahead and open up your own online shop and you ask yourself: “Why would I use Shopify?”
Why not... BigCommerce, for instance?
And you know that going through this digital transformation is going to be painfully challenging since you’ll need to:
go through the entire process of building your online store (obviously!)
make sure the servers will withstand huge (hopefully) amounts of traffic
actually ship your products
handle those scenarios where customers return their products
handle all the marketing of your online business
…
With so much on your plate, the last thing you need is a complex or a too rigid eCommerce platform.
One that would make setting up and managing your store even more cumbersome.
But still: why Shopify?
Here’s why:
1. You Can Start Your Own Shopify Store with… Zero Technical Skills
And this is one of the key reasons why it’s the best eCommerce website builder, particularly for small businesses.
Shopify handles all the technical stuff for you: backups, security, web hosting, updates.
Unless you need some more advanced features than the ones it provides you with out of the box.
Otherwise, you’re good to go: you can set up your store in no time, with no computer science degree.
Talking about empowering entrepreneurs, right?
2. “Why Would I Use Shopify?” Because It’s the Easiest to Use
The question "Can I build my own eCommerce website?” has one simple answer:
Definitely!
With Shopify, you can set up your storefront and start loading in products in a few hours.You have an intuitive interface “at your service”, enabling you to get everything up and running with… no single line of code.
It’s conveniently easy to use, with your store ready to go pretty much right out of the box.
3. You Get Everything You Need to Run Your eCommerce Business
And I’m talking here about:
web hosting
deep insights into your customer behavior via its easy to navigate dashboard (Are they abandoning carts? How long are they hanging out in your online shop? Which social media channels do most converted customers come from?)
advice on the measures you could take to boost your sales
transaction management
a dedicated payment gateway: Shopify Pay (while it also integrates smoothly with Amazon Pay, PayPal, Stripe, Worldpay)
integrations with Google and Facebook and other platforms, as well
In short, Shopify takes care of everything online store management-related for you.
4. You Get a Fast and Low-Cost Shipping Service
“Why would I use Shopify for my eCommerce store?”
Because you get access to a network of thousands of third-party logistics providers.
And this is gold particularly for small eCommerce businesses (with big plans), who don’t have a global logistics network.
In this respect, Shopify Fulfillment Network taps into machine learning to guarantee you deliveries on time (two-day shipping) and lower costs for your shipping.
And speaking of shipping (and empowering eCommerce businesses), you’re free to choose the shipping option that best suits your needs:
by product weight
by delivery speed
by the region on the globe that you’re shipping to
5. You Get a Large Collection of Apps to Add More Functionality to Your Store
It’s what makes Shopify one of the most “tempting” eCommerce platforms:
You get to start small, using its built-in features, then… scale up, adding more power to your eCommerce business via add-on apps.
And, thank God, there are thousands of them in the Shopify App Store.
Ranging from:
reviews sections
to chat feature
to the feature of converting prices to international currency
to email marketing tools (if your chosen theme doesn’t already provide you with such a feature)
… you can browse, choose, and add any type of new functionality that you need to “inject” into your web store.
And since scanning through such a rich collection of third-party apps can get overwhelming, just make sure you go with the best-rated ones. It’s the best criterion to filter them by.
6. You Get a Whole Range of SEO Tools to Rank Your Store Higher in Search
“Why would I use Shopify to create my online store?”
Because it “spoils” you with a heavy load of built-in SEO tools to help your store get found:
it prompts you with SEO best practices whenever you add a new product to your catalog
you get header code and custom URL
multilingual options
reporting tools
blogging
7. You Get a Rich Collection of Themes, Specifically Designed for eCommerce
This is another strong reason why Shopify’s still one of the most popular eCommerce website builders.
It provides you with one of the most impressive collections of stylish, clean, professionally designed themes.
Themes that you get to browse through by:
industry: food and beverage, art and photography, home decor, etc.
price
popularity
style: “fun and lively”, “minimalist”, “great for small inventories”
Good to know! The Shopify Express theme is the theme to go for if you need to get your store online… yesterday. If you don’t have tons of images for your product catalog and you need to get online fast, this theme’s the one for you.
When it comes to built-in features, all Shopify themes ship with:
social media icons
drop-down navigation support
free stock photos by Burst
SEO
customizable content sections on the home page
mobile-friendly design
free theme updates
built-in styles and color palettes
Prioritize those themes that ship with features that are critical for your store over the great looking ones that… lack them.
Otherwise, you’ll need to look for (and pay for) Shopify apps to compensate for the missing features.
In other words:
Why not make your life easier from day one, going for a theme that helps you check most of the features off you wishlist?
You’ll find it more… natural and easier to design your product pages around your products, then to style them with no products to feature.
The END!
Are these reasons strong enough to answer your question: “Why would I use Shopify for my online store?”.
But what if you’re not that thrilled about the idea of a DIY store?
Maybe you don’t have the time (or you simply want to invest it in other projects) to get into the nitty-gritty of building your own online store, from A to Z
Or what if you:
need a fully custom Shopify app for your store? One that should store a particular functionality that you need incorporated into your shop?
… or maybe a theme that’s tailor-made to suit your specific business needs and to do your brand justice?
want to customize your product page or your checkout form?
We’re here to help you make the most of Shopify and fine tune it to your needs.
Just drop us a line and let’s build your powerful online presence.
Image by Akash Sanchihar from Pixabay
Adriana Cacoveanu / Jul 13'2020
Users come to your website. They start the checkout process and... leave. Why is that? Is there a "best practice" process to identify the pain points in the user journey? A website UX audit checklist that you could use?
And how would you know:
what to include in your audit?
what pages to review?
how to interpret all the collected data and turn it into actionable insights?
You've got the questions, we've got the answers.
And we've included them all in an 11-point checklist to run whenever you want to assess the user experience on your website:
What Is a UX Audit More Precisely?
Source: process.st
Let's go back to the example above:
You notice that visitors on your website keep abandoning their shopping cart.
In this case, a website UX audit might uncover specific flaws in the customer journey responsible for this low conversion rate:
confusing navigation structure
cluttered screens
a too complicated checkout process
an inconsistent visual style across pages
not enough payment options
In other words:
A UX audit helps you identify all those usability challenges with a direct impact on users' experience.
key elements on your website that are too hard to find
... or too hard to use
the workflow users are to perform is not that obvious and intuitive
And it helps you find your answers to legitimate questions like:
What is working and what isn't?
What metrics are your collecting and what metrics should you be collecting?
What does the gathered data tell you about your website users' needs?
Why do they behave the way they do and how might they behave once you've taken follow-up action?
In short: a UX audit provides you with those metrics which, once turned into updates to your website, help you boost conversions.
Step 1: Run Stakeholder Interviews and User Surveys
Start off by talking to your:
development team, the one in charge with all the UX improvements on your website; ask them about their development challenges, future plans with the company website, and specific requirements for achieving those plans
marketing team and salespeople, who might already have their own user survey results collected along the years
Then, run your own updated user surveys and categorize results by:
task
severity
findings per screen
Tip! Run usability tests to filter through the qualitative data collected on these interviews and surveys. For instance, users might report a discouragingly complex checkout process. A usability test will confirm or disprove this claim.
Step 2: Create Your User Persona- A Key Point in the Website UX Audit Checklist
Who are you improving your website UX for?
And there are different types of users visiting your website and each user type stands for a unique way that you could improve the user experience delivered there.
To narrow down your options, you need to figure out who's the most representative user for your website.
Remember to add these 3 key attributes to your user persona as you're building its profile:
user goals: do they align with your business goals?
needs: what does he/she try to accomplish when visiting your website?
frustrations: things to avoid when designing this user persona's experience on your website
Tip! Bring your business goals (that we'll be focusing on at Step 3) into the picture, as they'll help you determine who your user persona is.
Also, while at this stage in your UX audit, answer these 3 crucial questions:
what are your visitors' demographics and behaviors on your website
where do they come from to your site?
are current visitors also your target users?
Step 3: Get Specific with Your Business Goals
Let me guess:
Your business goals tied to your website are related to conversions and revenue.
At this step of the audit, you'll want to clearly define those goals that a better UX can directly impact.
Once you've defined your business goals, include these key questions into your website UX audit checklist:
What's my business goal?
What's the key user goal?
What actions do I want users to perform on my website?
What are the top brand values that I want to communicate to my website visitors?
What are my key sales channels?
Who are my top competitors?
Step 4: Perform a Cognitive Walkthrough of Your Website
... to see things through the visitors' eyes.
Try to perform those actions that users come to your website for.
And stay vigilant to detect any obstacles that might stop you or slow you down when trying to achieve your "user" goals.
Tip! Since you already know all too well how your website works, base the whole process on established criteria. This way, you can keep your focus on those user goals.
Step 5: Dive Deep into Your Data Analytics
Your website analytics reports make some great insights into how great or... less than great the user experience delivered on your site is.
Use it to "fuel" your UX audit with, as it'll provide you with key information on:
conversion or cart abandonment
what visitors were doing before accessing your website (most common entry points to your website)
specific user flows on your site
traffic metrics
hotspots on your website
Tip! Filter your data analytics by specific segments and timeframes.
Source: uxbooth.com
Supplement the valuable data that you get from Google Analytics with reports provided by tools like:
Kissmetrics
Hotjar
Crazy Egg
Step 6: Determine Your Conversion Rate Performance
Is your website an eCommerce one?
Then you'll want to take a close look at your sales and download figures as you try to improve your site with a UX audit.
Figure out how well your website copy supports the overall user experience and whether your website meets visitors' pain points.
Step 7: Identify Your Highest Converting Pages
Another crucial point to add to your website UX audit checklist.
Why?
Because the pages with the highest conversion rate give you an insight into what UX is doing right on your website.
They stand for some successful customer journeys that you'll want to get inspired by and... replicate on other pages on your site, as well.
Step 8: List Your High-Traffic Pages with a High Bounce Rate
"How to perform a UX audit?"
One of the essential tasks to add to your "To Do" list is identifying those high-traffic pages with a high bounce rate (above 70%).
Step 9: Identify Strong Points and... Pain Points in the User Journey
Where does the user step off the intended path?
Why is he/she failing to take action?
It's the strong points in the customer journey (those high-converting pages that you've listed at Step 7 are the best places to look for them) that'll provide you with the best solutions for fixing the weak points identified at this step.
Step 10: Take a Close Look at Your Site Layout
Your website layout is directly "responsible" for a great deal of the user experience delivered on your website.
So, at this point in your website UX audit checklist you'll want to check specific aspects of your site layout with a direct impact on the visitors' experience:
Does it manage to meet visitors' needs?
Is your website navigation intuitive enough and easy to use?
Is your on-site search accessible enough?
Is your website copy in line with the user journey?
Step 11: Run a Competitive Analysis
How will this help you?
You identify your target customers' expectations when interacting with websites similar to yours. That sell the same type of products or services.
What's those sites' traffic compared to yours? How usable are they? How well do they rank in the search engine results page?
Seize any opportunities that your competitors might have missed.
Or get inspired by what they do great in terms of user experience and... do it better on your own company website.
Step 12: Organize Your Findings Into a UX Audit Report
And use categories like:
major usability issues
A/B test suggestions
challenges
predicted impact
... to sort and group your results.
3 Tips to Keep in Mind When Conducting Your UX Audit
I've saved 3 best practices for last.
Apply them to streamline the whole process and to future-proof your findings.
Group all your findings into buckets.
It'll bet easier for you (and your team) to interpret your findings when you group them into categories (e.g. the "website navigation UX issues" category)
Take screenshots of all the issues found.
In other words: screenshot everything!
It's the easiest and most effective way to document every aspect (web page, interaction, etc.) of your website with a direct impact on the user experience.
Look for trends.
Use your spreadsheets of UX findings to identify... patterns.
Are there any common conventions and structures that visitors expect to find on your website? That they're already familiar with?
The END!
I think I know what you're thinking right now:
"But taking all the steps included in your website UX audit checklist takes... ages! And during all this time I'd have to put my team's projects on... hold."
Not if you pass on the audit "burden" to us.
Just drop us a line and let's uncover all the opportunities for UX optimization on your website!
Image by Mudassar Iqbal from Pixabay
Adriana Cacoveanu / Jul 01'2020
They're not there for the looks, you know. Users come to your website to search for... something — a product, a service, information. Its role is to make it easy for them to find that "something" via its search engine. But how to improve internal site search and "shorten the time between query to conversion"?
What are some best practices when adding search functionality to your website so that:
it serves up the most relevant search results?
it reduces user-friction?
it provides the best search experience?
it helps users to convert faster?
Here's your 12-step checklist to an effective on-site search:
Why Site Search Is Important?
"Adding on-site search to your website increases conversions by 480%!" (Neil Patel).
Just think about it:
The user's found your website (your SEO efforts have paid off). It's something specific that he's looking. Or he at least has some idea of the type of products/services that he's there for.
Now, why would you want to make him go over... 5 different pages of results before he reaches that service/product page that he was looking for in the first place?
Instead, your website's search engine should help him out with:
search suggestions
autofills
real-time preview of search results
Like Office Depot here, whose on-site search engine gave me plenty of search suggestions when I looked for a "chair":
Step 1: Put It Front and Center
One of the powerful internal site search best practices. But also the most ignored one.
Don't be that website owner.
Instead, put your search box where users can see it the instant they get on the web page:
besides the navigation
right below the navigation, as a distinctive element
above the navigation
in the header
Take Zara's example here: how long does it take you to find the search box on this page?
Step 2: How to improve internal site search: Make It Easier to Navigate
And what better example than Google's Search Engine itself?
You just can't miss it on the page. Moreover, search results are grouped into different categories — images, videos, news — lifting some of the burdens off your shoulders as an online "searcher".
It'll even turn your misspelled search queries...
Key takeaways:
consider using tabs by categories to make the user search experience as breezy possible
make the most of keyword matches
... and assistive technologies
It's all about shortening the time from the user's query to... conversion, remember?
Step 3: Boost Your Site Search Engine with Product Metadata
"How to improve search functionality?"
By forgetting all about the "meta tags have no impact on SEO" principle and starting to add relevant product metadata.
For yes, they do not count for traditional search engines, yet they have a huge impact on the way that your on-site search engine finds any product in your inventory.
So "feed" it metadata: titles, tags, attributes, categories, descriptions, specific keywords that your target customers will enter...
Step 4: Cater to All Kinds of Searches
There'll be users who know exactly what they need. So they'll be typing the exact product/serial number in the search box.
And there'll be users who have heard of an innovative, newly launched product in passing and will misspell its name.
Make sure your on-site search will serve up relevant results for both types of user profiles:
turn the product/serial number into a search criterion
make sure your on-site search turns relevant results on "misspelled queries", as well
Step 5: "Fuel" Your Internal Search Engine with Long-Tail Keywords
"How to improve internal site search?"
By optimizing your website copy for long-tail keywords (3-5 words).
The more you use, the more power you'll inject into your search engine.
Let's take this example:
You go to Office Depot's website looking for an office chair. Chances are that you're trying to find something more specific than a "chair". You want it to be... grey, ergonomic, made of leather or mesh.
You get the idea.
You're not looking for a generic "office chair".
Now, switch from your role of potential customer to that of an online owner and start optimizing your website copy for long-tail keywords.
They still have most of the search volume.
Step 6: Give Users Multiple Filtering Options via Faceting
Add multiple categories to help users filter through generic query results.
This way, you enable them to make their way to more specific results.
This internal site search "best practices" becomes a must-have if it's an:
eCommerce website
with a large inventory
... that you have.
A customer won't spend half a day looking for a "green cotton t-shirt for girls size XS", digging through dozens of result pages.
Take H&M's example here: they're using faceted search options to help me narrow down my options when I type a generic query like "shirt".
Step 7: Tailor the Search Experience As Per the User's Location
"How to improve internal site search?"
Localize your website content.
Or, in plain English: add regional dialect and idioms to your copy.
And you'd also want to include "popular searches in your... (name of the region)".
The whole idea is to:
personalize the search experience, making it more user-friendly
help the user find what he's searching for faster (and to convert faster, as well)
Even if he's using a dialect-specific word or phrase as a search query.
So, start building a list of synonyms for your search queries and use them to improve the search functionality on your website.
Step 8: Implement In-Search Filtering
Go beyond autocomplete if you want to provide the best search experience to your potential customers.
In this respect, advanced in-search filtering is one of the most powerful on-site search features.
Take this example:
Someone enters "sneakers" in your search box. You'd want to give him/her more search options, more specific suggestions like "sneakers in men's clothes" or "sneakers on sale"...
Again, a must-have on-site search feature if it's a large eCommerce website that you have.
Step 9: Add Informational Content, As Well
Not everyone on your website is there to buy something from you.
Some of them are looking for specific information on your products.
So, another effective way of improving search functionality on your site is to you ensure there's enough info-rich content for these users to dig into.
Step 10: Serve Targeted Search Results Based on User Behavior Data
Here's another answer to your "How to improve internal site search?":
Make the most of previous user behaviour to serve targeted search suggestions.
Rely on users' profile log information to:
identify distinctive patterns and tailor your recommendations accordingly
identify regional phrases (e.g. "soda" instead of "coke") and use them to personalize your suggestions
Step 11: Give Users More Control Over the On-Site Search Results
How? By giving them:
categories to filter through their search results
drop-down menus
brand names that they could use as search criteria
a personal search results page where they can keep track of their past activity and use quick search options based on their past behavior
Step 12: Serve Relevant FAQs on Every Search
Another effective and easy way to optimize search function on your site is to display FAQS at the end of each search
This way, users get more information about the product features/price/specific fees/brand that they're interested in.
Tailor these lists of questions to the user's past behavior and query data and turn personalization into your most powerful ally.
The END!
Maybe you do want to increase the conversion rate on your website, but without having to:
optimize heavy of loads content for long-tail keywords
get tangled up in user data to track down all the regional words variations
write metadata for... hundreds of different product pages
We get you. And we've got your back.
Just drop us a line and let's improve your on-site search so that you stop leaving conversions on the table.
Adriana Cacoveanu / Jun 26'2020
Quick and easy access to the content they're after is more important for your website users than a... visually-stunning design. Simple, straightforward navigation is what they expect to find. But what makes a website easy to navigate?
What are some good practices to follow to make your website easier to navigate?
Here's a top 11:
1. Put Your Navigation Right Where Users Expect to Find It
Don't compromise good user experience for the sake of "wowing" visitors with your innovative navigation system.
Do users expect to see a navigation bar at the top of the page? Or a navigation menu in the top right corner? Give them that.
This way, they get faster access to the information on your website that they're interested in.
Tip! Do you feel particularly creative and you want to add multimedia content to your navigation? Make it obvious to your site visitors that those are clickable elements.
2. Tailor the Navigation Bar To Your Own Audience and Business
A navigation bar optimized to meet the needs of a particular audience is what makes a website easy to navigate.
So, ask yourself this:
What do visitors do on your website? What are they're looking for?
More information on some of the services that you provide? Or maybe they want to have a look at the projects in your portfolio and at your previous clients' testimonials?
Are they on your website for your blog posts?
Once you're done with this empathy exercise and you have all the data, you'll know how many links are "too many" or "too few" for your navigation menu.
Source: Clutch.co
3. Make Your Sidebars Stand Out from the Rest of the Page
"How do I organize my website navigation?"
You make sure your sidebars don't blend in with the content on the page.
And there are many simple and effective ways that you can set it apart from the body copy. Here are just 2 of them:
use a different background color for your sidebars
use white space strategically to make it stand out from the other elements on the page
4. Make It Legible and Easy to Read on Any Screen
How easy is your website to navigate?
Before you rush in to answer that, make sure you test it for legibility on smaller screen devices, as well.
Here 2 of the best practices to follow for legible navigation in all usage contexts:
use a font that's at least 12 pixels
avoid narrow scripts and fonts
break out your navigation into clear categories with up to 7 items
use main menu, second, and third-level dropdown menu, as well, to organize your navigation if your website holds a lot of pages
5. What Makes a Website Easy to Navigate? A Fairly Straightforward Navigation Menu
Keep your navigation titles clear, accurate, and easily recognizable: stay away from witty or riddle-like titles.
Why would you want to change already familiar title phrases like "About Us" or "Contact Us" and risk to confuse the user? To make him/her lose valuable time trying to figure out "what the poet meant by..."?
Just keep it simple and predictable.
6. Make Your Hypertext Stand Out from the Body Copy
"How do I make my website easier to navigate?"
You make sure that users can tell hyperlinks from the rest of the page content.
How?
make them bold
use another color
underline them
...
Just make sure your navigation links are 100% usable.
Make it obvious to the users that that is a hypertext and they can click on it.
Source: Clutch.co
7. Make Sure Your Navigation Is Fully Responsive
This is, by far, one of the website navigation best practices.
And the adjustments to consider for your mobile navigation menu range from:
making the links large enough for mobile phone users to tap on with no effort
to tightening the menu so that it fits smaller screen sizes
to using a hamburger menu on mobile devices
8. Mind the Footer
Too often overlooked, the footer navigation has a big impact on the user experience (positive or negative, depending on whether you "forget" about it or not).
Just put yourself into the shoes of a user who's just landed on your website:
You've scrolled all the way to the bottom of the homepage and you now want to go to a specific service page or product page. Wouldn't it be great if you could access it via a hyperlink placed right there, in the footer? That, instead of going back to the header menu...
"But what should I put in my footer?" you ask yourself.
You can either:
mirror the links included in your header navigation menu
or put links to other key pages on your website: contact page, target blog posts, email newsletter sign up, etc.
9. Include Internal Search Functionality
What makes a website easy to navigate? Effective on-site search functionality...
Especially if you have an eCommerce website, where users look for specific products/services.
Once you've implemented it, follow these tips for making your search bar stand out:
use an icon of a magnifying glass
insert a "Search Here" text inside the search box
use a different color to make it pop out
And don't stop there:
Merely adding internal search functionality is just the first step. Make sure that the entire search experience meets the user's expectations.
And in 2020 users expect much more than just the basic product filters like color, size, and style.
They want to narrow down their selection to products that are on sale or to products that have been recently added to the website or...
10. Use Text Links Instead of Buttons for Your CTAs
Here's why you don't want to use buttons in your header navigation:
it's bad for your SEO: search rankings can't read buttons (but they can read text)
they make your navigation look clunky
you can't make a specific link stand out from the rest
buttons load slower, affecting the overall page loading speed
In short, use text for your menu items for both usability and SEO. It's one of the website navigation best practices in 2020.
11. Create a Sitemap for Your Website's Visitors
Provide them with a map before you expect them to explore your website.
This way, you:
make your website more usable for its visitors
help search engines crawl in and index your web pages
A win-win.
The END!
With these best practices on what makes a website easy to navigate at hand... what next?
How do you implement them on your own website?
We're ready to help you create that intuitive and effective navigation system. Just drop us a line.
Image by OpenClipart-Vectors from Pixabay
Silviu Serdaru / Jun 10'2020
Material icons, flat icons, thin icons, ready-made or fully custom, on-brand icons... No matter what type of web icons you opt for, the same rule applies: the need to be visible to all users. So, you ask yourself: "How to make icons accessible to... everyone?".
For, in vain you go with an eye-catching web icon design if its color contrast is so low that some users just don't see it.
Or if it's interactive, but only when... mouse clicked.
See my point?
Therefore, in today's post I'll tackle aspects like:
what accessible icons are
what goes into making icons accessible: most effective approaches and best practices
what are the different types of web icons and the specific techniques for making them accessible
Let's dive in:
1. What Are Accessible Icons More Precisely?
What makes an icon accessible to screen reader users?
What requirements should it meet to be fully inclusive?
Here are the 6 most important things to consider when you're designing accessible icons:
1.1. Make Them Noticeable
For, it's pretty logical:
If an icon's not instantly perceivable to all visitors, it becomes inaccessible.
And by "instantly perceivable", I mean that users shouldn't be constrained to perform some sort of action in order to make the icon... visible.
1.2. If It's Purely Decorative, It Shouldn't Be Read Out
One of the best practices for designing accessible icons (decorative icons) is to skip the part where the ALT text gets read out to screen reader users.
That's because, in the case of a decorative icon, informing the user about its existence on the page (e.g. "There is a key icon!") is just... superfluous.
Which leads us to the next requirement that all "wannabe accessible" web icons should meet:
1.3. Always Add a Text Label
The magnifying glass icon is universally recognized as a "search" tool.
But that's the only universally recognizable icon...
Therefore, it's best to play safe if you want your icons to be accessible to the widest range of visitors.
Whether you have a hamburger menu icon or a house-shaped one, accompany it with a text label to prevent any ambiguity.
1.4. Keep in Mind the Color Contrast
This is one of the recommendations on top of any "How to make accessible icons" list that you might stumble upon:
Make sure there's enough foreground-background color constrat in your icons, so that visitors with different levels of visual imparirment can easily notice them.
1.5. Make Sure They're Properly Sized
And by "properly sized" I mean somewhere around 44x44 pixels.
Pay particular attention to the size in the case of icon links:
Any smaller than 44x44 pixels and they become inaccessible on smaller devices: some users won't be able to click on them.
1.6. Make Sure They're Mouse, Touchscreen, AND Keyboard Accessible
Have you decided to "sprinkle" some interactive icons across your website?
Then make sure that users can easily click on them whether they use their mouses, they tap on their touchscreens or they depend on their keyboards for that.
2. How to Make Icons Accessible: 10 Approaches & Best Practices
Now that we've gone through "what" makes an icon accessible, let's get to the "how-to" part:
How can you make your web icons more accessible for screen readers users?
Here's a list of simple approaches and valuable tips to consider:
2.1. Consider Pixel Measurements and Square Dimensions
Most icons have square dimensions.
And if you're curious which are some of the most frequently used sizes for web icons, here are some popular examples:
128x128
16x16
512x512
64x64
256x256
2.2. The Easiest Way to Make Your Linked Icons Accessible Is to...
... add an ALT-text that lets the user know what the link does. What its destination is.
For instance, you can add "Email us" as the ALT-text accompanying your "@" email icon.
2.3. When In Doubt, Choose an SVG or a PNG File Format
Even if some prefer the SVG icons systems, while others choose to go with PNGs (making icons accessible is easier with that file format), all web designers agree on this:
Icon fonts should be the very last option to consider.
2.4. Make Sure Your Document and Your Icon Are The Same Size
2.5. See that There's Enough Icon-Background Color Contrast
Will you be adding your web icon to a background?
If it's a yes, then check and adjust the color contrast.
2.6. Check Your Icon's Size Before Exporting It
The 6th tip on our "How to make icons accessible" is pretty... predictable:
All web icons should be properly sized prior to export, making sure they're not too large.
2.7. Hide the Text Accompanying the Icon, but Keep It Visible to Screen Readers
Let's say that you've inserted an explanatory enough copy text within your link icon, but you don't want it to be visible to all users.
You want it to be visible to screen readers only.
For this, you can use a visible-hidden class selector.
Word of caution! Going with this solution does call for 2 compromises:
the click/touch area is smaller
screen reader users might not understand what that icon does (the VoiceOver will then read something like: "internal link, home").
2.8. Accompany Your Semantic Icons with Visible Text to Avoid Ambiguity
"What's a semantic icon?" you ask?
A standalone icon that has meaning.
Now, if you want to make sure you'll prevent all situations where users might just overlook it, just add a visible "Menu" text next to it. This way, its meaning will be 100% clear to anyone.
2.9. The Simplest Way to Make Icon Fonts Accessible Is...
... to add aria-hidden="true" to the element.
Note: again, whenever possible, avoid icon fonts and opt for inline SVGs instead.
2.10. Skip Adding ALT-Text to Text-Based Icons
Let's say that you have an "Email Us" linked icon.
Now, it would be quite superfluous to have an ALT text added to, saying the same thing to the screen reader user, wouldn't it?
In this case, the icon is purely decorative, since the copy text around it already conveys the meaning on its own.
The END!
Now you have at least 10 different answers to your "How to make icons accessible to the widest range of users" question.
But maybe you need help choosing the best approach and implementing these best practices in order to make your brand icons more accessible.
We're here to help!
Just drop us a line and let's find the most suitable solution for making your web icons available to everyone visiting your website.
Image by Виктория Бородинова from Pixabay
Adriana Cacoveanu / May 06'2020
“What's the best audit tool that I can use to check my website's performance?” you ask yourself. Why would you consider Google Lighthouse?
How reliable is its scoring system? And how accurate are the results that it provides?
Now, let's get you some answers on:
what is
how to use
why you'd want to use
… the Google Lighthouse testing tool.
1. What Is Google Lighthouse?
Before we get into the “Why”, let's see “What” the Google Lighthouse score is, actually:
It generates separate scores for different aspects on a web page, like:
SEO
rundown of best practices
accessibility
performance
PWA
In other words: it evaluates precisely the factors with the strongest impact on the user experience (page load time, anyone?).
What you get is a report on the measures to take in order to fix the identified issues.
And to hopefully get a maximum Google Lighthouse score next time...
2. How Do You Use Google Lighthouse?
And here we tackle one of this testing tool's biggest selling points: ease of use.
Now, there are 3 ways that you can run a Google Lighthouse report:
2.1. Use it Right in Chrome DevTools
The simplest way to run this audit tool on your website is to:
Download Google Chrome for Desktop (if you haven't done that already)
Enter the web page's URL in your browser
Click F12 to open up your Chrome Developer Tools (or just click “Inspect” anywhere on the page)
Hit the “Audits” Tab
Click “Perform an audit” (you'll see there the aspects of your website that it's about to check: SEO, Accessibility, Performance...)
Hit “Run Audit” to have Google Lighthouse generate your audit report directly through your browser
Easy peasy...
2.2. Install the Lighthouse Chrome Extension
If you prefer to run this website analysis tool as a Chrome extension, just:
Download Google Chrome for Desktop
Install the extension from the Chrome Webstore
Go to the web page that you want to test
Click the “Lighthouse” icon newly added to your Chrome address bar
Hit the “Generate Report” button
Just wait for about 30-60 seconds for the tool to inspect the page and generate the results in a new tab.
Source: developers.google.com
2.3. Run It Via the Node.js Command Line
If you're more of a CLI person, you'll find this workflow more suitable:
Again, if you haven't downloaded Google Chrome for Desktop already, now it's the time
Install the latest version of Node.js
Install Lighthouse by typing npm install -g lighthouse into your command line
Next, enter the lighthouse <url> to run an audit
Note: use the lighthouse –help command to get an overview of all the options.
That's it!
Note: it's an HTML version of the audit report that you'll get when you run Google Lighthouse via the command-line tool. Just so you know it.
Tip! There's also a... forth way to use the Google Lighthouse audit tool, probably one of the quickest ways to run your report:
Just go to web.dev
Click “TEST MY SITE”
Enter your URL
Click “RUN AUDIT”
And voila: you'll have your Google Lighthouse score generated for that particular web page in no time!
3. 6 Reasons Why You'd Use Google Lighthouse (And Why We're Using It)
Now that you know precisely what it is and the different ways that you can use it:
Why would you choose this particular website auditing tool over... all the other testing tools out there?
To give you an honest answer, let me share with you the key reasons why we, the OPTASY team, are using it on our clients' websites and even on our own site:
it's so easy to use: why compromise ease of use for accurate audit results, when... you can have both?
it's Google-developed (not just a no-name third-party testing tool)
it's open-source
it's fully automated
it tests how the scanned web pages look and perform on mobile devices, as well
it's user-centric metrics that it provides: what's the point of optimizing a website merely for our own “fame and glory” and... risk losing sight of the user's own expectations?
Whether we're:
building a new website for one of our clients
optimizing a client's existing website
optimizing OPTASY.com itself
… and we want to check how well its web pages perform, we just run a Google Lighthouse audit.
And speaking of using it on our own website, here's a sneak peek into the Lighthouse Score that it's got after we put it through some major optimization work:
In short, the scoring system and suggestions of improvement that Google Lighthouse generates make the best "barometer" for us to:
assess the quality of the audited pages (in case of an existing website, so we know what we're dealing with)
evaluate our work (after we've built/improved a website)
identify existing issues and prepare our “To Do” lists to get them fixed
4. Final Word
Do you want to learn more about how to use Google Lighthouse to its full potential? About how you can boost your Google Lighthouse performance score, like we have for OPTASY.com?
Or maybe you've already generated a report, you have the list of recommendations at hand and you need help to implement them on your website?
Either way, we're here to help. Just drop us a line.
Adriana Cacoveanu / May 01'2020
You want to enable your content editors to build new pages on their own. So, which drag and drop Drupal page builder do you choose?
Let me try and guess what's on your "wishlist":
to be super easy to use, with an intuitive front-end editing interface
to be light
to be compatible with your Drupal theme
to load fast
to provide a decent collection of ready-to-use designs
to be conveniently flexible
Have I guessed it right?
Now, which of these 2 popular editors for Drupal 8 — Gutenberg Editor and Cohesion DX8 — checks the most must-have features off your list?
Let's compare them:
1. Introducing: Acquia Cohesion DX8
“The only low-code platform for the design, build and management of Drupal 8 websites.” (Drupal.org)
A Drupal website builder that empowers you (your designers and content editors) to create all the visual aspects that make a website:
layout
theme
element styles
templates
components
And all that in the browser, via a highly visual drag-and-drop user interface...
With no need to write CSS, PHP or HTML.
Here's how it works:
Acquia Cohesion DX8 provides your editors with a library of branded (reusable) content components — sliders, tabbed elements, hero sections, banners, video players, feature panels
they select, mix and match, and assemble together the blocks of their choice
… and fill them in with content.
Tip: your non-technical editors can also edit, inline, those display components (block “templates”).
And voila:
A simplified way of building Drupal websites.
A component-based approach to building a Drupal site.
And during all this time, your development team can focus on building all those unique functionalities that you have in mind.
2. 5 Reasons Why You'd Want to Use Cohesion DX8
Now, let's talk... benefits.
What are the main advantages of choosing Acquia Cohesion as your Drupal page builder?
2.1. Your content editors can assemble new page layouts quick and easy.
And “quick” is the keyword here.
The non-developers in your marketing and other teams can assemble new web pages in no time:
They just drag and drop and arange different components available in the library, making them fit into the design pattern that you've already defined for them.
2.2. Your marketers are free to edit content & layouts right on the page.
Another strong benefit that you can reap from using this particular Drupal layout system is that your editors can easily modify content/layout right on the live website.
In other words, Acquia Cohesion DX8 provides them with an easy to use in-context editor.
This means that your content editors can open the page that they need to update and make any change in... seconds.
Tip: you get to set different levels of permissions and keep track of who's updated what on the website.
2.3. Your content editors can build and manage your website with no coding skills needed.
In other words, you'll turn your editors into... web designers.
Source: Dri.es
They need no coding skills, except for a low-level understanding of some general website concepts, to put together a new enterprise-grade Drupal website if needed.
2.4. You can replicate the newly created design on all your Drupal websites
Why would you opt for this low-code site builder?
Because it enables you to export and reuse the same style configuration and web design across your entire ecosystem of websites. To sync your brand styles across your whole network.
An easy way to control your brand across a multi-site structure.
And a guarantee that your non-developers, who are granted such “power”, will keep brand-compliant in their work.
2.5. Your non-technical teams can build uniquely designed and fully responsive websites
The non-developers in your team (content editors, designers with little coding knowledge) can easily put together custom layouts using this drag and drop page builder for Drupal.
Source: Acquia.com
Moreover, Acquia Cohesion DX8 makes it easy for them to preview their newly created layouts in multiple device aspect ratios.
3. What You Can Expect from Using this Drupal Page Builder
Let's say you've already found the answer to your “Gutenberg Editor vs Cohesion” dilemma: you've opted for Cohesion DX8.
Here's what you'll notice:
your team sets up and launches brand new Drupal websites faster now
the costs for developing new websites have lowered
all the Drupal 7 to Drupal 8 website migrations have been streamlined
keeping brand consistency across your multiple Drupal websites is no longer a challenge
your digital marketing and content authors are more confident to experiment with new content (since updating and reverting changes is so straightforward)
your senior developers gain more time to innovate; to focus on their own development tasks
4. What You Can Build with Cohesion DX
Let's see precisely what you can create using this page editor for Drupal:
full page content templates
master templates that your content editors can use to put together headers, navigation systems, footers...
menu templates, from basic list menus to interactive, multi-level ones
content components, which can then be assembled together into unique layouts
CSS styles
view templates for your blocks or page
page content layouts
5. Introducing: Drupal Gutenberg
The Gutenberg Drupal 8 module comes as an alternative to the body field editor in Drupal:
Editors can build a new page by assembling content blocks instead of writing text in a text body.
Source: Drupalgutenberg.com
A Drupal page builder that enables them to:
move blocks around the page, as needed
reuse uniquely designed contrib blocks across multiple pages on your Drupal site and even across multiple projects
select from the pre-built blocks — lists, paragraphs, tables — that Drupal Gutenberg provides them with
insert raw HTML in the form field
When it comes to the “user-friendliness” factor, Drupal Gutenberg “bids on” a highly visual editing experience, just like Cohesion DX8 does:
Any member of your team, regardless of his/her technical skills, can easily build a new page by putting together media, text, and content blocks.
6. 4 Reasons Why You'd Want to Use Drupal Gutenberg
“Why would I choose precisely Gutenberg as my page editor?”
Here are some compelling answers:
6.1. You empower your editors to build new landing pages on their own.
It's all about “democratizing publishing":
Drupal Gutenberg enables them to add, move around, and edit blocks quick and easy.
6.2. Your editors get a whole collection of custom blocks to choose from
That's right: Gutenberg Cloud library comes as a rich content repository for contributed blocks.
From:
call to action sections
to uniquely designed forms
to web components
... your content editors get a whole collection of blocks created by other developers to dig into when building new pages.
6.3. You grant your editors a flexible, visual editing experience.
One of Drupal Gutenberg's biggest selling points is its React-powered UI API.
The JavaScript type of “fuel” that makes the editing experience both flexible and powerful:
a scalable, high performant editor
that content creators can use with great ease; no technical background needed
Where do you add that they get “spoiled” with lots of pre-designed elements to choose from, as well.
6.4. You enable your editors to use and... reuse Drupal media assets.
Gutenberg's conveniently integrated with Drupal's media library.
This means that your marketing team can easily scan through and choose the media assets that they need to incorporate into their landing pages.
And even re-use them as many times as needed.
7. What You Can Expect from Using this Particular Drupal Page Builder
A more independent, empowered marketing department.
Which automatically translates into a more productive development team, as well.
8. What You Can Build with Drupal Gutenberg
“What are the most typical use cases for the Gutenberg editor?” you might ask yourself.
landing pages
text-heavy content types (e.g. blog posts)
designs that don't call for a lot of dynamic configurations
simple layouts
content structures and designs that blend in perfectly with your theme's looks
9. Final Word
“So, which Drupal page builder should I choose: Drupal Gutenberg or Cohesion DX8?”
It depends greatly on your feature needs and on your content team's skill level, as well.
For instance: do you value the convenience of replicating the same designs on all your websites (Cohesion) more than... having an entire library of contrib content blocks to select from (Gutenberg)?
Keep “confronting” the features of these 2 website builders and put them against your team's needs and experience, as well.
The END!
How flexible is the authoring experience for your own team?
Have you tried implemeting any of these page editors into your page building workflow?
Feel free to share your experience, good or bad, in the comments below.
Image by 200 Degrees from Pixabay
Silviu Serdaru / Apr 14'2020
You already agree on this: web accessibility benefits users with permanent, temporary, and situational disabilities. But why is accessibility important for you?
For your business...
How does having an accessible website benefit you directly?
And that's precisely what you'll find out in this post:
7 clear benefits that you can “reap” from making your website ADA-compliant.
1. Why Is Accessibility Important For Your Business? 7 Ways It Benefits You Directly
1.1. You Improve the Visitor Experience for... Everyone
Source: disabled-world.com
“Who benefits from web accessibility?”
All users.
As you adopt all the good practices to improve your web pages' accessibility and you:
use a clear and simple language
make sure that you have enough color contrast on your site
add video captions
… you make your website easier to use for all users.
Tip 1: a video caption benefits both users with hearing loss and... any user who watches your video content in a loud environment.
Tip 2: an adequate color contrast benefits not only users with low contrast sensitivity but pretty much anyone. It makes your content more visible and easier to understand for all users.
How does this translate into a clear benefit for you?
Better user experience for all your website's visitors means:
a higher impact on your SEO rankings
more traffic on your website
better user engagement
a higher conversion rate
…
Should I carry on?
1.2. You Grow/Future-Proof Your Customer Base
Source: canada.ca
North America is aging.
By making your website accessible, you ensure that it accommodates the needs of both:
users born with a disability
users acquiring certain levels of disabilities as they age; seniors who still want to able to access the web
In other words: you'll be simultaneously growing and future-proofing your customer base.
1.3. You Minimize the Risk of Facing Legal Action
“Why is accessibility important?”
Because it's a legal requirement.
Ignore it and you face the risk an accessibility lawsuit...
Is minimizing the risk of being prosecuted a strong enough benefit for you?
1.4. You Develop a Mindset for Innovation
“Why is accessibility important in web design?”
Because it challenges you to solve all types of unanticipated problems and thus... to get creative.
The constraint of adapting your design so that it incorporates a whole set of accessibility features challenges you to... come up with innovative solutions.
And to preserve that mindset for innovation in the long term.
1.5. You Boost Your SEO Efforts
Just think about it: some of the best practices for improving a website's accessibility are to:
add ALT-text to images
write clear and concise copy
go for a clutter-free page layout
design with consistency in mind
...
But these are all good SEO practices, as well.
“So, why is accessibility good for business?”
Because, by making your website more accessible, you're also making it more... SEO-friendly.
1.6. You Improve Your Brand Reputation
Source: Acquia.com
“Why is accessibility important for your business?”
Because it helps you grow your brand reputation.
By making sure that all your website visitors are granted equal rights and easy access to your web content, you build a positive reputation around your brand.
1.7. You Improve Your Page Loading Time
Studies have proven it:
By improving a page's level of accessibility, you improve its speed score, as well.
The main idea rests the same:
As you implement features considered to be designed “exclusively” for users with disabilities, you're making your website a better place for all users.
And “faster” does mean “better”. So this is definitely a key benefit to keep in mind.
2. What Are the Most Important Aspects of Web Accessibility?
Now that you have multiple answers to your “Why” question — “Why is accessibility important?” — let me try to answer your “What” question, as well:
What makes a website accessible?
But first, here's a list of goals to set for your company website's content and design to be accessible:
To be perceivable: are your design elements and text visible and easily identifiable by all users?
To be robust: is your content robust enough to be easily parsed through and interpreted by various assistive technologies?
To be operable: make sure that all users are able to carry out the actions that your website's UI requires them to perform
To be understandable: is the information delivered on your website clear enough? How about the UI and the actions that it requires users to perform?
2.1. Color Contrast
An accessibility feature that benefits all your website visitors:
those that have a sight condition (elderly visitors here included)
those accessing your website from their mobile devices
those accessing it in a poorly lit environment
anyone accessing your website
Source: w3c.github.io
Implementing a good color contrast between the background and the foreground makes your design elements more visible and the text more readable.
And everybody wins.
2.2. Text to Speech
Why would you bother to implement this technology on your company website?
In other words:
Who benefit(s) from this accessibility feature?
users with learning disabilities
users with literacy difficulties or learning a new language
users with low vision (seniors here included)
all users who just love to... multitask (e.g. imagine yourself driving your car and listening to an e-book)
It makes your website content accessible to more people.
2.3. Clear and Constant Feedback
Remember to provide feedback — clear instructions and error/success messages — for every action that users need to complete or have already completed.
Who'll benefit from it?
users with cognitive and learning disabilities
users with lower computer skills
anyone accessing your company website
Providing clear instructions and constant feedback helps all users complete their tasks (e.g. fill in forms) on your website quick and easy.
It makes your website conveniently predictable to everyone accessing it.
2.4. Video Captions
Why is accessibility important? Because it turns your website into a “welcoming” place for everyone.
In the case of captions (or “subtitles” if you wish), it makes your video content accessible to:
people with hearing loss
people accessing your website from a loud or quiet environment
Just imagine yourself having to go through a video, in a crowded place, when don't have your headphones with you.
It's another one of those win-win accessible situations.
2.5. Clear, Clutter-Free Layout and Design
And here, the main benefits are obvious.
A simple design:
loads faster
bubbles up to the user experience
impacts your site's SEO rankings
Keep your website clutter-free by removing:
all the unnecessary design elements that make it a bit too clunky and more difficult to navigate
all the non-relevant and non-useful content
all the unnecessary code still lingering in there
Perform an audit of the menus, text sections, and links on your site and... start decluttering it.
This way, you'll improve the experience of all the users, making your website:
faster
easier to scan through
more usable
2.6. Voice Recognition
Imagine yourself driving (again) and having to search for a particular piece of information on a website.
If that website has a voice recognition system incorporated, it should go smoothly.
If not... you might consider switching to one of its direct competitors.
See my point here?
Implementing voice recognition on your website doesn't benefit just users with various physical disabilities.
It benefits anyone who simply prefers uttering search phrases instead of entering them in the search bar.
2.7. Keyboard Navigation
Make sure that users can easily navigate your website using their keyboards only.
Word of caution: are there any animated navigation buttons that unfold drop-down menus? If so, are they perfectly usable for visitors who depend on screen readers to navigate your site?
2.8. Use of ALT-Tags
Go for useful, genuinely helpful descriptions over... the too generic, perfectly SEO-optimized ones.
Accessibility is about making all users feel confident and comfortable.
Therefore, impersonal image descriptions, centered around focus keywords, are anything but helpful to them.
2.9. Accessible Buttons and Controls
Making your clicking or tapping areas:
larger
featuring enough color contrast
featuring clear and actionable title text (“sign up”, “download”, “log out”)
.. will make your website more usable for:
visitors with a certain disability
those with a limited digital dexterity
those accessing it from their mobile devices
The END!
Does this answer your questions and dilemmas on “Why is accessibility important for my business”?
Now, we're quite curious to know:
What accessibility feature has had the biggest impact on the user experience that your website provides?
Image by athree23 from Pixabay
Adriana Cacoveanu / Apr 10'2020
You've run your audit, you've got your list of web accessibility issues: now what?
Where do you start?
Before you get to the point where you ask yourself “How do I fix web accessibility issues on my site?” you wonder: “Which issue to address first?”
How do you prioritize accessibility problems?
By noticeability, by severity or by tractability? What criteria do you use?
And this is the question that this post will answer to.
It's a list of 8 simple ways to prioritize the issues included in your accessibility audit report:
If Your Website's Image-Heavy, ALT Text Becomes a Priority
If You Host Lots of Videos, Adding Captions Is Critical
Let the Data on Your Target Audience Dictate Your Priorities
If the Issue Is Repetitive for Screen Readers, Then It's High Priority
Put on Your List of Web Accessibility Those that Impact the User Navigation
Prioritize the Issues that Prevent Users from Submitting Forms
Prioritize The Accessibility Issues Detected on Key Pages of Your Site
Prioritize Low Complexity, but High-Value Issues
1. If Your Website's Image-Heavy, ALT Text Becomes a Priority
Do you have lots of images on your website?
Then adding ALT text is a top priority, by default.
2. If You Host Lots of Videos, Adding Captions Is Critical
Do you have lots of video content on your site? Then adding captions should be one of the first tasks to carry out after you've run your web accessibility audit.
3. Let the Data on Your Target Audience Dictate Your Priorities
Customer analytics should be the main criteria to use when you put together a list of web accessibility issues.
How many people in your customer base use screen magnifiers to zoom in specific sections on your website?
Are there users depending on screen readers in order to interact with your website?
What does the analytics data tell you?
It's those stats that determine how you should prioritize your usability problems. And how you should design your website accessibility plan.
Source: Medium.com
In this case, categorizing (and therefore prioritizing) web accessibility issues by their WCAG level (A, AA, AAA) is a bit rudimentary.
The data that you have on your user target group might reveal to you that complying with certain AA (or “nice to have”) standards is more important for your audience than complying with some A standards...
In short: start with those issues that have a direct impact on your specific customer base.
4. If The Issue Is Repetitive for Screen Readers, Then It's High Priority
Take an issue listed in the W3C accessibility checklist as common as... link names. It says there that the displayed text should be unique, meaningful and descriptive enough.
Has your automated accessibility testing tool identified multiple instances of this issue?
Do they seem to be so repetitive that the experience of any website visitor using a screen reader is just... terrible?
Then you should address them ASAP.
5. Put on Your List of Web Accessibility Issues Those that Impact the User Navigation
You've run your web accessibility audit and now you need to prioritize the issues detected.
An effective criterion to use for setting up a hierarchy of “errors” is the impact that those issues have on users' navigation experience.
For, if those issues prevent users who depend on assistive technologies from navigating your website, they'll get discouraged/frustrated. And leave your site.
For instance, your accessibility audit might detect a problematic heading structure. Which, by the way, falls into the AA category.
If that heading structure:
skips certain levels
or, even worse, there is no heading structure at all
or it contains too much irrelevant information
… and is the main “culprit” for the poor navigation experience on your website, then you should make it a priority.
6. Prioritize the Issues that Prevent Users from Submitting Forms
For there's nothing that says “I don't care about you” like web accessibility issues that stop users from filling in a form on your site.
In short, make sure you tackle those first.
I'm talking here about usability issues like:
unhelpful error text messages like “please enter correct information”
unaccessible inline error messages
… that make it impossible for these website visitors to submit any form.
7. Prioritize the Web Accessibility Issues Identified on Key Pages
Build your web accessibility test plan around the most important pages on your website.
Source: support.siteimprove.com
For instance, optimizing a page with a Help article isn't a top priority.
But optimizing for accessibility your:
Product page
Login page
Checkout page
User Registration page
Contact Us page
Feedback or Survey page
… should be listed among your top priorities.
Tip: a common web accessibility mistake is to ask people with disabilities to enter information from their paper receipts on the survey page. Make sure this problem is among the first ones that you address.
So, before you go ahead and add problems to your top list of web accessibility issues, you might want to ask yourself some key questions:
“What's the scope of the page presenting accessibility issues?”
“What's the traffic on the page that you're about to optimize?”
8. Prioritize Low Complexity, but High-Value Issues
And now you have your answer to the question:
“What if I have a high-value issue, but with low complexity like... defining page titles for dynamic pages on my website?”
Final Word: Internal Prioritization Is Crucial
Putting together a list of web accessibility issues to tackle first depends on your website's:
audience
content
functionality
Sticking to an “A level vs AA level” technique for figuring out what problems to fix first is... a bit too simplistic.
For even not all A-level accessibility standards are of equal importance and not all AA-level issues are just “nice to haves”:
Source: www.w3.org
Your turn now:
What criteria do you use to prioritize the accesilbity issues that you identify on your website?
Are there other prioritization techniques that I should add to this list?
Let me know in the comments below.
Image by Gerd Altmann from Pixabay
Adriana Cacoveanu / Mar 27'2020