These items ensure that users can access a website. But that’s only half of the battle. Our content also has to be easy to understand. Yet the subject seems to fly under the radar of web designers. Perhaps that’s because accessible content is more subjective. How do we know what passes muster?

There is no magic formula. But there are tried-and-true practices that will help you write accessible web content. And it’s something you can share with clients. With the help of an expert, we’ve put together some dos and don’ts. Let’s get started!

An Expert’s View of Accessible Web Content

Amber Hinds has seen all manner of accessibility mistakes. As founder and CEO of Equalize Digital, she and her team have a laser focus on the subject. That made her a natural choice for advice on the connection between content and accessibility.

We asked Amber about common accessibility issues. And she also provided some great tips for testing and talking to your clients about it.

What traits make content accessible to all users?

Content accessibility is less about things like focus states or HTML semantics and more about paying attention to the readability and structure of the content and being thoughtful about word choice. The most accessible content has a reading level below 9th grade and is clear and concise.

Adding headings throughout the content to break up long sections of text makes it more “skimmable” for all users. But it also enables people who are blind to jump to sections that interest them because screen readers allow people to use headings to navigate a page. Including HTML lists or data tables is another way to make content easier to consume.

Clarity of language and word choice also applies to link anchor text. You should be able to tell solely from the link text where the link is going. Just having meaningful links can go a long way in helping all people move quickly through your website and find the things they are looking for.

What are some common content accessibility mistakes you’ve seen?

When we audit websites, these are common mistakes that I see repeatedly:

• Headings not marked up as headings (people using bold paragraphs instead of an actual heading element) – usually, this is because they don’t like the styles their theme is applying to the headings.
• Headings were used out of order rather than in outline format (typically for the same reason as above – the H2 was too big, so they used H4s instead).
• Missing or incorrect alternative text on images.
• Meaningless links like “click here,” “visit the website,” or “read more.”
• Naked links that show the full URL without anchor text.
• Content that should be in a bulleted list, not formatted into a list.
• Videos missing transcripts and accurate captions.
• Videos that rely on sight to understand but without a written or audio description for people who are blind.

Are there any content types or formats we should avoid?

One thing I always ask people to rethink is PDFs. PDFs, whether menus for a restaurant or e-book lead magnets, are almost always in-accessible unless effort has been put in to make them accessible.

PDFs are designed for print – they’re not mobile responsive and particularly challenging for screen reader users. It is much easier for a screen reader user to access content on a web page than they can in a typical PDF. So, if you can put the content on a web page rather than in a PDF, that’s best for accessibility.

On web pages, more straightforward content layouts are better than “fancier” ways of displaying content, such as carousels, accordions, or tabs.

That’s not to say that you can’t have carousels, accordions, or tabs on an accessible website. But in WordPress, there are a lot of plugins that add this functionality where the plugin developer has failed to consider accessibility, and they are completely inoperable if you don’t have a mouse.

So if you do add these elements to your content, make sure to test them and ensure you can interact with them with only your keyboard.

Other content formats that can be troubling are video, animated GIFs, or audio that auto-plays, unless you have a pause button that allows users to stop it. Parallax and similar animations can cause nausea or dizziness, and rapid blinking can trigger seizures in people with photosensitive epilepsy.

Is there anything content writers can or should be doing to test for accessibility? For example, are there any helpful tools or guidelines?

Our plugin, Equalize Digital Accessibility Checker, scans websites for common accessibility problems and puts reports on the post-edit screen.

It functions much like an SEO plugin does – alerting about problems or areas of improvement so content writers can improve accessibility as they write before hitting publish. We have a free version of the plugin that scans unlimited posts and pages, and the pro version provides full site reports.

Outside of WordPress, there are some free browser extensions that are really handy for testing and can be used by people with any technical ability. WAVE is a popular testing tool that will show accessibility problems on any web page. This is comprehensive, like Accessibility Checker, it’s just built in the browser rather than in WordPress.

