In light of the recent COVID-19 pandemic - OPTASY would like to offer DRUPAL website support for any Health Care, Government, Education and Non-Profit Organization(s) with critical crisis communication websites or organizations directly providing relief. Stay Safe and Stay Well.

Here Is How You Build an Accessible Website With Drupal 8

Here Is How You Build an Accessible Website With Drupal 8

by Adrian Ababei on Jan 11 2017
"Barrier-free access” is carved within the very “DNA” of Internet itself. Therefore, your site, too, should be accessible first and foremost!
 
Before you even start to make it visually-arresting and useful. Before you even consider how you could add value to your website visitors' lives!
 
What started as an accessibility-focused initiative in Drupal 7, or better said "as an attempt” to comply with World Wide Web Consortium guidelines, has gradually evolved into a powerful set of accessibility-oriented features in Drupal 8.
 
Bugs have been addressed, “old” features improved, new enhancements and new features added in Drupal 8 to boost its accessibility in core.
 
Now let's stop “beating around the bush” and put the facts on the table!
 
Let us enlist and detail to you these particular accessibility-enhancing features in Drupal 8 that will make your job (building an accessible website) easier than never before:

 

1. Improved Contrasts

 
Empathize with those future visitors suffering from colorblindness, then try simulating a context where users would access your website (from their mobile devices) in bright sunlight.
 
Optimal contrast will “send” an invitation to the users in the above real-life scenarios to keep clicking/scrolling and thus prolonging their visits on your Drupal site. 
 
The great news is that Drupal 8's accessibility maintainers have tackled the contrasts' issue and made the necessary improvements.

 

2. Controlled Tab Order 

 
It was just yesterday, in our previews post, that we talked about the importance of “blazing your users' path” to the information they're searching for on your website. About easing their “search” with the right UX elements.
 
Well, this accessibility-boosting feature, in Drupal 8, serves the same purpose. 
 
The Tabbing Manager Javascrip feature is that “flashlight” which will point out the main elements on your website to your visually-impaired or non-mouse visitors.
 
And this enhancement will make all the difference for them!
 
Just think about the time and energy that these visitors save by quickly scanning through your tabs instead of striving to navigate through a complex, crowded user interface relying entirely on screen readers!
 
Zero confusion leads to zero frustrations and to a better user experience for your website's visitors. And this is gold in the age of user experience, right?

 

3. Inline Form Errors

 
And this is a truly notable enhancement, which proves that we have come a long way from Drupal 7 when it comes to the support for accessibility available in Drupal 8's core modules.
 
If in Drupal 7 errors made when users filled in a web form appeared on top of that specific form, while fields got colored in red, as a “warning” sign (not exactly the most effective solution for the visually impaired users), Drupal 8 comes to your rescue with its form inline errors.
 
In this version of Drupal errors icons get displayed next to the specific fields of the form.
 
A much needed improvement, wouldn't you agree?
 
Note: still, the Form Inline Error is an optional Core module, therefore it needs enabling first.

 

4. Fieldsets for Radios and Checkboxes

 
When it comes to the Form Api, here's another great enhancement that Drupal's accessibility maintainers “spoil” you with: fieldsets for checkboxex and radios.
 
Just imagine how this improvement will ease screen readers' (and implicitly non-visual users relying on them) otherwise not at all easy “job” to parse complex forms.
 
Since related elements get grouped together in Drupal 8, it now becomes a lot easier for you (or your team of Toronto developers) to enhance forms in Drupal.

 

5. Alternative Texts for Images

 
Visually-arresting photography and stunning imagery cannot “wow” your visually impaired visitors. 
 
