Dramatically Speed Up Your React Front-End App Using Lazy Loading

A constant challenge faced by front-end developers is the performance of our applications. How can we deliver a robust and full-featured application to our users without forcing them to wait an eternity for the page to load? The techniques used to speed up a website are so numerous that it can often be confusing to decide where to focus our energy when optimising for performance and speed.

Thankfully, the solution isn’t as complicated as it sometimes might seem. In this post, I’ll break down one of the most effective techniques used by large web apps to speed up their user experience. I’ll go over a package to facilitate this and ensure that we can deliver our app to users faster without them noticing that anything has changed.

What Does It Mean for a Website to Be Fast?

The question of web performance is as deep as it is broad. For the sake of this post, I’m going to try and define performance in the simplest terms: send as little as you can as fast as you can. Of course, this might be an oversimplification of the problem, but practically speaking, we can achieve dramatic speed improvements by simply sending less data for the user to download and sending that data fast.

For the purpose of this post, I’m going to focus on the first part of this definition—sending the least possible amount of information to the user’s browser. 

Invariably, the biggest offenders when it comes to slowing down our applications are images and JavaScript. In this post, I’m going to show you how to deal with the problem of large application bundles and speed up our website in the process.

React Loadable

React Loadable is a package that allows us to lazy load our JavaScript only when it’s required by the application. Of course, not all websites use React, but for the sake of brevity I’m going to focus on implementing React Loadable in a server-side rendered app built with Webpack. The final result will be multiple JavaScript files delivered to the user’s browser automatically when that code is needed.

Using our definition from before, this simply means we send less to the user up front so that data can be downloaded faster and our user will experience a more performant site.

1. Add React Loadable to Your Component

I’ll take an example React component, MyComponent. I’ll assume this component is made up of two files, MyComponent/MyComponent.jsx and MyComponent/index.js.

In these two files, I define the React component exactly as I normally would in MyComponent.jsx. In index.js, I import the React component and re-export it—this time wrapped in the Loadable function. Using the ECMAScript import feature, I can indicate to Webpack that I expect this file to be dynamically loaded. This pattern allows me to easily lazy load any component I’ve already written. It also allows me to separate the logic between lazy loading and rendering. That might sound complicated, but here’s what this would look like in practice:

I can then import my component exactly as I normally would:

I’ve now introduced React Loadable into MyComponent. I can add more logic to this component later if I choose—this might include introducing a loading state or an error handler to the component. Thanks to Webpack, when we run our build, I’ll now be provided with two separate JavaScript bundles: app.min.js is our regular application bundle, and myComponent.min.js contains the code we’ve just written. I’ll discuss how to deliver these bundles to the browser a little later.

2. Simplify the Setup With Babel

Ordinarily, I’d have to include two extra options when passing an object to the Loadable function, modules and webpack. These help Webpack identify which modules we should be including. Thankfully, we can obviate the need to include these two options with every component by using the react-loadable/babel plugin. This automatically includes these options for us:

I can include this plugin by adding it to my list of plugins in my .babelrc file, like so:

I’m now one step closer to lazy loading our component. However, in my case, I’m dealing with server-side rendering. Currently, the server will not be able to render our lazy-loaded components.

3. Rendering Components on the Server

In my server application, I have a standard configuration that looks something like this:

The first step is going to be to instruct React Loadable that I want all modules to be preloaded. This allows me to decide which ones should be loaded immediately on the client. I do this by modifying my server/index.js file like so:

The next step is going to be to push all components I want to render to an array so we can later determine which components require immediate loading. This is so the HTML can be returned with the correct JavaScript bundles included via script tags (more on this later). For now, I’m going modify my server file like so:

Every time a component is used that requires React Loadable, it will be added to the modules array. This is an automatic process done by React Loadable, so this is all that’s required on our part for this process.

Now we have a list of modules that we know will need to be rendered immediately. The problem we now face is mapping these modules to the bundles that Webpack has automatically produced for us.

4. Mapping Webpack Bundles to Modules

So now I’ve instructed Webpack to create myComponent.min.js, and I know that MyComponent is being used immediately, so I need to load this bundle in the initial HTML payload we deliver to the user. Thankfully, React Loadable provides a way for us to achieve this, as well. In my client Webpack configuration file, I need to include a new plugin:

The loadable-manifest.json file will provide me a mapping between modules and bundles so that I can use the modules array I set up earlier to load the bundles I know I’ll need. In my case, this file might look something like this:

This will also require a common Webpack manifest file to include the mapping between modules and files for internal Webpack purposes. I can do this by including another Webpack plugin:

5. Including Bundles in Your HTML

The final step in loading our dynamic bundles on the server is to include these in the HTML we deliver to the user. For this step, I’m going to combine the output of steps 3 and 4. I can start by modifying the server file I created above:

In this, I’ve imported the manifest and asked React Loadable to create an array with module/bundle mappings. The only thing left for me to do is to render these bundles to an HTML string:

6. Load the Server-Rendered Bundles on the Client

The final step to using the bundles that we’ve loaded on the server is to consume them on the client. Doing this is simple—I can just instruct React Loadable to preload any modules it’s found to be immediately available:

Conclusion

Following this process, I can split my application bundle into as many smaller bundles as I need. In this way, my app sends less to the user and only when they need it. I’ve reduced the amount of code that needs to be sent so that it can be sent faster. This can have significant performance gains for larger applications. It can also set smaller applications up for rapid growth should the need arise. 


Source: Nettuts Web Development

15 Best Modern JavaScript Admin Templates for React, Angular, and Vue.js

Are you building an app and looking for tools that can help you streamline your build? Take the effort out of your next front-end app build with one of these powerful admin templates.

Whether you prefer to work with React, Angular, or Vue.js, there are a range of templates available on ThemeForest that make it painless to create beautiful, interactive UIs. Built using cutting-edge technology, these templates offer flexibility and dependability for your app build. Create a stunning UI easily by selecting from modular components and clean layouts so that you can focus on the business logic of your app build.

React Admin Templates

React is a JavaScript library for building user interfaces that has taken the web development world by storm. React is known for its blazing-fast performance and has spawned an ecosystem of thousands of related modules on NPM, including many tooling options. 

These admin templates and dashboards are a great starting point for your next React app.

1. Isomorphic Admin Dashboard

IsomorphicReact Redux Admin Dashboard

Isomorphic is a React and Redux-powered single-page admin dashboard. It’s based on a progressive web application pattern and is highly optimized for your next React app. With no need to install or configure tools like Webpack or Babel, you can get started building your app immediately. 

This template helps you write apps that behave consistently, run properly in different environments, and are easy to test. With Sass and CSS styling modules, multilingual support, a built-in Algolia search tool, Firestore CRUD, and easy-to-integrate code, you can use this template to build anything you want.

User justinr1234 says:

“Easily the most well-designed template using React out there, from both a code and design perspective. Integrating the code off the shelf was a breeze. If you have an existing app or are looking to roll a new one on the front end, this template successfully solves the problem for either use case. Excellent product!”

2. Clean UI React Admin Template

Clean UI ReactReact Redux Admin Template

Are you building a single-page app and interested in moving to React and Redux? Don’t start from scratch—build a scalable, highly polished admin app with this React, Redux, Bootstrap, and Ant Design template that works well on mobile, tablet, and desktop. 

Clean UI React is create-react-app based, so getting started is simple. Modular code allows you to add and remove components with ease. Developer friendly and highly customizable, this template includes 9 example apps, more than 50 pages, multiple layout options with easy-to-update Sass or CSS styling, and ample reusable React components.

User hermanaryadinata says:

“The quality is incredibly high and the flexibility is limitless! Highly recommended to buy!”

3. Jumbo React Admin Template

Jumbo React Admin Template

Kick-start your app project with Jumbo React, a complete admin template. This product includes two React templates, one based on Google Material Design and the other on the stunning flat style. Each template comes with multiple design concepts and hundreds of UI components and widgets, as well as an internationalization feature that allows you to develop a multilingual app. 

Think of this template package as a starter kit to build your app. With it, you can develop a scalable React app rapidly and effectively and save yourself time and money in the process.

User Ace_Cooper says:

“Love the amount of components out-of-the-box. Right what I needed to jump start a new project.”

4. Fuse Material Design Admin Template

Fuse Material Design Admin Template

Looking for a template to get your React project started? Fuse is a complete admin template that follows Google’s Material Design guidelines and will allow you to learn some of the advanced aspects of React while you build your app. 

This template uses Material UI as the primary UI library and Redux for state management. It comes with built-in page templates, routing, and authorization features, along with five example apps, more than 20 pages, and lots of reusable React components.

User DevX101 says:

“Very well organized template ready for building a real app. Not just visual templates, but includes authorization and modular design. Great starter kit.”

Angular Admin Templates

Angular is more than just the next version of a popular front-end framework. Angular takes all the best parts of AngularJS and improves them. It’s a powerful and feature-complete framework that you can use to build fast, professional web apps. 

Check out these templates that you can use to get your next Angular app off on the right foot with clean code and great design.

1. Fuse Material Design Admin Template

Fuse Material Design Admin Template

This best-selling template is a 3-in-1 bundle, with Angular 7+, Bootstrap 4, and 21 layered PSD designs. Fuse is based on Google Material Design and comes with AoT compiler support, as well as a complete NgRx example app. This template includes configurable layouts, a skeleton project, built-in apps such as calendar, e-commerce, mail, and chat, and more than 20 pages to get you started. 

Fuse supports all modern browsers (Chrome, Firefox, Safari, Edge) and comes with Bootstrap 4, HTML, and CSS versions, along with the Angular app.

