Perhaps that’s because the styling options used to be limited. Link color and underlining were the primary options. Hover and focus states seemed to be where most of the creativity occurred. Other enhancements tended to require add-ons like JavaScript.

CSS has changed the game in recent years. Several properties are available to customize the look of hyperlinks. They also provide a higher level of control regarding details like spacing and sizing.

It’s a whole new world of possibilities. Let’s check out some CSS properties that help make hyperlinks more attractive.

A Default Link

We’ll start with a default link configuration. A link color and CSS states were added – but that’s it. It will serve as a baseline as we explore the CSS properties below.

See the Pen Link Styling:Plain by Eric Karkovack

text-decoration-color

It used to be that a link’s underline had to be the same color as its text. The text-decoration-color property allows us to choose a separate hue. It also works with overlines, strikethroughs, and anything else set by the text-decoration property.

We’ve added a brown underline to compliment our green link text.

See the Pen Link Styling:text-decoration-color by Eric Karkovack

text-decoration-skip-ink

This niche property determines how the link’s text decoration interacts with glyphs. The default setting is auto, where the browser interrupts underlines and overlines so they don’t touch a glyph. You’ll notice this with lowercase letters that go below the baseline.

Setting the property to none means the underline or overline draws a straight line – regardless of where glyphs are located.

See the Pen Link Styling:text-decoration-skip-link by Eric Karkovack

text-decoration-thickness

The thickness of a link’s underline typically follows what’s defined in the font-weight property. That is, bold text will result in a thicker underline. This property lets us set a consistent value for every link in the cascade.

See the Pen Link Styling:text-decoration-thickness by Eric Karkovack

text-decoration-style

Text decorations don’t have to be a straight line. This property lets you change the style to dashed, dotted, double, or wavy lines.

See the Pen Link Styling:text-decoration-style by Eric Karkovack

text-underline-offset

Here’s a way to specify how closely (or not) an underline is to the text above. Adding a few pixels of space between them can improve legibility.

Note that this property doesn’t impact instances of the HTML underline tag (<u>). It only affects instances where the text-decoration property is set.

See the Pen Link Styling:text-underline-offset by Eric Karkovack

text-underline-position

Another niche property, text-underline-position specifies the position of the underline relative to its text. Setting it to under is ideal for mathematical and scientific formulas. It makes subscript characters easy to read – even when underlined.

See the Pen Link Styling:text-underline-under by Eric Karkovack

Going Further with Link Styles

Hyperlinks don’t have to be bland. There are now plenty of ways to make them as much a part of your brand as other design elements.

The properties above are all worth considering when styling links. They’re relatively simple to implement and can make links more attractive and accessible. Best of all, they’re native CSS and won’t impact page load performance.

You can also use them beyond default styles. Style them for various states, such as changing the link’s underline color during a hover event. In addition, there’s an opportunity to add animation and transitions to create all sorts of fun micro-interactions.

Just beware – it’s possible to take things a little too far. Always keep best practices in mind to enhance the user experience. Anything that makes links harder to read or use isn’t worth doing.

It’s time to get creative! Experiment with these CSS properties and see how you can bring a little life to your links.

The post CSS Properties to Make Hyperlinks More Attractive appeared first on Speckyboy Design Magazine.

We can use it to craft virtually any layout imaginable. Special effects and interactivity that used to require JavaScript or browser plugins are now supported natively. The language has gone from a basic tool to one of the foundational technologies behind every website.

But like any powerful tool, CSS can also have unintended side effects. Accessibility is among the biggest areas of concern. Some implementations can indeed do more harm than good.

With that in mind, let’s look at a few CSS practices that can hurt accessibility. They include common features that require careful consideration before you start writing code. Let’s get started!

Displaying Important Text Using the content Property

The CSS content property offers a slick way to add visual enhancements to an element. For example, you might use it in combination with a pseudo-element to add an icon before a passage of text or list item. It can also display images or strings of text.

But that last one can be particularly troublesome. Text added via the content property is not included in the document object model (DOM). That means assistive technology such as screen readers may not recognize it.

This is fine for purely decorative items. However, it could lead to accessibility issues if the text provides vital context to a page. Users may miss out on important information.

Therefore, it’s best to avoid using the content property for displaying text. That is unless you’re confident that it won’t interfere with a user’s ability to comprehend the page.

Creating Intense Flashing Animated Sequences

