In light of the recent COVID-19 pandemic - OPTASY would like to offer DRUPAL website support for any Healthcare, 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 
Drupal 8

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

DrupalDrupal 8
Is Drupal Good for eCommerce? 11 Excellent Reasons Why You’d Choose It over Another Platform

Is Drupal Good for eCommerce? 11 Excellent Reasons Why You’d Choose It over Another Platform

    "... wanna run eCommerce on Drupal 8 but don't know if it's a good idea."   But is Drupal good for eCommerce?    And, most of all: Is it better suited for your own online business needs and feature requirements than other eCommerce platforms out there? Some legitimate questions you're struggling with there… To give you a hand, here's a list of 11 excellent reasons why you'd lean towards Drupal eCommerce solutions for building your e-commerce site.    Reason #1: You're in Full Control of the Source Code to Make Any Changes You Want In other words, you don't need to convince the vendor first that the changes you need to make are beneficial for him/her. You're free to extend Drupal eCommerce platform's core functionality, to adapt, and extend its code till it meets your needs entirely.    … till it integrates perfectly into that specific software that you use.   Which is not the case when you go for a commercial solution: you're not granted access to the core code for any custom software development work that you might need to make. Of course, this "reason" becomes a really strong selling point only if/when: you have non-standard business requirements it's a large, complex eCommerce website that you're building Reason #2: Your eStore Grows With Drupal  Drupal scales with your business... effectively.   And by that I mean that it's designed to keep the resources and the time required to handle your online store's growth at a minimum.   Being: flexible by nature (its open-source nature) powered by the API-first initiative … Drupal eCommerce solutions make the best choice if "scalability" is on top of your list of requirements.   Reason #3: You Get to Reach Out to Your Customers Across Multiple Channels  "Is Drupal good for eCommerce?"   It becomes the perfect option for your own eCommerce website if you're planning to reach out to your customers across an entire network of sales channels, thus boosting your digital marketing efforts.  Let's say you have your main/central eCommerce website and you need to pull content from there and to distribute it across a whole ecosystem of channels — eCommerce apps, digital kiosks, conversational interfaces — and devices. Then, the API-first initiative allows you to tap into a headless commerce Drupal architecture and: use Drupal as a back-end content repository configure your content to fit all types of formats and reuse it whenever (and wherever) needed increase your outreach incorporate business automation into your development team's workflow: help them work smart and achieve more Reason #4: You Get to Deliver Content-Driven eCommerce Experiences With Drupal, you get the best of both worlds:   an eCommerce platform (by integrating one of its specialized eCommerce modules into the content management system) a content platform   And this is what makes it ideal for: tapping into the experience-led eCommerce model getting the most out of your content marketing efforts (think blog posts, effectively interconnected product pages, user guides, etc.) Reason #5: You're Free to Integrate Any Third-Party Service into Your Online Store From: marketing platforms to analytics services to payment gateways of your choice (there are 80+ payment options available with Drupal Commerce) to third-party add-ons that would automate your team's tasks and boost their productivity (while boosting online sales, as well) … Drupal &amp; its eCommerce component accommodates any type of integrations you need to make.   Reason #6: "Is Drupal Good for eCommerce?" It Is for Delivering High-Speed eCommerce Experiences Just think… real-time shopping cart updates.  Or pretty much any action that your customers would need to carry out on your eCommerce site, then turbocharge it with top speed. A decoupled Drupal Commerce setup (add the JavaScript framework of your choice here) enables you to deliver such type of dynamic user experiences.    Reason #7: You Have No Limits to How Much You Can Extend Your Drupal 8 eCommerce Website Drupal Commerce can grow as much as your business needs. Whether you need to integrate: a whole network of third-party systems a whole lot of contributed modules an eCommerce Drupal distribution (a bundle of multiple modules) a Drupal eCommerce theme  … and extend your eCommerce store's functionality, there's no limit to what you can incorporate into your Drupal eCommerce website.   Reason #9:  You Benefit from an Extremely Configurable eCommerce Solution "Whereas eCommerce solutions are often developed with an application mindset, highlighting what you can do with it out of the box, Drupal eCommerce solutions were developed with a framework mindset, focusing on what you can build with them." (Source: Drupal.org)   Basically, you're free to customize every little piece of your Drupal 8 eCommerce site, till it: delivers that unique shopping experience you want it to meets all your ultra-personalized requirements: to trigger certain actions based on user input, to display multiple tax rates, to have an out-of-the-ordinary checkout flow, etc. Here, it's up to you and it depends on what you need to build: Are you looking for a cookie-cutter eCommerce solution, that would help you get a generic webshop up and running in no time? Or do you want unlimited customization freedom, that comes at the cost of…  investing more time in writing custom code?   Reason #10: You're Free to Sell Both Physical and Digital Goods And that thanks to Drupal Commerce's flexibility:   It provides you with the functionality you need to start building your product catalog and selling your digital products — subscriptions, tickets, online courses, etc. — on your online store. A key aspect to consider when comparing the features of your best options in terms of eCommerce platforms in 2020.   Reason #11: You Can Make the Most of the Granular and Differential Access to Content Drupal allows you to define different roles for your team members and to assign several levels of permission to each role. Not everyone would then be authorized to edit content, add products, manage orders, publish content, etc. This way you get to: set up a convenient hierarchy harden your online store's security  So, Is Drupal Good for eCommerce? Maybe a more appropriate question would be: "Is Drupal the right solution for my eCommerce business?"  It might be... And these 11 reasons mentioned here do become the best arguments for you to choose it over another platform (Ubercart, Prestashop, Shopify…) if: it's a growing or an already established eCommerce business that you run (otherwise, all that configuration and custom work might be an overkill for a small business) you have complex feature needs for your online store: you need to integrate it with coupon rules, several backend systems, and so on Do you fit the eCommerce business owner "profile"? For we do fit the profile of that Drupal eCommerce agency and development company you're looking for, capable to tweak it till it fits your complex requirements to the slightest detail. Just challenge us and see how Drupal eCommerce solutions can accelerate business outcomes.    ... Read more
