Divi Helps Make Accessibility Easy for Everyone

Divi Helps Make Accessibility Easy for Everyone

The Divi builder’s massive growth can be attributed to it’s ease of use in building beautiful websites. But that growth has also put the spotlight on some initial accessibility issues that were not part of the initial design. Quickly realizing the oversight, CampusPress introduced the Divi Accessibility plugin. Bear in mind, no single plugin or script can bring a website into compliance with the ADA, but it’s a step in the right direction. Here are a few major features of the plugin.

ARIA Support: One feature of Divi Accessibility is the addition of ARIA attributes to the Divi elements and modules. The ARIA code is also added in the Tab module. This is good for screen reader users.

Dropdown Keyboard Navigation: Another important feature is the drop-down keyboard navigation, which allows users to more easily navigate the Divi drop-down menus with the keyboard.

Fix Labels: This option fixes missing labels and assignments to corresponding inputs.

Focusable Modules: Without Divi Accessibility, the theme’s toggles and accordions aren’t accessible for screen reader or keyboard-only users. Instead, these devices skip over these tools. The accessibility feature makes Toggles and Accordions focusable, just like it would be for any mouse user.

Divi Accessibility’s other options include improvements in these areas:

  • Keyboard Navigation Outline
  • Screen Reader Text
  • Divi Email Opt-in
  • Form Label Display
  • Skip Navigation
  • Tota11y (helps you get an idea of what your site will look like with this new technology)

These features ensure Divi is versatile and accessible for site visitors with disabilities. This information was curated from the article “Improve Your Divi Website’s Reach With Divi Accessibility” written by Claire Brotherton for the website, A Clear Bright Web.

Tips for Designing Your Website with Accessibility in Mind

Tips for Designing Your Website with Accessibility in Mind

Designing your website with accessibility in mind can be a daunting task, especially since there are so many options for making a website accessible. To get started, consider these basic design features, which meet Web Content Accessibility Guidelines (WCAG).

Associate a label with every form control: Labels help readers understand the required input for the form field. Create labels by using a for attribute on the <label> element linked to the ID attribute of the form element or by using WAI-ARIA attributes. 

Include Alternative Text for Images: Alternative text describes images to viewers (and search engines). Include alternative text for informational and functional images. Decorative images should have empty text alternatives.

Identify Page Language and Language Changes: Identify page language and language changes of every page by using the lang attribute in the html tag.

Use Markup to Convey Meaning and Structure: Using the right mark-up for headings, lists, tables, and more will improve the structure of your content.

Help Users Avoid and Correct Mistakes: If your website will include forms, plan on including clear instructions, messages, and notifications to assist with completing forms. It also helps to give specific explanations, corrections, and to provide a very forgiving format.

Other helpful tips for designing your website with accessibility in mind include: 

  • having the reading order match the logical order of the information presented
  • helping the user understand nonstandard interactive elements
  • making sure interactive elements are keyboard accessible 
  • using code that fits the user’s technology
  • avoiding CAPTCHA, if possible

We found these tips to help you meet Web Content Accessibility Guidelines (WCAG) requirements in the article Tips for Getting Started – Developing for Web Accessibility. Read the article for more documents, tutorials, and user stories. 

Why Accessible Websites are Good for Business

Why Accessible Websites are Good for Business

If your business website offers products, services, information, entertainment, or serves other purposes, it is extremely important for you to consider updating the website to adhere to appropriate accessibility guidelines. Not doing so could negatively affect and even penalize your business. Below are four important reasons on why making your website accessible is a smart business decision.

Reduced Customer Loyalty: If you decide against adding accessibility features to your website, one of the worst consequences is a reduction in customer loyalty. Having the lowest prices isn’t enough anymore to drive good business. Customers will pay more if they are buying from a business with values similar to their own. Show your customers you care and they’ll likely respond with increased customer loyalty.

Slower Growth and Expansion: Having website accessibility allows you to reach millions more potential customers around the world. You don’t want to miss out on that, do you?

Potential Lawsuits and Financial Losses: One huge reason to offer website accessibility is to avoid damaging lawsuits. That’s right. You could get sued for not having an accessible website. The number of yearly lawsuits is growing. Recent court rulings have paved the way for accessibility related lawsuits.

Lack of Inclusion: No business owner wants their company to be known as the company that doesn’t consider website accessibility an important issue. It could be detrimental to the reputation of your business. We all know how customers use social media to speak out against a brand. It can get ugly. Making your website accessible and inclusive avoids these issues.

