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.

Better Accessibility in Drupal 8: 7 Significant Improvements 

Better Accessibility in Drupal 8: 7 Significant Improvements 

by Adrian Ababei on Sep 07 2017

Drupal 8 is the most accessible version of Drupal, and brings with it some features not seen in any other Content Management System, open-source or proprietary.“ (Phil Wolstenholme, A new era of accessibility in Drupal 8).

But where do you start enhancing your organization site's accessibility? Your accessibility planning?

For it's true: Drupal 8 does come loaded with some truly “impactful” new features and accessibility improvements that will drastically improve the way visitors with disabilities will interact with your website. And where do you add that they all come out-of-the-box!

Yet: how do you set your priorities? Which accessibility features do you start implementing first and put a particular focus on as you train your editorial staff?

And this is why we, the web development team in Toronto, have come up with THE list (or “selection” if your prefer)! It includes 7 most significant improvements around accessibility in Drupal 8. The ones that you should rush in to make the most of first things first:

 

1. HTML5 Elements: Add Semantic Meaning Into Your Code

By default” I should add! Since now Drupal 8 works with HTML5 elements in its templates so that you get to “invest” your code with... meaning!

Meaning” that screen readers can now interpret, making their navigation on your website a lot smoother. Now your web pages “do” make sense to them!

Here are just a few examples of HTML tags that you can use now for better defining the elements on a given web page on your site: <footer>, <header>, <section>, <figcaption>, <article> etc.

Note: better structuring content on your web pages using these HTML5 elements will support your SEO efforts, too! Since it's not just assistive technologies that can better “decipher” and surf through your web pages, but search engine crawlers, too! How about that for a win-win situation?

 

2. Introducing “ Tabbing Manager”: A Constrained Tabbing Order

And here's another significant enhancement around accessibility in Drupal 8! 

Just try to imagine a scenario where a non-visual user is facing a page overlay. How would he/she know where to tab into and close it?

This is where Drupal'8 new JavaScript feature, “Tabbing Manager”, comes in handy! It practically limits the user's options for tabbing around a web page so that, using his keyboard only, he can gain faster access to the important elements on that page. 

Controlled tabbing dashing away confusion! This is how we could define this new feature implemented in Drupal 8 core and impacting your own site's usability!

 

3. Extensive Support for The WAI-ARIA Markup: Better Accessibility in Drupal 8

Simply complying with the WAI-ARIA standards is not nearly enough. You need to actually make those attributes added to your HTML5 elements understandable to screen readers!

Drupal 8's core maintainers have been well aware of this aspect and have packed it with substantial support for the ARIA markup. 

In short: as you'll add the given set of attributes to your code, you'll be ideally structuring your web pages so that assistive technologies can easily navigate through and distinguish their different content sections!

 

4. Aural Alerts: Visual Updates Made Accessible to Everyone

How could a visually impaired user catch sight of a visual update on the web page that he's on? Of an animation or of an alert box popping up? The screen reader that he relies on can only read one part of a web page at a time...

Introducing “Drupal.announce”, a JavaScript feature which presents screen readers with texts appended to nodes that can be read out loud to the user! So that the visitor should be informed, through a reading user agent, of all the changes/updates happening on various parts of the page (color changes, pop ups, animations)!

 

5. Alternative Text for Images: Now A Required Field By Default 

When you say “better accessibility in Drupal 8”, we should immediately think of all the key features enhancing it which have now become “mandatory”  to implement!

Like the ALT text field, a feature allowing visual impaired users to understand an image's meaning with the help of a short descriptive text. Screen readers are enabled to associate the image's meaning with the given text-based content.

Note: simply filling in that field with generic short text isn't enough! You should also make your content writers aware of its significance and, therefore, that it's important to properly describe the image through that short text

Another note: here we go again, intersecting our efforts to make our websites fully usable for everyone with our SEO efforts! It's not just users depending on assistive technologies for navigating your site that will benefit from this “by default” ALT text feature, but guess who else: search engine crawlers!

 

6. CSS Display Options: Hidden, Visually Hidden, Invisible...

Here's the scenario that called for the adoption of 4 different CSS display classes in Drupal 8: 

“When using “display:none;” in your code you're practically making those specific elements invisible to visual, non-visual and screen readers, too!”

See why such such an improvement in terms of accessibility in Drupal 8 was greatly needed? Its maintainers have implemented accessibility-naming conventions that you get to use for (still) hiding elements on your site from users' sight while keeping them visible for screen readers.

And here are the 4 different CSS classes for hiding/displaying elements on your site:

  • hidden: hide certain elements both from users and screen readers
  • visually-hidden: hide elements from users only (keeping them accessible to screen readers)
  • visually-hidden.focusable
  • invisible: hide the element(s) from both users and screen readers, but with no layout impacting the page

     

7. An “Enable Inline Form Errors” Option for Improved Accessibility in Drupal 8

This field does not support the use or commas or semi-colons as separator”! 

Imagine this error message showing up at the top of a web page as a visually-impaired user is filling in a form on your site. A message that his screen reader informs him of, but which lacks a key detail: which form field?

The user might have already completed several form fields, how would he know which one the error message refers, to?

See? This is where the newly implemented option for enhancing accessibility in Drupal 8 by enabling inline errors within the form itself instead of displaying them on the top of the page, was needed!

Note: do be aware of the fact that it's still a work-in-progress functionality, with a few pending issues left for its maintainers to address!

And speaking of enhancing accessibility and therefore usability when dealing with forms, it's almost needless to add that implementing ARI markup in your forms will help all your visitors:

  • to interact with all the fields of a given form with great ease

     
  • to distinguish whether they've skipped filling in certain fields or checking off  certain boxes

     

Quick Recap

With all its improvements and newly implemented features Drupal 8 offers you an extensive built-in accessibility support! And it makes a great base for you to take advantage of and make the best use of.

How? By training your team in this respect and integrating all the best practices into your organization's specific workflow so that they turn into... routine:

  • adding properly descriptive ALT texts

     
  • using <h1>, <h2> heading tags for creating perfectly structured flows of content etc.

     

Complying with the accessibility standards, adopting all these best practices and, overall, making the web equally accessible and usable for everyone, will only require an certain investment of time (at the beginning) and... attention! No need for complex technologies or special skills acquiring for you to invest in! Don't you agree?

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