Articles

Branding 101: Creating the Visual Identity for Your Business

There are so many things to think about when first starting a business. What will your business offer? How will this differ from existing solutions? Who will benefit most from your offering? And why are you so passionate about this?

If you haven’t done so yet, work through this exercise to come up with your brand identity and business name.

Once you’ve figured out your brand identity, you have to create a visual identity — also referred to as brand imagery — to go along with it.

While you could easily throw together visual elements that speak to you, your goal should be to choose visuals that resonate with your audience. So, building your visual identity is going to require some work.

In the following post, we’re going to look at how your brand’s visual style can give off certain signals to those who encounter it (and how to use those to your advantage). We’ll also break down what you need, to piece together your visual identity.

The Power of Visual Identity

Each of the design choices you make that website visitors, social media followers, and customers can see will impact how they approach your brand. Are you a fun-loving company that caters to a younger crowd? Do you create high-tech products that solve serious global problems? Are you a successful entrepreneur who’s reshaping the way we talk to one another?

When done right, our brand visuals convey our brand’s personality, values, and mission without having to use any words.

Think about your favorite clothing brand. What do you picture? Let’s use Athleta as an example.

The logo is probably the first visual element that comes to my mind:

The grey radial shape is one I’m very familiar with. It’s on their website, their social media, and it’s usually imprinted somewhere on their clothing.

The second thing I think about when I think of Athleta is its physical imagery:

Rather than include images of the clothing on its own, there’s often someone wearing Athleta clothes while hiking along a trail, walking on a beach, or working out in a studio.

There’s so much that just these two visual elements tell us about this brand:

Athleta targets active female consumers; we see this in its images and CTAs. The fine touches and shape of the logo may suggest this as well.
Athleta creates understated but highly functional clothing; we see this in the product photos as well as in the brand’s use of neutral colors and fonts across its designs.
Athleta’s mission is to help customers have a healthier and more balanced life; we see this in its product photos, but we also get a sense of this from the simple symmetric structure of the logo.

There are overt ways to use visuals in your branding (usually through your choice of photos or illustrations). But there are also ways to subtly convey more about your company, what it does, and for whom you work through your choice of colors, fonts, structure, and more.

How to Create a Visual Identity for Your Brand

Let’s walk through each of the elements you need to pull together to create your visual identity:

The Color Palette

Like with everything else in business, you’re here to give your audience something they need, so they have to be at the forefront of your decisions — including which colors you put into your brand’s palette.

So, where do you start in choosing a color palette for your site and other marketing channels?

Let’s take a systematic approach.

1. Choose a Primary Color

Go to the Canva color meanings and symbolism tool.

Have a look through the colors and find one that feels good to you. Open up the page and read more about what the color means:

You’ll find the following on each page:

A brief history on the color;
How it’s been used by people over the years;
What it’s symbolized over the years and around the world;
How to use the psychology of the color to affect people (i.e. your audience);
Alternate shades and colors if this particular one doesn’t send the right signals;
Colors that pair nicely with this one.

While it’s important to consider how colors evoke different emotions, it shouldn’t be the only driving force. Your primary focus should be to choose colors that positively affect the user experience. In other words, you don’t want them to get in the way or distract prospects from getting to know your brand and eventually converting.

2. Create a Full Color Palette

Once you’ve picked a primary color, you need to come up with a color palette. You’ll want one or two colors to use in your logo and a full color palette for your website and other branded channels.

You can use Canva’s palette suggestions (in the top-right corner of the color page) to create a basic color palette.

For something a little more robust, use Material Design Palette:

Color options are a bit limited, but it does a good job of spelling out where you should use each color. You can then adjust the color palette as you see fit.

Typography

The design and pairing of your fonts can greatly impact the way people respond to your brand and the words you’ve written about it.

So, the goal with typography is to make your words easy to read while also giving hints about your company’s personality and style.

1. Understand Font Styles

Figure out what style of font goes best with your brand identity.

This is the simplest way to categorize fonts:

Sans serif: These are simple fonts without any “feet” (lines at the ends of letters).
Serif: These are more traditional-looking fonts (the kinds you see in literature and newspapers) with feet.
Script: These are cursive and curly fonts that mimic handwriting.
Display: These are fonts designed specifically to appear in logos, hero images, and advertising because of their large, bold styling.
Monospaced: These are fonts with characters that comprise the same amount of horizontal space, often resembling typewritten text.

You can break these down even further and really get to the root of the style. Fonts.com has a great explainer page on each of these classifications:

Here are some sources to help you find fonts for your brand:

2. Settle on Two or Three Fonts

Choose two or three fonts for your brand. Max. Anything more than that will create a distracting and overwhelming interface for your audience.

You’ll need:

A font for your header text. It needs to look good in big sizes, be easy to read, and easy to identify from other text when scanning through a page or document.
A font for your body text. It needs to look good in small sizes (16 pixels and up) and be highly legible.
Optional: A font for your logo and hero images. It wouldn’t stray too far from the style of your headers, but if you need something a bit more decorative or unique, you can use a different font family for this.