Animation is an area where CSS has seen a major evolution. Effects that were once the territory of third-party libraries can now be crafted with relative ease. And since they’re natively supported, they can take advantage of features such as hardware acceleration to boost performance.

Basic transitions and transforms can do wonders to create a mood and grab a user’s attention. And it’s also possible to construct incredibly realistic effects with the help of JavaScript.

But certain animation styles can have negative effects. For some users, too much movement can be disorienting – or much worse. Intense flashing or strobe effects can lead to seizures. This is possible on the web – just as it is in movies, television programming, and video games.

The WCAG 2.0 offers some research-backed guidance for creating animations that won’t trigger seizures or other adverse reactions. For instance, it’s recommended that a presentation is set to flash no more than three times per second, along with keeping sizing small and avoiding the color red.

Thankfully, this doesn’t limit our ability to impress users with movement. There are still plenty of opportunities to enhance our work. But the types of animation used and their potential impacts must be scrutinized.

Unintuitive :hover or :focus States on Interactive Elements

CSS is adept at styling interactive elements. Consider what’s possible with everyday items such as hyperlinks and form fields. They can be customized to the point of being unrecognizable when compared to their default look.

That’s all well and good. But it’s also important to think about what happens when a user interacts with an element. Imagine clicking a button that doesn’t offer any visual cues to confirm what has happened. Or using a keyboard to tab through a menu that doesn’t highlight the current link.

They may be simple, but these micro-interactions help provide users with context. Confirming a button click or understanding what menu item your cursor is focused on are just two examples. And each brings a sense of confidence as a visitor browses a website.

The initial styling of an interactive element is only half the battle. Offering intuitive styles for the :hover and :focus pseudo-classes complete the user experience.

It’s worth noting that these styles should be easily perceptible. In practice, that means using more than just color as an indicator. Adding animations, outlines, or icons can help ensure that no one is left out.

Taking the Basics of Accessible Design for Granted

We’ve all been there. A project deadline is rapidly approaching and you need to get things done. In the race to launch, some accessibility-related items might slip through the cracks.

Quite often it’s the basics of accessible design that get left behind. Those CSS practices that designers might take for granted and assume are already up to standard.

Prime examples include fundamentals such as legible typography and acceptable color contrast ratios. Without considering and testing these items, a website might not be as accessible as you think.

That’s why it’s worth taking some extra time to review the broader aspects of your site’s styles. Even if an item passes the “eyeball” inspection, go the extra mile to perform an audit. You might be surprised at how many opportunities for subtle improvement you’ll find.

It’s about Using CSS Responsibly

Because CSS is so powerful, it’s easy to be tempted by the possibilities it has to offer. Why settle for a basic animation when you can create something cinematic? And how could we not love the convenience of using it to generate content?

It all comes down to empathy and responsibility. Like any tool, CSS is capable of great things. But just because we can implement a specific feature doesn’t mean it’s right for accessibility. We live in a world where people from all walks of life will consume what we build. And it’s our job to ensure they can do so without obstacles.

The bright side is that avoiding the practices above is within everyone’s reach. For the most part, it’s a matter of thinking about the potential impact of what we do. From there, testing provides us with the data we need to refine things further.

CSS is there to make accessibility easier. It’s all in how we choose to use it.

The post The CSS Practices That Can Hurt Accessibility appeared first on Speckyboy Design Magazine.

There’s still a lot you need to do to make sure everyone can easily navigate and access the content on your site. The good news is the plugin development community has really come through in this area. We now have a lot of tools that can help us address accessibility challenges.

To help you out, here’s a collection of WordPress plugins that can help to make your site more accessible. These plugins can assist in various ways, from improving navigation to making content more readable for all users. Using these plugins can make a big difference in how easily people can use your site.

WP Accessibility WordPress Plugin

WP Accessibility (authored by Joe Dolson, who we recently interviewed) is a multi-function plugin that solves common accessibility issues.

Its most outward feature is a font size and color contract toolbar that helps users read your content more easily. But it also does a lot of behind-the-scenes work like adding skip-to-content links, implementing an outline to the link :focus state for better keyboard navigation, utilizing longdesc for images, and a whole lot more. Each feature can be turned on or off through a settings page.

WP Accessibility Helper

WP Accessibility Helper adds a user-friendly toolbar to your site that lets users select different color contrasts (they can choose from a selection of color schemes) and adjust font size to their liking. But it goes above and beyond with user options for underlining or highlighting links, grayscale images, changing fonts, and keyboard navigation.