HeadingsMap is a Chrome and Firefox extension I really like that shows heading structure and alerts if headings are used in the incorrect order.

How should web designers approach this topic with clients?

We start discussing accessibility early in conversations with clients before even writing a proposal. Over the past few years, we have found that bringing it up early has helped us to stand out.

During the sales process, my partner Chris will ask prospective clients questions about where they operate and their funding. “Do you have offices in California or New York? What about Ontario? Europe? Do you get federal grants or funding?”

Then he follows up their answers with an explanation that he wants to have a well-rounded idea of what accessibility and privacy laws might apply to them.

Many clients may have started to think about privacy laws, but accessibility will be new to them, and so that opens the door for them to have conversations about accessibility laws in various areas. They will frequently follow up in a later conversation and tell Chris they were impressed that he is so thorough because no one else they spoke with even mentioned accessibility.

In many ways, this is really about positioning. It’s a way to show that you’re an expert who stays abreast of changes in the industry and is going to be on top of things so the client doesn’t have to worry about it.

From the perspective of selling clients on the investment, outside of discussing accessibility laws or lawsuits, we talk a lot about considering accessibility in how we design and build as being a major part of the overall user experience. Improving search engine optimization, performance, and conversions once people are on the site. Accessibility is a marker of quality.

Accessible Content Is a Win for Everyone

The great thing about accessible web content is that it benefits everyone. And you don’t need to sacrifice quality. When users can read and understand your content, your chances for success improve.

Keeping this in mind during the content creation process is critical. All content should go through multiple revisions. Clarity and simplicity should be the ultimate goals.

Our thanks to Amber Hinds for sharing her insights! You can connect with her on Twitter and Equalize Digital’s website.

The post What You Need To Know About Accessible Web Content appeared first on Speckyboy Design Magazine.

A client may be pleased with themselves and happy to get their own way. But at what cost? The ensuing results aren’t always pretty. Crowded layouts, inaccessible design elements, and a general sloppiness can seriously harm the user experience (UX).

For example, consider a client who meddles in the design details of their eCommerce website. Leaving UX decisions regarding product layouts, calls-to-action, and hero areas to a non-designer could be disastrous for sales. And yet, any potential fallout may land squarely on your shoulders. Fair? I think not.

Therefore, it’s up to us to prevent such silliness from happening in the first place. Let’s explore some ways to keep clients at a safe distance from UX.

Define the Stakes

User experience is a critical factor for every website. Yet, clients aren’t always fully aware of what’s at stake. As is often the case, it’s up to web designers to provide some background.

It’s worth taking the time to talk about the importance of accessibility and ease of use. How the design of each element within a page needs to be measured against these factors. Oh, and the massive roles that performance and mobile compatibility play as well.

Then there’s the matter of personal preference. Clients often (and unwittingly) put their own opinions above the needs of the average user. Sometimes, implementing their preference is a detriment to everyone else.

The importance of UX and its contributing factors should be brought up from the very start. When clients are informed, they’ll be more likely to follow your lead.

Welcome Feedback, but Set Boundaries

How does a client go from providing useful feedback to taking over a designer’s job? It’s often subtle and can happen quicker than you think.

To be sure, some people insist on having control of a given situation. They may be just as likely to stand over the plumber fixing their leaky pipes as they are to pester a web designer.

In other cases, the mere fact that a client is paying good money for your services gives them a certain sense of entitlement. And although they may be well-meaning, it can lead to overstepping boundaries.

The dilemma is that getting a client’s feedback is necessary for a successful outcome. But it can also be fertile ground for such a takeover. So, how do you prevent it from happening?

The key is in setting clear guidelines. For example, defining goals for a particular item and asking for feedback based on those parameters.

Consider the hero area of a home page. Let’s say you’ve built something beautiful and need client approval. You might approach them by saying something like:

“I’ve set up the hero area, please take a look! Here is what we were hoping to achieve:

• Introduce branding elements, including the logo, colors and fonts;
• Encourage users to subscribe to the mailing list;
• Mention the 20% off discount for new subscribers;
• Keep the entire area accessible, easy-to-read and concise;