If you find that you need more variety in your fonts to create a clearer hierarchy on the page or to call out certain elements, use superfamilies with dozens or even over a hundred different styles. That way, your users’ eyes won’t get fatigued from having to switch between too many font types.

3. Learn Font Pairing Rules

To pair fonts, use styles that contrast yet complement one another. Ultimately, you want the pairing of your fonts to send a cohesive message to your audience.

For example, a sans serif header and serif body are a common way to combine fonts. Like this pairing of Fira Sans and Merriweather from the FontPair website:

This modern-looking duo sends the message that: “Your comfort is priority #1 for us. Take your time reading and enjoy.”

There are tons of ways to make varying styles play off one another while sending the right signals to your audience: A safe serif with a retro cursive header font to come off as a playful, yet professional brand; a futuristic header and a neutral sans serif body font to give your product pages a very techy feel; and so on…

Once you have one or two fonts you like the vibe of, use FontPair to track down a good complement to the one you want to use.

Imagery

We can use this as a blanket category for any visual content you might use in your branding:

Photos
Videos
Illustrations
Icons
Backgrounds
Textures
Animations or GIFs

But just because there’s all this content to use, that doesn’t mean it should all appear on the same site to represent the same brand. You’ll want to narrow it down based on your company’s personality and how the style of imagery fits with it.

1. Photos vs. Illustrations

You can alter your brand’s voice and style based on the kind of imagery you use.

For instance, tech companies like Stripe often use illustration in their brand designs:

Even though SaaS companies sell one type of product, their audiences are usually quite vast, so it would be hard to find photos that represent everyone. And it’s not like users are focused on their relationships with the people behind the scenes. These companies put technology into the hands of their users, so it’s best to let the product shine and not the people. This opens up the door for some fun and creative possibilities with illustrations.

That said, choosing photos over illustrations doesn’t completely bar you from using vector graphics and icons. You can mix-and-match those visuals so long as they blend well with one another. What you don’t want to do is to mix two very different styles that say different things about your brand at once.

To decide what’s best for your brand, approach this from your users’ point-of-view. What kind of visuals will help them connect to your brand and what you sell?

2. Style

It’s not just the type of image you use that impacts your brand identity. It’s the style you apply to those visuals that can transform your visuals, putting visitors in a different time, place, or headspace.

Will you apply a filter to give your photos a similar look and feel?

Will you place each of your product photos against the same backdrop for a uniform look?

Will you use a completely new style of imagery for one of your product lines the way Apple has done for the iPhone 12?

There’s nothing wrong with using out-of-the-box imagery. However, if they don’t give off quite the right tone, don’t be afraid to use your design skills to make adjustments and cater them to your own style.

Logo

Your logo is the last of the visual elements you’ll need to invest some time in. The good news is that you’ve already done most of the legwork:

You’ve defined your brand’s identity.
You’ve given your business a name.
You’ve selected the main visual components that will represent your brand: colors, fonts, and images.

That’s really all you need to create a logo that is relevant, unique, attractive, potent, and memorable.

That and a way to bring it all together. You have a few options.

Option #1: If you’re a graphic designer, you can create your own from-scratch.

Option #2: If you want help getting started, you can use a tool like Wix Logo Maker:

You’ll fill out a short questionnaire and then receive dozens of pre-made logos to start with. You’ll later have the chance to customize the design to your liking.

Option #3: You can hire someone to design a totally custom logo.

Wrapping Up

In the next post in this three-part series, we’re going to look at the next step:

Getting your business online.

We’ll take everything you’ve done so far in coming up with a business name, brand identity, and now visual identity, and put it towards your website and the marketing channels that are best for your business.

Source

Source de l’article sur Webdesignerdepot

4 novembre 2020/par Service comm.

AccessiBe Review 2020: Solving Web Accessibility with AI and Scalability

Actualités

Web accessibility is important for two reasons:

Being ADA & WCAG compliant is required by law (we’ll explain this further) so if your website isn’t compliant, you can get sued.
It allows people with disabilities to browse your website, which increases your potential audience and it is the decent thing to do.

In this accessiBe review, we’ll cover:

How Does accessiBe Work
How to Install and Setup accessiBe
Why ongoing compliance is important
accessiBe front end features: the accessibility interface
Accessibility profiles
Content adjustments
Color adjustments
Orientation adjustments
accessiBe back end features:
Screen-reader and keyboard navigation compatibility
Background processing
Image recognition
Menus
accessiBe vs. free plugins
accessiBe vs. manual solutions
How to check your web accessibility compliance status

How Does accessiBe Work

accessiBe is an automated solution that combines two applications to achieve full compliance.

Foreground application: the accessibility interface. This is the accessibility menu that allows users with disabilities to adjust the various UI and design elements on your website so it meets their unique needs.

Background application: proprietary AI technology that’s responsible for the ‘heavy lifting’, screen-reader, and keyboard navigation optimization.

The combination of these two applications is unique for accessiBe for a few reasons. While most available accessibility solutions offer just one of the two or rely on manual remediation, accessiBe checks both boxes and does it in a fully automated way.