The plugin also boasts a DOM scanner that will check your site for various accessibility errors. There’s also a pro version that adds even more goodies.

WordPress Accessibility Widget

If you want a simple way to enable users to enlarge text, the Accessibility Widget is a nice option. It’s a minimally-styled widget that offers up “Small,” “Medium,” and “Large” text links. Settings let you determine which HTML elements are affected and how big (or small) fonts should be.

WordPress Accessibility Checker Plugin

Accessibility Checker offers you real-time feedback on your site’s content. Once published or saved as a draft, content is scanned for accessibility. The plugin then provides a visual overview (and the offending code) of any issues that it finds.

The free version will scan an unlimited number of posts and pages. The Pro version ups the ante by covering custom post types, offering a centralized open accessibility issues list and will help you draft an accessibility statement for your website.

Access Monitor WordPress Plugin

WordPress plugins are at their best when they save you time. Access Monitor can do that by performing automated weekly or monthly accessibility scans. Configure the plugin to test a custom set of pages, and it will return a list of “definite” issues. That is, the plugin will only report issues that are machine-testable. This cuts down on the number of false-positive results that tend to plague automated scans.

To use Access Monitor, you’ll need to grab a free API key from the Tenon.io service.

Zeno Font Resizer WP Plugin

Typography plays a huge role in website accessibility. If your site’s fonts are too small, it may be inaccessible to many users. Zeno Font Resizer is here to help.

The plugin allows users to resize text to their liking via a widget (the resizer can also be implemented via a code snippet in your theme). You can set the minimum and maximum font sizes, along with the amount of sizing change for each “step” up or down the scale.

One Click Accessibility WordPress Plugin

One Click Accessibility will add a handy toolbar on the front end that lets your site’s visitors tweak a variety of accessibility settings. They can resize fonts, change color contrast, and underline hyperlinks.

On the back end, you can customize which items are available on the toolbar. In addition, there are settings that add outline focus to all links, add a skip-to-content link, and remember user preferences.

Bulk Auto Image Alt Text for WordPress

If your site’s images are missing ALT attributes, that means they’re inaccessible to users of screen readers. They could be missing out on important information.

One way to resolve this issue is through a plugin like Bulk Auto Image Alt Text. The plugin will use items such as post titles, or Yoast SEO focus keywords on images that don’t already have an ALT attribute set. It works automatically, so you don’t need to go through every bit of media yourself.

Just note that descriptive ALT attributes are better for accessibility. Thus, this plugin may serve as more of a stopgap solution.

WP ADA Compliance Check Plugin

This plugin will automatically scan your site’s content for the most common accessibility errors. It then provides you with a report that points out potential issues and remedies for fixing them.

The free version of the plugin is limited to 25 pages/posts per scan. Upgrade to the full version of the plugin to remove that limitation. Plus, it will additionally check theme files and automatically fix issues for you.

Accessibility New Window Warnings Plugin

While it’s common practice to set hyperlinks to open in a new browser tab, it can also be disorienting for some users. Accessibility New Window Warnings can help by providing users with a warning message before the new tab is opened.

There are no settings to configure. Activating the plugin will add an accessible tooltip to links, which is visible upon hover. As a bonus, it also integrates with the Accessibility Checker plugin mentioned above.

Leave No User Behind

The past few years have brought great awareness to the importance of creating an accessible website. While the process of ensuring you’ve covered all your bases takes time, it’s very much worth the extra effort.

Using the tools profiled above is a great way to add features (visible or not) that will help every user get the most out of your WordPress site.

The post 10 Best WordPress Plugins for Improving Website Accessibility appeared first on Speckyboy Design Magazine.

It doesn’t always work that way out of the box, though. We are becoming more dependent on site-building tools. As such, we rely on them to do things the right way.

These tools aim to simplify the design and build processes. Some do it very well. But there’s a side effect: They take control of the output. And there’s no guarantee that they’ll employ best practices.

It’s an issue as old as the WYSIWYG editor. The difference is that it’s harder to override any problematic code.

There are some less-than-great tools on the market. Site builders that are outdated or deeply flawed. But even a great tool can get in the way. None of them are perfect.

Let’s look at a few scenarios when a tool hinders your ability to follow best practices. In addition, we’ll show you some ways to get around these issues.

How Site Builder Tools Can Impact Accessibility

It’s never a good idea to assume your website is accessible. Doing so is a risk. You might have created a poor user experience. At worst, the site may not be compliant with the law.