Adriana Cacoveanu / Aug 10'2021
DesignDrupalDrupal 8Web Design
What Are the Benefits of Web Accessibility for Your Business?

What Are the Benefits of Web Accessibility for Your Business?

  For people with disabilities, web accessibility is highly beneficial. They use multiple assistive technology tools that often require accessible web design and apps to function properly.  It is obvious how web accessibility benefits users with disabilities, but what about businesses? What are the advantages of building accessible sites for your company? Keep reading, and you'll discover seven key benefits of making your website ADA-compliant.    Why do companies hesitate to invest in web accessibility?   A survey of around 500 U.S. business leaders and web designers shows the main reasons behind the reluctance of some companies to make a website accessible. Most of the respondents confessed they are worried about the financial investments and potentially high costs (73.6%), while 66.9% think optimizing their sites for accessibility will require too much time.  We are here to tell you that making your website accessible for people with disabilities doesn't require too many resources, will highly benefit the user experience, and most probably keep you away from web accessibility lawsuits.    7 Benefits of Making Your Website Accessible   1. Increased traffic on your site. There's a myth regarding accessible websites that says accessibility only benefits the visitors. However, by improving the user experience and making it accessible for anyone, you plant the seeds for: Higher traffic rates on your site Better user engagement Improved search engine optimization rankings Higher conversion rate   2. Lower risk of legal complications. As legal requirements regarding web accessibility are getting tougher, optimizing your site for people with disabilities becomes non-optional—unless you don't mind being prosecuted. Make sure your site meets specific accessibility guidelines and pay attention to the accessibility standards required by the industry that you're operating in.    3. Bigger customer base. Making your website accessible means addressing the needs of bigger social groups, and that, in the long term, could lead to you growing your customer base. By investing in accessible design, you can attract more visitors that are likely to engage with your brand on a long-term basis.   4.  A more innovative business mindset. Building accessible design for your website visitors challenges you to deal with unanticipated issues and thus puts your creativity at work.  The constraint of adapting your design so that it incorporates a whole set of accessibility features challenges you to... come up with innovative solutions—and to preserve that mindset for innovation in the long term. In the current dynamic digital landscape, staying creative and ready for innovation is key to keep up with the ever-changing trends.    5. Boosted SEO efforts.  You can improve your site's accessibility by adding ALT-text to images, writing clear content, or choosing a clutter-free page layout. All of these steps also mean good SEO practices.  So, by making your website more accessible, you're also making it more SEO-friendly. You probably already know the importance of investing in robust SEO strategies in today's digital landscape. It's all about how high you rank on SERPs and the level of visibility that your website is gaining.    6. Improved brand reputation.  Accessibility is also essential for your business as it helps grow your brand reputation. By ensuring your website's universal design grants equal rights and easy access to your content, you raise awareness and build a positive reputation around your business.  Today, having an inaccessible website is the digital equivalent of sticking a big KEEP OUT sign in front of your business.    7. Faster page loading time.  It has been proven that if you improve a page's level of accessibility, you boost its speed score. As modern internet users demand fast website experiences, you want to improve your page loading times to keep up with your visitors' needs. By implementing features designed for users with disabilities, you're making your site a better place for all users.    There are many ways in which you can promote accessibility on your website. For example, users that struggle with visual impairments benefit the most from screen readers to help them understand the content on a particular website. This is a way to make your website accessible for people with sight issues and offer some support in making their daily lives a bit easier.    Hopefully, this article sheds some light on the importance of web accessibility for your business and how building a universal design for your site can positively impact your brand.  For more insights on how Optasy can help you make your website more accessible, check out our Drupal Website Accessibility services.    Photo credit: Wirestock on freepik.       ... Read more