Additionally, and most importantly, accessiBe continuously scans your website, every 24 hours, identifying and fixing new accessibility issues as they arise. Websites are dynamic – meaning, keep updating constantly with new content, pages, images and so on; being ADA and WCAG compliant is an ongoing concern, not a one-time fix.

How to Install and Setup accessiBe

You install accessiBe by inserting a single line of code on your website.

From your end, that’s all it takes.

The first thing that happens is that the accessibility interface appears on your website. The menu is available via the accessibility icon (that also appears automatically.)

Source: accessiBe website

Next, the AI application scans and analyzes your website for accessibility issues and compatibility with screen-readers and keyboard navigation requirements and fixes them. This automated process takes 48 hours.

Once the initial 48 hours have elapsed, your website is compliant.

From here on, accessiBe automatically scans your website every 24 hours to identify and fix new accessibility issues as they arise due to website updates.

Why Ongoing Compliance is Important

We’ve mentioned this already, but it’s important to stress this point.

Whether you have an e-commerce website or a company website, you keep updating and changing your website; new items go up for sale, new videos and content pieces are added. Every addition or removal from your website has the potential of creating accessibility gaps (like missing alt text for images.)

By continuously scanning and fixing your website, accessiBe ensures that you stay compliant. An accessibility audit remediates your website for the specific point in time the audit took place. Meaning, you’ll need to audit your website periodically to remain compliant, which is a costly affair. With accessiBe you don’t need to worry about this.

accessiBe Front End Features – The Accessibility Interface

The accessiBe accessibility interface (the menu that is available for users) is installed automatically on your website once you insert the line of code. Let’s look at the various features that are available for people with disabilities.

Accessibility Profiles Explained

First, it allows you to choose from a pre-defined set of profiles optimized for various disability needs:

When one of the profiles is selected, the required adjustments are instantly applied to your entire website.

For example, The ADHD Friendly Profile creates a reading mark that follows your mouse movements that diminish distractions and allows better focus:

The Cognitive Disability Profile frames all the elements in bounding boxes and adds an ‘reading cursor’ that acts as your mouse to allow enhanced orientation:

Each of the predefined profiles includes a suite of features that target the unique accessibility needs of the disability; the Epilepsy Safe Profile prevents videos from playing automatically, dims all the colors on your website and eliminates flashing and blinking animations; the Visually Impaired Profile enhances all your website’s visuals, enlarges all fonts to allow most visual impairments conditions (degrading eyesight, tunnel vision, cataract, glaucoma and more) to be able to browse your website with ease.

The last two profiles, Blind Users and Keyboard Navigation, work in unison. They allow blind and motor-impaired individuals to browse and use your website as they are used to, through screen-readers and keyboard functionality, respectively.

Two things need to be mentioned here:

Blind individuals have screen-readers installed on their computers in the OS-level, meaning, on the hard drive of the computer. They use them to navigate the internet by having the software read for them every text that appears on the screen. As can be seen in the screenshot above, the Blind User profile is ‘launched’ automatically once accessiBe detects that the user is using a screen-reader. This is a crucial functionality since obviously blind users aren’t able to locate the accessibility icon.
The same goes for individuals that are using the keyboard instead of a mouse to navigate the web, both the motor-impaired and the blind. accessiBe detects and automatically enables keyboard navigation on your website.

On top of the predefined accessibility profiles, accessiBe’s interface allows for further adjustments that can be controlled specifically to allow a personalized browsing experience according to the user’s needs. Let’s look at these adjustments.

Accessibility Content Adjustments Explained

The content adjustments allow you to control every aspect of the written content on your website. The menu looks like this:

Each of these elements allows for granular control of the way content, or text, is presented. From altering the entire website’s text to a readable, sans-serif font that is easier to follow, to highlighting titles and links, to adjusting font size, the spacing between lines and letters and using a text magnifier that follows your cursor on the screen.

Here’s how it looks with Highlight Titles and Highlight Links turned on:

You can see all the links are highlighted with an orange bounding box while all titles are highlighted with a blue bounding box.

Accessibility Color Adjustments Explained

The color adjustments allows users to control every aspect of the color scheme on the website:

From adjusting contrast and saturation, to switching the entire website to a monochrome color scheme, to adjusting textual elements and background colors. Let’s look at a few examples.

Here’s a side-by-side of default appearance and the Dark Contrast adjustment turned on:

And here’s how it looks with the Monochrome adjustment turned on:

Accessibility Orientation Adjustments Explained

The orientation adjustments allow full control of ‘distractions’ that make it hard for individuals with epilepsy, ADHD, and cognitive disability to browse the web:

As such, the orientation adjustments allow users to mute sound, hide images, stop animations and additional ‘focus’ features such as an enlarged cursor and reading assistance that highlights the text being read.

Here’s how the Remove Images adjustment works:

accessiBe Back End Features

Unlike ‘accessibility plugins’ (more on that later) accessiBe provides a comprehensive back end treatment to your website – automated, AI-powered analysis of compatibility with accessibility requirements and fixing of the elements that need adjustment.

It should be noted that 70% of the WCAG compliance requirements deal with screen-reader and keyboard navigation compatibility and all these requirements are not answered by installing an accessibility interface widget that merely makes UI and design adjustments.