Site builder tools can make accessibility issues less obvious. For example, they may not warn you if you choose an inaccessible color scheme. Subtle color differences could make a big difference.

They might also produce code that isn’t semantic. That makes it harder for screen readers to interpret your content.

There’s also the implementation of special effects. You might add intense animations that are harmful to some users. The tool won’t always tell you the potential consequences. Thus, it’s up to you to use it responsibly.

Accessibility testing is the only way to know – regardless of how you built the site.

Included Features Aren’t Always the Best Option

Site builders often include advanced features. Elements like sliders, modal windows, and media players come to mind. These items are essential for some projects.

Their inclusion doesn’t speak to quality, though. The tool may produce inefficient or buggy code. The result is poor performance.

There’s also a chance of a conflict with other software like themes or plugins. And there’s no guarantee of browser compatibility.

There’s a high level of convenience with these features. You don’t have to search for a plugin that does x, y, and z – it’s already there. However, they’re not always the best fit for the job.

WordPress page builder plugins are an example. The one you use may come with a forms module. Awesome! But does it do everything you need? Are the forms accessible?

It’s worth doing an honest assessment of these items. Look at what they do. Run performance benchmarks. Monitor your browser console for errors. That will help you determine if it’s worth using.

If not, there are plenty of other options. You don’t always have to settle. And moving to a different solution could offer better results.

The Potential for Becoming Locked In

Sure, a site builder may claim to offer everything under the sun. But will it grow along with your needs? How portable is your site’s content?

You’ll want to know the answers sooner rather than later. Otherwise, you might be stuck with a tool that can’t keep up with you. And moving on can be a tedious process.

That happens with WordPress. A page builder plugin may no longer meet your needs. Or you might want to switch to the native Block Editor.

Making a change is possible. But it’s not always easy. Page builders often have different ways of outputting code. Thus, you might be left to reformat content piece by piece. The WordPress Data Liberation project aims to help with this.

The challenge is a bit different with proprietary systems. Not all of them offer third-party plugins. And some make it hard to move your site to a new provider.

Either way, it isn’t easy to rid yourself of monolithic tools. A modular approach is more efficient. It’s easier to swap elements or add new ones.

Site Builders Are Great – Just Be Realistic

There’s so much to consider when building a website. That’s why site builders are popular. They aim to provide an all-in-one experience. And there’s a lot to like about them.

But there are also some drawbacks. It doesn’t mean you should avoid them altogether, though. Consider the pros and cons before committing.

Look for reputable tools that have a history of stability. Review their features and determine how they fit into your project. Ideally, you’ll find one that will serve you well into the future.

It’s also a good idea to set realistic expectations. A site builder can’t possibly cover every use case. There are times when you’ll need to go outside the box.

With WordPress, that means finding a separate plugin to perform the function you want. On other systems, you may need to write custom code.

The goal should be a website that looks and functions how you want. It should also be flexible enough to accommodate growth. Tools play a significant role.

Keep that in mind throughout the process. It may save you a headache or two along the way.

The post When Website Builder Tools Get in the Way of Best Practices appeared first on Speckyboy Design Magazine.

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.

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.

Color is perhaps the foundational element. Because, regardless of the other steps you take, an inaccessible color palette severely undermines usability. Even users who aren’t visually impaired will have a difficult time reading and understanding text.

As designers, we tend to craft features in a way that we think looks good without always considering the consequences. Clients may also insist on using brand colors – even if they’re not accessible. This has led to a lot of avoidable issues.

The good news is that compliance with WCAG color contrast standards isn’t very difficult. As we’ll demonstrate, testing color contrast ratios takes mere seconds. From there, it’s a matter of making any necessary adjustments.

Indeed, the most important step is taking the time to test. Let’s get started!

When to Test Color Contrast Ratios

In a perfect world, color contrast ratios should be tested right from the very start of a project. That means implementing a compliant color palette in website mockups and style guides. That way, you can be confident that your design will pass muster.

Granted, you may have missed the boat when it comes to existing projects. But testing a site’s color scheme can be done at any time. And thanks to the power of CSS, the process of repairing any non-compliant combinations can be fairly simple. A search-and-replace may do the trick.

Accessibility is an ongoing process, however. This is especially the case on sites where new content is regularly added. If clients have access to a WYSIWYG editor and the ability to change colors, routine testing may be required.

It also points to the importance of educating clients on accessibility and best practices. Using poorly contrasting colors will cost time and money to repair. When clients understand the issue, they’ll be more likely to avoid making any ill-advised decisions in this area.