User haseeb90 says:

“This is a great theme. Comes with pre-built apps that you just need to plug your logic and back end into. The code quality is great and stays up-to-date with the latest Angular versions.”

2. Pages Admin Dashboard Template

Pages Admin Dashboard Template

Pages is the simplest and fastest way to build a web UI for your dashboard or app. This beautifully designed UI framework comes with hundreds of customizable features, which means that you can style every layout to look exactly the way you want it to. 

Pages is built with a clean, intuitive, and fully responsive design that works on all major browsers and devices. Featuring developer-friendly code, full Sass and RTL support, and five unique dashboard layouts, this Angular 5+ ready template boasts flawless design and a 5-star rating.

User roly14 says:

“Masterpiece. Simply stunning.”

3. Clip-Two Bootstrap Admin Template For AngularJS

Clip-Two is an advanced, fully responsive admin template built with AngularJS. AngularJS, the original version of the popular Angular framework, lets you extend the HTML vocabulary. The resulting environment is expressive, readable, and quick to develop in. 

Using a Bootstrap UI, Clip-Two is mobile-friendly and comes with ready-to-customize themes with six different skins and infinite styles with SASS. This template includes features like four level sidebar menus, CSS3 page transitions, custom scrollbar for vertical scrollable content, dynamic pagination, and RTL functionality.

User hafizminhas says:

“This is one of the most outstanding Angular 1.x templates available in the market.”

4. Apex Admin Template

Apex Admin Template

Apex is a powerful and flexible admin template based on Angular 6+ and Bootstrap 4. The Angular CLI makes it easy to maintain and modify this app template. With easy-to-understand code and a handy starter kit, this template works right out of the box. Apex includes multiple solid and gradient menu color options and sizes, with an organized folder structure and more than 500 components and 50 widgets. 

This template is fully responsive, clean on every device and modern browser, and comes with AoT and lazy loading. Choose from a few pre-made layout options and customize with ready-to-use elements and popular UI components.

User jklayh says:

“These guys really know how to integrate everything well into one package, and the UI design is amazing. This is highly recommended.”

5. Stack Admin Template and Starter Kit

Stack Admin Template and Starter Kit

Stack Admin is a Bootstrap 4 modern admin template with unlimited possibilities. This product includes eight pre-built templates with an organized folder structure, clean and commented code, and more than 1,500 pages and 1,000 components. Stack Admin provides RTL support, searchable navigation, unique menu layouts, and advanced cards. 

With three niche dashboards, Stack Admin can be used for any type of web app: project management, e-commerce back ends, analytics, or any custom admin panels. This template looks great on all devices, and it comes with a kit to help developers get started quickly.

User sietzekeuning says:

“Beautifully designed and has loads of very useful components. An absolute tip for anybody looking for a very well designed CMS!”

6. Fury Material Design Admin Template

Fury Material Design Admin Template

Clean, unique, and blazing fast, Fury is an admin template that offers you everything you need to get started with your next project. Built with Angular and Material Design, this template is the perfect framework for building large enterprise apps, and it allows for a modular component setup. 

This template is designed to be lightweight and easy to customize. Features include completely customizable dashboard widgets and Angular Flex-Layout, to provide a fast and flexible way to create your layouts.

User CreativelyMe says:

“The code quality is exceptional. It’s clearly the work of a true craftsman. This template is truly a joy to work with, and continues to evolve over time. Excellent!!!”

7. Able Pro 7.0 Responsive Template

Able Pro 70 Responsive Template

Able Pro 7.0 is a fully responsive admin template that provides a flexible solution for your project development. Built with a Bootstrap 4 framework, this template has a Material look, with well structured and commented code. This retina-ready template comes with more than 150 pages and infinite design possibilities—use the Live Customizer feature to do one-click checks on color combinations and layout variations. 

With more than 100 external plugins included, advanced menu layout options, and ready-to-deploy dashboards and landing pages, Able Pro 7.0 will streamline your app development process to save you time and effort.

User macugi says:

“An amazing template. Very good design, good quality code and also very good customer support.”

Vue.js Admin Templates

Vue.js is a front-end JavaScript framework that is easy to learn if you already know HTML and CSS. The versatility of Vue is great for small and large-scale web apps alike. On top of all this, it’s blazing fast!

These Vue templates are sure to save you a lot of time and effort coding your next app.

1. Vuely—Material Design and Laravel Blade Admin Template

VuelyMaterial Design and Laravel Blade Admin Template

Vuely is a fully responsive admin template designed to give you a hassle-free development experience. Carefully crafted to look beautiful on mobile and tablet devices with pre-designed custom pages and integrated features like charts, graphs, and data tables, this template allows you to create your back-end panel with ease. More than 200 UI elements and 78 custom widgets simplify your development process. 

Vuely is translation ready with RTL support and comes with multiple color and theme options to give you the flexibility you need.

User alanoidster says:

“Good design quality, comprehensive components and features, great customer support!”

2. VueJS Laravel Admin Template

VueJS Laravel Admin Template

Looking for a full featured admin template for your Vue.js project? Look no further. This Vue.js admin template is completely modular, so you can modify layouts, colors, and other features without disturbing the rest of the code. Simply customize it with the provided Sass variables. This template is well documented, with seven layout and multiple color scheme options. With all the components you need, this Vue.js template will get you started on your next dashboard build.

User JimOQuinn says:

“Wow, the look and feel of the theme has progressed substantially since the initial release. Great job! Love the no-jQuery framework as I find VueJS much easier to work with. Looking forward to the next release. Keep up the good work!”

Multi-Framework Admin Templates

Finally, here are some templates that work with multiple frameworks.

1. Material Design Admin and Multipurpose Template

Material Design Admin and Multipurpose Template

This Material Design admin template provides you high performance and clean and modern Vue, React and Angular versions. This super flexible template uses SCSS, Gulp, Webpack, NPM Modern Workflow, and Flexbox, and has all the components you need to create your front-end app project. With stunning layouts, over 500 components and lifetime updates and customer support, this is the most complete admin app available.

User themeuser55 says:

“This is an absolutely amazing theme. It is done with quality in mind, regularly updated, and you can tell the developer cares about his work and clients. I would suggest using this template if you are looking for a production worthy front end for a basis to any modern web application.”

2. Primer—Angular and React Admin Template

PrimerAngular and React Admin Template

Primer is a creative Material Design admin template, with ahead-of-time (AoT) compilation for a more performant user experience. Fully responsive and packaged with both Angular and React versions, this template has left-to-right and right-to-left (LTR/RTL) support and light and dark colour schemes. Well documented and easy to customize, with this app template you get everything you need to start working on your SaaS, CRM, CMS, or dashboard based project.

User cjackett says:

“This is a very well built template with great flexibility and lots of options. The author continues to update and improve the template, extending its functionality and incorporating new angular packages. Excellent work.”

Conclusion

This is just a sample of the many app admin templates available on ThemeForest. There is a template for you, no matter what your style or specifications. These templates will make coding the front end of your app easier and help you deliver an app that provides a high-quality user experience. All this will save you time and effort, letting you focus on the real details of coding your project.


Source: Nettuts Web Development

New Course: Build an App With JavaScript and the MEAN Stack

You can make your web development work a whole lot easier by taking advantage of the MEAN stack (MongoDB, Express, Angular, and Node.js). Find out how in our comprehensive new course, Build an App From Scratch With JavaScript and the MEAN Stack

What You’ll Learn

Full-stack web development requires coding both a front-end for the browser and a back-end server. Using JavaScript for both parts of the app makes life a lot simpler for full-stack devs. With the MEAN technologies, you can code a cutting-edge web app in JavaScript, from the front-end all the way down to the database.

In this detailed 3.5-hour course, Derek Jensen will show you how to use the MEAN technologies to build full-stack web apps using only JavaScript (and its close cousin TypeScript). You’ll start from absolute scratch, scaffolding an empty project, and build up a complete web app using the MEAN stack. 

App created with the MEAN stack

You’ll learn how to configure a MongoDB database, how to write a database abstraction layer, and how to create a REST API to make that data available to the front-end. On the client side, you’ll learn how to structure an Angular app, how to create a service to connect with the back-end API, and how to implement each of the UI components that make a complete app.

Watch the Introduction

 

Take the Course

You can take our new course straight away with a subscription to Envato Elements. For a single low monthly fee, you get access not only to this course, but also to our growing library of over 1,000 video courses and industry-leading eBooks on Envato Tuts+. 

Plus you now get unlimited downloads from the huge Envato Elements library of 700,000+ creative assets. Create with unique fonts, photos, graphics and templates, and deliver better projects faster.


Source: Nettuts Web Development

Hands-on With ARIA: Accessibility Recipes for Web Apps

In the confusing world of web applications, ARIA can help improve accessibility and ease of use for your creations. HTML isn’t able to handle many types of relationship between elements on the page, but ARIA is ideal for almost any kind of setup you can come up with. Let’s take a look at what ARIA is, how it can apply to your web app, and some quick recipes you can use for your own sites.

Basics of ARIA

ARIA, also called WAI-ARIA, stands for the Web Accessibility Initiative–Accessible Rich Internet Applications. This initiative, updated by the W3C, aims to give developers a new set of schemas and attributes for making their creations more accessible. It specifically aims to cover the inherent gaps left by HTML. If you’re not familiar with what it does already, you should take a look at our primer on ARIA. You might also be interested in our pieces on ARIA for the Homepage, and ARIA for eCommerce.