For example, an accessibility widget will enable you to enlarge the font on your website, to adjust the saturation or to highlight links, but it won’t enable a blind individual to differentiate between a shopping cart icon and a checkout icon, nor will it enable a motor impaired individual to easily navigate a menu.

This is a crucial consideration to make when choosing a web accessibility solution. Being WCAG compliant is a YES / NO situation. Your website is either compliant or it’s not, there is no middle ground here.

accessiBe’s back end features come to solve and answer all these compatibility issues that enable full screen-reader and keyboard navigation functionalities.

Screen Reader Compatibility Explained

Screen Reader is a software for blind individuals to use computers and browse the web. As the name suggests, the software reads aloud what is seen on the screen for blind individuals.

The screen reader software is installed on the computer. But in order for it to work with websites, the website needs to be compatible with the software. To achieve compatibility with screen reader software, WCAG requires that a website should adhere to a set of attributes called Accessible Rich Internet Applications (ARIA) that are installed within the website’s code, allowing it to ‘communicate’ with the screen reader.

Let’s take social icons as an example. We are all familiar with those icons – Facebook, Twitter, Instagram – they are instantly recognizable for us visually. A screen reader software doesn’t actually ‘see’ elements on the screen, rather it scans the website’s code to understand what appears on the screen. As such, a Facebook icon code simply says ‘link’ and has the URL that directs the user when clicking the link.

So with a website that isn’t compatible with a screen reader, that doesn’t have ARIA tags implemented, the screen reader will read to the blind person “link” for the Facebook icon; not very helpful, is it?

When ARIA tags are implemented, additional information is added to the Facebook icon – and any other visual link on the website – that describes what is the link. So the screen reader will read to the blind person “Facebook link”.

It’s not difficult to imagine the scope and effort of the work needed in order to implement ARIA tags on your entire website.

Keyboard Navigation Compatibility Explained

Keyboard navigation means that motor-impaired individuals are using their computers only through their keyboard, rather than a mouse. Scrolling, clicking links and menu buttons, opening and closing tabs – everything is done using designated keys.

There are many issues relating to keyboard navigation as today’s websites are highly complex, layered with content elements, and react dynamically to user behavior. Any element of the website must be compatible to allow full keyboard navigation.

Let’s look at a popup as an example.

Popups can be triggered for a variety of reasons. For mouse users, it is a simple occurrence; you can bring the cursor to the area of the popup, click on one of the fields to input details or click the X to close the popup.

But how do you handle the popup using only the keyboard? How do you differentiate between ‘regular’ functionalities of the website and that of the popup? How do you ‘shift the focus’ of the keystrokes to a layered element? You need to allow unique keystrokes to operate the popup, keystrokes that are activated only when a popup appears.

It’s one example of the many challenges making your website compatible with keyboard navigation. The list of WCAG requirements for compatibility with keyboard navigation is a long one, and understandably so as it needs to enable motor-impaired individuals to navigate your website with the same ease as the rest of us using a mouse.

How accessiBe’s Background Processing Achieves Screen Reader and Keyboard Navigation Compatibility

Without getting too technical, what accessiBe does is scan the entire code of your website and adds keyboard functionalities and ARIA tags to various elements on your website directly. It won’t interfere with your site’s code, but rather add an additional ‘layer’.

accessiBe’s AI ‘learned’ all of ARIA’s tags and keyboard functionalities required by WCAG and when scanning your website’s code implements all the required adjustments to achieve full compliance.

How accessiBe Makes Menus Accessible

Menus are a good example for understanding what the accessiBe background processing does and the benefits it provides.

We recognize menus on websites instantly, because we saw thousands and thousands of them. We know how they look, we know what their functionality is, and we know where to hover and click in order to reach the various pages of the website.

But if you remember, we said that screen readers don’t ‘look’ at the screen, but rather scan the site’s code to understand structure, identify links and read them aloud with all the text that appears on the page.

So menus are coded as a list structure, because in a way they are. A screen reader will announce a menu as a list, which might be confusing for a blind user. Additionally, many menus have drop-down sub-menus, accessible via a hover or by clicking a little triangle. Without proper ARIA tagging, a screen reader will miss the sub-menu.

What accessiBe does is adding readable tags for every element in the menu so a screen reader will recognize and announce each element properly. The ‘list’ code structure will get a “menu” tag, and the sub-menu will get a tag for ‘sub-menu’, thus allowing the blind individual to utilize the full functionality of the website.

Additionally, accessiBe alternates the tags on-the-fly while the site is being browsed. Once a sub-menu has been opened, a tag that says “sub-menu open” will be added to indicate to the screen reader what has happened, and will be changed with the tag “sub-menu close” once the sub-menu has been closed.

Image Recognition

One of the key elements of accessibility compliance with screen readers is to provide accurate alternative descriptions for images, known as alt text.

accessiBe utilizes various image, object and character recognition technologies (OCR and Iris) to provide highly descriptive and accurate depictions of images displayed on the website. Without adding screen-reader compatible alt tags to images a blind individual would simply not be aware of the existence of images, and miss out on the information usually displayed on images.