Still, Drupal 8 lends you a hand for helping your users “visualize” and thus “bend before your talent” (or your web designers' talent).

How? With its alternative text for image feature.
 
It's now a required field in Drupal 8, by default: you type in short descriptive text so that all users, without any discrimination, can imagine those visually-arresting images that you'll upload on your website.

 

6. More Semantics

 
Semantics! The ultimate impediment that any initiative aimed at enhancing accessibility on your site needs to overcome.
 
No wonder that one of the ultimate goals of Drupal 8 core maintainers was to “add more meaning to the code”. To enrich Drupal with more semantic HTML elements for the assistive technology to be able to interpret.
 
And here are the achievements of all the sustained efforts in this direction:

 
  • WAI-ARIA landmarks in core (a major step forward)

     
  • live regions

     
  • roles & properties  
 
Now to name just one example of what “more semantics” in Drupal 8 means, when it comes to accessibility: now screen readers can easily interpret pieces of code such as  <footer>, <header> or <form>. 
 

7. Tables and Views

 
Speaking of improved semantics, note that the views tables markup is more semantic in Drupal 8.
 
Let's shed some light on this feature:

 
  • it enables you to explain the purpose of a particular table on your website through a <caption> element

     
  • it enables you to add a quick “summary” explaining which is the best way to navigate the table and how the data included there is structured; and all this by using the <summary> element

     
  • it enables you to use “id” and “headers” attributes and thus associate data cells with header cells

     
  • it enables you to “play with” the “scope” attribute, thus to mark your tables' column and row headings

     

8. Aural Alerts 

 
Animations, color changes, specific text and so on: how do you make visual updates accessible for all users? Even to those relying exclusively on screen readers as intermediates for accessing content on your website?
 
You rely on Drupal 8's Drupal.announce().
 
This JavaScript method creates an “aria-live” element on the page enabling instructions to be read to these specific visitors on your site either as assertive or as polite.

 

9. Hidden Elements 

 
An alternative to CSS styling “display:none” was greatly needed, since this one makes elements invisible both to visual and non-visual users.
 
And hiding them from everyone is no web developer's (or website owner's) intention!
 
Therefore, the team “responsible” for Drupal 8's accessibility decided to enable future Drupal users to rely on 3 different classes for hiding certain elements:
 
  • “hidden”: for hiding an element from all the visitors on your site
  • “visually-hidden”: for hiding an element from your website's visitors, but keeping it “visible” for screen readers 
  • “invisible”: for hiding an element both from the visitors and from screen readers, without influencing your site's layout

     

10. CKEditor WYSIWYG Accessibility

 
CKEditor, too, has been greatly improved in Drupal 8 in the name of empowering users, like you, to generate accessible content on their Drupal websites!
 
Here are its significant improvements:

 
  • the WYSIWYG editor's been upgraded with keyboard shortcuts (for which all those keyboard-only users and power users on your site will “thank you” for)

     
  • more semantic elements have been added: for instance HTML 5 tags which enable you to add captions to images

     
  • a language toolbar button has been added, enabling screen readers to select the appropriate language for each content 

     
  • an accessibility checker plugin is now available for CKEditor
 
And this is precisely how Drupal 8 empowers you to build barrier-free websites that say “welcome” to all visitors, both visual and non-visual! 
 
What do you think of these improvements and new features in Drupal 8?
 
To what extent do you consider that they'll ease (or have they already?) your job as a Drupal web developer/Drupal website owner?
Development

We do Web development

Go to our Web development page!

Visit page!

Recommended Stories