What do you think?”

The example above isn’t all-encompassing. But it puts the stated goals into a client’s mind. This helps you to narrow the scope of their feedback and (hopefully) avoid anything that distracts from the desired outcome.

Put UX Back Into the Hands of Experts

Don’t get me wrong – clients should absolutely be involved in the design process. It’s their brand, after all. And things usually turn out best with their input.

But the heavy lifting of UX should be done by experts like you. Your job is to turn a client’s vision into something that is highly usable. It’s about establishing a brand while helping users get to where they want to go.

If all goes well, they’ll take the path to conversion – whether that means sales, contact, or a subscription. That’s simply too important to leave to client whims.

Instead, educate and work with your clients in an effort to drive home UX best practices. Provide them with parameters to work within. The result will be a website that benefits its owner and users alike.

The post How to Stop Design Clients Making Too Many UX Decisions appeared first on Speckyboy Design Magazine.

And while there’s logic to that design principle, it overshadows a simpler and more inclusive principle: Design for all people, not most.

Optimize pages and content so that every possible user can enjoy and interact with your website and access the information and data available. Engaging in this practice will help develop a wider market and diversify your customer base. 15% of the world’s population has some level of disability.

These are people who, like everyone else, use the internet often and rely heavily on digital communication and tools. Optimizing your website to ensure users can enjoy a great experience can expand your web of interaction.

Through practicing inclusion in your design, you’ll be able to reach millions of people who are often overlooked.

Designing for accessibility doesn’t have to be hard. It just needs to be simple and considerate of all potential users. Here are some tips that will help you to to optimize your website for maximum accessibility.

The post A Beginner’s Guide to Web Accessibility appeared first on Speckyboy Design Magazine.

While only U.S. government websites are required to be compliant with Section 508 of the Rehabilitation Act, many large American retailers are beginning to follow suit – especially after Target was sued for six million dollars (USD) for having an inaccessible site for the visually impaired.

The first thing to think about when improving the accessibility of your site for the visually impaired is the level of the impairment. Is your site suitable for users with color blindness, low vision, partial blindness or even total blindness?

Fortunately, there are several online tools and applications available that can help make your site more accessible.

Color Blindness

Studies suggest that about 8% of men and 1% of women have some type of color blindness, with red-green color blindness usually being the case. It goes without saying then that using red and green as the primary color combination can cause accessibility issues for color blind users.

However, there are other things you can do to improve the user experience for them. So before you begin desaturating your site (removing color), first save the current work of your site and try the following:

Ensure Proper Color Contrast – Some designers think that improving the color contrast of a site means that they are limited to a black and white color scheme. It doesn’t. It simply means that the colors you’re using should be passed through a color analyzer and measured for brightness difference, color difference and contrast ration.

Don’t Rely on Just Color Coding – Designers are married to the practice of using colors to identify elements of a site, such as buttons, menus, links and text. Try including icons or underlining text to distinguish various elements of your site.

Recommended Tools:

• Checking Color Contrast – This tool will tell you whether the foreground color and background color combinations are compliant with Section 508, and WCAG AA and WCAG AAA standards.
• Color Blindness Webpage Simulator – Enter the url of a site into this tool to see how that page looks to a person with color blindness.

Low Vision

Choosing a font style and size to ensure legibility is probably the most important factor in the design process.

There are several useful screen magnifiers and accessibility tools such as a disability simulation application.

But there are still a few more steps you could implement to your site to improve accessibility for low vision users.

Avoid or Limit the Addition of Low-Resolution Images and Images with Text – Low-resolution images are often used to improve load up times of a site, which is fine, but sometimes images can be extremely distorted and blurry if their dimensions are expanded too much. The text on images can also be hard to view for people using screen magnifier tools.

Do Not Use Scrolling, Flashing or Animated Text – Imagine trying to read something that’s scrolling from left to right really fast, blinking off and on or undergoing a metamorphosis. This can be quite a lot to keep up with, right? Now imagine reading that text when you’re visually impaired.