Let’s look at the following banner images from an e-commerce website:

As you can see, valuable information is communicated via the images – sales and discounts – the kind of information any shopper would want to know.

This is the descriptive text that accessiBe’s AI assigned to these images, completely automated with no human intervention (from left to right):

Image contains: shopping, shorts, woman, ashion; image text: extra 50% off shorts
Image contains: shopping, red top, woman, jeans, fashion; image text: 50% off bottoms
Image contains: shopping, blue jumpsuit, woman, fashion, bed, ; image text: 50% off jumpsuits & rompers
Image contains: shopping, shoes, ocean, woman, fashion; image text: 50% off shoes

Again, doing this kind of work for the hundreds to thousands of images that are displayed on every e-commerce website requires a lot of time and effort. accessiBe achieves this in a completely automated way, and every image added to your website instantly gets its alt text.

Comparison of accessiBe with Accessibility Plugins

There are many web accessibility plugins out there. They offer a ‘quick fix’ for ADA and WCAG compliance – add an accessibility menu and you’re done.

As tempting as it may sound, the distinction between an accessibility menu and being fully compliant must be made.

As we’ve mentioned earlier, there are two parallel tasks that need to handle in order to achieve ADA and WCAG compliance:

Front end – UI and design adjustments, achieved by the Accessibility Interface (the visible menu for content, font, color and orientation adjustments)
Back end – screen-reader and keyboard navigation compatibility, achieved by implementing ARIA tags and further code adjustments

Reminder: 70% of accessibility compliance requirements deal with back end adjustments, meaning, screen-readers, and keyboard navigation compatibility.

Accessibility plugins, whether free or paid, only answer the front-end requirements. Meaning, after installing an accessibility plugin, you are just 30% compliant. Since accessibility compliance is not a scale (you don’t ‘get points’ for making it halfway through) you’ll need to turn to an additional provider to do the back end work.

accessiBe, on the other hand, provides a full accessibility compliance solution, covering both UI and design requirements through the accessibility interface AND screen-reader and keyboard navigation compatibility requirements through it’s automated AI technology that analyzes and makes adjustments in the code-level of the website.

Benefits of Using accessiBe Over Accessibility Plugins

Achieving complete accessibility compliance
Dealing with a single provider, rather than two or more
Cost-efficiency (manual audit and remediation service are expensive)
Complete compatibility with screen-readers and keyboard navigation
Enabling true accessibility to individuals with disabilities

Comparison of accessiBe with Manual Accessibility Services

Manual accessibility services can help you achieve full accessibility compliance, but it comes with two major disclaimers:

You’ll still need an additional solution for an accessibility interface, which the service companies don’t provide
The compliance achieved is for the point in time the audit and remediation were performed. Let’s explain this point further.

Companies that offer a manual accessibility service assign a team of accessibility experts to do an audit of your website. The result of this audit is a lengthy document detailing all the accessibility faults that your website has. It is a valuable document as it gives you a precise depiction of what needs to be fixed in order to achieve compliance.

From here there are two possible paths:

You can either take the audit results to your development team and have them remediate your website accordingly.

Or, some of the service companies offer a remediation service, meaning, they’ll assign their own engineers to manually make the necessary changes in your website. Needless to say this extra service isn’t given for free.

In both cases, you are looking at a process that takes weeks if not months (depending on the number of pages your website has.)

Additionally, since it is a manual process done by experts, it comes with a hefty price tag.

But most importantly, the audit and remediation hold for the time they were done. Unless you have a 100% static website, meaning, you do not make any changes to your website – never add or remove products, never update content – the ‘effect’ of the audit and remediation fades away with time.

Since the process was manual, any changes you make to your website must be handled manually accessibility-wise. You added a new banner with a link to items on sale, you’ll need to go into the code and add ARIA tags. You added a new image, you’ll need to go into the code and add alt text compatible with screen-readers. And so on.

Some of the manual accessibility service companies offer maintenance services as well. They will periodically audit your website (manually) and provide a remediation document that will need to be implemented (manually) either by your development team or by theirs for an additional cost.

These costs add up. Having your website audited and remediated for compliance on an ongoing basis takes time, effort, and money. But you don’t have a choice. Being ADA and WCAG compliant is an ongoing task, since websites are dynamic and being updated regularly.

accessiBe, on the other hand, offers a 100% automated and ongoing compliance solution. The initial audit and remediation process is carried out – with no human intervention – in 48 hours (compared to weeks or months by a manual provider). Then, your website is scanned every 24 hours to identify and fix accessibility issues using accessiBe AI technology. Meaning, compliance maintenance is constantly carried out ‘in the background’ keeping you ADA & WCAG compliant at all times.

Which brings us to another crucial point regarding manual accessibility services. They make it extremely hard for you to scale up. Every business has a constant aim to grow, but with a manual accessibility service, scalability becomes a pain point. The more you grow the more time, effort and money you need to put in to remain compliant. You want to add another section to your website, you want to launch an additional website? Using a manual accessibility service will hold you back. You’ll need to account for additional time before going live to manually enable accessibility and additional funds. For fast-moving companies, time becomes a serious burden.