Website Color Contrast Ratio Tools

Now that we have the “when to test” out of the way, let’s focus on the “how” portion of things. The first step is finding a suitable tool for running tests.

There are several tools available on the web. However, we’ll quickly focus on a pair. One (WebAIM Contrast Checker) is a manual tool, while the other (WAVE Tool) is automated.

WebAim Contrast Checker

This tool is about as simple as it gets for testing your site’s contrast ratio. Enter the HEX codes for your background and foreground colors, and the WebAIM Contrast Checker will calculate the exact ratio.

Based on your score, the tool will report whether or not you comply with WCAG AA or AAA standards. If not, you can use the color sliders to tweak hues until you get a passing grade.

WAVE Web Accessibility Evaluation Tool

Enter your site’s URL and WAVE will automatically scan your site and evaluate several accessibility factors – including color contrast. A browser extension is also available for Chrome, Firefox, and Microsoft Edge.

WAVE provides a lot of data – and there are times when it reports false positives. With regards to contrast, this tends to happen when HTML text is layered on top of an image background. Since the tool relies on CSS color values, having light-colored text with no background color defined will result in an error. Thus, you’ll want to do some further investigation to verify its findings.

Either of these tools will get the job done. However, it’s worth noting the limitations of automated tools. Sometimes, manual testing will need to be a part of the process.

Understanding the Standards and Resolving Issues

For most websites, the goal is to comply with WCAG’s AA standards for “normal” text (below 14 points/18.66 pixels in size). AAA standards are more stringent, and even the W3’s documentation points out that it may not be possible for some types of content to meet the requirements.

If your website’s content areas meet these standards – bravo! If not, any issues should be simple enough to resolve.

For HTML and CSS, tweak your color combinations until they meet or exceed the ratio (4.5:1). If you’re using an image background, you can use a tool such as Photoshop or even a CSS filter to get things in order.

The most difficult part may be convincing clients to use different hues. The hope is that once they understand what’s at stake, they’ll be more open to change.

In addition, it’s also worth visually studying the elements you need to repair. There may be scenarios when you meet the requirements and content still isn’t as readable as it could be. Going for a higher contrast ratio could improve the user experience significantly.

Color Your Website for Accessibility

Colors say a lot about a website. They help with brand recognition and set a mood. But their biggest impact may be in accessibility.

And, unless you’re using plain old black-and-white, compliance with WCAG standards isn’t a given. That’s where testing comes in.

Hopefully, this guide will get you thinking about color throughout your web projects. Starting with an accessible palette is best, but even an old website can be brought up to snuff. It’s well worth the effort!

The post Accessibility Tip: How to Test Color Contrast Ratios appeared first on Speckyboy Design Magazine.

Part of our relationship with clients also involves sharing knowledge and gently prodding them to move in the right direction. That makes us motivational speakers/life coaches, maybe?

Regardless of what we call it, the action itself is vitally important. Because the web is constantly changing, designers are often an invaluable resource for clients.

We are a liaison that keeps them abreast of new developments that can have a direct impact on their business. This is especially so when it comes to smaller businesses that don’t have the resources to keep up on their own.

In that tradition, the following are some key areas where we can proactively fill in those knowledge gaps for our clients and some tips for doing so.

Accessibility

Those of us in the web design industry have been talking about the importance of accessibility for years. However, clients have tended to show varying degrees of interest. In some cases, it feels like you could be shouting the message through a bullhorn and get a mere shrug in return.

Yet, this issue isn’t going away. Quite the opposite. Accessibility concerns haven’t been covered that much by the mainstream media. That is, until the now-infamous Domino’s Pizza case. It shows that companies can face legal (hence, financial) consequences for failing to accommodate all users.

This serves as an especially loud wakeup call in the United States, which has yet to enact any concrete rules regarding website accessibility.

It’s something clients need to know about. Whether approached one-by-one or through mass communication, there is an opportunity to get any stragglers on board. At the very least, we can make them better aware of what’s happening and what steps can be taken to address any shortcomings.

Aspects such as typography, color contrast and keyboard navigation are often fairly simple to tweak and go a long way towards more user-centric design. Plus, reinforcing good habits like setting ALT tags on images should also be emphasized.

Privacy

Here’s another area where clients really need a helping hand. Unlike accessibility, privacy concerns really are all over the news. And regulations such as GDPR again mean that real consequences can come from missteps.