Briefly though, ARIA has three main features that we’ll be focusing on:

  1. Creating relationships outside of the parent-child association: HTML only allows for relationships between parent and child elements, but the associations we want to define aren’t always nested within each other. ARIA let’s us define element relationships outside of this constraint.
  2. Defining advanced controls and interactivity: HTML covers many basic UI elements, but there are many more advanced controls that are used around the web that are hard to define outside of their visual component. ARIA helps with that.
  3. Providing access to “live” area update attributes: the aria-live attribute gives screen readers and other devices a listener for when content on the page changes. This allows for easier communication of when on-screen content changes.

ARIA and Web Applications

Before, we had looked at adding ARIA to the common elements of eCommerce pages and site homepages. With web apps however, each one differs drastically from the last. Forms and functions shift between each app, and often even between versions of the same app. Because of this, we’ll treat our implementations here more like recipes in a cookbook rather than a wholesale conversion of a page.

When it comes to web apps, a user’s intent is more difficult to discern in a generalized sense. With eCommerce, no matter which site you are on, it is likely that the visitors are looking to purchase a product or service. Web apps serve a variety of purposes, so instead, we’ll focus on creating nuanced controls that are accessible and user friendly.

Let’s get into some of these control types.

Controlling Live Updates with Buttons

The first control we’re going to look at is a displayed value updated by a button press. These types of controls are commonly seen where an element is displaying a quantity that may be adjusted by buttons labelled ‘+’ and ‘’, but can take many forms, such as arrow buttons that let you cycle through predefined statuses.

A standard implementation can leave some gaps in understanding for the user. It is unclear what elements the buttons affect, how they affect them, and when the element’s value changes.

Below, we’ll use ARIA to create a connection between the buttons and the value display element using the aria-controls attribute. Then, we’ll make it clear what the use of the buttons are using aria-label and HTML <label>. Finally, we’ll utilize the aria alert role and the aria-live attribute to let our user know when the value is being updated.

Let’s take a look at what that code looks like:

ARIA Popups and Hover Tooltips

When outfitting a site with ARIA, it is common to use “progressive accessibility”. The idea behind this term is that taking a site or web app from its basic form to fully accessible is a daunting task. To deal with this in a way that still makes forward movement, you can implement new features progressively and iteratively.

For a tooltip with a related popup or modal, this means that we can break the problem into two steps, rolling each out as we can. In this case, the tooltip we’re talking about is the common image of a small question mark that opens additional information when hovered over.

To let users know that the question mark image is actually a tooltip, we’ve defined it before using an appropriate role, like this:

There are a few issues with this implementation though. Users may not still not be aware that hovering over the tooltip initiates a popup with further information. Here’s how we can add that to our code:

Accessible Input Tooltips

Instead of a hover-based tooltip, it’s also common for a web app to utilize forms where each input has its own associated tooltip.

Without additional ARIA markup, it can be difficult to tell which tooltips apply to which input for a user. Not having this relation in place can render your helper text useless in some cases.

To correct for this, we’ll wrap our tooltips within their own elements. Each of these can be nested near their related input, have their relations established with ARIA, and then can be triggered with JavaScript (or just CSS if you’re crafty).

Here’s how that could look:

Status Alerts

“Our service is currently down”, “Your account is suspended”, and related status alerts are commonly used among web apps, and display important information for users. Without ARIA, they can get buried within the information on a page and cause a variety of issues.

Utilizing the ARIA alert role and the aria-live attribute, we can make sure that our users are aware of any issues quickly once they arrive on a page.

We can set this type of status alert up like this:

Creating a Toolbar

Finally, let’s take a look at another common control element used within web apps: the toolbar. For our purposes, we’re going to be marking up a toolbar that works like this: our web app shows a large amount of data, oriented in a table. Above this table, our toolbar has several buttons that allow users to sort the table in various ways. These buttons include classic sort options such as A to Z and Z to A.

Relationally, these leave some problems concerning accessibility. First, it isn’t clear that those buttons affect the table—we’ll solve this using the aria-controls attribute. It also isn’t clear that the buttons are associated with each other, which may be a useful piece of information for our users. To define this, we’ll be using the toolbar role. Finally, a user doesn’t necessarily know which button was pressed last. To correct this, we’ll use the aria-pressed attribute.

When using the aria-pressed attribute, its important to note that you’ll have to update these elements as the user interacts with them. This will likely require changing the attributes through JavaScript or jQuery.

Here’s what our toolbar code looks like:

Adding ARIA to Your Own Web Apps

With this handful of new control schemes and relations under your belt, you’re well on your way to making your own web app fully accessible! After you’ve added these new markups in, think about how you could apply these attributes to other parts of your user interface to maximize the usability of your creation.

Are there attributes, roles, or other features of ARIA that you’d like to know about? Or maybe you have some questions about your own implementations, or corrections for this article? Get in contact using the comment section below, or by tagging kylejspeaker on Twitter!


Source: Nettuts Web Development

10 Best WordPress Facebook Widgets

Facebook has over 2.23 billion active users worldwide who spend an average of 20 minutes per visit. That explains why, “on average, the Like and Share Buttons are viewed across almost 10 million websites daily” (via Zephoria).

Truth be told, Facebook cannot be ignored. Fortunately, CodeCanyon has some excellent plugins and widgets that will help you to integrate Facebook into your WordPress-powered website. From Facebook event calendars to a good-looking Facebook like box, here are the 10 best WordPress Facebook widgets worth your consideration:

1. Facebook Feed

The Facebook Feed WordPress widget is essentially four Facebook plugins in one.

With it, you can display your Facebook Posts Feed, Image Gallery, Video Gallery, and Events Calendar.

Facebook Feed

Features include:

  • fully responsive and ready for any screen size
  • includes Like and Share actions
  • supports Visual Composer
  • and more

Facebook Feed is a great way to get your Facebook content on your website.

2. Top Social Stories

You can add more than just your Facebook feed with Top Social Stories: it lets you easily track daily interactions on Facebook, Twitter, and more.

Top Social Stories

Features include:

  • display top stories based on most shares
  • export data to custom fields
  • works for custom post types
  • fully customizable
  • and more

Whether you need it solely for Facebook or you want to add other social media feeds into the mix, Top Social Stories is a great way to display social media posts.

3. Facebook Group Widget

This WordPress Facebook group widget is a great way to bridge the activity between your WordPress website and Facebook group.

The Facebook Group Widget displays the latest discussion from any public Facebook group.

Facebook Group Widget

This widget is:

  • CSS customizable
  • well documented
  • easy to use
  • responsive

Adjust the number of Facebook posts, set the word limit and a few other options, and you’ll have the Facebook Group Widget easily added to your WordPress widget area.

4. Facebook Plugins, Comments & Dialogs for WordPress

The previous WordPress Facebook widget plugins have all targeted specific niche use-cases. Facebook Plugins, Comments & Dialogs for WordPress, however, is an all-in-one Facebook widget solution.

Facebook Plugins Comments  Dialogs for WordPress

This WordPress Facebook plugin includes:

  • 11 total Facebook plugins integrated with one line of code
  • 8 customizable Facebook widgets
  • integrate Facebook comments
  • shortcode support
  • and much more

If you’d like the most feature-rich solution for integrating Facebook into your website, you need to consider the Facebook Plugins, Comments & Dialogs for WordPress plugin.

5. Facebook Recent Comments Widget

The Facebook Recent Comments Widget for WordPress brings the comment activity from your Facebook page and brings it to your WordPress widget area.

It’s SEO friendly and super easy to use!

Facebook Recent Comments Widget for WordPress

You can:

  • receive email notifications for Facebook comment box comments
  • manually or automatically approve comments to display
  • and customize the widget

Facebook Recent Comments Widget for WordPress is an easy way to display the latest Facebook comments on your WordPress-powered website.

6. Facebook Subscribe for WordPress

The Facebook Subscribe for WordPress plugin is the easiest way to add the Facebook Subscribe button to WordPress.

It also includes full template tag support along with easy-to-use shortcodes.

Facebook Subscribe for WordPress

Additional features include:

  • built-in TinyMCE plugin to create subscribe buttons
  • supports button options, profile URL, layout, etc.
  • Facebook Locale API for other languages
  • and more

Facebook Subscribe for WordPress gives you everything you need to easily create Facebook Subscribe buttons without needing to know any code.

7. Social Stream for WordPress with Carousel

Social Stream for WordPress with Carousel is a viable option whether you’re interested in only displaying Facebook content or content from multiple social media networks at one time.

With Social Stream, you can funnel all your social media streams to your WordPress-powered website in style.

Social Stream for WordPress with Carousel

There are several display options included with this social media carousel:

  • combine multiple social media feeds into one
  • 3 different styles and customizable colors
  • over 60 animation effects
  • responsive feed layout
  • and more

If you’re interested in mixing in other social media streams along with your Facebook feed, Social Stream for WordPress with Carousel may be exactly what you’re looking for.

8. Facebook Events Calendar

Display your Facebook events using a widget or shortcode with the Facebook Events Calendar.

This full-featured solution not only looks great, but has some great features as well.

Facebook Events Calendar

Features include:

  • full and compact layouts
  • quick-view popups for each day
  • calendar and list views
  • and more

The Facebook Events Calendar is easy to use and one of the best ways to display your Facebook Page public events on your website. No need to maintain two calendars any more!

9. Jetpack by WordPress.com

If you’re already using Jetpack by WordPress.com and only need a Facebook Like Box, using the free Jetpack plugin is a clear winner.

Open your Jetpack options, make sure the like box is enabled, and simply go into your widgets to place and configure it accordingly.

Jetpack by WordPresscom