Since accessiBe offers an automated and ongoing accessibility solution, scalability is not an issue.

Benefits of Using accessiBe Over Manual Accessibility Services

Time-efficient
Cost-effective
100% automated
Ongoing compliance
Infinite scale
Single provider for full compliance (front end and back end)

How to Check Your Web Accessibility Compliance Level

Before you get started on your path to being ADA & WCAG compliant it’s important to understand the current state of accessibility your website provides.

Obviously, if you’ve never taken any steps to make your website accessible to individuals with disabilities, there’s no need for this – your website isn’t accessible in any way.

This is actually highly important if you have taken steps to make your website accessible, like for example, installing one of the accessibility plugins. You might be under the impression that by doing so your website is both compliant and accessible to individuals with disabilities.

There’s a simple and quick way to face the accessibility reality.

accessiBe offers a free, automated compliance audit tool available online named aCe. It uses accessiBe AI technology to scan your site, detect accessibility issues and provide quite a detailed report on the various elements that impact your website’s accessibility, and those include:

General score
Clickables
Titles
Orientation
Menus
Graphics
Forms
Documents
Readability
Carousels
Tables

Each of these elements is given a score and some explanations to the specific issues that need attention within the context of these elements.

In addition to gaining a compliance audit with the remediation steps needed to be taken in order to fix these issues, aCe gives you a very clear idea of where you stand and what needs your attention in order to achieve compliance.

We gave it a try. We ran a website that has installed one of the accessibility plugins (which was recognized, by name, by the aCe audit tool) and the results cement the point that these plugins aren’t comprehensive enough of a solution for true ADA & WCAG compliance.

Here are the results:

As can be expected, the UI and design side got relatively high scores, due to the accessibility plugin installed on the website, but anything that has to do with back end compatibility with screen readers and keyboard navigation got a failing score.

Conclusion

accessiBe is an automated and comprehensive web accessibility solution that achieves ongoing compliance with ADA and WCAG regulations for your website.

It offers a unique combination of front end and back end compatibility, meaning, it provides an end-to-end solution for both user-facing accessibility interface, and compatibility with screen readers and keyboard navigation.

The solution offered by accessiBe is a no-touch, no-code, continuous compliance utilizing proprietary AI technology that audits and remediates your website.

It is by far one of the most affordable web accessibility solutions, starting at $490 for websites with up to 1,000 unique pages.

When compared to accessibility plugins, accessiBe’s offering is robust and comprehensive, delivering full compliance that plugins aren’t able to.

When compared to accessibility manual services, accessiBe offers a speedy and automated audit and remediation process compared to the lengthy, manual and highly expensive offering of the service companies. Additionally, accessiBe, unlike accessibility manual services, delivers ongoing compliance and the ability to scale with ease and speed.

The combination of AI-based audit and remediation, the most comprehensive accessibility interface on the market, ongoing compliance, scalability, and a highly affordable plan makes accessiBe stand out from the competition by offering a unique end-to-end solution for achieving ADA and WCAG compliance in a fast and simple way.

Featured image via Unsplash.

Source de l’article sur Webdesignerdepot

25 septembre 2020/par Service comm.

The Latest Research for Web Designers, August 2020

Actualités

While a lot of the research for web designers that’s come out this year has to do with COVID-19, we’re starting to see a light at the end of the tunnel. Many of these reports aren’t just looking at the effects of the pandemic on business and marketing today. They’re now looking at what consumers plan to do once the pandemic is gone.

So, I have some very interesting research for you here today. Three of the reports have to do with coronavirus side effects — pertaining to ecommerce, market research, and freelancing — and one of them is just a really great argument against using PDFs on websites.

1. The Digital 2020 Survey Says Ecommerce Growth Will Continue Post-Coronavirus

Obviously, everyone is paying close attention to COVID-19’s impact on the world. For the purposes of the work you do as a web designer, you should be clued into what it’s doing to the business and marketing fields. Because, if those opportunities dry up or companies begin to pivot, you need to be ready to adapt.

The Digital 2020, a joint monthly report from we are social and HootSuite, brings interesting news about the state of ecommerce thanks to COVID-19.

Because the pandemic has forced consumers indoors, online shopping has increased. But, according to about half of those surveyed for this report, this isn’t some temporary solution. They plan on doing more online shopping even after the pandemic ends.

This means that web designers are sitting in an enviable position now and for the foreseeable future. If you’re not already helping businesses sell through their websites, now is the time to do so as more and more businesses are going to need reliable online stores to sell their offerings through.

2. eMarketer Shares Data on Social Listening

When conducting research at the beginning of a design project, what kinds of sources do you turn to for quick and reliable information? Your client provides you with information on their business, industry, and the competition, of course, but what else?

You can conduct user surveys and interviews, but those take time and resources. It also usually means working with clients who have existing businesses and user bases to tap into. Unless you’re working as a UX designer where that’s a big part of the work you do, you might not have the ability to do that level of research.

As reported by Gartner (via eMarketer), leading marketers are now learning about their target audiences through the following channels:

Thanks to the surge of traffic online right now, social listening platforms have become really useful resources for learning about one’s users, with 51% of marketing leaders using them.