Just about every website is collecting something. Tying in with virtually any third-party service provider means cookies and user tracking scripts will likely be in place. Not to mention the everyday server logging that most sites employ. Therefore, privacy policies and procedures to back them up need to be in place.

Obviously, web designers are not legal experts. So, while we can’t (and shouldn’t) be the sole provider of advice, we can certainly play the role of helpful messenger.

How does that play out? You might consider reaching out to your clients and explaining the issues at hand. Provide some links to related articles – especially those that demonstrate the seriousness of keeping user data private. Finally, encourage them to seek legal counsel on the matter and be proactive themselves.

Security

The web is simply teeming with security risks. Virtually every user is vulnerable in some way. The same goes for websites.

A hacked site can become infected with malware. That, in turn, makes the site potentially unsafe for users. Beyond that, it can destroy carefully-crafted SEO strategies and leak customer data.

Many clients just assume that it’s our job to handle this stuff. And while that’s technically true, they also have a major role to play in keeping things safe.

Designers can help guide clients towards implementing secure practices. Things like using strong passwords and not sharing them with just anyone. In addition, teaching a healthy skepticism of email scams and even any third-party software they want to install.

As they say, security is only as good as its weakest link. In some cases that can be a careless client. But this is something we can help to prevent. As such, it’s worth the time and effort to help them understand their own responsibilities.

Knowing Where to Draw the Line

All of the subjects above are not only important, they are also linked to some serious repercussions. For web designers, this means walking a bit of a fine line.

On one hand, there is a sense of duty that goes along with informing our clients about these issues. That’s what being proactive is all about – trying to call attention to problems before they become even bigger ones.

At the same time, there is a danger in taking on too much responsibility in any one of these areas. It’s one thing to fix some known accessibility problems with a client’s website. But it’s another to certify (without being qualified to do so) that their site is compliant. If the opposite is found to be true it can become a real nightmare.

That’s why it’s important to make your intentions and limitations clearly known. Let clients know that you can provide advice on a given topic, but that it’s best to speak with a legal expert where appropriate. You don’t want to leave yourself vulnerable should something go wrong.

The Benefits of Speaking Up

Quite often, our clients are busy. They’re wrapped up in their own daily grind and don’t necessarily have the time to focus on the intricacies of their website. So, don’t be too surprised if they don’t have a vast knowledge of accessibility, privacy or security best practices.

Web designers, however, are in a position to keep clients informed. And we have perhaps even a moral and ethical obligation to do so.

Helping others avoid potential problems feels great. Plus, there is the possibility of generating some revenue from these discussions as well. In all, it’s a win-win situation.

The post How to Be Proactive with Your Web Design Clients appeared first on Speckyboy Design Magazine.

The problem for designers is that, while some parts of accessibility are fairly obvious (like adding alternative text to images), other facets aren’t as widely publicized. Plus, we often depend on third-party items like themes, plugins, et al, that may claim compliance – but how do we really know?

The other question many designers may have is: When is a website accessible enough? In other words, at what point does a site cross that threshold to being accessible?

Designers (including yours truly) have a lot of questions about accessibility. So, we’ve enlisted the help of Joe Dolson, an accessibility consultant who is both knowledgeable and passionate about the subject. He’ll provide some insights into some of the most vexing questions we face.

Read on to get a better understanding of web accessibility and discover some helpful resources to point you in the right direction.

Missing Pieces

Accessibility encompasses a vast array of practices and techniques – more than we may realize.  Even those of us who think we have a decent handle on accessibility issues may be missing some important elements.

“When developers and designers start to learn about accessibility issues, they usually start by focusing on issues for people who are blind.” says Dolson. “This results in missing two areas of accessibility that are crucial to sighted people with other disabilities.”

Visual Focus

The first item on Dolson’s list is Visual Focus. He explains it as such:

“Visual focus is the ability to visually identify where you are on a page as you navigate using a keyboard. If you press the tab key to navigate through links, form fields, and buttons on a page, you’ll frequently find that you are unable to distinguish where you currently are on the page – this is due to a lack of visual focus.”

Learn more about Visual Focus: https://accessibility.oregonstate.edu/focus

Enlarged Text

Another missed element of design is – what happens when a user enlarges the text? Dolson elaborates:

“Enlarging text is crucial to people with low vision, who may need to enlarge text to several times its normal size to be able to read it. There are a few different problems this can cause: overlapping text, horizontal scrolling to see the entire page or extremely narrow columns where the text wraps every few characters can all make the page very difficult to consume.”