Set your options:

  • show faces, stream, or cover photo
  • Facebook page URL
  • title and height

And that’s it. Jetpack by WordPress.com is simple, free, and may be all that you even need.

10. Facebook Social Plugins

Facebook does have a free plugin that’s available in the WordPress Plugin Directory. However, while it has many options, it has not been updated in over two years and its ratings are dismal.

I suggest you avoid it.

However, Facebook does provide everything you need to create your own Facebook widget.

Facebook Social Plugins

You can create:

  • embedded comments
  • share buttons
  • follow buttons
  • Like buttons
  • and more

Follow the online prompts and step-by-step instructions to configure your code. Dropping your snippet into the WordPress Text Widget may be all that’s required for you to successfully set up your Facebook social plugin.

Build Your Own WordPress Facebook Widget

While most people will find the previously mentioned plugins and solutions useful, there are those who may find building their own WordPress Facebook widget the way to go.

There is extensive documentation from Facebook, and the Social Plugins provided by Facebook are a great place to begin building simple widgets.

And you’ll find many WordPress How-To Tutorials from Envato that will help:

There are also Envato Tuts+ WordPress courses that can help you on your way to building your own WordPress Facebook widget.

Conclusion

There are many other Facebook WordPress plugins on CodeCanyon if you still haven’t found exactly what you’re looking for. Of course, if you still can’t find what you’re looking for, perhaps it’s time to think about building your own and becoming an Envato author?

It’s just a matter of comparing prices, options, and reading a few user reviews before finding the right Facebook widget. Facebook is a powerful social media platform that should not be overlooked. Integrating it into your website can make a big difference.

What kind of Facebook widget are you looking for?


Source: Nettuts Web Development

Hands-on With ARIA: Accessibility for eCommerce

Looking to make your site more accessible? Or maybe you want to make it easier to traverse your site overall using browsers and other interfaces? Using ARIA, you can do both. Let’s take a look at what ARIA is and how it can benefit an eCommerce site. We’ll also go through some examples step by step.

What Is ARIA?

WAI-ARIA stands for the Web Accessibility Initiative–Accessible Rich Internet Applications. This initiative takes the form of a set of guidelines and attributes that are maintained by the W3C. Using these attributes, we can create relations between our site elements that can’t be expressed through HTML alone. The most important for our use here is that we can define element relations outside of the parent-child relationship, and more clearly connect UI elements for our users.

At this point, it might be a good idea to check out our original primer on ARIA to brush up on some of its foundations.

Adding ARIA to eCommerce

Previously, we talked about how to apply ARIA to a general website that resembled a common small business homepage. This time, we’re going to take a closer look at how ARIA can improve the user experience for large eCommerce sites.

We’re going to focus on four key areas of eCommerce that pose unique situations: product pages, category pages (or product aggregate pages), multi-level navigation, and faceted navigation. We’ll be using these two wireframes to guide us through the process:

Product Page Wireframe
A very basic product mockup
Category Page Wireframe
Example of a Product Listing Page mockup

Preparing for ARIA

In the case of most websites, adding ARIA is a fairly straightforward process. You define the pieces of your site, break them down into landmarks and elements, and add in the necessary code.

We’re going to follow a similar process with our eCommerce site, but we now have a new layer of intricacy. With the complexity that comes with eCommerce sites, ARIA can become a rabbit hole in many cases. While it is important to improve the accessibility of your site as much as possible, we unfortunately will often run into business constraints. Because of this, we’ll want to do a little more planning upfront, prioritizing each of our ARIA additions.

By doing this prioritization, we can ensure that the most important aspects of our site are improved first, making the user experience as good as we can in the time available.

Let’s kick it off by taking a look at some product pages.

ARIA for Product Pages

A staple page for any eCommerce site, these pages typically show a product, its available variations, and a way to add the item to a cart. Each of these interactive elements should be considered separately.

For our product page, let’s break it into pieces like this: our core product information, interactive elements that affect the product, our add to cart button, and an expanded content section.

If we needed to prioritize the implementation on this page, we would want to group it like so:

  1. Core product info, interactive elements, add to cart button
  2. Expanded product content

The main factor at play here is something we talked about in a previous article: ARIA helps to define an element’s intent. In the case of the expanded content, most of the HTML elements that are being used have elements with semantic meaning and intent that match. This means that while it is useful to put additional ARIA information if we can, it is likely less important than completing the other three areas.

Core Product Information

Let’s start off by adding ARIA to our core product information. This is pretty straightforward due to the simplicity of the elements being used here. The code looks like this:

For starters, we’ll add a role to the main div, and a relationship between the image and the product title heading. 

Interactive Product Elements

This is where product pages can get a little tricky. Products on an eCommerce site can have quite a few different types of variations present. Beyond just the types available, the number of them that can be utilized simultaneously adds another layer of complexity. In our example, we have three elements that come into play: size, color, and quantity.

Let’s take a look at how you can mark that up. Here’s the code for the ARIA-enhanced selection and checkbox elements:

Add to Cart Button

The cart button is similar to a standard button, but we’re going to go out of our way to label it more clearly than other buttons:

Expanded Product Content

Finally, the expanded content area is treated just like a typical content area. Depending on your product pages, however, it might be a good idea to separate your main content landmarks from your supplementary content landmarks. The tabs add an extra layer to the code here as well. Here’s how we’d do it in our example:

Adding ARIA to Category Pages

While product pages can be considered an alternative form of content page in most respects, a site’s category pages, also called Product Listing Pages (PLPs), are a whole different beast. They are operating as a large navigation structure, allowing users to sort through hundreds or even thousands of products.

This makes them increasingly complex, becoming even more so as additional layers of content and filters are added (we’ll talk about faceted navigation and filters in the next section). Let’s look at the two mains areas of our PLP outside of the filters: the product blocks and the pagination.

Here’s our starting code frame:

Handling Pagination

Pagination is the name given to the small links at the bottom of our product listings here. Typically, they’re represented by numbers or arrows, but they can come in various other forms. On the HTML side of things, pagination links look just like regular links. We’ll say that ours is controlling the product listings without redirecting to another page.

To make it known that it’s controlling a content area in this way, we have to declare it as a controller, define what it is controlling, and then mark that content area as live. Here’s what that looks like in our case:

When we create our live area here, we utilize the "polite" setting that ARIA makes available. If your changes are pertinent and need to be addressed by the user quickly, or you need to prioritize among several live areas, you can use the value "assertive" as well.

Marking Up Repetitive Elements

A unique challenge that comes up with product landing pages is the intensive navigation complexity within the product listings themselves. From a visual perspective, it can be easy enough to group the information, using visual cues to determine what information applies to which product.

Doing so with ARIA has a few more layers than the previous applications we’ve covered. Marking a “buy now” button a standard button can create confusion when there are 20 of these buttons on a page. To solve this, we’ll need to create clear connections between each product and its related elements.

Here’s how we’ll do that:

While this does help a bit with clarifying relations for the user, it’s still not the best implementation. A better way would be to dynamically generate an aria-label by concatenating the product-title element with an additional phrase such as “add to cart”.

Using ARIA With Faceted Navigation

Faceted navigation refers to the filters and options that are commonly shown on eCommerce sites, letting you narrow down your search results. These come in many flavors—from sizes to color and beyond. For our example, we’re going to make two assumptions:

  1. Our faceted navigation updates the products live on the page. This isn’t always the case, as sometimes eCommerce sites might generate a new page when a filter is applied, but we’ll be working as if the site updates content live.

  2. Our faceted navigation allows for the selection of multiple filters. Not every eCommerce site does this, and there are definitely cases where it shouldn’t be allowed. However, this creates an extra layer of complexity outside of the scope of this article.

Setting Up Your Controls

The HTML behind our filters is similar to that of pagination, appearing in the code as basic links. For our uses, though, the intent of the filters is to alter information that is currently on the page. Because of this, we’ll want to mark the entire container around the filters, making it clear that this is a controller for another area on the page:

Defining Live Areas

Like pagination, these updates are happening live on the page. Because of this, we’ll want to mark the main content on our page as being “live”. Note that we did this previously in the pagination section, but we’ll be repeating the step here for consistency.

The code should look like this:

Testing Your Implementations

Our implementations are now all in place, so let’s put them through some tests. My favorite tools for doing so include Google’s Accessibility Developer Tools or IBM’s Dynamic Assistant Plugin, but depending on your project’s scale, you might need to create your own testing script.

If you need a tool that operates outside of Chrome, or just don’t prefer the two mentioned above, W3C has a list of other accessibility tools that are available.

Making eCommerce More Accessible

With these new additions to your ARIA toolset, you should now be able to appropriately mark up almost any eCommerce site. To ensure the best user experience with an eCommerce site, remember to keep your navigation as simple as possible, and express intent clearly.

Have further questions on this topic? Did I miss something important? Tell me in the comments below!


Source: Nettuts Web Development

Hands-on With ARIA: Homepage Elements and Standard Navigation

Looking to make your website more accessible? Want to be the first in line as new online interfaces come to market? Look no further than ARIA.

This set of standards maintained by the W3C (World Wide Web Consortium) gives you the best of both worlds by adding a number of attributes that allow HTML to be extended in meaningful ways. Here, we’ll walk through what ARIA is, see how it can benefit an informational website, and go through a use case step by step with code examples. Let’s get started!

ARIA Basics

ARIA (or sometimes WAI-ARIA) is the acronym for a set of accessibility standards, called the Web Accessibility Initiative–Accessible Rich Internet Applications. You can check out more about the foundations of ARIA in my previous article, but let’s go over some of its pillars now.