If you feel as though your initial research and planning phases could use a boost, I’d recommend taking advantage of one of these social listening tools now.

If you build websites for a specific niche, you can set up keywords/hashtags that are universally relevant to (most of) your clients. By listening in on these conversations regularly, you can become more attuned to what the visitors of your websites actually need and you can proactively build better experiences for them as a result.

3. Upwork Reports Increasing Numbers of Freelancers Entering the Market

The main focus of the Upwork 2020 Future Workforce Report is on how employers are changing their approaches to hiring now and in the near future. And the basic premise is this:

It’s long been predicted that more and more of the workforce would be allowed to work remotely.
COVID-19 has escalated those predictions to the point where most of the workforce is remote right now.
Businesses see the value in remote work arrangements, especially if it enables them to get work done more quickly and cost-effectively by freelancers.

While this is certainly great news for web designers looking for new clients, the report also provides us with this data:

64% of professionals in the top of their field work independently. That statistic alone means you’re up against some tough competition. But there’s also the 50% rise in signups on freelancer marketplaces that should have you worried.

Even though business demand for freelance talent is growing, this unprecedented rise in freelance competition may pose some problems. So, if you’re not already doing everything you can to position yourself as the web designer in your niche, get going on that now so you don’t get drowned out by the rising number of competitors.

4. NNG Says That PDFs Are Unsuitable for the Web

While I don’t have statistics to share with you from the Nielsen Norman Group’s post on why the PDF is “Still Unfit for Human Consumption”, I do have a ton of usability arguments against them that are worth summing up here:

PDFs are written in the style of print documents, which means that strategies we use to design content on websites — like making a page scannable and accessible — don’t apply.
They’re not designed to be as concise or attractive as a web page.
They don’t operate like a website, which disrupts the seamless experience you’ve worked so hard to create when one is opened up from your site.
The website navigation disappears and any sense of orientation (besides the browser “Back” button) goes out the window.
There’s no way to build an internal navigation in a PDF document, save for internal linking or a table of contents.
If they’re formatted for paper sizes, scrolling through them can be difficult for mobile users.
They load more slowly the bigger they get, so unless it’s something like a small and optimized menu, expect visitors to wait for the download to appear.

And those are just the arguments that came from NNG’s researchers. Take some time to read through real user complaints about PDFs and you’ll never want to include one on a client’s website again.

Wrap-Up

Thankfully, the research for web designers and marketers is finally starting to move away from the confusion and speculation we saw a lot of earlier this year.

Just as with anything we do on the web, the more time you give it, the more data you can collect. And, luckily for us, the data suggests that there’s a pretty positive outlook for web designers if they position themselves the right way now.

Featured image via Unsplash.

Source

Source de l’article sur Webdesignerdepot

19 août 2020/par Service comm.

La création de l’Inclusion en milieu de Travail pour les Personnes Handicapées

Actualités

Les personnes handicapées sont confrontées à des défis spécifiques, lors de la saisie de la main-d’œuvre. Selon l’organisation des Nations Unies (ONU), dans les pays en développement, 80 à 90% des personnes en âge de travailler handicapées sont au chômage. Dans les pays industrialisés, le taux de chômage des personnes handicapées est au moins le double de ceux qui n’ont pas de handicap. Dans certains pays, il devrait être aussi élevée que 50 à 70 pour cent.

Cette grande inexploité main-d’œuvre crée des opportunités pour les organisations – l’accès à de nouveaux viviers de talents et d’engager des personnes qui apporte des points de vue de leurs équipes. Comme beaucoup de diversité et d’inclusion des sujets, le vrai changement nécessite délibérée des cotisations à un milieu de travail inclusif de la culture. Accenture a constaté que les sociétés avec des haut de l’insertion des personnes handicapées sont deux fois plus susceptibles d’avoir plus de rendement total des actionnaires par rapport à leurs pairs. En outre, les entreprises qui ont amélioré leur inclusion des personnes handicapées, au fil du temps, sont quatre fois plus susceptibles d’avoir rendement total des actionnaires qui se démarquent de leurs pairs.

Définition d’une Fondation

Soixante-dix pour cent de handicap non visible
Vous pouvez penser que vous n’avez pas quelqu’un dans votre équipe ou dans votre milieu de travail qui a un handicap, mais les chances sont que vous faites. Avec de nombreux handicaps être nonvisible, il est important de ne pas faire de suppositions. Plutôt, de créer un milieu de travail inclusif où chacun peut se connecter et de contribuer.

Apprendre le jargon
Les mots sont importants, et il est important d’avoir une compréhension de base lors de la communication avec ou à propos des personnes handicapées. La plupart des individus préfèrent personne comme première langue, ce qui signifie qu’ils identifient comme une personne et ayant une déficience. Par exemple, au lieu de dire “personne sourde”, vous pouvez dire “quelqu’un avec la perte de l’audition” ou “quelqu’un qui est sourd”. Chacun de nous est différent et a des préférences individuelles, donc si vous n’êtes pas sûr, demandez à la personne.