Accessible Content Strategy

When adding content to a website, sometimes the easier thing to do is to write a blurb of text and link to an attachment file, such as a PDF, that contains more information. But, is this the best practice for accessibility?

Dolson says that attachments should be made accessible, but notes “It’s the content of your document that needs to be accessible – and that can be accomplished in a wide variety of ways. You could make an argument that an accessible web page would constitute an alternative to an inaccessible PDF.”

So, while the content of PDF files and the like should be made accessible, it may still be preferable to take that same content and place into HTML.

Learn more about Creating Accessible PDF Files: https://webaim.org/techniques/acrobat/

Utilizing Tools to Find Potential Problems

One of the great advancements in creating accessible websites is the availability of tools that can help you sniff out issues. According to Dolson, these tools “…have an invaluable role in the process of evaluating for web accessibility”. However, he cautions that, “…while they are important, they are in no way something that can substitute for human judgment and review”.

WAVE (Web Accessibility Evaluation Tool) is one of the best known solutions out there. Paste in your site’s URL (or, better yet, use their Chrome or Firefox extensions) and WAVE will load in the page with a sort-of heat map of what’s good and what’s not. It will catch things like missing alt tags, form labels and even point out color contrast issues. You’re then able to click on specific errors and see them highlighted right on the page you’re currently testing.

It’s a tool that really shows you how easy it is to miss certain things. But it’s also good for pointing out deficiencies in third-party plugins and themes.

Once a tool like WAVE has found any issues, you can then go through the process of manually applying fixes. Dolson points out, however, that there can be a bit of an issue with alt text that tools won’t necessarily detect. He says “…an automated tool can only tell whether or not your image has alternative text provided. What it can’t do is determine whether the text is truly an appropriate alternative to the image.”

So, while a tool like WAVE can make your life much easier, you’ll still have to do a little sleuthing to ensure accessibility.

Learn more about Alternative (ALT) Text: https://oregonstate.edu/accessibility/alttext

Are You in Compliance?

Here’s the question that can really cause some confusion for designers and site owners. In fact, even accessibility experts aren’t able to provide an absolute declaration. Dolson explains the challenges:

“The first challenge is identifying what the law actually dictates about the accessibility of your web site. This will vary depending on who pays for your web site, what segment of industry you’re in, and what country your web site is liable in (which is a separate and even more complicated question!). Within the United States, accessibility is governed largely under the Americans with Disabilities Act of 1990, or ADA.

The ADA dictates that places of business should provide equal accommodation for people with disabilities – but, as you can surmise from the date of the act, it doesn’t actually include any information about what would constitute an accessible web site. There are specific guidelines covering US Federal Government web sites described in Section 508 of the Rehabilitation Act of 1998, but that’s a completely separate body of law, and you can’t draw the conclusion that the ADA would or should follow the same guidelines.”

So, it’s complicated to say the very least. In Dolson’s view, following the Web Content Accessibility Guidelines (WGAC) 2.0 will at least give you some sound defense should you be legally challenged.
* As always, be sure to consult a legal professional for advice specific to your situation.

Advice for Testing Your Site

In addition to testing for and fixing errors through an automated tool, it’s also advisable to do some testing on your own. This way, you’ll at least get a sense of what the user experience is like. Among Dolson’s suggestions:

Use a Screen Reader

Mac or iOS users can enable the VoiceOver feature. Windows 10 has a built-in Narrator feature. Or, you may want to install a third-party app like NVDA.

Unplug Your Mouse

Try navigating your site using only a keyboard. Here are some tips for enabling keyboard access.

Increase Fonts

Zoom in on your site to make its text 400% and see how it affects layout.

Install Browser Extensions

NoCoffee is a free Chrome extension that will simulate color blindness and other vision problems. RGBlind performs a similar task for Firefox users.

Utilizing these methods is a great way to at least give yourself an idea of how accessible your site is. But they shouldn’t be considered a full-on simulation. Dolson advises that these tools, while valuable, aren’t always an accurate representation. For example, experienced users of a screen reader will probably have a different experience with your site – especially if you’re not familiar with using such software yourself.

Worth the Effort

As we have learned, there is a lot to consider when it comes to accessibility. Thankfully, there are some very useful tools, resources and experts we can lean on to get us going in the right direction.

Ideally, the practices and concepts discussed above should become just another part of your typical site design and build process. That way, it will become second-nature to you – just like HTML or CSS. Slowly but surely, it will help lead us to a more accessible web.