Front-Load Your Content – Front-loading is not a specific direction or term for web developers. It is a way of describing a writing method that puts the most important information or points first.

This writing practice can help a reader easily scan the content on your site and decide if they want to continue reading, which of course you want them to do. Also, front-loaded content on your site can be more easily managed by someone using a screen magnifier.

Clearly Separate Sections of Your Design – Breaking your content into sections that are easily scanned and showing the difference between body content and sidebar content is also important.

The use of proper heading tags makes it easier for all site users to read your page content. It also simplifies navigation for site visitors who are using screen readers.

Also add borders, background colors, headings, content, links, spacing, icons, etc. and larger text where you can. Use fewer graphics and provide alt text for images and tables you do use.

Use Fonts That Are Easy to Read – Fonts like Verdana, Arial, Helvetica, and Tahoma are very legible and still considerably stylish.

Partial & Total Blindness

Much of the design process you would use for low vision users applies for partially blind users as well. However, there are a few more components of the design process to consider for those that are totally blind.

Validate Your HTML Coding – This will help mitigate the chance of web browsers and screen readers misreading your site’s content.

Add Title Tags & Alt Tags – These meta tags will help screen readers distinguish the topics of each page and the images that are on them.

Use Fewer Graphics – Using fewer graphics helps with load up times so this component helps all users, not just users with visual impairments.

The post Can the Visually Impaired Access Your Site? appeared first on Speckyboy Design Magazine.

However, designing accessible websites is more than knowing how to edit a mobile version of a WordPress website. This article has gathered the best tools and resources that will help you design accessible websites.

WCAG Guidelines

Let’s start this off with a list of Web Accessibility Guidelines. After all, if you want to make sure your websites are accessible, knowing what makes a website accessible is a must.

WAVE – Web Accessibility Evaluation Tool

This tool lets you test your website for accessibility. It will scan your site, highlight potential accessibility issues, and show you where your website does well in terms of being accessible to everyone.

WebAIM Quick Reference

This reference list is a collection of checks and tests that you can use to test a website for accessibility without relying on third-party tools. It also includes a list of tools to help you test website accessibility.

Colour Contrast Check

Use this tool to check the contrast between two colors. This tool is useful to ensure your text is legible against the background color. The tool is geared towards helping you make sure a website is legible for both visually impaired and color-blind users.

Usable Websites for People with Dyslexia

Thanks to this tutorial, you’ll learn how to make websites more accessible for people who have dyslexia. The tutorial covers five simple tweaks that you can apply to any website design that makes your website easier to understand and read.

Stark – Sketch & Adobe XD Plugin

Stark is a plugin for Sketch App and Adobe XD that ensures your projects are accessible from the get-go. The plugin comes with a built-in contrast checker and color blindness simulation, with color suggestions next to the product roadmap.

Accessible Color Palette Generator

This online tool will help you choose colors for your design project with enough contrast and meet accessibility guidelines. The tool also lets you see how your chosen colors appear to people who suffer from color blindness.

Contrast

Contrast is a Mac-only app that lets you check your user interface to ensure it has enough contrast. The app sits in your menu bar and is easy to use in any design application.

Accessibility Checklist

It goes without saying that you should know accessibility rules if you want to make sure your website or app designs are accessible. However, memorizing the rules can be time-consuming. With this handy checklist, you can easily ensure your project follows the accessibility guidelines.

Axe Chrome Extension

This extension makes it easy to check any website and see if it meets accessibility guidelines. The extension claims to return zero false positives and only tests for accessibility issues accurately detected via automation.

The A11y Machine

The A11y Machine can be downloaded from GitHub and serves as an automated accessibility testing tool. The tool crawls and tests pages of any web application to produce detailed accessibility reports, which you can then use to improve the accessibility of your website or web app.

An accessible website provides a great user experience for all Internet users, whether they have a disability or not.