Rencontrer et de saluer
Au moment de l’introduction de quelqu’un avec un handicap, de leur serrer la main, ou les salue toutefois vous le feriez avec n’importe qui d’autre. Si la personne est aveugle, verbalement identifier vous-même et les autres autour de vous. Si la personne est accompagnée par un interprète ou un fournisseur de soins, de parler directement à la personne handicapée.

Demander d’abord
Vous pouvez voir une occasion d’aider quelqu’un avec un handicap – l’ouverture d’une porte, de guider quelqu’un vers le bas d’un couloir, ou de modification de l’éclairage dans une pièce. Au lieu de supposer que la personne a besoin d’aide, demandez-leur si vous pouvez les aider et d’attendre que l’offre soit acceptée. Ils connaissent leurs capacités meilleurs. Aussi, demandez avant de toucher un appareil ou d’un animal qui peut être utilisé pour de l’aide. Un chien-guide peut être en mode de travail et votre interaction pourrait interférer avec la capacité du chien à guider en toute sécurité de la personne.

Nous sommes tous juste de vivre nos vies
Tout le monde est différent et a sa propre personnalité et de ses besoins. Si vous avez rencontré une personne avec un handicap, c’est exactement ce que vous avez fait, rencontré une personne avec un handicap. Ne présumez pas que la prochaine personne avec un handicap, vous rencontrer a les mêmes préférences. Posez des questions lorsque vous ne connaissez pas et d’apprendre de chaque personne que vous interagissez avec.

Quelqu’un n’est pas d’inspiration parce qu’ils ont un handicap
Une personne est une source d’inspiration si ils ont accompli quelque chose de grand, avec ou sans handicap. Même si votre intention peut être gratuit, appeler quelqu’un “d’inspiration” ne peuvent être prises que de dénigrer. Si personne ne fait l’éloge vous pour voyageurs se rendant à une réunion d’affaires, pourquoi gush plus de cela pour quelqu’un d’autre?

Votre Impact dans la Création d’un milieu de Travail Inclusif de la Culture

Fournir un contenu accessible
Utilisez la fonction de l’accessibilité aux dames de s’assurer que ceux qui sont malvoyants ou aveugles peuvent consommer le contenu. Si vous fournissez des copies papier de documents, assurez-vous d’avoir une version électronique vous permet de le partager. Ajouter le sous-titrage et l’audio-description pour les vidéos.

Réévaluer les événements l’équipe de
Si votre équipe moral événements n’ont pas changé en une décennie, il peut être intéressant de regarder de plus près. Nous avons tous probablement entendu parler des “bro culture” et d’éviter de l’équipe de liaison des événements qui sont centrées autour de l’alcool, mais avez-vous également considéré comme l’accessibilité de vos événements? Par exemple, c’est l’espace physiquement accessibles pour quelqu’un ayant une mobilité réduite? L’activité inclure un environnement avec des lumières et des bruits forts que quelqu’un sur le spectre de l’autisme pourrait être sensible?

Mettre en œuvre inclusive réunion de pratiques
Préréglage de l’ordre du jour et partager des ressources à l’avance. Ceci n’a pas seulement l’efficacité de l’entraînement et de la collaboration, mais elle crée également de l’inclusion. Les individus auront plus de temps pour traiter l’information et d’être prêt à contribuer. Vous pouvez également envisager d’autres moyens pour quelqu’un de s’exprimer verbalement, l’ajout d’un commentaire sur le document, par messagerie instantanée, ou après la réunion en une seule conversation.

Supprimer les obstacles dans le processus d’embauche
Si vous êtes un recruteur ou gestionnaire d’embauche, d’évaluer l’accessibilité de votre processus de demande. Si vous êtes à profit pour interviewer un candidat, examiner les objectifs de vos questions. Qu’essayez-vous évaluer? Est-il une autre manière de poser la même question que peut-être le plus inclusif? Par exemple, une commune de la technique d’entretien est de demander à un candidat pour expliquer un concept particulier de l’enquêteur, comme s’ils étaient un enfant. L’intention est susceptible d’évaluer les connaissances du candidat du concept — peuvent-ils briser le concept en facile-à-comprendre les pièces? Cependant, au lieu de mettre en valeur le candidat de l’expertise sur le sujet, il peut être sans le savoir, dépistage de talent, car il évalue leurs compétences en communication, plutôt que de leur expertise sur le sujet.

Découvrir votre propre risque de biais
Nous avons tous des préjugés, y compris certains que nous ne réalisent même pas que nous avons. En savoir plus sur les biais implicites en prenant de l’université de Harvard Handicap Test d’associations Implicite et le blocage de 15 minutes sur leurs calendriers à réfléchir sur les résultats.

Évaluer votre organisation du handicap de l’équité
Handicap:EN fournit une compression à l’outil d’analyse comparative pour l’insertion des personnes handicapées. En savoir plus ici.

Devan Vaughn est directrice de la Diversité et de l’Inclusion et de la Responsabilité Sociale de l’Entreprise chez SAP, d’Accord.
Cette histoire est initialement paru sur le SAP Accord des salles de rédaction.

Source de l’article sur SAP News Center

6 décembre 2019/par Service comm.