Drupal Performance Optimization: 17 Drupal Caching Best Practices To Speed Up Your Page Load Time- Part 2
"How can I make my Drupal 8 website faster?" Are you still struggling with this? Still striving to figure out which are the best (and most straightforward) Drupal performance optimization techniques for your website? Well, here I am today with a handful of 9 more ways that you can speed up your Drupal site. In addition to the 8 ones that I covered in the first part of this post. And yes: it's another round of Drupal caching best practices that'll help you boost your page load time. So, let's dive right into it: Tip #9: Use the Dynamic Page Cache Module  ... to cache for both authenticated and anonymous users. Unlike the Internal Page Cache module, that I mentioned in Part 1, which only caches pages for anonymous users. Tip #10: Use Distributed Cache, A Highly Effective Drupal Performance Optimization Technique But how does it work, more precisely? Once you've installed a distributed cache, it'll store your database's cache tables (Drupal's "cache_" tables) either in: file or memory Tip #11: Enable Drupal Cache for Anonymous Users Another one of those quick, yet powerful Drupal performance tuning steps that you can take. Tip #12: Use Squid to Cache Images and Static Content on Your Website "How to optimize Drupal for better performance?" You could go for Squid, an open-source caching proxy server. Now, since Drupal's already famed for its particularly dynamic content, the only cases where Squid does make a great performance booster are those where you need to cache static content. Tip #13: Add a Front-End Cache (i.e.Varnish Cache) Here's another handy Drupal performance optimization method for you: Use Varnish Cache to reduce the load on your server. How does it do it? It stores the HTML response, so that next time that the same page is requested, it serves it from memory. The result? Bypassed PHP and web server and... improved page load time. Tip #14: Use the Advanced CSS/JS Aggregation Module to Improve the Front-End Performance of Your Website  Combining your assets together is one of the most straightforward and effective ways to address those Drupal performance issues on your website. From: file grouping to caching to compressing ... the AdvAgg module handles all the steps that you need to take to aggregate your CSS and JS files. Tip #15: Install Memcache to Reduce Your Database Load You know how you're often struggling with keeping your database load to a minimum by caching database objects in RAM? In this respect, Memcache makes a great Drupal 8 performance optimization technique. It helps you reduce that load on the database and boost your page loading time. How? By taking standard caches out of the database. And by caching the results of resource-intensive database operations... Tip #16: Use the Entity Cache Module to Cache... Entities   Another caching best practice to boost Drupal 8 with is installing the Entity Cache module.  And its name says it all: it helps you cache entities. Tip #17: Cache Views  Here's the situation: Page requests made by registered users on your website lead to loads of queries to your database. Which impact the page load time. Now, to query the database, views are being used. And this is where this views caching module comes in handy to... boost things in there.   The END! These are our 17 recommendations for you on the best Drupal performance optimization methods for boosting your page load time. Not thrilled about the idea of having to go through the... Memcache installation process or to configure Varnish for Drupal? Or to put your current projects on hold so that your team can set up a... distributed cache? Maybe you don't have a professional Drupal maintenance team that could handle all these caching settings? We're here to help! Just drop us a line and let's figure out which of these 17 techniques are best suited for your website and the specific performance issues that it's struggling with. Let's speed things up in there! Image by Izwar Muis from Pixabay   ... Read more
Silviu Serdaru / Jun 23'2020
Drupal Performance Optimization: 17 Drupal Caching Best Practices To Speed Up Your Page Load Time- Part 1
"Why is my Drupal site so slow?" "How do I speed up my Drupal website performance?" In other words, what Drupal performance optimization techniques should you use? Which is the: most budget-friendly quickest most straightforward most effective ... solution to those Drupal performance issues that are slowing down your website? Caching... And luckily, Drupal 8 (it is a Drupal 8 website that you have, isn't it?) "spoils" you with one of the most advanced caching systems out there. The trick is that you follow the Drupal caching best practices and use it to its full potential. Speaking of which, here's a list of 17 such best practices: * I'll be covering 8 of them in this post, leaving the 9 remaining ones for the next blog post. But First: What Is Caching? "What is the purpose of caching?" "How does caching improve performance?"  2 legitimate questions that you might be yourself right now. Let me start by defining the Drupal caching process: Once a user accesses a page on your website, content elements and web data from that specific page (images, HTML, CSS, etc.) get stored in an accessible space. When that user visits the same web page again, your website will serve him/her the cached version of the content.  That if you haven't updated it since his/her last visit, of course... And this translates into: reduced bandwidth faster page loads Tip #1: Use the Internal Page Cache Module to Cache Pages for Anonymous Users   Say you have an "Add to cart" functionality for anonymous users on your eCommerce website. You can use this module to cache precisely this functionality. A Drupal performance optimization tweak that'll take you less than a minute to set up. Tip #2: Go for the Best Suited Tools for Heavy Traffic Drupal Sites Say you have a fairly busy Drupal 8 website. You've turned on caching in your performance settings, but... you haven't noticed any significant impact on your site's loading speed. So, you need to bring in the heavy artillery. To use powerful caching tools designed for high traffic websites. Here are some of the best tools and optimization techniques to try: switch to a Drupal-specialized hosting provider like Pantheon or Acquia move your database to its own VM/container (that if you still have it running locally, on your Drupal web server) upgrade to PHP 7.1.0 Enable OPcache via php.ini.  Put a proxy (i.e. Nginx) in front of your server Tip #3: Enable Block Cache - A Quick and Easy Drupal Performance Optimization Solution How to increase Drupal 8 performance? You cache those blocks that don't get updated frequently (like from one user to another). Tip #4: Use Views Content Cache to Update Upon Content Changes Only How does this Drupal module help you optimize your website for better performance? It allows you to expire views caches every time you update or remove content. The great thing about this caching method is that you get to cache blocks that appear on thousands of pages. Tip #5: Use a Content Delivery Network By far the most powerful Drupal performance optimization solution for your website. Why? Here are the 2 strongest reasons why you'd want to use a CDN to cache the static content (files, CSS, images, JS, fonts...) on your website: you keep the network delay to a minimum since your CDN has endpoints across the globe you get a better page loading time: your CDN has a domain different from your website's, so web browsers load content requests to your domain in parallel with the content coming from the CDN Tip #6: Set a Far Future Expiration Date for Your Static Assets Set up a "Newer expire" policy for your static components (e.g. use a far future Expires header) Tip #7: Use Redis as a Drupal Performance Optimization Technique to Store Large Amounts of Data Data that wouldn't fit into your server. "But what is Redis?" you ask? An in-memory store optimized for high-performance. Tip #8: Set the Maximum Time that Your Pages Can Remain Cached Another one of the Drupal caching best practices is setting the maximum amount of time that browsers should keep your cached data. The END of Part 1! And these are but 8 Drupal performance optimization solutions focused on caching. I have a whole list of 17 tips ready to share with you... So, stay tuned for another round of simple and effective caching techniques that'll help you speed up your website... But what if you don't have the time or the people in your team that you could assign tasks like: enable a block cache set up Redis  install the... views_content_cache module ...?  What if you could have a dedicated Drupal maintenance team implement all these performance optimization techniques on your website for you? We're ready to help you speed things up on your website. Drop us a line and let's set up the best caching strategy for your Drupal website. Image by mohamed Hassan from Pixabay   ... Read more
Silviu Serdaru / Jun 19'2020
What Are Some Good Examples of Drupal Sites for Nonprofit Organizations? Top 10 Nonprofit Websites Built with Drupal
Feeling a bit... uninspired? Or maybe you just don't see why you should consider Drupal for your NGO website? What if you could have a look at the top 10 nonprofit websites built with Drupal? And we're talking here about some of the world's most influential charity and non-profit organizations. Here are the 2 main criteria that we've used for putting together this top:   to be straightforward and easy to navigate to be visually pleasing and engaging: a clean and simple design helps the NGO's message shine through   Are these your own requirements, as well, for your non-profit website? Then, get ready to find plenty of inspiration by scanning through these great examples of what other non-profits have managed to do with Drupal: 1. Equal Opportunity Community Initiative  Who is EOCI?  The organization defines its own mission so clearly on its website: “... to build a world where children have equal opportunities to reach their dreams.” And all their projects and initiatives converge to meet this goal: providing equal access to educational resources for all children. Equal opportunity to compete and to succeed. The website that we've built for this international profit (revamping an age-old site, with little traffic and low conversion rate) is still one of the projects in our portfolio that we're most proud of. What makes it a great nonprofit website?   it's visually engaging: it tells a compelling story through visuals it's well-organized and easy to navigate: Drupal 8 has made it easier for us to structure content and to put together an information architecture that's easy to step through it's fast: the better the user experience, the higher the chances that they should turn themselves into the future volunteers or donors supporting the EOCI's initiatives   “The site’s beautiful and performing exactly how we’d hoped it would. The company that manages our Google Ads has found that our conversions have increased...  A couple of our donors are thrilled with the website and have committed their support again. They’re happy to be on the partners' page with a fresh look and approach to the public.” (Sean Kelly, Executive Director, Equal Opportunity Community Initiative, Source: Clutch.co)  2. Rotary International, One of the Top 10 Nonprofit Websites Built with Drupal  Who hasn't heard of Rotary International? A global network of community volunteers (1.2 million leaders and problem-solvers) actively involved in a wide variety of campaigns:   kicking Polo out of Africa providing clean water growing local economies supporting education   Why did they go for Drupal? For 2 strong reasons:   it's flexible: there's a module for almost any feature, any functionality they needed to implement to their nonprofit website it's extensible: no matter how "ambitious" the organization's future causes and campaigns and expectations from their website might get, Drupal's built to scale up to their growing needs 3. Doctors Without Borders Probably one of the best examples of nonprofit websites built with Drupal is Doctors Without Borders (Médecins Sans Frontières). A Nobel Prize-awarded organization of volunteering doctors, nurses, other staff, and journalists. Their mission? Providing medical aid to people affected by pandemics, epidemics, natural disasters, or armed conflicts, no matter their sex, nationality, religion, or political affiliation. Why Drupal?   because it's a multisite network that this global NGO needed and Drupal's famed for its built-in multi-site support. because Drupal's robust enough to withstand massive amounts of traffic (it's the biggest NGO in the world), all while being a conveniently flexible content management solution. 4. Habitat for Humanity International (HFHI)   Another one of the top 10 nonprofit websites built with Drupal. HFHI is an international, Christian NGO with a clear mission: building and renovating houses for low-income people.  To carry out its mission, it brings together donors, volunteers, and members of the families in need, who're co-opted in the process of building/repairing their own houses. How come their website is built on Drupal 8?   Drupal 8 is mobile-ready right out of the box it's open-source, which translates into lower costs it's flexible enough to empower their team to create, update, publish, and manage content on the go it scales to meet all the organization's future needs it ships with outstanding multi-language support it's fast 5. World Vision International "What are the most popular nonprofit websites that run in Drupal?" World Vision International's website is listed in any "top 5". No wonder:   the organization is the world's largest international children charity their website taps into Drupal 8's best features: easy third-party integration, freedom of customization, flexibility, and scalability guaranteed by its rich module collection   A nonprofit multisite that tells a series of highly compelling stories and grants a simplified donation process. 6. Human Rights Watch   A worldwide known independent organization, headquartered in New York, dedicated to protecting human rights.  And they define their own cause better than anyone else: "... we give voice to the oppressed and hold oppressors accountable for their crimes.”  Why did one of the most powerful NGOs in the world opt for Drupal?   because it's the best option for multilingual websites because it makes it easy to keep consistency while "joggling with" multiple content types  because it empowers content authors and editors to publish content quick and easy 7. Save the Children Spain   A member of the Save the Children International — the world's leading NGO dedicated to protecting and improving children's lives — Save the Children Spain has its website running on Drupal 8. And it is, by far, one of the 10 best nonprofit websites out there. Not just due to the global reputation of this humanitarian organization, but thanks to the complex needs that the Drupal website manages to meet:   it handles an entire network of operations that are critical for the NGO's activities: donations, news publishing, crowd fundings, training, collecting signatures, communicating with the press, etc. it withstands large influxes of traffic it supports a multi-site infrastructure it makes it easy for multiple teams (see Drupal's granular permission and access control system) to operate on the website, to integrate the tools they need for doing their work it integrates easily with all kinds of e-commerce third-party platforms (needed for their donation process, signature, membership, etc.) 8. Great Ormond Street Hospital Children's Charity   One of the UK's largest charities, Great Ormond Street Hospital Children's Charity (GOSH ) is dedicated to supporting the Bloomsbury-based children hospital and its patients. How? By focusing their efforts in 4 major areas:   supporting the little patients and their families investing in rebuilding and renovation projects pioneering research into children's health investing in life-saving medical equipment   When did Drupal come into the picture?  When the charity looked for a platform that would provide them with:   scalable architecture for their website, robust enough to scale up and down, to their fluctuating levels of traffic multi-site support, out of the box: GOSH.org is made out of 2 large websites and an ecosystem of 10 different sub-sites easy third-party integration: they needed to keep the same staff, so they looked to streamline their team's work, by integrating time-saving tools  9. The Wildlife Trusts We couldn't have left the Wildlife Trusts website out of our list Drupal nonprofit organization websites that stand out. The UK-wide group, comprising 45 local Wildlife Trusts, shares a common interest in preserving the wildlife and the biodiversity in their local area. And we're here talking about 2,300 nature reserves, on 98,000 hectares. 46 different independent charities, each with its specific activities, constitution, and membership criteria, under one “umbrella”? This multi-site project had “Drupal” written all over it... Now, let me outline, briefly, the key reasons why Wildlife Trusts has chosen Drupal for its website:   it provides great multi-site capabilities: the organization wanted to empower each trust to control its own content creation and publishing process, but they still needed some sort of a “central hub” it provides outstanding content management capabilities, much needed in this case, where huge volumes of content had to be managed effectively it meets their need of delivering the best mobile user experience it empowers the Wildlife Trusts editors to tailor page layouts as needed: and we're talking here about a multi-site that's rich in stunning visuals and video content 10. Top 10 Nonprofit Websites Built with Drupal: Allard Prize for International Integrity Another project from our portfolio that we're particularly proud of. The Allard Prize for International Integritiy is a photography competition that recognizes and awards people and organisations standing out through their efforts in fighting corruption and defending human rights. Why did they go with Drupal?   because they wanted to give their website a performance boost because Drupal provides them with a reliable translation system, a crucial feature when dealing with a global audience In Short, Why Would You Choose Drupal for Your Nonprofit Website? Here's a short inventory of the main reasons why you'd choose Drupal for setting up your nonprofit website:   you save money (Drupal's open-source) you get your multi-site, multi-language website ready to go in no time (especially if you opt for a Drupal distribution) you're free to further extend your website's capabilities by adding new modules and integrating new third-party apps  you get robust SEO features right out of the box you get a website that scales to fluctuating levels of traffic  you get to categorize, neatly structure, create, edit, publish, and manage your content quick and easy you're free to customize your page layouts to your liking   Need help setting everything up? Just send us a message with your feature requirements and specific expectations from your future nonprofit website and let's get your message out there. ... Read more
Adriana Cacoveanu / Jun 05'2020