Defining Non-Traditional Relationships

A majority of websites are built using HTML, which primarily relates elements to each other in a hierarchical fashion through parent-child relationships. This structure is great for defining content, but falls short when it comes to defining user interfaces. For example, in many sites and web applications, an area of content is controlled by buttons within a sibling element—the siblings have the same parent element, but in HTML they don’t have a direct relationship with each other. Because of this, it becomes difficult to define which User Interface (UI) elements control which pieces of content when using assistive technologies.

This carries through to newer interfaces as well. For example, if you are trying to navigate a website through a smart device, it becomes difficult when element changes are not visible.

ARIA allows you to tie HTML elements together using additional attributes to represent these types of controls.

Non-Rigid Element Classification

Another shortcoming of HTML is its inability to separate structure from intent.

For example, you may want to make an image element into a clickable button. However, HTML still largely defines that image as only an image, and everything beyond that happens elsewhere.

With ARIA, intent can be separated out from an element, allowing for images to be marked as buttons or a link to be defined as a tooltip. This gives more control to the developer concerning the UI, creating more clearly set relationships.

Creating Landmark Areas

Beyond marking elements within the UI, ARIA also gives access to the role attribute—used to define areas of a page. For example, you can mark your main menu as navigation and your article’s content area as main content. This makes it easier for users to move throughout the important areas of your site, and can prevent confusion for those with uncommon or complex site layouts.

Use Case: Small Business Homepage

To get some experience adding ARIA to a site, we’re going to take a wireframe of a site that might be used by a small business and implement our attributes step by step.

Example Page Wireframe
The page wireframe we’ll be marking up

For the sake of clarity, the code we’ll be working with is stripped down, with CSS classes and any functionality from a CMS removed.

The first thing we’ll want to do is break up our wireframe into parts to make adding in ARIA simpler overall. In the picture below, you’ll see that I’ve chosen to break the site down into five main parts: 

  • navigation
  • content
  • sidebar
  • contact forms
  • specialized UI elements

In our case, it looks like this:

Wireframe broken into sections
The sections we’ll be working with

When breaking your site down into areas like this, we’re looking for two things. The first is for major elements that can be defined by an ARIA landmark: banner, navigation, main, complementary, content info, search, and form. These represent the necessary parts of our site, and anything unnecessary for utilizing it won’t be marked as a landmark (e.g. advertisements).

The second thing to look for is specific elements that need to be clarified with ARIA. In most cases, this is pretty simple (such as marking an image as an image), but for some UI elements, it can get a bit tricky.

Once we know what areas need to have ARIA implemented, we can start to move through them systematically. Let’s get started with the site’s navigation.

Navigation

In our example, you’ll notice that we have a few types of navigation. The first is a menu as seen on most sites, listing some pages for the site. Directly below is a smaller menu that holds options for users.

We want to mark these with the role="navigation" attribute so that they can easily be picked out as the site’s menus. This leads to the question: should they be grouped together into a single navigation landmark, or marked as two separate landmarks?

To answer this question in your own projects, you can typically ask yourself two questions:

  1. Is the intent for these menus different? In our example, the top menu navigates the site’s pillar pages, while the smaller menu focuses on things that a logged-in user might need. These intents are different, so it makes sense to separate them.

  2. Are the menus within the same parent element? I know this seems counterintuitive since ARIA is designed to help us overcome these types of relationship restrictions, but in this case it is less about what is possible and more about what is right for the user. Having a single menu defined, but with half of it in one location and the other half elsewhere, makes navigation more difficult.

For our case, we are going to treat our navigations as two separate landmarks. So we’ll make some changes to the code. To start with, we have just our basic HTML:

Now, we’ll annotate it with some landmarks.

The next step in defining these landmarks is to give the user a hint as to what the intent of each menu is. If we leave them both as navigation without any further information, it just makes things more difficult to interpret. So let’s add meaningful labels to them using the aria-label attribute:

Beyond that, we’ll want to add additional role markup to our menu to let users know that this is a menu, and mark each link within as a menu item:

Content Area

Now on to the content area. Here, we’ll be marking the container that holds the entirety of our main content with role=”main”. Again, for comparison, here’s our starter code. 

And here’s what it looks like after we add the "main" landmark.

Within that content, we’ll go on to find any element that has an intent that doesn’t match its HTML definition.

First, we’ll take care of the image acting as a button by adding the "button" role:

This link that activates a modal is a bit trickier, because it depends on what is in the modal itself. For us, we’re going to say it’s a tooltip:

Within our main content, we also have a search form. This has an extra layer of complexity to it, in that it’s a search form using HTML elements, and it also qualifies as a search box landmark. We would mark it up like this:

Beyond that, you can define every element with its proper ARIA tag. For most sites, this can be too much of a time burden on the development process, though in most CMSs it can be automated. In cases where it can’t be, if an element’s HTML definition matches its use intent, then it can be considered low priority when making ARIA implementations. Here’s what the main content area looks like after making all these changes:

Sidebar

The sidebar of a site can take many forms. In our case, it provides additional content related to the site, with a list of related posts at the bottom.

Here’s the starting markup for the sidebar:

To define the content, we’ll want to give it the "complementary" role, letting users know that the information in the sidebar is additional content related to the main content. That can look like this:

The related posts below could be considered a form of navigation, allowing users to further explore the posts of the site. We’ll want to mark it with a "navigation" role, and give it an appropriate label, like so:

Each site’s sidebar is different and may require a different combination of roles and landmarks. If your sidebar has an advertisement, then it’s best not to mark that element. If there’s a search form within your sidebar, then mark it with the appropriate role as well. Any menus that appear in a sidebar should follow the same pattern as we discussed in the navigation section: 

  • a "navigation" landmark
  • a "menu" role for the menu container
  • roles of "menuitem" for each of the nested items

Here’s what our final sidebar looks like:

Handling Contact Forms

Finally, at the bottom of our page is a call-to-action form, asking for the user’s name and email, with a standard submit button below. When it comes to forms, there are three parts to keep in mind:

  1. Give the form the landmark role of "form": since the form is a major part of the site, we need to make it easy for users to get to it. We do so by giving it a landmark role

  2. Assign matching roles to elements. Forms are a common area for intent and HTML definitions to be mismatched. Add in ARIA roles where necessary, especially when it comes to checkboxes, sliders, tooltips, and other elements that can be implemented in multiple ways.

  3. Match the labels with the appropriate elements. HTML handles this in a basic way, letting you use the <label> element to associate a label with an input. Forms can easily have a more complex structure that prevents that from working; fortunately we can fix that with the aria-labelledby attribute.

Let’s take a look at what our updated code looks like:

Testing Your Implementation

With all of our implementations in place, we now need to check that they are working correctly. To do this, it’s easiest to use an existing accessibility tool such as Google’s Accessibility Developer Tools or IBM’s Dynamic Assistant Plugin.

Both of these integrate with Chrome’s developer tools to allow for real-time inspection of your site’s accessibility. W3C also maintains a larger list of tools for accessibility.

Making the Web More Accessible

Our site wireframe now has ARIA! While there is still a lot of ARIA left to explore, you now have enough knowledge to make a large portion of the sites you work on more accessible. Beyond that, your site is also better prepared to handle any number of new internet-traversing technologies that might arise.

Is there another aspect of ARIA that you’d like us to explore? Have questions about this article? Feel free to add them in the comments below!


Source: Nettuts Web Development

20 Best WordPress Calendar Plugins and Widgets

Whether you need an event calendar plugin, a booking system with payments, or a Google calendar widget, this list of plugins will have something to improve your app or site. Take a look at these 20 plugins available for download on Envato Market to see what WordPress is capable of.

WordPress calendar plugins encompass plugins for events, bookings, and appointments. Some transform WordPress into its own private workplace app, while others let you set up a fully functioning scheduling and payment gateway.

Take a look at these 20 WordPress calendar plugins available on Envato Market and you’ll see what I mean.

1. EventOn

The EventOn WordPress event calendar plugin is an excellent turnkey solution that doesn’t skimp on features.

It has a clean, minimal design, and you’ll be up and running quickly and easily.

EventOn - WordPress Event Calendar Plugin

Fully optimized for mobile use, this tiny calendar is big on features:

  • use featured images
  • add your own data fields
  • Google Maps integration
  • calendar widgets and shortcode generator
  • event categories with custom color assignments
  • and much more

Not only can you customize each event with images, maps, icons, colors, and more, but you can also configure your calendar to search and sort in several different ways.

EventOn is a really nice, easy-to-use event calendar plugin that also offers a unique slider addon.

2. SUMO WooCommerce Bookings

SUMO WooCommerce Bookings will transform your WordPress WooCommerce site into a bookings powerhouse.

This is more than just a calendar plugin—it’s a full-fledged WooCommerce booking plugin.

SUMO WooCommerce Bookings

Features include:

  • Google Calendar integration
  • assign users to manage booking availabilities
  • configure reservations and bookings
  • booking detail notifications
  • and much, much more

Appointments, reservations, or events—SUMO WooCommerce Bookings can handle them all.

3. Bookly

You can book and schedule just about anything with this WordPress plugin.

Bookly is an incredible appointment booking system that blurs the line between a WordPress website and a web application.

Bookly - Book Appointments Book Services Book Anything Easy and Fast Booking for Your Clients

This is well designed, fully responsive, and even supports gestures.

You’ll also find:

  • a form builder
  • Google Calendar sync
  • WooCommerce integration
  • SMS and email notifications
  • several online payment gateways
  • and a whole lot more