It’s also a great way to improve your SEO since most accessibility requirements coincide with SEO best practices in user experience. Use these tools and resources to make every website you design from now on more accessible.

The post 10 Best Tools & Resources for Helping You Design Accessible Websites appeared first on Speckyboy Design Magazine.

I had that feeling a lot during my early days in this industry. My work wasn’t great, mind you. But I felt the thrill of doing things I’d never done. And it was even better if I had made a client happy.

There was a lot of creative energy back then. The web was a new medium – and we were building it as we went along.

It’s no secret that the industry has changed dramatically. The old methods of building websites are gone. Now, we work with advanced tools and premade elements.

I sometimes feel like web design has lost its creative flair. Has it? Or have we changed how we use our creativity?

Let’s explore what it means to be creative in modern web design.

We No Longer Build from Scratch

An original web design isn’t always a top priority these days. We often prioritize efficiency, usability, and accessibility in our builds.

To that end, we start projects with frameworks and themes that provide a head start. Tools like Tailwind CSS feature readymade layouts and components. WordPress themes may offer a complete website for us to customize. And we can’t forget about the advent of block patterns.

That’s the reverse of how things used to work. We used to fire up Photoshop or some other design tool. We’d start with a blank canvas and build from scratch.

It’s easy to romanticize that era. We may think of web design as a lost art. It’s as if we were craftspeople who built sites the right way. None of these modern tools could match those techniques.

But that practice isn’t sustainable for busy designers. There’s not enough time or budget for a long design process. Not when there are multiple projects to complete.

For better or worse, our workflows have changed. Web designers have had to adapt to keep pace.

Adding a Personal Touch to Predesigned Components

How can we be creative when using predesigned components? Complete originality may be out of the question. However, there’s still an opportunity to add a personal touch.

There is no shortage of areas to change. An element’s color, size, and typography are prime examples. We don’t have to settle for the default look.

We can also choose components that include minimal styling. The WordPress block editor works this way. A default implementation is typically barebones. Tailwind CSS also prioritizes utility over looks.

Knowledge of these tools also helps. We can design in Figma with specific components in mind. That allows us to use our imagination while staying within the lines.

The process is reminiscent of a collage artist. It’s about pulling all of these different pieces together. From there, we seek to create a seamless user experience. The results can be compelling.

The added layer of convenience might make us feel guilty, though. For instance, page builder tools take the pain out of design. It’s more paint-by-numbers than drawing from memory.

Did we even “create” anything here?

Modern Web Design Is a Different Artform

Sure, the design process has changed. That doesn’t mean we’re no longer being creative, though.

We’re still using our creativity – just in a different way. We’re using our knowledge and experience to build the best website possible. And we’re using our keen eye to make it beautiful and functional.

If anything, we’re fortunate to have these new tools and frameworks. Websites are becoming more complex all the time.

Perhaps that makes web design harder than ever. Designing from scratch and managing functionality might be too much to handle.

Our focus needs to be in many places at once. So, maybe we’re creating a collage while juggling!

Find New Ways to Be Creative

One positive development is that designers don’t have to reinvent the wheel. We spend less time on the basics. That allows us time to concentrate on the details.

It’s the little things that can make a website stand out. We now have the tools to give us a head start.

Yes, these new methods can be limiting at times. However, web designers have plenty of experience in that area.

There have always been parameters for us to work within. It used to be the limits of CSS or user devices. Now, we try to bend and shape tools to match our needs. That also takes creativity.

You know what? Despite my initial concerns, those “a-ha” moments still exist. The change is in how we create them.

The post Creativity Hasn’t Left Web Design – It’s Just Different appeared first on Speckyboy Design Magazine.

This methodology can produce mixed results. In some cases, all of the fancy functionality and effects can be distracting. They take users away from the core functions of browsing and buying online. Indeed, sometimes you really can go a little too big.

What’s missing is a focus on the bare essentials. These are the features that shoppers need to easily get around your site and find what they’re looking for. If and when they do place an order, checking out and reviewing order status need to be dead simple.