For any business with a web presence, it is best to comply with the latest Web Content Accessibility Guidelines (WCAG) 2.1 or Section 508.

This article is a highlighted version of CloudWedge’s article “The Penalty You Face Avoiding Website Accessibility“.

How to Ensure Your Website is Accessible for the Visually Impaired

How to Ensure Your Website is Accessible for the Visually Impaired

According to the American Foundation for the Blind, 26.9 million adult Americans report having trouble seeing, even with glasses or contacts, or they are completely blind. Any visual impairment can make it extremely difficult for someone using a computer to interpret what they see. It’s important that your website is accessible to the visually impaired. 

To ensure your website is accessible, follow the Web Content Accessibility Guidelines (WCAG) and create user interface design and visual design using the most accessible and easy-to-interpret methods possible to assist the visually impaired. Below are some best practices to follow.

Provide Sufficient Contrast between Foreground and Background: If foreground texts and background colors are too similar, they can be difficult to read. Use recommended “Contrast ratio” for images, buttons, and other elements, but not for logos or text in a photograph.

Don’t Use Color Alone to Convey Information: In addition to using colors to differentiate elements, also use symbols (e.g. asterisk, bullet point, dashes), numbers, or labels to show differentiation between elements, areas, graphs, etc. Adding a pattern to a color is another useful method. 

Make Sure Interactive Elements Are Easy to Identify: For easy identification, change the appearance of links on mouse over, keyboard focus, and touchscreen activation.

Provide Clear and Consistent Navigation Options: Have clear navigation options by using consistent naming, styling, and positioning. Also use multiple methods of website navigation in addition to orientation cues, like breadcrumbs and clear headings.

Make Sure That Form Elements Include Clearly Associated Labels: All fields should have a descriptive label with minimum space between labels and fields.

Provide Easily Identifiable Feedback: Make feedback (confirmation, alerts, notification) easily identifiable. Feedback needing user action should use a prominent style.

Use Headings and Spacing to Group Related Content: Using whitespace, proximity, and style headings to group related content will help provide clarity.

Create Designs for Different Viewport Sizes: Change position and presentation of main elements (e.g. header, navigation) to optimize use of space. Adjusting text size and line width will maximize readability.

Include Image and Media Alternatives in Your Design: Use alternatives for images and media such as visible links to transcripts of audio, text with icons and buttons, and captions / descriptions for tables and graphs.

Provide Controls for Content That Starts Automatically: Use clearly visible controls to let users stop animation, auto-playing sound, carousels, and videos.

We found these tips to help you meet Web Content Accessibility Guidelines (WCAG) requirements in the article Tips for Getting Started – Designing for Web Accessibility. Read the article for more detailed information on how to make your website accessible to the visually impaired. 

Protecting Photographers’ Image Copyright On WordPress Sites

Protecting Photographers’ Image Copyright On WordPress Sites

The web doesn’t have a native mechanism for protecting content from copyright infringement. Aside from complex digital rights management solutions, which aren’t really appropriate for photography sites, there’s little a photographer can do to prevent determined infringers from copying images and using them without regard for the photographer’s chosen licence.

This is a huge problem for photographers. The web is an essential tool for displaying and promoting photography, but anything published on the web is up for grabs — at least from a technical perspective. From a legal and ethical perspective, photographers have the right and the ability to protect their work. But many users either don’t understand or don’t respect those rights.

There are various routes a photographer can take to the reduce the impact of copyright infringement, but none is ideal and each has trade-offs.

Continue Reading: Protecting Photographers’ Image Copyright On WordPress Sites

Track Inbound and Outbound Link Clicks Easily With Free WordPress Plugin: DW Shortlinks

Track Inbound and Outbound Link Clicks Easily With Free WordPress Plugin: DW Shortlinks

Today we are glad to introduce to you a free plugin which was built by the development team of WooBeginner/DesignWall with the name: DW Shortlinks. This plugin is currently being used in our WooCommerce Themes & WooCommerce Plugins listing. The main feature of this plugin is created short and clean URLs, with your own domain. Also tracking outbound link clicks, with internal reporting for hits per link.


Continue Reading and Download the Plugin: Track Inbound & Outbound Link Clicks Easily With Free WordPress Plugin: DW Shortlinks