Customers can book their own appointments, include personal information, and send payment. They can also cancel their own appointments via their confirmation email.

There’s also the ability to create schedules for each staff member—you can even block out holidays.

Bookly‘s customization options and useful features make it more than just a way to serve customers well—it also helps the website owner keep track of staff and appointments at the same time.

4. Calendarize it!

Even though this WordPress calendar plugin is built to work in conjunction with WPBakery Page Builder, it can be used just as easily on its own.

Calendarize it! for WordPress is full of features that can be configured just how you like.

Calendarize it for WordPress

With a very simple design, this calendar plugin can fit in to just about any design scheme or style.

You’ll find many useful features, including, but not limited to:

  • events by user role
  • sidebar widgets and shortcodes
  • Custom Post Types support
  • advanced filtering with custom taxonomies
  • single events, recurring events, arbitrary recurring events, and recurring events with exceptions

You can set up detailed venue pages, leverage Google Maps integration, and use it internationally with multiple languages and date formats.

Calendarize it! is one of the most agile, customizable WordPress calendar plugins.

5. WordPress Pro Event Calendar

There are certain features that you expect with a WordPress calendar plugin; however, there are a few features that really set a plugin apart. Take a look at WordPress Pro Event Calendar and you’ll see a number of advanced features that really make it stand out from the pack.

WordPress Pro Event Calendar

Well designed and fully responsive, this plugin has some really great features:

  • WPML support
  • flexible event settings
  • Google Maps integration
  • subscribe to a calendar
  • custom fields and date range support
  • and more

But what really sets it apart is the ability to import events from ICS feeds and Facebook.

Best of all, WordPress Pro Event Calendar accepts events submitted by front-end users, making it easy for users to add events.

6. Event Booking Pro

Here’s another great option for setting up a fully functional event booking system.

Event Booking Pro is very pro as it boasts over 500 settings!

Event Booking Pro - WP Plugin Paypal or Offline

There are a lot of features with this WordPress calendar plugin, and they are always adding more. Here are a few:

  • unlimited events
  • AJAX control panel
  • offline and multiple booking
  • PayPal, coupon, and CSV integration
  • customize email sent to booker and admin
  • and many, many more

There’s no shortage of shortcodes, it supports CSV, and everything can be customized and styled as you like, making it fit into your WordPress theme design perfectly.

Event Booking Pro is an impressive WordPress calendar plugin.

7. Timetable Responsive Schedule For WordPress

The Timetable Responsive Schedule For WordPress plugin offers a whole different look and approach to WordPress calendar plugins.

With it, you can create a timetable of events easily!

Timetable Responsive Schedule For WordPress

Use the Timetable shortcode generator to create timetable views for classes, medical departments, nightclubs, tutoring, and so on.

Quickly create a timetable by:

  • adding a new event with day, time, category, and more
  • adjust and configure the design and appearance
  • generate your shortcode and place it into a post or page

And that’s it!

There are plenty of event options and many different shortcode options—color picker and font configuration included.

Timetable Responsive Schedule For WordPress also includes a great widget lineup, rounding out one of the best WordPress calendar plugins you’ll find.

8. Booked: Appointment Booking for WordPress

Booked Appointment Booking for WordPress is another solid appointment booking option.

If you’re looking for appointment booking, think about booking Booked.

Booked - Appointment Booking for WordPress

Mobile friendly and with a clean design, this plugin has some nice features:

  • guest booking
  • customer profile pages
  • custom time slots and custom fields
  • customizable customer and admin emails
  • display your calendar with a shortcode or widget
  • and more

I really like the customer profile pages, but being able to display multiple booking agents with assigned calendars is where this WordPress calendar plugin really shines.

If you are considering Booked: Appointment Booking for WordPress, be sure to also look at the Booked add-ons such as Front-End AgentsPayments with WooCommerce, and Calendar Feeds.

9. WordPress Events Calendar Registration & Booking

The WordPress Events Calendar Registration & Booking plugin is feature rich, offering some options you’ll only find in plugin addons.

Everything you need (and maybe more) for successfully setting up a fully functional registration and booking system is right here.

WordPress Events Calendar Registration  Booking

This “out of the box” solution includes:

  • shortcodes
  • color picker
  • multilingual support
  • Google Maps integration
  • recurring events, tickets, and coupons
  • and more

One of the best features, for this plugin and others, is the countdown timer for all your events.

Beautifully designed and leveraging Bootstrap 3.0, the WordPress Events Calendar Registration & Booking should not be overlooked.

10. Booki

Like several of the aforementioned WordPress calendar plugins, Booki offers a full booking system using WordPress.

There are so many great applications for these type of plugins, with each plugin offering a unique perspective on the appointment management process.

Booki - Booking Calendar plugin - A WordPress booking system for online reservation and appointments

You can set up unlimited booking projects and service providers. Options include:

  • add optional extras for bookings
  • online payments via PayPal Express
  • offline payments—book now, pay later
  • admin stats page with summary information
  • sync bookings to a provider’s Google Calendar
  • and more

As for the calendar itself, it displays your booking and appointment calendar with a popup, inline, and more.

Booki is an excellent solution for booking appointments with multiple projects and service providers.

11. Team Booking: WordPress Booking System

This calendar plugin doesn’t try to reinvent the wheel.

Team Booking ties directly into something you’re already probably using: Google Calendar.

Team Booking - WordPress Booking System

Team Booking’s mission is to:

Use Google Calendar to schedule availability.

Additional features include:

  • team booking
  • keep and export your data
  • supports Stripe and PayPal
  • appointment approval system
  • customized forms for each booking type
  • and more

There are also a lot of nice customer features, like displaying reservations and the option to cancel their own appointments.

Team Booking is a fresh take on appointment booking calendars and leverages Google Calendar to the fullest. 

12. WP Booking Calendar

A lot of the WordPress booking calendar plugins include a rich feature set, offering a solid all-in-one solution.

WP Booking Calendar takes a much-needed, refreshingly straightforward approach.

WP Booking Calendar

With minimal configuration, you can set up available time slots, unlimited calendars, confirmations, and more.

Features include:

  • CSV export
  • PayPal integration
  • confirmation emails
  • make multiple reservations
  • unlimited number of time slots and duration
  • and more

You can also set the number of days before a user can make a booking.

WP Booking Calendar is simple without forfeiting great features.

13. Goo Calendar

Goo Calendar is an excellent calendar option.

Build calendars with static and dynamic ranges for your WordPress pages. Once the calendar is set up, publish it, and run it via shortcode on page, post or widget area.

Simple and straightforward, this is a great way to display a full calendar on your website.

Goo Calendar

Features include:

  • both static and dynamic calendars
  • fully customizable to match your look and feel
  • display posts, post meta, Advanced Custom Fields, and custom post types
  • and more

Goo Calendar is a solid solution that provides the basic tools to modify it to your own use.

14. Timetable

A timetable calendar is a great option for situations in which there are several events going on the same day.

Timetable is a plugin with a nice TV guide styled UI and presentation.

Timetable for WordPress

Built on jQuery and CSS3, this plugin lets you add events and modify your timetable from within its modern admin screens.

One of the most powerful features of Timetable is the ability to import and export timetables via CSV. Now you can edit and make changes in Excel or another spreadsheet app and import your changes and added events.

You can also select which program to print, for users who prefer their schedules on paper.

15. Chronosly Event Calendar

Most WordPress calendar plugins focus on the back end and leave most of the design to the designers.

But the Chronosly Event Calendar makes customization as easy as drag and drop.

Chronosly Event Calendar WordPress Plugin

This plugin is fully editable and can be used in one of two ways: basic and advanced.

The advanced features include a whole set of customization tools:

  • custom CSS
  • customize views
  • custom front-end events

Other features include:

  • shortcodes
  • addons marketplace
  • detailed single pages
  • templates marketplace
  • multi-language and Google Maps integration
  • and more

Chronosly Event Calendar can be configured and customized from the comfort of your WordPress admin.

16. Business Calendar

Most of the WordPress calendar plugins we’ve covered focus on the website user.

However, the Business Calendar shifts that focus, as it creates a full-featured internal calendar for each user.

Business Calendar - WordPress Internal Calendar

With the Business Calendar plugin, you can turn a WordPress install into a working platform for business.

Features include:

  • smart invitation system
  • settings are user specific
  • Google Maps localization
  • enable email notifications and reminders
  • creates private page for each event for notes, comments, and file uploads
  • and more

The Business Calendar is a creative approach to using WordPress like an app or full-fledged working platform.

17. HBook: Hotel Booking System

You can use a one-size-fits-all booking plugin for hotels and B&Bs, or you can use a solution built specifically for them.

The HBook hotel booking system is perfect for anyone in the hospitality business.

17 HBook - Hotel Booking System - WordPress Plugin

This snappy plugin includes:

  • seasons
  • rates tables
  • PayPal payment
  • availability calendars
  • booking forms and rules
  • and more

HBook has a clean design and can be configured specifically for hotels, B&Bs, and more!

18. Responsive Event Scheduler

The Responsive Event Scheduler is one of the most beautiful options for publishing event schedules on your website.

It is suitable for music festivals, conferences, conventions, meetings, training, exhibitions etc.

Responsive Event Scheduler

Features include:

  • built with HTML5 and CSS3 — SVG icons enabled
  • one-click color customization
  • event image options
  • fully responsive
  • WPML ready
  • and more

Responsive Event Scheduler is not only impressive from a feature standpoint, but it’s one of the best-looking options you’re going to find.

19. Facebook Events Calendar

Facebook is where everyone is at, but how do you integrate it with your website?