Raluca Olariu / Jul 12'2021
DrupalDrupal 8
6 Experts Talk About the Advantages of Using Drupal

6 Experts Talk About the Advantages of Using Drupal

  As the digital landscape is constantly evolving, there is increased pressure on web content management systems (CMSs) to keep pace with the needs of the modern consumer.  To meet these complex demands that revolve around highly personalized and interactive web experiences and streamlined connectivity between devices, companies require websites that can support these goals.  One of the most powerful enterprise-level CMS platforms, Drupal, can handle more complex projects and its capabilities, as the Drupal founder, Dries Buytaert, reveals, only get better with experience.    Why is Drupal web development the right choice?   There are multiple competitive advantages that organizations can reap from using Drupal to handle their online presence. How do you know if Drupal is the right choice for your next web development project? Check out this list of key features and capabilities that Drupal offers and see how they can fit in with your needs and demands.   Are you looking to highly customize your website and content? Drupal's widely-known customizing power allows you to adjust and edit over 16,000 plug-ins and modules. If you need a CMS that can support your web development projects by implementing additional custom features like CRM, security, or SEO, with a focus on customizability, then Drupal might be the best fit.   What do the experts say? Nick Wilde, a Full-stack developer (including DevOps) at North Studios, thoroughly recommends Drupal for companies looking to change and customize their digital approaches:  "I love a *lot* of the changes in Drupal 8 compared to 7 or 6, but most of them didn't really change the way I worked. I mean, sure, using slightly different hooks etc. - but that's not really any different than integrating with different modules to my mind at least. What really did change my way of working was the Configuration Management Initiative's work, and by changed I mean massively improved. Yes, some degree of custom integration is possible with Drupal 7 with hook_update_N() and/or the features module, but in Drupal 8, a solid reproducible, testable CI and deployment process is not just possible but easy. (Yes, I'm a smidge of a fanatic about DevOps and process, despite being primarily a developer). When doing complex back-end work, moving to an Object Oriented system has felt like coming home since I started programming with Python in an OOP code-base.”   Is flexibility important for your web development project? A major selling point of Drupal lies in its rich potential to build and manage a wide range of content types, whether it is a blog post, podcast, or any other custom content types. By enabling a flexible design platform, Drupal allows users to create and manage content-rich media or eCommerce sites.    What do the experts say? Alex Moreno, a software architect, based in London, is helping big companies with their Drupal and IoT projects and has revealed how he uses Drupal's flexible core capabilities to catch up with the ever-evolving technology transformations: “Although you could flex Drupal 7 to adapt to this changing environment, the real power and flexibility comes with having a Drupal 8 architecture, where this flexibility is already in the core. That has implications for performance, adaptability, simpler architecture of services around Drupal, etc.”   Are you considering scalability as an important asset for your web project? If so, Drupal is a winning choice. When accommodating content growth becomes a challenge, Drupal steps in with its tremendously scalable capabilities and supports your growth in an effortless manner.    What do the experts say? Drupal expert, Malabya Tewari, talks about how Drupal Modules can help build a responsive design and flexible user experiences: “When I started my career with Drupal 6 briefly and then moved on to Drupal 7, I really liked the abundance of modules Drupal 7 had. ‘There is a module for that’ was a common statement while building a feature. When I transitioned to Drupal 8 and when it was in its pre-release state, there were no contributed modules. Of course, views and entity reference were in core, but it lacked the huge pool of modules that Drupal 7 had. Instead, Drupal 8 had some great flexible and robust components which mostly worked for me. Even though there was a lot of learning to do, pretty soon I got the hang of it and found out that you don't need a module for that. That's how it changed my working approach with Drupal 8 because I can build a lot of great things without any contributed module.”   Do you need greater functionality around your site's translation capabilities? Drupal 8 supports 100 different languages for translation, and these multilingual features come with the installation interfaces. That means that you can build your multilingual Drupal website easier than ever before, at no additional costs.    What do the experts say? Penyaskito is a Drupal contributor and developer at Lingotek, who manages a cloud-based translation management system for their clients. He speaks highly of Drupal's multilingual capabilities: “Thanks to the Drupal 8 Multilingual Initiative, translation is not an afterthought in Core anymore. And thanks to the clean APIs that were designed with this in mind, we are able to improve every day functionalities for our clients in our integration with Drupal 8. While with other CMS we devote time constantly to integrate with contributed modules or alike, we can focus on new functionalities as this APIs make us compatible with most contrib modules out of the box without any extra effort on our side.”   Are you interested in building a content management framework based on API architectures? Drupal's caching modules support faster page loading, optimized bandwidth, and a robust web performance to meet the needs of the modern digital consumer. Whether used for content publishing or for optimizing the user interface, Drupal's 8 API-based architecture is a top upgrade compared to previous versions.    What do the experts say? Let's see what Dries Buytaert, the father of Drupal and CTO of Acquia, has to say about Drupal's web service APIs: “You want to enable your developers to easily deliver content to different devices, channels, and platforms. This means that the content needs to be available through APIs. This is aligned with Drupal 8's roadmap, where we are focused on web services capabilities. Through Drupal's web service APIs, developers can build freely in different front-end technologies, such as Angular, React, Ember, and Swift, as well as Java and .NET. For developers, accomplishing this without the maintenance burden of a full Drupal site or the complexity of configuring standard Drupal to be decoupled is key.”   If you are not yet sure about choosing Drupal for your next web development project, we are more than happy to help you with professional advice tailored to your needs and demands. Contact us and let's start your outstanding web development project. Also, you can check our Drupal Maintenance services as well.    Here's another quote from a Drupal expert, Nick Lewis, on how Drupal 8 is influencing the way he approaches his tasks:  “Drupal 8 is looking very interesting indeed, a big leap forwards from its previous versions. I’m busy working out how to get D8 modules up and running for a client project. Well I am working on a project right now for a large global fast food outlet (here in the UK), switching from one very popular CRM system into D8 as it will cut costs tremendously and not only that, recruitment will be easier given Drupal’s wide adoption in the community.”   Photo credit: Den Harrson on Unsplash.  ... Read more
Raluca Olariu / Jul 01'2021

Need a new Project?

Dare us to shape and boost your idea(s)!

Start a Project

(416) 243-2431

Contact

(416) 243-2431

Toronto Downtown

First Canadian Place,
100 King St. W. Suite 5700, Toronto

Toronto West

2275 Upper Middle
Rd. E, Suite 101
Toronto

New York

1177 Avenue of the
Americas, 5th Floor,
New York