So, let’s eschew all of the bloated features for a moment and turn our attention to the basics. Here are a few must-have features for your eCommerce website.

Product Filtering

Online stores come in all shapes and sizes. But it stands to reason that, the more products you sell, the harder it can be for visitors to sift through your offerings. The risk is that they’ll either expend a lot of effort to find what they need or, even worse, they won’t find it at all.

That’s why product filtering functionality is so crucial. It provides a logical path to narrow down products to those that fit a customer’s specific requirements.

Filtering can be implemented in a number of different ways. The most basic being the ability to view products by their assigned categories and tags. For shops that have a low-to-moderate number of products, this may be all you need – so long as you provide navigation for them.

Of course, it can be scaled all the way up to dedicated UIs where users select from a range of options. Details such as pricing, brand, color, size, etc. make finding the right match that much easier.

Related and Recently Viewed Products

Once a customer finds what they’re looking for, it doesn’t necessarily mean they’re ready to buy. They may want to do a little more research or simply come back another time.

Therefore, you’ll want to provide them with alternative options and a way to get back to where they were. Offering lists of related and recently viewed products will do the trick.

Related Products

Related products can be a great way for customers to learn about other items within the same category. For example, someone may want to compare several televisions before making a decision. It could even compel them to go for the more expensive option (everybody wants that big screen, right?).

It could also be utilized as an invitation to purchase accessories. With the aforementioned TV shopper, they might see the perfect stand or soundbar. There are any number of possibilities here.

Recently Viewed Products

When it comes to recently viewed products, this feature makes it easy for a shopper to pick up where they left off. At the very least, it saves them the trouble of having to search through your store again.

While this doesn’t have to be prominently displayed, it should be added to an area where shoppers will see it. That could be at the bottom of the page or maybe even within a sidebar. Either way, it’s a nice little convenience.

The Ability to Create an Account or Shop as a Guest

Every shopper that comes to your website has their own preferences regarding user accounts. Some want the convenience of having their own login, while others would rather keep things a bit more casual.

It’s important to meet customers where they’re most comfortable. Forcing a particular action – even with good intentions – will likely be a turnoff. With that, allowing them to easily create an account or shop as a guest provides them with choice.

User Accounts

User accounts are an attractive feature for both shoppers and store owners. Shoppers get the convenience of having a single place to manage orders, billing information and shipping addresses. Those that are frequent buyers will appreciate not having to re-enter this data every time they place an order.

For store owners, the account dashboard is a great place to offer customers extra perks or get in touch with them regarding an order. Package tracking numbers, for instance, can be added here – allowing customers to reference them anytime.

Account creation can be made available through various avenues. Placing a link in the navigation and via call-to-actions are advisable. Enabling registration during checkout is also an effective means of encouraging customers to sign up.

Guest Shopping

Unless your eCommerce store is members-only, it makes sense to allow customers to check out as guests. This enables them to shop without having to make a commitment.

Besides, this doesn’t mean you have to give up all hope. There’s still an opportunity to tout the advantages of registering for an account. Who knows? Some people may eventually take you up on the offer.

Master the Basic Features of eCommerce, Then Add On

In the design process, it’s easy to overlook the tried-and-true features of an eCommerce website. They tend to get lost in the pursuit of more flashy bells and whistles. Yet, it’s those basics that lay the foundation for a great user experience.

Much as designers tend to focus on a mobile-first philosophy, perhaps eCommerce should be approached with an eye towards basics-first. Once those are established, it’s time to think about adding a little bling to the mix.

This will ensure that a website is user-friendly and reinforces the primary goal of making conversions.

The post A Focus on the Basics: Must-Have Features for Your eCommerce Website appeared first on Speckyboy Design Magazine.

Fortunately, there are some helpful tools available for responsive design, including the most basic and essential ones: pencil and paper. Specifically, sketchsheets for responsive web design can be incredibly useful.

We have compiled a collection of printable wireframing templates that you might find helpful when sketching your designs. These templates will provide a starting point and help you create a visually appealing and responsive website.