The Facebook Events Calendar is a great way to display your Facebook events online in a super easy way.

Facebook Events Calendar

Features include:

  • displays all events from your Facebook page on the calendar
  • two layouts versions—full and compact
  • using a widget or shortcode, placing this in the page is super easy
  • and more

Facebook Events Calendar is a great way to connect your Facebook with your website.

20. gAppointments: Appointment Booking Addon for Gravity Forms

gAppointments is a great appointment booking addon for Gravity Forms.

If you’re already using Gravity Forms and need to integrate some appointment booking, this solution is certainly worth a look.

gAppointments - Appointment booking addon for Gravity Forms

Features include:

  • supports paid and non-paid booking
  • accepts any payment gateway
  • many options for service intervals and slots
  • and more

Combined with Gravity Forms, gAppointments is a powerful plugin for booking appointments.

Conclusion

WordPress has come a long way since that first default calendar widget. You can see by this list that WordPress has evolved into a web-based tool that can be used day in and day out for all kinds of organizations.

You can dig through Envato Market for more WordPress calendar plugins—and of course, if you can’t find exactly what you’re looking for, you could always code your own!


Source: Nettuts Web Development

20 Best jQuery Image Sliders

Let’s be honest—sliders are fun. A little bit of movement can really bring a page to life.

Sliders—also known as “carousels” or “image sliders”—are interactive elements for showing images or other media in a web page. 

Take a look at these 20 useful jQuery sliders from Envato Market and you’ll see there’s more to sliders than you might have imagined.

1. RoyalSlider

Having a touch-friendly and responsive slider for your website is more important now than ever before, and RoyalSlider is both.

Developed with HTML5 and CSS3 best practices, it’s a solid choice.

RoyalSlider  Touch-Enabled jQuery Image Gallery

Here are a few of the other royally cool features:

  • SEO optimized
  • highly configurable
  • over 10 starter templates
  • includes fallbacks for CSS3 transitions
  • and more

I think the best feature is the modular architecture that gives devs the option to exclude what they don’t need from the main JS file, keeping things as lean as possible.

The RoyalSlider is a solid JavaScript slider that should be a nice addition to any web dev’s toolbox.

2. Slider Revolution

It’s not easy to be “revolutionary” in the slider space. There are only so many options you can make available when it comes to sliders, but the Slider Revolution does a great job trying.

When it comes to jQuery sliders, this one delivers on just about everything you’ll want.

Slider Revolution Responsive jQuery Plugin

The list of features for this slider is long, so I’ll just hit the high points:

  • parallax effects and custom animations
  • SEO optimized and lazy loading options
  • add unlimited layers and slides with link options
  • includes “ready to use” styles and is highly customizable
  • and much more

The ability to drop in an image, video player embed, and social media source makes Slider Revolution one of the most flexible and customizable options you’ll find.

3. LayerSlider

The name doesn’t do this jQuery slider justice. Its 200+ 2D and 3D slide transitions will turn some heads.

LayerSlider Responsive jQuery Slider Plugin

Some of the notable features include:

  • skin design PSD template included
  • 13 skins and 3 navigation types
  • add a fixed image over the slider
  • SEO friendly and lazy load images
  • hardware-accelerated CSS3 transitions with jQuery fallback
  • and more

Like the previous slider, you can drop in just about any content—even HTML5 self-hosted multimedia content.

The LayerSlider brings a lot of action to the slider space and is downright handsome.

4. jQuery Banner Rotator / Slideshow

The jQuery Banner Rotator / Slideshow slider is a straightforward solution. It’s simple without sacrificing essentials.

jQuery Banner Rotator  Slideshow

It includes:

  • tooltips, text descriptions, etc.
  • thumbnail and component viewing options
  • timer and delay options on a global or per-slider basis
  • multiple transitions for all slides or different for each one
  • more

While the jQuery Banner Rotator / Slideshow is basic compared to other jQuery sliders, it should not be overlooked if you want a simple, clean interface.

5. All In One Slider Responsive jQuery Slider Plugin

Every slider comes to market with its own unique perspective and provides a solution to whatever slider niche is being targeted.

But not this one.

The All In One Slider Responsive jQuery Slider Plugin is… well… all in one.

All In One Slider Responsive Jquery Slider Plugin

I think most web devs and designers have a go-to solution, but at the same time are always on the lookout for something new.

This just might be that something new as it includes:

  • banner rotator
  • thumbnails banner
  • banner with playlist
  • content slider
  • carousel

And all of these slider styles include most—if not all—of the features needed in a jQuery slider.

Will the All In One Slider Responsive jQuery Slider Plugin be your all-in-one slider solution?

6. UnoSlider

If your slider isn’t touch-enabled and responsive, you’re not doing it right.

The UnoSlider does it right.

UnoSlider - Responsive Touch Enabled Slider

This slider finds its sweet spot between simple and feature rich.

Features include:

  • easily themeable
  • 12 pre-built themes
  • 40 present transitions
  • IE6+ support (because it’s still out there!)
  • and more

The feature set leans more towards design and style, making the UnoSlider a great content slider to theme.

7. Master Slider

Looking for one jQuery slider to rule them all?

Try the Master Slider on for size…

Master Slider - jQuery Touch Swipe Slider

When it comes to good looks, this one is in the upper echelon:

  • smart preloading
  • over 25 templates
  • hardware-accelerated transitions
  • supports touch navigation and swipe gestures
  • and much more

The interactive transitions, animated layers, and hotspots will really catch your eye.

The Master Slider collection is a masterpiece.

8. TouchCarousel

TouchCarousel touts “free support and upgrades”, but there’s a lot more to this lightweight carousel-style jQuery slider.

TouchCarousel - jQuery Content Scroller and Slider

With “touch” in the name, it’s obviously fully responsive and supports touch navigation.

Other features include:

  • SEO friendly
  • smart autoplay
  • hardware-accelerated CSS3 transitions
  • customizable UI with four Photoshop skins
  • and more

However, TouchCarousel takes mobile to a whole new level with its unique physics-based scrolling.

9. Advanced Slider

A jQuery slider isn’t just for the web. It can also be useful when integrated into applications, just like you can do with the Advanced Slider.

Advanced Slider - jQuery XML Slider

Using HTML markup or XML, this advanced slider packs a lot of punch:

  • animated layers and smart video
  • 100+ transitions and 150+ customizable properties
  • 15 slider skins, 7 scrollbar skins, and built-in lightbox support
  • keyboard navigation, touchscreen support, and fully customizable interface
  • and much, much more

The best feature, however, has got to be the Advanced Slider API—making it the perfect slider solution for your application.

10. jQuery Slider Zoom In/Out Effect Fully Responsive

This is one of those jQuery sliders that makes you visit the demo before you start reading about the features, because you want to know what the heck “zoom in/out effect” even means.

Think screensaver.

jquery Slider Zoom InOut Effect Fully Responsive

While the effect is fairly slight, the zoom effect in a slider adds a nice touch in a world wide web full of static image sliders.

This slick slider’s features include:

  • CSS3 layer transitions
  • exit animation parameters for layers
  • fixed, full width, and fullscreen options
  • CSS and HTML formatted animated text
  • and more

While most sliders try to deliver many effects in one package, the jQuery Slider Zoom In/Out Effect Fully Responsive slider delivers the Ken Burns effect and delivers it well.

11. Content Timeline

Content Timeline is a beautifully designed and powerful slider—a perfect solution for timelines.

From desktop to mobile, timelines have never looked so good.

Content Timeline

It’s simple. Take your content, sort it by the date, call the function, and that’s it!

Features include:

  • powerful and lightweight
  • 11 customizable settings
  • fully interactive, flexible, and intuitive
  • full responsive and built for mobile and desktop
  • and more

With seven embedded script control methods and included easing effects, Content Timeline is one of the best timeline sliders you’ll find.

12. Sexy Slider

The Sexy Slider isn’t nearly as sexy as it used to be, but it has aged well, making it a trustworthy solution.

Sexy Slider

It’s not very impressive at first blush, but with some fine-tuning, this flexible jQuery slider can be configured to fit your design perfectly.

It includes:

  • auto slide
  • image captions
  • continuous sliding
  • 6 transition effects
  • and more

Sexy Slider is just waiting for you to unlock its power and discover its full potential.

13. Master Slider jQuery Slider Plugin with Visual Builder

The Master Slider jQuery Slider Plugin with Visual Builder makes building a slider a snap—without sacrificing good looks.

This premium image and content slider offers some really nice hardware-accelerated transitions that will surely catch your eye.

Master Slider jQuery Slider Plugin with Visual Builder

Features include:

  • smart preloading
  • built for both mobile and desktop
  • over 80 ready-to-use sample sliders
  • masked layer transitions, layer actions, and overlay layers
  • and more

Master Slider jQuery Slider Plugin with Visual Builder is fully customizable, SEO friendly, and also supports videos. And of course, the most obvious: a visual builder.

14. Translucent

Most jQuery slider plugins include some sort of design chrome, and while you can configure it to your liking, sometimes you just want to keep everything contained within the slide itself.

Enter the Translucent slider.

Translucent - Responsive Banner Rotator  Slider

There are a lot of presets, so all you’ll need to do is configure it and go!

Features include:

  • 6 style variations
  • 4 transition effects
  • 2 touch swipe transitions
  • configurable buttons and captions
  • and more

Like others, it’s touch-friendly, responsive, and leverages hardware acceleration.

Translucent is a minimal slider design that does a great job pushing the content to the front.

15. Unleash

Looking for an accordion slider? Then Unleash is what you want!

