They're visually-appealing, highly popular, built on top of robust structures, so that they should "cope with" with huge amounts of traffic and content... These are but some of the things that the top 10 Drupal websites in Australia have in common.
But which are they, more precisely? Australia's finest examples of websites using Drupal?
We've done our research and put together a 10 best list for you.
Let's dive right into it:
1. Australian Nuclear Science and Technology Organisation(ANSTO)
"Australia's research and development organization, and the center of Australian nuclear expertise..." (source: directory.gov.au)
And the presentation could go on with other superlatives to "wow" you with:
Australia's most important science infrastructure
(one of) Australia's largest public research organizations
it sums up more than 1000 experts that use nuclear techniques to find the answer to various medical, environmental, and industrial challenges
A significant content load? A large team of content editors in need of the most robust tools to streamline their content management workflow with?
The web project had Drupal 8 written all over it...
And it quickly became one of the top 10 Drupal websites in Australia.
Why Drupal?
Because Drupal provides the best editing experience. Content managers are free to build new custom pages on their own, by just selecting and assembling pre-designed blocks.
Not to mention that the "component-based" approach to design ensures consistency throughout the website and, implicitly... the best user experience, as well.
2. University of Technology, Sydney
The University of Technology Sydney (UTS), Australia's #1 university and the 10th best one in the world, also has its website running on Drupal.
Drupal is the platform that powers a lot of higher education websites worldwide, so... no surprise here, right?
The reasons why UTS chose Drupal are obvious:
their multi-site structure incorporates no less than 150 UTS sub-sites
the "cluster" of mini-sites needed a central content hub and a unified platform
the internal content team needed enough freedom and flexibility to create, edit, and publish content across the entire network of sub-sites
they needed to integrate lots of third-party systems (e.g. systems sourcing course information)
In short:
Drupal makes the perfect choice for multi-site setups
it integrates seamlessly with third-party apps
it provides the best editorial experience
3. The Australian Government
Undoubtedly one of the top 10 Drupal websites in Australia.
"The Government of Australia is standardizing on Drupal for hundreds of government departments and agencies across Australia, starting with the country’s homepage. Drupal enhances digital services to millions of citizens." (source: Drupal.org)
Why Drupal?
For multiple reasons:
Drupal's ideal for multi-site architectures
Drupal provides a granular permission system
it integrates with lots of third-party services and solutions (payment systems, citizen service centers, various "latest news" sources)
it's one of the most secure CMS platforms: Drupal has its own dedicated Security Team and a foolproof process for monitoring, identifying, and publishing any security issues
it's flexible, giving unmatched freedom to content editors and website admins: anyone from the internal team can update content on the website quick and easy
Source: Drupal.org
4. Bunjil Place
The "home of arts and entertainment in the City of Casey" is Drupal-powered.
And it's probably one of the most visually impressive examples of Drupal websites from Australia.
A high-trafficked website, that "bids on" Drupal 8 to provide an interactive user experience.
Now, if we were to list just some of the strongest reasons why Drupal was the best option for this Australian website:
the diversified content hosted on the website (text, video, eye-catching images), that falls into multiple sections and subsections
the need for a new responsive design
the need to incorporate some powerful user-oriented functionalities (e.g. visitors can easily book spaces in the palace for their future events)
Drupal was the only choice here...
5. The Australian
Drupal's already famous for being the best CMS solution for news websites.
And the CMS platform is behind the online presence of "The Australian" — Australia's national news brand — as well.
A high-trafficked, content-packed website, with content that needs to be updated on the fly, on a regular basis.
They couldn't have opted for another platform than Drupal...
6. Australian Conservation Foundation, One of the Top 10 Drupal Websites in Australia
Australia's national environment organization — over 600,000 people — has its website running on Drupal.
It's a campaign-driven site, one of the most popular Drupal-based websites in Australia, that leverages the CMS platform's top features to:
manage all their content workflows with great ease
engage their member database and anyone willing to address urgent environmental problems via social networking, donation processing, event management, analytics, fundraising
A website that needed to withstand high amounts of traffic and to support complex content workflows: Drupal was the most suitable CMS solution.
7. Australian War Memorial
"The Memorial's purpose is to commemorate the sacrifice of those Australians who have died in war or on operational service and those who have served our nation in times of conflict." (source: awm.gov.au)
One of the top 10 Drupal websites in Australia that turned this CMS platform into a reliable publishing tool for all the historians, researchers, and designers accessing it.
We're talking here about a content-heavy website, hosting content that ranges from:
war-related material
to extensive archive
to a database of unique collections of film footage, artworks, sound recordings
to articles on Australia's military history
And where there's rich and varied content, that needs to be handled with ease by various internal teams, there's Drupal, as well.
Drupal with its:
robust inline content creation and editing tools
sophisticated access control system
8. Charles Darwin University
One of Australia's public universities and one of the world's most reputed universities (among the top 2% universities on the globe) has its website running on Drupal.
And for all the self-evident reasons:
they needed to provide internal users with the best experience: Drupal enables content editors to create their custom course pages by simply putting together pre-built components
they also needed to provide an intuitive search experience to all the external users: Drupal makes it easy for students to find, review courses, and sign up
9. International Business Times Australia
The Australian version of this digital news publication is built on Drupal.
But is it of any surprise that the go-to source of financial news in Australia has chosen this CMS platform to build its online presence on?
After all:
news publications are Drupal's "specialty"
Drupal's already famed for powering some of the most content-intensive websites in the world
Drupal's gained a reputation for being the CMS that provides the best content editing experience: the internal team at International Business Times Australia can create, update, and publish new content on the go
10. Car News Australia
One of the top 10 Drupal websites in Australia, that stands out from the crowd as a high-trafficked one.
Its complex content ecosystem has turned Drupal into the Carsguide team's only option.
The site's an intricate network of 7 different sections — "buy + sell", "reviews", "news", "advice"... — that unfold, each, into "clusters" of multiple sub-sections.
A content network that called for a CMS with particularly powerful content creation and editing features.
A content-rich architecture that's now powered by Drupal.
The END!
We're curious now: what other famous brands are on your own top 10 Drupal websites in Australia?
Photo by Iván Lojko on Unsplash
Adriana Cacoveanu / Apr 03'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
Drupal Layout Builder vs Gutenberg: which of these 2 next-generation site-building tools to use to create your page layouts?
Or, better said, to empower your content editors to design great-looking pages on their own.
In order to help you make an informed decision, I've made an honest “Layout Builder modules vs Gutenberg editor module” comparison.
Therefore, in this post you'll find your answers to the following questions:
What issues with the editing experience in Drupal do these 2 new page layout builders come to address?
What is the Gutenberg Editor?
What are Drupal Gutenberg's main strengths?
What are its limitations? What is the Layout Builder for Drupal?
What are the Drupal Layout Builder's main strengths?
What are its weaknesses?
When would you use one Drupal page builder over the other?
1. Drupal Layout Builder vs Gutenberg: What Limitations Do They Address?
Or, to put it this way: what makes a good content editing experience?
Here are some of the editors' main requirements:
to be easy to use (with an intuitive drag and drop interface)
to enable them to create custom page layouts on the fly, with zero CSS or HTML knowledge
to be ideally flexible, enabling them to adjust the pages to their needs
Now, if we put editors' requirements against the "reality" of the editing experience in Drupal, here are the limitations we can identify:
it doesn't provide a decent level of visual design
it compromises branding for flexibility or the other way around
it requires some HTML experience
it doesn't go beyond the level of a basic WYSIWYG editor
it doesn't allow them to design fully customed page layouts
it doesn't provide a 100% intuitive user interface
it still makes editors dependant on the site builders/Drupal developers in their teams
And these are precisely the problems that these 2 Drupal page builders "promise" to solve.
2. Introducing: The Gutenberg Drupal 8 Module
The Gutenberg Editor module is no more than WordPress's layout system integrated with Drupal.
What sets it apart from the other tools for creating page layouts in Drupal?
Its block-based approach.
Creating content in Drupal becomes a matter of selecting and assembling multiple blocks.
Each block stands for an individual piece of content: a separate block for a button, another separate block for an image, another one for a column, for a heading...
Furthermore, you get to create content inline. To edit the media content, text, and blocks on the page that you're building.
In short, you can take the Drupal Gutenberg module as a convenient "block editor".
You (or your editors) can put together and visualize your page layout in one large form field. That, instead of editing every single form field that makes up a page.
3. 4 Reasons to Choose Drupal Gutenberg
Let's say that you're looking for a site building tool to build a... landing page (or one that would empower your content editors to create it).
Why would you go with the Gutenberg content editor for Drupal 8?
Here are 4 good reasons to choose it:
it provides you with lots of predesigned elements out of the box
you can see what you're building on the editor side
it doesn't require you to be experienced in working with CSS or HTML
you can design your own blocks or use blocks created by other open-source developers
4. 6 Reasons Why You Might Hesitate to Choose Gutenberg
Any honest Drupal Layout Builder vs Gutenberg comparison must include the 2 tools' main weaknesses, as well, right?
So, here's why you may want to think twice before choosing the Gutenberg content editor in Drupal 8:
the way it stores data could be... better
it doesn't excel when it comes to layout flexibility: you can align your blocks left, right, center, but you can't add custom margins, for instance
the style options that it provides are quite limited, one of the main drawbacks highlighted in any Gutenberg vs page builder comparison
updating a page created with Gutenberg is particularly overwhelming
the visual editing experience is not one of the best ones: visualizing your layout is a bit more difficult
you cannot reuse your Gutenberg blocks and the page layouts that you create with this editor
Tip: when it comes to the poor visual experience that you get with the Gutenberg Editor, you can always improve it with page builder plugins. There are some pretty good ones out there that guarantee you a 100% visual design.
5. Introducing: The Drupal Layout Builder Module (Core)
"Drupal 8's Layout Builder allows content editors and site builders to easily and quickly create visual layouts for displaying content. Users can customize how content is arranged on a single page, or across types of content, or even create custom landing pages with an easy to use drag-and-drop interface." (source: Drupal.org)
The Layout Builder for Drupal enables you to create layouts by putting together separate form fields and block entities. No coding know-how needed.
No need to tweak the templates in the theme's source code.
In short, it "spoils" you with a drag-and-drop type of visual editing experience. You can put together structured content quick and easy.
Source: Drupal.org
"But how exactly does it work?"
Here's how you create a custom layout with this Drupal page builder in 5 quick steps:
enable the module
go over to the "Manage Display" tab of your target content type
click the "Use Layout Builder" checkbox
click the "Manage Layout" button
then, you're free to use your Layouts and Blocks (after you've created them), dropping them in the defined regions of the page that you're building
6. 7 Reasons to Choose the Layout Builder in Drupal 8
Here's a legitimate question that this Gutenberg Editor vs Layout Builder in Drupal 8 comparison should respond to:
“Why would I want to use Drupal Layout Builder?”
The best answers would be:
you can create your content blocks and just drop them on the regions of your page layout
you get to (re)arrange otherwise static fields the way you want to
you're free to add views, blocks, widgets, to any section of your page
the content that you create is specific to that page type, so all the pages of that type will have the same layout
you get to override the default layout to create fully customed pages
your layout is rendered on the web page in real-time
you're free to incorporate blocks in the main content region
7. 5 Reasons Why You Might Hesitate to Choose the Layout Builder
When comparing Drupal Layout Builder vs Gutenberg, you inevitably get to the point where you ask yourself:
"What are the Layout Builder's main weaknesses?"
Now, here's why you wouldn't want to jump on it right away:
you can use it only on the main content area of your page
unlike the Gutenberg Drupal 8 module, the Layout Builder doesn't ship with prebuilt elements for you to just choose from and assemble
with Drupal Layout Builder, you need to create your blocks and page type first; you can't "get away with" choosing user-contributed blocks
it's not always easy to see what precisely gets overridden
you can't rely on a granular permissions system for overriding individual pages
8. When to Use Drupal Gutenberg: 4 Typical Use Cases
You'd want to use the Gutenberg Drupal 8 module if:
your Drupal website's a content-packed one
you need to build a landing page
you need to create a simple layout: Gutenberg doesn't really shine when it comes to style options
you need to create content that fits perfectly into your theme's looks: Drupal Gutenberg pulls right from your theme's styles
To sum up, designing landing pages are Gutenberg's most typical use case.
Use it to add just some extra design (nothing too "extravagant") to an "About Me" page, for instance.
9. When to Use the Drupal Layout Builder: 2 Typical Use Cases
You'd want to use the Layout Builder for Drupal if:
it's a field-intensive page that you're building: a product page, a case study, etc.
you have synced content on that page (from Salesforce, for instance)
The END!
Your turn now: have you tried any of these Drupal page builders?
Which one best serves your content goals?
What other pros and cons would you have added to this Drupal Layout Builder vs Gutenberg comparison?
Let us know in the comments below.
Photo by Jason Dent on Unsplash
Silviu Serdaru / Mar 25'2020
Drupal voice search has gone from trend to standard these days.
So, you can't help ask yourself:
"How do I enable search based on voice recognition on my Drupal website?"
And that's precisely the question that I'm about to answer in this blog post.
That, along with all the other ones that must be "haunting" you:
How does voice search impact my revenues?
How do I optimize my website content for voice search queries?
How do I set up a custom voice search engine on my Drupal site?
Can I even build a voice-powered app with Drupal? How?
1. How Does Voice Search Impact Your Traffic, Conversions, Revenues?
“Voice Shopping Set to Jump to $40 Billion By 2022, Rising From $2 Billion Today“ (source: prnewswire.com)
How does making your Drupal website voice search-friendly translate into higher conversion rates?
The logic is simple:
it's more convenient for users to speak to the search bar than to type in their queries in order to find the needed products or services
by allowing them this convenience, you improve their experience on your website and that'll bubble up to your web traffic, conversions... revenues
"Becoming voice-first is going to be the new mobile first" (DrupalCon Nashville 2018)
In other words:
understanding how search engines provide accurate answers to users' vocal queries
optimizing your content to the patterns that you will have identified
… will have a huge impact on the user experience on your Drupal site.
Source: Gartner.com
And great user experience is what sets high ranking websites apart from... the rest.
2. Here's How You Make Your Content Cater to Voice Search Queries
Spoiler alert: I'll be pinpointing just the main techniques to apply for optimizing your content for voice search.
If you feel like delving deeper into this topic, we have a full post focused solely on actionable tips for optimizing your website for voice search.
That being said, here's the list of essential voice search SEO techniques to implement:
2.1. Incorporate Short, Simple, Clear Answers Into Your Content
30 words at most, according to Backlinko's research.
2.2. Fine-Tune the FAQ Page on Your Drupal Site
This page alone plays a key role in your voice search optimization strategy. It's there that search engines often “extract” their answers from.
2.3. Use Natural Language When Writing Your Content
A user would speak to a search bar as he/she would ask a question to a person. Which is significantly different from him/her interacting with a text search box via a robotic keyword search entry.
2.4. Configuring Drupal for Voice Search: Optimize Your Content for Google's Featured Snippets
I'm not going to get into details here, but there are lots of highly valuable MOZ blog posts on this topic that I recommend you have a look at.
2.5. Center Your Drupal Voice Search Strategy Around Question Keywords
“How to...”, “What to...”, “Why use...”
2.6. Make Sure to Include (Really) Long-Tail Keywords Into Your Content
5+ word keywords, I mean.
3. Set Up a Drupal Voice Search Engine in Just a Few Steps
How do you create a search system based on voice on your Drupal website?
Image by Kaufdex from Pixabay
Here are the easy steps to creating a custom voice search engine with Expertrec:
First of all, you need a google tag manager account, a Gmail id, access to your Drupal admin dashboard and a valid sitemap
Set up an account on https://cse.expertrec.com??platform=cse using your Gmail ID
Enter your website's URL login to your Drupal admin panel and install google tag manager: https://www.drupal.org/project/google_tag
Enter your google tag manager ID and save the configuration
Access https://cse.expertrec.com/csedashboard/home/code and copy that code
Add the first part of the code in your control panel, using Google tag manager
Use the custom HTML option and configure the trigger to place it on all the web pages on your Drupal site where you want the voice search enabled
Go to Structure-> Block layout-> Header ->Place block-> Add custom block-> click on source and enter: <ci-search></ci-search> (opt for "full HTML"). It's this code that will display a search box in your website's header
Hit the Save button and finally, navigate to UI customization->features-> enable voice search
And that's it: 9 simple steps to add voice search to your Drupal site.
4. Building Your Own Voice App: Why Would You Want to Use Drupal?
Now, let's say that you've optimized your Drupal website for voice search, improved your search ranking and given your traffic a major boost.
And you've decided to go further and... build your first voice app, as well.
Why would you use Drupal to build it?
Here are some of the most solid reasons:
Drupal provides you with a sophisticated user permissions and access control system
it allows you to restrict access to content
it provides you with fieldable content
it ships with a pre-built front-end Drupal
it enables you to put together complex content workflows
it provides multi-language support out of the box
it provides you with an API module
Note: in the end, it's your use case, along with all the specific feature needs deriving from there, that should influence your final decision.
But how would your Drupal voice app work, more precisely?
Here's the whole "mechanism" in the back-end, summed up to 4 stages:
the user talks to the voice assistant (Alexa, Siri, Cortana...)
the voice assistant talks to Drupal
Drupal provides an answer to the voice assistant
the voice assistant delivers the answer to the user
Chatbot API is the module that makes communication between Drupal and the AI voice assistant possible. It integrates, out of the box, with Dialogue Flow and Alexa.
I won't go into detail on the basics of a voice-powered app and the fundamentals of a VUI design.
Yet, I recommend you watched the DrupalCon session on Powering an Alexa App with Drupal. It includes a handful of useful tips and actionable information on building a Drupal-powered voice search.
In this chapter, my sole intention was to outline those Drupal features and functionalities that make it the best candidate for a voice app.
The END!
I won't hide it: I'm curious whether you've already got your Drupal website voice-search friendly or not just yet.
What strategies have you implemented so far to make your content more findable for vocal queries?
Have you set up your own Drupal voice search engine?
Are there any obstacles that Drupal challenged you with? That made the whole optimization for voice search more complex than expected?
Let us know in the comments below.
Photo by Matt Botsford on Unsplash
Adriana Cacoveanu / Mar 23'2020
In today's post, I'll share with you a selection of 10 European websites powered by Drupal.
From:
the most famous higher education website in Europe running on Drupal
to the most popular newspaper-website in France
to the most visited recipes and cooking website in the UK
... I'll put the spotlight on the top 10 Drupal websites in Europe.
So, without further ado, here are the names listed on Drupal's European hall of fame:
1. BBC Good Food, One of the Top 10 Drupal Websites in Europe
The most popular recipe website in the UK and one of the most visited Drupal websites in Europe.
The BBC Good Food team had very clear objectives when they chose Drupal for their rebuild:
to provide engaging content on their platform
to deliver a seamless experience across all devices
to deliver a unified experience to its international audience
to guarantee their visitors a powerful search and intuitive navigation
And Drupal was the only CMS to check all the goals off their list.
Here are just some of its features that made it the only choice for the BBC Good Food rebuild:
scalability: Drupal's built to scale up and withstand massive amounts of traffic
sophisticated content workflow: from Drupal's robust WYSIWYG editor to the role-based access control system, to the preview feature and the powerful content editing and publishing tools, BBC Good Food's content team can now add, edit, and upload various types of content... on the fly, across all devices
built-in multilingual support: the BBC Good Food website was redesigned with a global audience in mind
“We rebuilt the site in Drupal, which will allow us to spin out versions of the site internationally, for example with the same core content but reflecting different language and market trends, and with some local content on top of it. But we still need to develop plans for this.” (Chris Kerwin, BBC Worldwide’s head of publishing)
Other popular cooking sites built on Drupal: 24 Kitchen, Bosscaffe, Alevri.
2. Joinup, a Collaborative Platform Created by the European Commission
A Drupal-powered collaboration platform that contains a heavy load of content in the form of:
news
discussions
case studies
events
interoperability solutions (guidelines, software, code-lists, vocabularies, taxonomies, licenses, organizational assets)
“Interoperability solutions” that users (public administrations, citizens, and businesses) can share, find, re-use, and get inspired by to develop and implement new ones.
Now, you can just imagine that:
such a high volume of data
such a diversified ecosystem of content
... have turned Drupal into the unique CMS option to consider for Joinup.
Its excellent content capabilities and high scalability have made Drupal the best solution.
“On 4 October 2017, a brand new version of the platform, based on Drupal 8, went live. This migration from Drupal 6 to Drupal 8 was mainly driven by the fact that the maintenance of version 6 by the Drupal community was coming to an end and, also, by the performance and scalability improvements introduced by Drupal 8.” (source: Joinup.ec.europa.eu)
3. Jysk
The Danish retail chain is a leader in the European market of furniture and household goods, with online stores in 20 countries. Which makes its website (or better said "network of sites"), one of the most famous Drupal websites in Europe.
Why did the company choose Drupal to power its web presence? Because:
Drupal provides them with a multi-site architecture: Jysk's online presence translates into 20 different domains with similar feature sets and functionalities, sharing the same codebase, yet with different databases and configurations
Drupal's flexible: which enabled them to come up with fully customed e-commerce solutions, robust enough to cope with their complex business processes and backend systems
Drupal provides them with powerful content management features
Drupal provides them with multi-language support right out of the box: a crucial functionality considering that their website content needs to be translated into 20 different languages
Drupal's built to cope with high volumes of traffic: which, for Jysk, means about 60 million page views per month
4. Carrefour.fr
Why did the leading retailer in Europe choose Drupal for its e-commerce website?
For all the obvious reasons:
Drupal's editorial workflow: it empowers content creators to edit the content on carrefour.fr quick and easy and as often as needed
Drupal's one of the most secure open-source CMSs: an aspect of critical importance when handling lots of customer data
Drupal's system of roles and permissions: the granular access control system allows editors/admins to monitor who edits/publishes different types of content on the website (from product descriptions to prices)
Drupal's built with high-traffic websites in mind: massive volumes of traffic and intense e-commerce operations is what Carrfour.fr, one of the top 10 Drupal websites in Europe, needs to withstand
Drupal's online payment system: and here we're talking about a high volume of online payments being carried out daily
Drupal's equipped for content-heavy websites: hundreds of products, prices, product-specific promotions... no wonder that this retailer chose Drupal for powering its e-commerce website with: Drupal's the robust, go-to option for content-packed websites
5. Sevilla FC
Sevillafc.es is one of the most popular Drupal websites in Europe.
Why did the football club go with Drupal for their website?
Because:
they needed to appeal to an international audience and Drupal 8 provides multilingual support out of the box
they needed to get their new website equipped for high peaks of traffic and Drupal's already famous for powering some of the world's most visited websites
they needed a CMS that would enable their administrators and content team to add, update and publish content quick and easy and Drupal provides some of the most powerful content management workflow tools
they needed powerful multimedia capabilities, that Drupal provided their website with
they needed to set up a content management workflow for their mobile app content, as well: Drupal enables them to update and distribute content from a single entry point to their entire network
A "network" that includes their website, mobile app, and third party system.
6. Cancer Research UK
Among the top 10 Drupal websites in Europe, Cancerreaserchuk.org stands out with its vision:
“Our vision is to bring forward the day when all cancers are cured.”
It's no surprise to anyone why Drupal was chosen: it powers the websites of some globally known NGO, charity and non-profit organizations.
What I'd like to draw your attention to, in the case of Cancer Research UK in relation to Drupal, is Drupal Commerce powering its whole network of online shops.
The main goal, when bringing all the shops together on the same codebase was:
to deliver a seamless shopping experience
all while preserving each shop's identity
7. University of Oxford
Multiple individual sites under the same umbrella, providing a seamless, yet site-specific user experience.
Multiple departments of the same university in full control over their web presence... Does it ring any bell?
The website of the University of Oxford couldn't have been powered by another CMS than Drupal.
And the Application Development team there, at Oxford, dared to take Drupal's capabilities even further: they developed Oxford Mosaic, a Drupal multisite solution.
“Oxford Mosaic provides an easy-to-use interface for publishing attractive, responsive websites. Centrally maintained and fully supported, Mosaic is a cost-effective and sustainable web publishing solution.“ (source: Meetup.com)
By using Drupal:
creating new customizable web pages and even whole new sub-sites, from the ground up
handling a massive volume of content, highly diversified content, ranging from news and events to university research and information on the admission process
withstanding high volumes of web traffic, with all the students, faculty, and alumni accessing the website on a daily basis
… became easier.
8. The Paris Opera
Paris Opera's website is another one of those Drupal website examples that stand out. Like many other large organizations in Europe (and worldwide), they chose Drupal for being:
reliable
secure
robust
flexible to accommodate all development needs
9. Le Figaro
The online presence of the largest national newspapers in France is Drupal-powered.
No wonder why:
like any high-traffic newspaper website, it depends on Drupal's robustness for facing the challenge of live videos, media, and feeds-packed web pages
Le Figaro depends on Drupal's capabilities to deliver loads of varied content at a high page loading speed
it depends on Drupal's powerful features to support its social features (e.g. the comment sections on their articles)
10. Lush Cosmetics
Lush.com sets itself apart as one of the top 10 Drupal websites in Europe.
It 's also one of the most complex ones, from a content and user experience standpoint. A Drupal website where content and comments blend in beautifully.
Now, let me pinpoint just the strongest reasons why this company chose Drupal:
it stores a large catalog of products, with lots of interactive features that bubble up to the user experience: star ratings, user reviews, wishlists, charity pot
it's “packed” with tons of varied content that needs to be edited and published quick and easy: product videos and guides, ingredients lists, articles
it provides a seamless multi-channel customer experience
it addresses a global audience
In other words, Lush selected Drupal because:
it supports Lush's complex editorial workflow
it provides enough flexibility so the Lush team can easily update and customize various sections on the website
it integrates beautifully with third-party systems (various payment gateway, for instance)
it enables them to provide highly personalized experiences to users accessing their website from countries all around the globe
it grants the best user experience on all devices: their Drupal website's conveniently responsive
it's built to “fuel” even a heavy and complex content infrastructure like Lush's
The END!
These are the 10 best European Drupal websites.
What do you say: do you find it accurate or have we done certain websites an injustice?
Let us know, in the comments section below, if you agree with our top 10 Drupal websites in Europe.
Adriana Cacoveanu / Mar 19'2020
In this post, I'll share with you the top 10 rules of good UI design.
You will be learning:
What are the essential elements of a good UI design
What are the most common UI/UX mistakes that designers make
What are the UI best practices in 2020
Lots more UI design tips
Now, let's get started.
1. Aim at an Almost Invisible User Interface
What is a good UI design?
A logical structure & necessary visual elements only.
In other words, in order to design an almost invisible user interface you need to:
be “merciless” and keep the essential elements only
base your UI on a well-thought-out structure
use clear language in your text messages and on your labels
Source: Medium.com
A poorly structured and cluttered UI would only make the user ask questions like: “Where's the main menu?”
2. Keep It Consistent
And this is one of those good UI design principles that's overlooked or undermined most often.
Consistency should span over the entire ecosystem of elements that make up a UI design: fonts, colors, menus, buttons, icons.
Keeping a consistent UI throughout your website translates into creating patterns aimed at enhancing efficiency.
At improving the user experience.
And here I'm referring to layout, design, language patterns. Once the user gets familiar with a given pattern, it will be easier for him/her to interact with other parts of your website that present the same pattern.
3. Be Purposeful with Page Layout
One of the fundamental rules of good UI design is to structure your pages based on importance.
In this respect, here are the crucial principles of user interface design to guide your page layout creation:
take into account the spacial relationships between various elements on the page
place your UI elements strategically: draw users' attention to the most important information on the page and make it easy for them to scan it through
keep in mind that “form follows function”: design each item in accordance to its function (no need to reinvent the wheel and to turn the hamburger menu into a... sandwich menu, for instance)
stay away from clutter, at all cost: keep the visual elements on the page to a minimum
make smart use of headings, group similar elements together, add numbered items, as well, all in the name of readability
IMAGE Image by 200 Degrees from Pixabay
4. Use Color and Texture Strategically
Make smart use of color, texture, contrast, and light to direct the user's attention to key elements and important information on the screen.
5. Use Familiar UI Elements: One of the Key Rules of Good UI Design
One of the UI best practices that's both:
the easiest to implement
the most underestimated
And it all comes down to intuitive design. To sticking to common elements when creating your user interface.
Again, the hamburger menu makes the best example: once spotted, the user knows what it is and how to open it.
Restrain yourself from showing off your creativity as a web designer. From being "discouragingly" innovative. Form should follow function, remember?
Instead of impressing your users, you should help them get things done quickly and easily.
That's what delivering a good user experience is all about, after all.
6. Put the User in Control of the UI
Instilling a sense of control in the user is one of the most powerful UI design principles.
Source: xd.adobe.com
In this respect, here are some specific measures that you can implement:
6.1. Provide enough context
Ensure that the user knows, at each stage of his journey on your website, where he is, where he's been, and where he could go next.
Tip: place visual cues to help the user develop a sense of mastery and control.
6.2. Be transparent about the system status
Another one of those golden rules of good UI design:
Let the user know, at all times, what's the status of the process that he's initiated.
For instance, he/she might have started an action that requires some time for the computer to carry out.
In this case, make sure you provide feedback, at regular intervals, about the system status, about what's going on.
6.3. Make actions reversible
In other words, allow users to:
unselect
undo their last actions
restart whatever processes that they've engaged in
6.4. Design your UI with all user skill levels in mind
And this is one of the most obvious characteristics of a good UI design.
It's an easy to use interface for both casual and expert-level users.
6.5. Provide feedback on every user action
It's more than a good UI best practice: it's a matter of... good manners to provide at least some sort of feedback at each point of action.
Therefore, make sure your system delivers a meaningful reaction each time a user:
clicks on a menu
hits a button
clicks on a text message tab
Let the user know, using specific UI elements — animations, progress bars, pop-up windows, color change — whether he's successfully carried out the action or not.
7. Minimize Cognitive Load: Recognition over Recall
“Task-relevant information only” should be one of your key rules of good UI design.
And sticking to a limited number of elements within the display aligns with the very limits that the human attention, itself, imposes.
In this respect, it's human nature that your users prefer to recognize information across a sequence of screens rather than to strive and recall it from their memory.
For instance, our cognitive load is always lighter when we're challenged to answer multiple-choice questions compared to having to tackle short answer questions.
8. Stick to One Primary Action per Screen
And here, we go back to the “visual declutter” principle again:
Make sure that each screen supports just one single main action.
Squeezing too much information on the same screen and requesting the user to carry out more than one primary action will just:
confuse him/her
distract him
lead to attention overload
9. Use Typography to Create Visual Hierarchy
Most likely one of the easiest to follow rules of good UI design.
Strategically use different font sizes and display text to enhance:
readability
scanability
legibility
Photo by Alice Donovan Rouse on Unsplash
10. Stick to a Small Number of Gestures
Gesturing, swiping, tapping, pressing... no need to “squeeze” all these user actions into your app. Keep them to a minimum.
Tip: Facebook and WhatsApp make some good UI design examples; their interfaces require a limited number of user gestures.
Pro tip: make sure it's crystal clear to your users what gestures they need to perform in order to carry out certain actions on your interface.
Source: Medium.com
The END!
Now, I'm really curious to hear/read your thoughts:
How does your own list of must-follow rules of good UI design look like? Have I overlooked any key best practices?
Let me know in the comments below.
Image by FiveFlowersForFamilyFirst from Pixabay
Silviu Serdaru / Mar 17'2020
"How do I test my website for accessibility?" And right after you type in this question you discover that there are dozens of free website accessibility testing tools to choose from. So: why use Siteimprove?
In this post, I'll answer your key questions about Siteimprove:
What does Siteimprove do?
Why use precisely this accessibility evaluation tool?
How to use the Siteimprove Accessibility Checker?
Siteimprove vs Axe: what are the key differences?
Monsido vs Siteimprove: which is the best web accessibility testing tool for you?
Drupal 8 Siteimprove: what does it do?
So, let's dive in:
1. How Does the Siteimprove Accessibility Checker Work?
"The Siteimprove Browser Extension is a Chrome/Firefox plugin that allows you to see page specific DCI scores and if a CMS deep link is set-up, it also allows you to fix content to improve the scores directly in your CMS during your browser session." (source: Siteimprove.com)
Once added to your browser toolbar, you can use Siteimprove to identify accessibility issues on specific web pages. At any given time.
It provides you with:
explanations on how they impact the user experience
clear recommendations on how to address them
Free, handy, effective. These are the best 3 words to describe the Siteimprove extension.
Note: since all evaluation is performed in your browser, Siteimprove guarantees you a secure scanning of your non-public pages, multi-step forms, password-protected pages and pages with dynamic content.
2. Why Use Siteimprove over Other Website Accessibility Testing Tools?
What powerful features make it stand out from the crowd of automated accessibility testing tools that you could use?
I've selected the 8 most valuable ones:
2.1. Monitors all broken links and spelling mistakes on your web page
Maybe you consider these issues to be mere... negligences to be put at the end of your priority list.
But just imagine how much these "details" could affect a visually impaired user.
This is where the Siteimprove Accessibility Checker comes in. It keeps your website under "surveillance". Ready to spot and to highlight any broken link, any little spelling mistakes that it detects. Or any other quality issues that it identifies.
2.2. Generates an accessibility report for you to analyze
From ALT missing attributes to accessibility issues spotted in your tables and forms, the Siteimprove report lists all the problem areas to focus on.
A handy overview that you can use to define all future tasks that need to be carried out in order to improve your website's accessibility.
2.3. Pinpoints accessibility issues
It'll highlight them all right on-page and in-code.
In other words, you don't need to do a research on all the latest accessibility guidelines first.
The Siteimprove extension for browsers will outline all the key issues that you'll need to focus on to get started.
2.4. Integrates seamlessly with your CMS
Whether it's Drupal or WordPress that you're using, Siteimprove enables you to fix the signaled issues on the spot. Right there, in your CMS, while you're browsing around your website.
2.5. Allows you to automate the accessibility checks
And by automating the bulk of your testing process, you get to streamline all the tasks that it covers, such as:
testing various color combinations
evaluating your PDF pages' accessibility
testing your form fields
2.6. Provides specific recommendations
Why use Siteimprove?
Because it doesn't stop at pointing out the accessibility issues on your website: it also gives you clear explanations on how to address them.
2.7. Enables you to monitor your progress in improving your website's accessibility
industry benchmarks
historical graphs
automated reports
customizable dashboards
All these Siteimprove features enable you to measure the progress that your team makes for turning your website WCAG 2.1 compliant.
2.8. Allows you to set up a hierarchy for the accessibility issues identified
In short, the Siteimprove web accessibility checker enables you to categorize and to prioritize tasks by:
severity
conformance level
And to assign them by job role (webmaster, editor, developer...) or responsibilities.
3. How to Use Siteimprove Accessibility Checker?
Say you want to try the Siteimprove Google Chrome Extension. Here's how you use it:
install the Siteimprove Accessibility Checker Chrome extension from the Chrome Webshop from your Chrome browser
add the extension to your browser: "Add to Chrome"
look for the newly added icon in your browser window
enter your target web page's URL in your browser
click the Siteimprove Accessibility Checker icon and let it perform its audit
take a look at the results displayed on the right side of the page
Note: Siteimprove Accessibility Checker uses the same checking engine as the Siteimprove Accessibility platform.
4. Siteimprove vs Axe Accessibility Tool
Why use Siteimprove over Axe? How are they different anyway?
Let's compare these 2 popular accessibility testing tools:
4.1. Axe browser extension
It generates detailed results, but you might find its slideshow-style controls a bit challenging
4.2. Siteimprove Accessibility Checker
it stands out as an accessibility testing tool that allows you to filter tasks by "responsibility" (or job role)
also, it displays the issues that it detects following the same structure of the WCAG guidelines
it presents color-codes issues by conformance level (A, AA, AAA)
it points out to the specific WCAG criteria that those issues relate to
5. Monsido vs Siteimprove Accessibility Checker
And why would you choose Siteimprove over Monsido?
Here's what sets them apart:
Monsido provides comprehensive crawls weekly, whereas with Siteimprove you get automated crawls every 5 days
Monsido could discourage you with its less-friendly UI, whereas Siteimprove has a more intuitive dashboard
6. The Drupal 8 Siteimprove Module: What Does It Do?
"The seamless integration between Siteimprove and Drupal streamlines workflow efficiencies for your web team. With the module, your team can fix errors and optimize content directly within the editing environment." (source: Siteimprove.com)
In short, the module (or "Siteimprove plugin", if you wish):
scans your website for accessibility issues (broken links and misspellings, A, AA, AAA conformance level accessibility issues, readability levels, etc.)
that you can then turn into manageable tasks and assign to your team members
who can tackle them right in the editing environment that they're using
Tip: you can even use the Drupal 8 Siteimprove module to see what would be the impact if you unpublished a "problem" page before you apply this measure.
The END!
Have I managed to answer your "Why use Siteimprove?" question?
Are you already using it as your website accessibility checker? If not, what other tool are you using and why have you chosen precisely that one?
Let me know in the comments below.
Image by Sitanshu Kumar from Pixabay
Adriana Cacoveanu / Mar 12'2020
There’s no better way of telling which tool best fits your needs than by putting Drupal 8 Layout Builder and Paragraphs to the test, right?
If you were searching for an honest comparison of the 2 Drupal 8 drag and drop page builders, you’re on the right blog.
Because in this post I’ll compare Drupal Layout Builder vs Paragraphs.
What you’ll get is a straight answer to each one of your key questions regarding the 2 most popular page building tools in Drupal:
Why would you choose Drupal Paragraphs?
What are its main trade-offs?
What are its best use cases?
What are the key advantages of using Drupal 8 Layout Builder?
What are its limitations?
What are the use cases of Layout Builder vs Paragraphs?
Now, let’s get you those answers:
1. Drupal Layout Builder vs Paragraphs: Introducing the 2 Contestants
1.1. Drupal Paragraphs
The Paragraphs module was quite a revelation when it was first released.
Why? Because Drupal rocked supreme at enabling users to create template-based pages, but when it came to uniquely designed pages (i.e. landing pages) it started to show its limitations.
And this is where the Paragraphs module came in. It “seduced” Drupal developers with a new component-based approach to building a page’s layout.
Source: Championsdigital.com
The Paragraphs layout builder would allow developers to create individual paragraph types — popup elements, plain text, code blocks — and editors to assemble those paragraphs into highly flexible pages.
Moreover, they could reuse those page components to create new and new content layouts.
For instance, they could put together a page that included one WYSIWYG Paragraph, a Slideshow Paragraph, and one paragraph with both text field and image field...
The idea of “flexible structured content” had taken over the Drupal planet...
1.2. Drupal 8 Layout Builder
The drag and drop page builder in Drupal core designed to take the content editing experience to a new level.
How? By granting editors more control over the Drupal layouts they create.
Drupal 8 Layout Builder enables non-technical users to easily mix and match nodes, fields, and other types of content via a drag-and-drop UI.
They can create their visual layouts and landing pages in no time. All they need to do is drag and drop, then rearrange site-wide blocks and content fields to their liking.
Source: Drupal.org
Moreover, users can even create new custom “inline” blocks of their own.
Power and flexibility combined into one visual design tool aimed at improving the editor experience.
2. What Are Their Key Strengths?
2.1. Drupal Paragraphs
In a Drupal Layout Builder vs Paragraphs “battle”, why would you go with the “stacked components” approach to layout building in Drupal 8?
Source: Drupal.org
Because the content editing experience is intuitive: editors can use the “Add a popup” and “Add a quote” tabs and rearrange their components with drag and drop
Because it enables you to group multiple fields into new complex elements
Because it allows you to come up with an unlimited no. of ways for combining your paragraphs
Because it enables you to create reusable components that you can then use per node
Because it prevents the workflow of your nodes from becoming too cluttered by providing an entity type for your sub-page components
Source: Drupal.org
2.2. Drupal 8 Layout Builder
What are its key selling points? Why would you choose Layout Builder over Paragraphs?
Because it requires less custom code
Because it grants you a higher level of control over the layouts you’re creating
Because it grants you lower maintenance costs
Because you get to mix field content with blocks
Because you’re free to create and populate new landing pages from the ground up: just set up your custom content blocks and arrange them to your liking within the layout
Because it provides you with an improved authoring experience
Because you can extend the default set of layout grids through custom plug-ins
Because it allows you to keep your structured data
Because it enables you to get the most of the block system for creating your Drupal layouts: custom inline blocks, programmatic blocks, custom global blocks, custom field blocks
“Blocks” that are fieldable, translatable, templatable, reusable, and part of Drupal core, as well.
Source: Phase2Technology.com
In a nutshell, this Drupal page builder provides both:
an easy way to manage fielded content in the backend
the best drag-and-drop editor experience
3. Where Does Each Drupal Page Builder Fall Short?
3.1. Drupal Paragraphs
What could make you… hesitate before choosing the Paragraphs layout builder for creating structured content? What are its key limitations?
You (your content editors) still depend on a developer to set everything up
Managing nested paragraphs when dealing with complex layouts can get quite overwhelming
Source: Evolvingweb.ca
And this is the biggest trade-off that could discourage you from going with Paragraphs as your page building tool:
You get to nest/add new and new elements, which carry their own sets of elements, up to the point where this “unlimited nesting” of paragraphs turns into a too confusing interface to cope with.
3.2. Drupal 8 Layout Builder
Where does it fall short?
In a Drupal Layout Builder vs Paragraphs “debate”, which drawbacks of this visual design tool could make you choose Paragraphs instead?
You might find block content not to be 100% explicitly connected to nodes
Combining template-based with custom layouts is a bit challenging
Enforcing a sitewide consistency of your custom-made layouts is quite a dare
4. When Would You Use One Layout/Editing Tool Over the Other?
4.1. Drupal Paragraphs
When you need to reuse many of the content components on your website to create new pages
When being able to reuse those components “per node” is of particular importance for your workflow
When your structured layout does call for nested paragraph bundles
4.2. Drupal 8 Layout Builder
When would you use this particular solution for creating layouts in Drupal 8?
When is Layout Builder a better choice than the paragraphs module?
When your landing page calls for a grid-like layout, including both dynamic elements (custom blocks, views) and fielded content
When you need to “juggle with” multiple columns for creating your layout
When you need to create a fully customed page from the ground up; a “special” page, that’s not connected to any structured content on your website (i.e. a single “Get a Quote” page)
When you need to custom-tune templated layouts; to override existing page layouts
When you need to set up “layout templates”, such as the layout for your product page or your blog post page
5. Final Results: Which Approach Best Fits Your Needs?
What do the results of this Drupal Layout Builder vs Paragraphs comparison tell you?
That there’s no “best” Drupal page builder. Only the one that best fits your specific layout creation needs.
It all comes down to the level of diversity in your content:
If it’s a particularly intricate page layout that you need to create, you might not want to go with Paragraphs. Its nesting feature can turn against you.
If you’re “craving” flexibility and the content on your Drupal 8 website varies a lot from page to page, yet you still want to keep a level of layout consistency, the Drupal 8 Layout Builder is your best choice
Your turn now: which of these 2 page building tools do you prefer and why?
Let me know in the comments below.
Image by 200 Degrees from Pixabay
Adriana Cacoveanu / Mar 06'2020
You've gone through the guidelines, standards, warnings, and best practices included in the W3C recommendations and... you're stuck. How do you know whether your website is 100% WCAG 2.1 compliant? What are the best web accessibility testing tools out there that you could use?
Free, easy to use accessibility evaluation tools that you could run on your website to spot the issues lurking in there.
And which could even get you some valuable recommendations on the best ways to address them.
All that before you actually have someone (or even a whole team of QA testers) review your website. Before you carry out an in-depth accessibility audit and run user-centric testing sessions with... real people involved.
You must be thinking about browser extensions...
They're so accessible: you just open the page you want to check and click a button in your toolbar. They're free and make great "starts" for identifying accessibility issues on your website. And for getting your hands on some valuable recommendations on how to fix them.
So, here are 5 automated accessibility testing tools that we recommend you try first:
0.1. But What Are Accessibility Tools More Precisely?
"Are there any recommended tools available that can help me test for accessibility issues?"
Take these common accessibility issues that might still go "undetected" on your website:
there's not enough color contrast on certain pages (or no contrast at all)
one or more images don't have ALT descriptions added to
an editor deleted the content for one of the H2 tags but left that tag lingering in there and confusing the screen readers
someone from your design team has put a placeholder text instead of a text field, which risks displaying an unlabeled field, that screen readers cannot... read
there's one label missing from your newsletter sign-up form
These are all frequent issues that web accessibility evaluation tools can help you detect and address.
They fall into multiple categories:
browser extensions, that we'll be focusing on in this post
command-line tools accessibility testing tools that you can integrate with your continuous integration system
Tip: Keep in mind that the following 5 best web accessibility testing tools detect about 30% of the issues. They make a great starting point for a more complex audit and comprehensive monitoring strategy that you should set in place.
1. Wave, The Venerated Web Accessibility Evaluation Tool for Chrome
A full-featured, easy to use website accessibility checker that's been in most developers' toolkits for quite a few years now.
Here's how it works:
it adds a visual overlay of error icons and indications to the web page that you're auditing
icons which, once clicked, provide you with information and recommendations about the accessibility issues detected: redundant titles, structural elements, links to HTML, poor color contrast, how those issues impact different types of users, what WCAG guidelines they violate, etc.
it points out to you the "troublesome" code via annotated HTML popping up in the panel at the bottom of the screen
In short, Wave is one of the robust website accessibility checkers that goes beyond streamlining your audit process.
It's also geared at educating users (website owners, QA testers) about the accessibility issues to pay attention to.
"How to use Wave accessibility tool?"
Either way:
you can just enter your URL in the dedicated field on their website
you can download the browser extension
Go for the extension particularly if it's dynamic, password-protected and locally stored web pages that you need to check.
2. Tenon, Accessibility as a Service
"How do I test accessibility?"
Tenon's another tool that comes both in a free and paid version.
What makes it "worthy" of this top 5 selection?
it addresses the common scenario: running accessibility tests after neglected guidelines have already turned into critical issues that affect the user experience
it's such a flexible tool for content creators, designers, developers, and testers
it generates... generous reports with code snippets for each error, corresponding WCAG guidelines, and recommendations on how to fix them
In short: Tenon helps you run a preventive type of accessibility check on your website. You can detect key issues before they even get to turn into major usability problems
Furthermore, you can easily incorporate Tenon into your toolset via its API. It integrates smoothly with any CMS, IDE, deploy tool or automated build that you might be using.
3. Google Lighthouse, One of the Top Automated Accessibility Testing Tools
"How do I know if my website actually is WCAG 2.0 compliant?"
You give it a full check using a tool like Google Lighthouse here:
it's open-source
it's automated
it's so handy (it's Chrome built-in)
it's super easy to use
Moreover, this accessibility testing tool is part of a whole suite of checks that you can run using Chrome Developer Tools:
SEO
Progressive Web App
Performance
Best Practices
What it does it provide you with a full report of its test results:
whether all the buttons on that page have accessible names or not
whether all the images have ALT attributes added to
whether that page has a title or not ...
Next, you simply take it from there and improve the areas signaled in the report.
And here's how you use it:
open devtools in your Chrome Browser
look for the "Audits" tab
click "Perform an Audit"
Tip: save the report in a JSON format for later (or to send it to someone in your team).
Another great thing about Google Lighthouse is that it's one of those web accessibility evaluation tools that don't require you to sign up. You just drag a report onto the online report viewer that it provides you with.
4. Axe Browser Extension
"How do you know if your site actually is WCAG 2.0 compliant?"
You "grab" a tool like Axe here and give your site an automated audit.
It'll just attach itself as a new tab to your Chrome's Dev Tools. Once you click that blue "analyze" button, you'll be given a whole list of "violations" detected on your page.
Why have we included it in our highly exclusive list of 5 best web accessibility testing tools?
because it's free (a self-contained open-source library)
because you get to custom-tune it to your specific accessibility testing needs: add specific rules, integrate it with testing frameworks and browsers of your choice...
because each signaled issue "exposes" the corresponding markup, as well
Just hit "Inspect code" and you're taken to the tab in DevTools, where the "culprit element" is outlined.
Tip: another reason why this is one of the first website accessibility checkers that you should consider is that the Axe accessibility report goes beyond signaling clear violations of accessibility guidelines.
It also highlights aspects that you could improve on your website's UI.
5. Siteimprove, One of the Best Web Accessibility Testing Tools
We confess: Siteimprove is our favorite website accessibility checker. Here's why:
it provides us with actionable information regarding all the issues that it detects
it generates clear explanations on the impact of those issues on some users
it also "spoils" us with intuitive user experience: issues get highlighted to the right side of the page
Where do you add that the entire web page audit process is performed in our Chrome browsers.
Easy to use and highly efficient. What more could you wish from a free accessibility testing tool?
Final Word
Turn this type of accessibility testing — using Chrome extensions — into a part of a more comprehensive testing strategy.
You shouldn't limit your evaluation to the results that you get by using any of these 5 best web accessibility testing tools.
There's still some level of "human intervention" needed to interpret those results. To come up with the proper set of steps to take, right?
Use them if you just want to check whether:
there are any images without ALT descriptions on your website
the HTML is valid
your form fields have both labels and descriptions
Whereas for assessing:
whether that HTML is semantic or not
whether those form field descriptions are user-friendly enough
whether there's a proper heading hierarchy on a given page on your website
... you'll need human analysis.
Automated accessibility testing will (only) point out key aspects for your QA testers to focus on.
The END!
Have you used any of these accessibility testing tools on your website?
Do you usually stop your audit there or do you use an automated & manual testing type of "combo"? Does it depend on the context actually?
Share your thoughts in the comments down below!
Photo by John Schnobrich on Unsplash
Adriana Cacoveanu / Feb 29'2020