The post The Challenges Web Designers Face in Ensuring Website Accessibility appeared first on Speckyboy Design Magazine.

This tends to happen in the prototyping phase. We spend lots of time and creative energy on an idea that looks awesome. Our clients might love it just as much as we do. But only when we actually start to build it do we begin to fully understand the consequences.

A design mockup serves as a compass for our website projects. If we fail to think ahead with regards to what certain elements require, it could mean being stuck in a bad situation. The end result is a site that has to make some serious compromises in order to work on different devices and browsers. That can negatively impact accessibility, performance and adherence to best practices.

Thankfully, some planning will help you avoid a messy build process. Let’s take a look at a few key items to consider before sharing your ideas with a client.

How Elements Adapt to Different Screens

There’s a reason why there’s so much talk of a “mobile first” approach to web design. In essence, this allows us to start with the bare essentials of a website. From there, we can add and enhance as the viewport gets larger.

Still, each of us have our own preferences for building prototypes. For those still using a desktop-based approach, it’s important to think about how all of those fancy design elements will work on a phone.

If you plan on implementing CSS Grid or Flexbox, they’ll help a great deal in terms of making the best use of available screen real estate. But other elements may require more effort to get working.

Large sliders, for example, can become very difficult to use on small screens. Intricate images might not be as impactful and text may overrun boundaries. Performance may also lag.

In this case, you might have to decide if the slider is worth showing on mobile at all. Or perhaps it could be refactored to better adapt to work in all situations.

Accessibility Impacts

Design starts with picking the appropriate fonts and colors. They’re both deeply connected to branding and accessibility.

Fonts should be crisp and sized for legibility. While fancy script and decorative type can look beautiful, it needs to be large enough to read and restricted to usage in headings. If those requirements can’t be reasonably met, it may be best to drop them from your project altogether.

In addition, color contrast should also be a major concern. Background and foreground colors must achieve an acceptable contrast ratio in order to be considered accessible. Plus, it’s just good practice.

If you’re unsure about your palette, use an online tool to determine its suitability. Sometimes, even a slight adjustment is all that’s needed to pass WCAG AA standards.

Beyond those two items, it’s also good to have a plan for how you’ll display elements such as icons. Are they intuitive? Will they be accompanied by text?

Backwards Compatibility

Not every website has to be fully-compatible with, say, Internet Explorer 9. And legacy browsers shouldn’t necessarily deter us from using the latest CSS or JavaScript. But some thought should be put into backwards compatibility.

Of particular concern are design elements that will render a website completely unusable in older software. Even if a particular browser makes up a small percentage of your site’s visitors, that’s still leaving some potential conversions on the table.

It’s worth considering what effect design decisions will have on these users. The available fallbacks for a given technology might be enough to keep things looking decent and usable. Even better is that they can be fairly simple to implement.

It used to be that designers were expected to ensure elements looked and functioned exactly the same across all browsers. That may be too much of an ask these days. As long as a user can navigate and consume content on some of the more ancient software, that just might be enough.

Scenarios That Haven’t Happened Yet

Even the smallest websites will have a need to evolve over time. As new types of content are added, they’ll need to be accounted for in the design. If you’re not prepared, implementing these items could conflict with what’s already there.

Think of adding a series of videos, for example. While the process of adding that content may be easy enough – how will it fit into the look you’ve already established? Will you utilize a default browser UI or craft something to match your branding?

While you can’t always predict the future, you can plan for all sorts of possibilities. This is part of what a design system allows you to accomplish. By setting some default guidelines right from the start, you’ll have an easier time dealing with future additions.

The reality is that what we design today will likely change in the future. Therefore, it pays to be ready for that eventuality.

Building It Right the First Time

Crafting that first mockup is about so much more than just making things look good. It even goes beyond impressing your clients. Indeed, it’s an exercise that forces us to look at our project as a whole.

The aesthetics must be pleasing to the eye. But the design must also be accessible and able to adapt to various screens. Plus, it may have to accommodate different types of content as things evolve.

If that sounds overwhelming – take a deep breath. This is where your experience and expertise can come to the rescue. The right tools can also pitch in.

Think about what has worked (and what hasn’t) in your past projects. Look for ways to implement features that are resilient. Do that and you’ll be on your way to a successful project!

The post Why Thinking Ahead Is Crucial in Web Design appeared first on Speckyboy Design Magazine.