Packed with features, this beautiful slider is one of the best accordion sliders you’ll find.

Unleash

Features include:

  • HTML5 video support for desktop
  • hardware-accelerated animations
  • fully responsive
  • supports touch
  • and more

Unleash the Unleash jQuery responsive accordion slider.

16. AviaSlider

AviaSlider is another good-looking slider that includes some really nice effects.

This easy-to-use jQuery slideshow plugin includes eight predefined transitions, but you can create more.

AviaSlider

Some other features include:

  • includes image preloader
  • autoplay stops when users interact
  • works with prettyPhoto Lightbox out of the box
  • and more

AviaSlider packs a punch, despite the packed version weighing in at only 8kb.

17. Slider Evolution

Start a slider revolution with Slider Evolution! Now you can easily create JavaScript sliders with some of the best effects.

Slider Evolution

With Slider Evolution, you can create an unlimited number of sliders, each with customized settings, to be placed anywhere on your website.

18. Accordionza

jQuery sliders don’t get much lighter than this.

Using only 3kb to load, Accordionza is a super lightweight accordion slider option.

Accordionza - jQuery Plugin

And if you don’t like the three included styles, you can tweak the HTML and CSS of this flexible accordion.

Features include:

  • keyboard navigation
  • easily configure effects and controls
  • progressive enhancement (viewable without JavaScript enabled)
  • and more

Keep in mind that Accordionza can display many kinds of mixed content, making it an excellent choice for a flexible, go-to accordion slider option.

19. mightySlider

The mightySlider is mighty indeed.

You can use it not only as a simple image slider, but also as a full one-directional slider with item-based navigation—making for a nice one-page website design.

mightySlider - Responsive Multipurpose Slider

You’ll find plenty of options under the hood:

  • keyboard, mouse, and touch support
  • hardware-accelerated CSS3 transitions
  • clean, valid markup and SEO optimized
  • unlimited slides, caption layers, and caption effects
  • and much more

The API is powerful and developer-friendly, adding to the many ways it can be used.

With its clean and well-commented code, the mightySlider is an excellent, forward-thinking jQuery slider.

20. Parallax Slider

The Parallax Slider works like the jQuery Responsive OneByOne Slider Plugin, allowing you to animate each layer separately within a particular slide.

You can do this with multiple slides, or even just one slide, adding some compelling parallax animation to your website.

Parallax Slider - Responsive jQuery Plugin

This comes with four different types of sliders, all offering the same animated, parallax effect.

Like many other jQuery sliders, it also includes:

  • fully customizable
  • touchscreen support
  • fully responsive and unlimited layers
  • autoplay, loop, height & width, and timer parameters
  • and more

Animated layers are not limited to text and images either. You can also include YouTube, Vimeo, and HTML5 video.

The Parallax Slider is another fine example of how Flash-like effects can be executed better than Flash—and be supported across all devices.

Conclusion

It’s interesting to see how the jQuery slider has evolved from something that just transitioned from one image to the next, into a broad range of creative tools. We see sliders that are 3D, parallax, full page, and are fully responsive and viewable on the desktop or smartphone.

If you didn’t find a jQuery slider you liked in this list, you could always take an Envato Tuts+ jQuery Code Tutorial and develop something completely new and unique. Otherwise, dig through the many other great jQuery sliders on Envato Market—there are plenty to choose from.

What’s your favorite jQuery slider and why?


Source: Nettuts Web Development

Site Accessibility: Getting Started With ARIA

Final product image
What You’ll Be Creating

Using standard HTML alone, modern web apps can lock out users with accessibility needs. 

HTML is the predominant markup language online, being used by nearly 83% of existing websites. While there have been some changes in the 25 years since its creation, even newer iterations, such as HTML5 and AMP, leave a lot to be desired—especially when it comes to accessibility. That’s where ARIA comes in. In this tutorial, I’m going to talk about what ARIA is, why it’s useful for your site, and a couple of ways it can be added to your site.

What Is ARIA?

ARIA, also known as WAI-ARIA, stands for The Web Accessibility Initiative’s Accessible Rich Internet Applications. The full specifications document can be found here. Note that the full spec document is fairly dense, so it might be a good idea to start by reading this post and checking out some of the other resources I link below. 

The main purpose of ARIA is to allow for advanced semantic structure within HTML as a counterpart to HTML’s syntax-heavy nature. In other words, HTML tells the browser where things go, and ARIA tells it how they interact.

Who Is Responsible for ARIA?

ARIA is a project hosted by the W3C (World Wide Web Consortium). The project adheres to the same standards for updating and editing as their other initiatives. They also provide a GitHub repository of several tests you can run to make sure your page is running properly.

What’s Wrong With My Current Site Markup?

Most sites that have a structured, well-thought-out design do well enough when it comes to adaptive technologies (i.e. screen readers). However, having a user being able to figure out how to use your site and having it be easy to use are different things. Low-vision users make up almost 2% of the population, and for them, the difference can mean saving a significant amount of time and detective work when trying to perform basic online tasks. It can be the difference between offering visitors a spectacular experience and providing a maze for them to navigate.

Beyond traditional means of accessibility, ARIA is finding its way into technologies that provide new takes on standard interaction. An increasing number of voice systems, aggregated browsing (like car-embedded computers, for example), and other innovations are putting ARIA to use, taking advantage of its increased semantic capabilities.

Okay, But What Does It Do?

Overall, ARIA connects elements together in a semantically meaningful way. It provides the user with additional meaning regarding interaction. Here are some real-world examples of how it might be used:

  1. Associating non-nested elements: With plain HTML, the user’s browser can only see relations based upon parent/child relationships. In some situations, however, we may want a series of buttons parallel to the content in the HTML hierarchy. With ARIA, we can define what type of controller each button is, and what element it controls elsewhere in the document.
  2. Declare interactive elements: While HTML provides a handful of elements for interactivity, ARIA defines dozens more, allowing for more granular descriptions of what each element of your page can do. In addition, these can be assigned to HTML tags that wouldn’t be commonly used for such a purpose but might make sense in your specific case. For example, you might use the <li> tag for a series of checkboxes that you prefer not to be composed of form elements.
  3. Live area update notifications: Another feature that ARIA provides is the definition of a “live” content area. When a content area is defined in this way, ARIA will notify the user whenever content within that element changes. This can be useful when making sure low-vision users know that something has changed on your page.

Adding ARIA to Your Web Pages

We’ve talked about what ARIA can do, so now let’s look at some of the most common examples. We’ll start each section with a brief statement of the goal we are looking to accomplish, followed by a code sample of how to accomplish it.

Creating Alternative Labeling With ARIA

When it comes to alternative labeling, most developers are familiar with the alt attribute commonly used on <img> tags. This tag serves an important purpose: describing the image it is attached to for increased accessibility (or as a common SEO tactic, depending on your perspective). 

ARIA provides a similar attribute called aria-label that can be attached to any HTML element, improving accessibility for not only images, but site sections, form controls, and more. Here’s an example of what that looks like:

Defining ARIA-Specific UI Elements

HTML already provides a number of elements for the creation of web pages, but their main focus is typically to define an area generically and present the user with the site’s structure. ARIA provides a few dozen additional elements that focus more heavily on how an element is used, such as a timer, tooltip, or progress bar.

An example use here is a tooltip that you might find on a form. There are a number of ways to create one, ranging from a link that triggers some JavaScript to an element that creates a modal when hovered over. The missing piece here is that despite how it might work for sighted users, low-vision users might not ever even know that the tooltip exists.

You can define a tooltip using ARIA like so:

Available ARIA Definitions

To expand on these UI elements, here’s a brief list of some of the most interesting “roles” that can be defined. The full listing is available in the referenced specification document.

  • search
  • banner
  • presentation
  • toolbar
  • status
  • menuitem
  • log
  • dialog
  • link

Establishing Relationships Outside of the Parent/Child Structure

Now let’s expand on a point that we talked about earlier: the forced structure of HTML. While the parent/child relationship is good for deciding how things should be ordered, it falls short when more meaningful connections are needed. An example of this is sibling elements. Some libraries have added the ability for siblings or other forms of element relationships to be traversed, but this typically happens in JavaScript or another language outside of the markup.

ARIA gives us the ability to define these relations right in the markup, making it easier to group menu items, create non-standard navigation, and attach controls to element areas that would difficult to do normally.

Let’s take a look at how we might use this to connect some controls to a content area:

This snippet says that the nextbutton.jpg image is a button, which is a control for the tutorial div below.

Creating “Live” Elements in ARIA

The last feature of ARIA that we’ll cover here is the aria-live attribute. While most of the other features of ARIA here deal with semantic connections, this one deals directly with the idea of giving users notifications of content or element changes.

For many with low vision, it might not be immediately clear that their interaction with your site caused a change elsewhere on the page. This can be especially true for subtle changes, such as small blurbs of text that may change but remain relatively the same length. By using this attribute, every time the content is changed within the defined element, your user will be notified.

We can add this attribute to an element like this:

Making the Web a Better Place for All Users

With a little over 2% of the US population carrying some form of low-vision label, improving the accessibility of your site can increase your site’s reach dramatically. For those with sites reaching multiple countries, that number becomes even larger. On top of accessibility, ARIA also provides a way for non-browser interfaces to utilize your site, with a number of voice-based devices already providing support.

Implementing ARIA helps your users and can help your traffic, so get to it!

Did I miss any details, or do you have additional questions? Leave a comment below!

If you want to dive into the full ARIA documentation or try the official testing tool, check out the links below:


Source: Nettuts Web Development