web-narwhal

Website Accessibility Checklist for 2024

steve@webnarwhal.com (Steve Gerencser) — Wed, 03 Jan 2024 14:00:08 GMT

With the 2.2 update for the Web Content Accessibility Guidelines (WCAG) is time once again to improve how we approach accessible website design . It is important that web developers start taking accessibility seriously, if not for the users, then for themselves as more laws come into play that may hold them responsible for any shortcomings in the websites that they build. This short checklist is a starting point to set you on the path to building accessible websites for your clients and users.

Tools

There are a host of tools currently available to help you with your website design tasks.

Web Content Accessibility Guidelines : Everything you need to know and more.

axe Dev Tools Plugin : Browser plugin to scan your website for accessibility testing. Be aware that manual testing is still required because no scan tool can scan for all issues. But this will set you on the right path.

WebAIM Contrast Checker : This tool helps you select the proper colors needed to maintain a 4.5:1 color contrast ratio.

Page and Text Formatting

Minimum body font size should be at least 12pt. Smaller font sizes can be harder to read due to close spacing and simply being too small to read without the user resizing the website. It is preferred to start with a larger font size to be accessible to all users. We use a 16pt body font size here.

Line heights should be at least 1.3 for headings and 1.5 for body content. As above, this is to provide enough white space between letters to make them easier to ready for everyone.

Headings (h1, h2, h3, h4, etc) should be used semantically and not for design reasons. Many accessibility rules are also great for your on-site Search Engine Optimization (SEO). Heading tags should be properly nested inside of each other.

<h1>: Title (one per page)
<h2>: Sub Headings
<h3> etc: Subheadings
</h3>
</h2>
</h1>

This structures your content in a way that easily read by users, screen readers, and search engines.

Headings should not be used for primary navigation. Many designers choose to use heading tags as design elements rather than structural elements which often leads them to making poor structural choices in favor of design factors. Heading tags are for grouping topical content ideas, not for navigation.

Links should be clearly identified. As you can see on this page, and others on this site, in content links are all identified by both color and an underline. This makes it easier for users to find, and identify text elements that make take them away from the page that they are reading. In the past SEOs used to hide text from users by making it look like any other text on the page. They did this to allow themselves to stuff their content with internal links for search engines but keep the page from looking like a field of spam to users. This may be fine for regular users, but for someone using a screen reader it can make the content unreadable.

Underlining not-link text should be avoided. Not only is this an accessibility issue, but look at any heatmap for a page with underlined text and you will see that even when it is not a link it is clicked on quite a bit. This leads to frustration for all users.

Link leading off page should be clearly identified. When a user leaves a page through a link, their screen reader may lose their place in the content that they were reading, and it just not good manners. You can see the standard icon that is used for links off page in the tool links at the top of this article.

If you want to add this functionality to your website, you can add this simple CSS to your site's head section. It may need minor modifications based on your particular CMS, but it works great on WordPress.

<style>

a[target="_blank"]::after {

content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);

margin: 0px 3px 0px 5px;

}

</style>

Links should have discernable text. This is similar to alt tag issues with images. Many links are now created with icons rather than images to further reduce load times. Unfortunately, many of these icons are unreadable to screen readers and need ARIA title text added to them to indicate where those links go.

Excessive font styling (emphasis/italics) should be avoided. This can make some font choices hard to read for users with sight issues.

Lengthy strings of ALL CAPS should be avoided. Again, this can make content harder to read for some users. It makes each word have a standard rectangular shape that makes them harder to read.

Don't use condensed/narrow fonts. Font spacing is important when letters can be squeezed together in a way that makes them much harder to read.

Images and Video

Images that are not decorative MUST have alt text. Alt text has always been important for images to be understood properly by search engines. It is even more important for screen readers and other adaptive technologies.

Alt text must describe the image content. SEOs have traditionally used alt text as a keyword stuffing tool. This is far from useful for people with vision issues. The alt text can contain keyword data, but it is more important that it clearly describes the image. Look at this ring as an example.

Alt text option 1: Engagement ring.

Alt text option 2: White gold diamond ring set with a large round diamond in the center with 10 small rubies, 10 small blue zircons, and 6 small diamonds.

It should be obvious which is the better alt text for users and for search engines.

Graphs and Charts must have alt text and should have supporting text that describes the purpose of the graph/chart. Much like images, graphs and charts also need to be described for screen readers.

Images should not be text only. This is a common issue when designers want a very specific look for text but don't want to take the time to do it properly in CSS. Adding alt text is generally not enough to overcome this issue and all text only images should be rendered in actual text.

Transcripts of videos should be provided. Another example of accessibility also helping with SEO, adding a transcript to your page allows people with hearing difficulties to read the transcript of a video.

Videos should provide captioning. Fortunately, most video hosting companies, specifically Youtube, now offer automated captioning. These captions should be read and updated for accuracy whenever possible.

Avoid flashes and strobes in videos. It is well known that strobing colors and lights can trigger an epileptic event. You should avoid using them in your videos whenever possible, and at the very least provide a warning to the user before they play the video.

Videos should include ARIA (alt text) titles. Much like images, videos also need alt/ARIA text labels to describe them to users.

<video ... aria-label="Title of the Video"

Users must be able to stop any video that autostarts on page-load. Or better, just don't auto-start videos. It's rude and you might just out someone trying to watch a video at work on the sly.

Design Elements

Color contrast must be at least 4.5:1. Low contrast websites are an evil that should have never been invented. To make your content easier to read the contrast between foreground and background must be at least 4.5:1.

Important information must not be conveyed by color only. Phrases such as 'click the blue button' are not useful when the only difference between buttons is color. Another example would be charts. This chart, for example, is all too common for most people.

This chart uses shapes along with color to define the different series. This allows the information to be shown by both color and shape, and just looks better as well.

Provide consistent navigation through the entire site. It's hard to believe that we still have this issue after 30 years of web development. When creating navigation for your website it can be in nearly any form, but it should remain consistent and not randomly change locations for 'design reasons'.

Support keyboard only navigation. Many users lack the fine motor control needed to effectively use a mouse. These people need to be able to navigate your website with only a keyboard. This is an issue that almost no one tests for because they don't think about it. An example of this being an issue is when a focused element disappears when clicked. Items such an a button that when clicked goes away and turns into 'Thank You' text.

Use landmarks to define distinct sections of a webpage. Again, this should be common in website development, however, many CMS platforms leave this out. Each section should be identified with a short code element, here are a few examples.

<header>
<nav>
<main>
<aside>
<section>
<footer>

An example of this in html/aria format is:

As I have said before, accessibility is not an easily achievable end, it is an ongoing process and must be constantly tested and improved. Hopefully this checklist and the tools linked at the top of the page will help you become a more accessibile website developer.

How to Select the Best Hosting Provider for your Website

dev@webnarwhal.com (Doc Sheldon) — Fri, 22 Dec 2023 23:43:51 GMT

There are many aspects to consider when selecting where to host your website. It’s a choice you want to get right the first time, because moving a site to a new host can sometimes be a hassle. It can result in loss of functionality, it can impact your search traffic, and it can create additional costs.

Here are some of the most important considerations that deserve your attention, before you finalize your choice.

Platform

The first thing you need to decide is what sort of platform you want to use for your site. If you want to use the ( WP ) WordPress CMS ( Content Management System ), you’ll find that most hosting companies will support it, as around 40% of the websites on the planet are run on WordPress. WordPress is easy to learn, and being open source, it involves no licensing fee.

There are other common platforms to choose from, some being considerably more complex to learn, some being available only on a specific set of servers, or if you’re comfortable with a purist approach, straight HTML & CSS. Just decide this early on, as it could limit your options in host selection.

Another consideration is the base software used on the server. Many hosts run Apache , which is currently the most common. But some have moved to nginx , which is more resource-efficient, making it faster. Another option you may encounter is Litespeed, which is the fastest of the three.

Type of Hosting Desired

You’ll also need to decide whether you want managed hosting or not. If you are unfamiliar with many aspects of site management, such as design customization, security, backups, and updates, then managed hosting may be the best path for you. Obviously, that will mean some additional cost which you’ll need to consider. Not all hosts provide managed hosting, so if that’s your choice, you’ll need to factor that into your selection process.

Type of Server

There are 4 types of servers offered by most hosting companies:

Shared Hosting

Your website will reside on a server with a number of other websites, and will share server resources. This is typically the least expensive option, but can also present the most security challenges.

Dedicated Hosting

Your website will be the only website residing on its server, so will not have to share resources or face security risks due to breaches of another website. This is normally the most expensive hosting option, as you will be essentially leasing the entire server and all its resources.

VPS Hosting

VPS hosting refers to a virtual private server , which means that while your site is sharing a server with others, a specific amount of the server’s resources are reserved for your usage. This allows you to have more customization and software control than that offered by shared hosting. VPS hosting is somewhat more expensive than shared hosting, though not tremendously so.

Cloud Hosting

Cloud hosting is virtual hosting via a network of different servers and resources. This can be extremely helpful due to increased flexibility and scalability. Cloud hosting is usually slightly more expensive than VPS hosting.

Choosing the type of hosting service will usually hinge upon the sensitivity of your operations and retained data, the need for particularly aggressive security protocols, and/or resource requirements.

Access to the backend

Many aspects of your website’s security will need to be addressed by coding edits in files located on the host’s server, but not all hosts allow site owners access to all files. If your host runs Apache , certain code edits, such as redirects or rewrites, can be accomplished in the . htaccess file. But if they run nginx , there is no .htaccess file, so just functional changes need to be written in C programming language. If you intend to manage your own site, and you’re already comfortable with editing the .htaccess file, but not familiar with C , you’ll probably find an Apache server a bit easier to deal with.

Location(s)

Depending upon where your site’s audience is located, you may need to consider the physical location of your host’s servers. Choosing a host that only has servers in India, for example, when your audience is global, will mean that some of your users may experience a significantly slower response time than others.

Ideally, a host will have several different server locations, and upon detecting the origin of a user, will serve your pages from the server nearest the user.

Availability of needed services

There’s a broad range of peripheral services that a host might provide: automatic backups, automated updates, periodic security checks, SSL/TLS certificates, etc. Additional services that are important to VPS and reseller accounts particularly, can include cPanel, Plesk, or WHM. Depending upon which services you’re most interested in, the available services may affect your selection.

Up-to-date versions

Some hosts aren’t as diligent as others about updating their software. This can create compatibility issues with themes and plugins, if for instance the version of PHP running is out of date. If a host you’re considering is 2 or 3 versions out of date, it’s a good idea to contact them and ask if the latest version is available before committing. We’ve seen some hosts still providing php 7.3, which hit its EOL in December of 2021.

You should also be aware that if you’re running a VPS or Dedicated Server, it may be your responsibility to keep current on software versions.

Security

As we’ve already mentioned, a breach of another website on the same shared server can allow a hacker access to the server root, from which they can penetrate any other websites on that server. That makes it essential to choose a host that has an aggressive security scanner to detect and block any intrusions or DDoS ( distributed denial of service ) attacks. Many hosts also offer SPAM filtering, often based upon email addresses or IP addresses of reported spammers.

Cost

Given the critical nature of many of the other aspects of your host’s service, cost is probably the last thing you should consider… at least unless you narrow your choices down to two hosting companies that are otherwise alike. And to be honest, that’s unlikely.

There are essentially two types of hosting providers: those who make their money by providing hosting to a lot of clients; and those who provide top drawer service, even if to a smaller number of clients. The latter group is most likely to retain clients for several years, and be recommended to new prospective clients.

WCAG 2.2: 9 New Updates for Website Accessibility

steve@webnarwhal.com (Steve Gerencser) — Mon, 09 Oct 2023 14:00:00 GMT

On Oct 5th, 2023, The Web Content Accessibility Guidelines (WCAG) were updated to version 2.2, the next stage in Accessible Website Design . Many of the new requirements deal with issues other than vision, they deal with cognitive and motor control issues for people that may not process information the most common way, or lack the ability to make small, fine, movements with their hands.

New WCAG 2.2 Accessibility Guidelines:

Level A Compliance

Consistent Help (3.2.6)

This requirement is about providing general help information such as your phone number, email address, chat window, and so on, to be placed in the same location everywhere that it is placed.

If you provide a phone number in the header of your website, it should appear in the same place on every page where it is displayed. There is no requirement to place the information, just that if it is placed, it be placed consistently.

This is helpful for all of your users, but may be of extra help to users with memory impairments or with cognitive impairments.

Redundant Entry (3.3.7)

This requirement is about not forcing users to re-enter information that they have already entered within the same process.

For example, if you have a form that the user fills out, you should not be asking for the same information in multiple locations. Things such as their name or address. Think about a checkout form where someone enters their billing information and then requires them to enter their name and address again if the shipping address is the same as the billing address. This data should auto-populate in the form, or allow for a method to easily replicate the data as you see with the checkbox saying that your shipping address is the same as your billing address.

This is good for all of your users, but can be more important for users with cognitive issues.

Level AA

Focus Not Obscured - Minimum (2.4.11)

This requirement relies on having focus elements not be obscured (covered) when they receive focus. This sounds strange but is easy to understand.

Assume that you have a sticky header that is popular on many websites. When you scroll down the page the header, or sidebar, or popup, or some other element remains in place. This becomes a failure issue when someone tabbing through the page finds that the focus element, usually a button or link, is now 100% covered by the sticky element.

There are several exceptions to this rule:

If the obscuring element is semi-transparent so that the focus element is still visible.
If the focus element is still at least partially visible.
If the obscuring element has been put there by the user (draggable elements)
If the obscuring element is opened by the user, but should be closable using the <esc> key, or some other method, that does not move focus.

Dragging Movements (2.5.7)

2.5.7 requires that draggable elements have an alternative method of movement. Many users with fine motor control issues, dragging and dropping, drag sorting, and other tasks where a mouse is used to move an element, struggle with the ability to drop the element in the proper location.

For example, assume that you are re-ordering a menu list. Each menu item should have an up/down ‘button or link’ so that the user can move that element with their keyboard or with a single mouse click rather than forcing the click, hold, drag, and then release the menu link in the proper spot.

Target Size - Minimum (2.5.8)

For people who develop for mobile, this is a common issue that they are fully aware of. Any element that is a target, a link, a button, and so on should have a minimum size of 24x24 pixels.

Additionally, target minimums should never overlap. This is incredibly common in mobile devices where you try to click a tiny X and end up clicking something else entirely. Bad actors take advantage of this issue to get you to click on ads that you had no intention of clicking on.

This requirement is very important to users with fine motor control issues.

Accessible Authentication - Minimum (3.3.8)

The dreaded obfuscated text captcha is a prime example of an element that is a violation of this requirement, and so are most cognitive tests such as solving a math problem. Some users with cognitive issues cannot solve these authentication barriers.

However, tests that ask you to identify common objects are acceptable. Also, requesting user entry of known items such as their name or email address are acceptable.

Level AAA

Focus Not Obscured - Enhanced (2.4.12)

2.4.12 is the enhanced version of 2.4.11 above. While the AA level requirement allows for a focus element to be partially obscured, Level AAA fails if any part of the element is obscured.

No transparency, no partial elements, and no exception for movable or dismissible content.

Focus Appearance (2.4.13)

The Level AAA focus appearance requirement deals with the contrast between focused and unfocused states. This adds a minimum level of contrast.

For example, if a button has a green border and the focus (hover) state has a blue border, the difference must have a contrast of 3:1 or more. Additionally, the focus indicator, border in this case, must be at least 2 pixels wide. And even more additionally, the focus colors must still meet the contrast requirements for the background that they are on.

One solution to this is to add an offset [outline-offset] to push the focus border away from the unfocused border. But, again, it must still pass the contrast ratio for the background at 7:1 for Level AAA.

Accessible Authentication - Enhanced (3.3.9)

Requirement 3.3.9 is the enhanced requirement of the Level AA Accessible Authentication. This includes the AA requirements, but does not allow for object recognition tests or personal content.

How Can Web Narwhal Help You?

Website Accessibility Design Support and Audits

Web Narwhal is always available to help with your accessibility issues, on either a new site we build for you, on your existing website, or just preparing an Accessibility Policy for you. Contact us with your needs and concerns and we will help you find a solution that is right for you, your company, and your clients.

What is Content Marketing and why is it Important for your Business?

dev@webnarwhal.com (Doc Sheldon) — Sun, 08 Oct 2023 19:55:37 GMT

What is Content Marketing?

Let’s start with the what part of the title of this post… because it’s hard to perform a task effectively if you don’t know what it entails.

Content marketing is a strategic marketing process aimed at creating and distributing content which is relevant to a company’s offerings, helpful to your audience (potential customers), and designed to drive conversions.

But there are a number of building blocks to that process, which need to be addressed before you begin generating any content. Those basically boil down to your content strategy:

Your Offering – what product(s) or service(s) do you offer? You undoubtedly already know the answer to that question, whether it’s a single product or thousands.
Your Audience – who are you sharing your content with? This is where you need to identify the demographic makeup of your audience. Age, gender, educational background, interests, income level, and other aspects that will help you focus your content on those who are most likely to be receptive to your offering.
Your Goal – what do you hope to accomplish with your content? Are you selling a product or service? Are you simply building your brand? Are you trying to convince them to share your content with others? Here again, there can be many different goals – often, more than one. Setting the goal for each piece of content will be essential to your success.
Your Channel/Method – you may end up sharing your content in numerous channels and formats: blog posts, articles, social media posts, video, podcasts. Some adjustments may be necessary for different channels.

Don’t gloss over the above steps – they’re critical elements and will influence your content preparation greatly.

Consult your Content Strategy

Using your content strategy as a guide, you can now start constructing your content. And that will lead us to the second question in the title of this post: why is it important to your business?

Hopefully, it’s obvious by now why all this is important. Your content, whatever form it takes, in whichever channel you place it, needs to gently lead the audience toward your goal. Conveying information that is relevant and useful can either build your brand’s credibility or lead the audience through your conversion funnel, regardless of the ultimate goal.

Just building content without a strategic plan is just throwing things at a wall to see if anything sticks. People have very little patience with content that rambles or doesn’t provide what they expected. It’s also worth mentioning that search engines have become increasingly capable of discerning when content offers no more value than other sources. In fact, evidence suggests that Google is even declining to index content that seems to offer no real value. So avoid rehashing information already provided by others – simply rewording won’t cut it.

Tracking Results

You’ll inevitably find that some content will underperform, even though you expected it to be very effective. The only way to be aware of this, of course, is to track your audience. You need to see if they even stayed on the page long enough to absorb it; did they click through on any of your CTAs; did they bounce entirely? Monitor, learn, adjust… and not just once – constantly.

How Vulnerable is your WordPress Website?

dev@webnarwhal.com (Doc Sheldon) — Tue, 03 Oct 2023 14:00:02 GMT

Much of the security of any website is contingent upon the hosting service selected. Shared hosting vs. dedicated, the security measures implemented at the server level, and the strength of various aspects of server access all come into play. As such, they need to be considered when choosing a host for your website.

Even if everything at the server level is well protected, however, there are still a great many things that can be addressed by the site’s webmaster to make a breach more difficult.

Because of its massive popularity, WordPress is a favorite platform for hackers to target. Sometimes they hope to steal sensitive information, sometimes they simply want to use the site to reroute traffic or implant malware. Regardless of their end-goal, keeping them out is always to your advantage.

There are many small steps that can make their task of breaching your site more difficult. And in reality, making it difficult is the best approach. No website can be made totally impenetrable, so the goal is to make it not worth their effort.

We have published a free 39-point WordPress security guide , which can help you achieve that goal. It’s broken down into 3 categories of measures – Basic, Intermediate, and Advanced, with clear instructions, allowing even site owners with limited technical expertise to enhance their website’s security.

Web Narwhal can also assess your website’s current vulnerability and make specific recommendations to mitigate existing risks. At that point, you can either implement the fixes yourself or ask us to do it for you. Depending upon the hosting service you’re using, you may even be able to have them make the necessary changes. But what you should not do is simply assume that since you’ve never been breached before, it will probably never happen to you.

Some bare minimum steps you should take, this minute:

SSL/TLS

You’re probably already aware that HTTP addresses should be abandoned in favor of HTTPS. This allows for encryption of all data sent from the server to a user’s browser. In the past, SSL (secure socket layer) was employed to accomplish this, but today, TLS (transport layer security) is used for this, as well as such things as email, VOIP (voice over internet protocol), and instant messaging. If you haven’t already upgraded your hosting to SSL/TLS, do so today.

Most hosting companies offer Let’s Encrypt free, right from their cPanel, which is a one-click installation process and provides you with secure TLS encryption.

Strong Passwords

We’ve all seen prompts to create a password, using upper and lower case letters, numbers and special characters. At one time, such a password with 6 total characters was relatively safe. But today, that same password can be cracked instantly. Eight characters takes about 5 minutes, and 11-characters would take 3 years. Add one more character, and that 12-character password would take 226 years! As the use of AI increases, passwords will be cracked increasingly rapidly, so we suggest 14 or 16 characters (1-million years or 5-billion years at present). Personally, I use 18-character complex passwords, which by 2023 standards, would take 26-trillion years to crack.

It goes without saying that you should never use the same password twice. I use RoboForm to manage my passwords, which has an automatic password generator and stores the login URL, username, and password in encrypted format, and synchronizes to both my desktop and phone, with a 12-character random master password to access my RoboForm files. One double-click on the account I want to open and I’m there. There are others, as well, such as Bitwarden , Dashlane , and LastPass , among others.

Finally, if others have access to your WordPress site, require strong passwords for everyone. It’s also a good idea to change passwords periodically – we recommend every 2-3 months.

2FA/MFA

Another thing you can do to keep invaders out of your site is require 2FA (2-factor authentication) or MFA (multi-factor authentication). That means that after submitting one’s username and password into the login block, the system will require another one (or 2) authentication steps. That may be an authentication code sent by email or SMS, a phone call, a hardware based key generator like Yubikey or SolidPass, or even a QR code. Such functions are easily added to your WordPress site with a plugin.

I use iThemes Security Pro , but Wordfence Security or miniOrange’s Google Authenticator have a good reputation, as well.

You’ve only just begun!

The three foregoing items are barely scratching the surface, so download our 39-point WordPress Security Checklist (it’s in the right-hand sidebar) and leave those would-be hackers grumbling and looking for an easier target!

Improve Your Website Accessibility Today with 5 Simple Things

steve@webnarwhal.com (Steve Gerencser) — Mon, 25 Sep 2023 14:00:00 GMT

Having an accessible website , one that is useful to everyone regardless of ability, is important. Not only is it a great idea to be inclusive, but it is also quickly becoming a requirement at many levels and can leave you, and your company, exposed to legal action. It’s important to understand accessibility is a process much like SEO and marketing. It is never really done, and no one can do it perfectly. But we can try.

With that in mind, we’ve put together a short list of accessibility techniques that you can implement now to get you started on your path.

Alt tag attributes.

Alt tags on images has been ‘a thing’ since the very beginning of the internet. Alt tags allow machines, screen readers and search engines to understand what the image is on your website. This is also one of the easiest things to do that so many people fail to do.

Your alt tag should describe your image so that someone using a screen reader can understand what is in the image. This does not mean packing it with keywords and irrelevant information, simply describe the image on the screen.

Every modern CMS makes this easy to do when you add an image. For example, in WordPress adding an image presents you with these text fields to fill out. Add your alt text, image title, caption if you use them, and a longer description of the image.

Be sure to include a period at the end of the text. This helps the screen readers understand that they have reached the end of the alt text.

SEO Bonus: This can also be helpful for your SEO, especially if you are interested in image search.

Color Contrast.

At some point some web designer decided that low contrast websites were cool. Then everyone else followed right along without ever considering just how hard these are to read for people with vision issues. Grey text on a white background is terrible for users. I have 20/20 vision and can’t read low contrast websites.

WCAG 2.1 compliance recommends a contrast of 4.5:1 to be readable by most people. Notice that I didn’t say all, but 4.5 has been determined to be the goal to be readable by the majority of users.

Fortunately, there is a tool that you can use to see if your website has enough contrast to it. WebAIM has provided us with a color contract checking tool where you can simply enter your colors and see the ratio. Then, with a few sliders you can adjust the brightness and darkness levels until you are compliant.

Headings:

The use of H1, H2, H3 and so on, has been an ongoing argument in the design space ever since CSS became available. Many designers decided that using the heading tags was a great way to decorate text rather than using them as intended to structure content. Then SEOs learned that having an H1 on your page was a good thing, so everything became an H1. Having headings scattered around your page in some random fashion is hard for screen readers to understand and navigate. They should be used as intended, H1 -> H2 -> H3 and so on.

If you find yourself wanting to use multiple H1s on a webpage, make multiple webpages. An H1 defines the topic. If your page needs multiple H1s then you have multiple topics on one page, and they should be broken apart.

SEO Bonus: This is also good for SEO. Properly structured content is easier for search engines to understand, keeping your pages focused on a single topic keeps from confusing the algorithms about the content of your page, and you now have the opportunity to create multiple pages where you thought you wanted one large, rambling, page.

Links:

All links on your page should be easily identifiable. Somewhere along the line we designed that underlines were ugly and did away with them and just used a color to show a piece of text was a link. Usually, a low contrast color too. We won’t even go into the link sellers and PBNs (Private Blog Networks) that try to hide all their spammy links by making them look like the text on the page. You aren’t being sneaky; we know they are there and what you are trying to do.

Add the underlines back to your links, at the very least the ones in your content. Adding this bit of CSS, or a variation of it, usually solves the problem:

a {text-decoration: underline;}

While we are talking about links, #5 is another link tip.

Highlight Focus Elements:

When a user is tabbing through your website every tab stop should be highlighted in some way. In the case of a text link the text could change color or change in some way to indicate that this is where the focus element is. Again, this is something that a lot of web designers have done away with in an effort to be “pretty”.

Maybe your menus could add an underline to the link as someone tabs through, or your in-content links could have a dramatic color change. But they should change in some way. The CSS for that might look like this:

a:hover {text-decoration: underline; color: red;}

The actual element isn’t as important as is the fact that it should change in some way.

Building accessible websites is something that we should all be invested in. It does take a little more effort to make sure that your website is inclusive, but the day is coming when this could become legislated so being in front of the process now is important both from a legal standpoint, as well as being a good neighbor.

Website Accessibility Support and Audits

Web Narwhal is always available to help with your accessibility issues, on either a new site we build for you, on your existing website, or just preparing an Accessibility Policy for you. Contact us and we’ll get back to you as quickly as possible.

Self-Managed vs. Managed Website Maintenance and Hosting

Tue, 29 Aug 2023 15:27:24 GMT

Making the Right Choice for Your Small to Mid-Sized Business Website

Not having an online presence for your business these days is like not being in the phone book in the 80s. If you were in the phone book you were somebody. Customers could find you, they could call you, look up your address to come into your store, even find out what services or products you offered. But I haven’t seen a new phone book since 2019. Now we are in the 2020’s and phone books don’t exist, so how are your customers supposed to find you?

You need a website. But, do you really need to learn how to build, host, manage, and market your website? Or do you want to hire a company that specializes in doing those things for you? Here’s a hint, do you think your customers need to learn how to do what you do, or should you spend your time providing them the services and products that you provide?

This is the difference between self-hosting and managing your website vs. using a managed hosting and maintenance company for your website needs.

What is Self-Hosting and Website Management?

Self-hosting and self website management is exactly what it sounds like, you are in charge of managing your website servers and updating your website as needed. For many people, this is the best solution for their business. It reduces up front and ongoing costs and gives you full control over every aspect of your online presence.

When you want to update your website you don’t need to call your web developer; when you need to update your server you don’t need a server admin; you simply do the work yourself. You are in full control. Of course, that assumes that you can do the work, keep up on the technology issues and the potential security issues for your website.

What is Managed Hosting and Website Management?

As with self-hosting, managed hosting and website management is also just what it sounds like. Someone else takes care of all the technical, security, and design issues for you so that you can focus on your business.

With managed hosting you have many options.

Shared Hosting

Starting with shared hosting which is many different websites owned by many different people all on a shared server. This is where most websites start out. It’s cheap, the hosting company manages the server for you, and you don’t have to worry about the security of the server. Until any one of the other websites - or your own - on that server gets hacked. You are now exposed to security issues that you may not otherwise have.

A serious drawback to shared hosting is that one website can, and often does, cause the entire server to slow down or crash completely, leaving your website down for reasons beyond your control.

You have little to no server access and everything that keeps the server running is done for you by the hosting company.

VPS Hosting

A VPS, or Virtual Private Server, is a dedicated section of a server, or a full server, that is under your control. With many VPS providers you can host multiple websites under a single account, manage your own email server, set up your own security, and so on. This is a great option for someone that is at least a little technical, and may want to have several websites.

In many cases you will be required to update things like the version of php or cPanel that your server uses on your own. Or you can pay extra to have your hosting company do that for you.

VPS Hosting costs more than shared hosting, but less than dedicated hosting.

Dedicated Hosting

Dedicated hosting is where you own, or lease, the hardware that your website runs on. You are the only account on that server, and you are required to manage everything about it on your own, or pay a real server admin to manage it for you.

This is a great option for someone requiring strict security and server access, or someone that doesn’t want to deal with the potential issues of shared or VPS hosting.

Hosting is almost always something that you want someone else to manage for you. It requires a level of technical knowledge that most website owners don’t have, or don’t want to spend the time learning. Regardless of the type of hosting you choose, you will almost always want someone else to manage that for you, whether it’s the hosting company itself or a third party support service.

Website Management, DIY or Managed?

The number one hacking vector into nearly every website that has been hacked has been through a failure to update the website as security notices and updates are sent out. This is a direct function of web developers not explaining to clients the risks of owning a website. Many developers simply build a website, put it on the client’s hosting, and wish them luck. Then a month, year, or even several years later they discover that their website was compromised at some point and no one knows what to do next.

If you built your own website you probably feel comfortable updating various plugins or even the core of your website on a regular basis. But are you ready for an update to break something else? It happens. More often than we would like.

Let’s look at a few common examples of managed website maintenance.

DIY Website Management Using WordPress

WordPress is the most popular website building platform, most technically savvy people can build and maintain a small WordPress website on their own. At first it’s easy. You log in every few days, click the update button on the plugins that need to be updated, and everything continues on its merry way.

But what do you do when you update a plugin, or worse your core theme, and suddenly your website fails to load? Are you capable of reverting your website back to the last known good state? Have you been making regular backups? Do you know how to restore them? More importantly, do you have the time to spend fixing a broken website vs. running your business? Can your business afford for you to spend the time away needed to find the issue, fix the issue, then test to make sure that everything still works?

A large part of our business consists of us recovering, rebuilding, and fixing websites that have fallen terribly out of date with no clear upgrade path any longer, or fixing a website that has been hacked because security hasn’t been maintained for various reasons. Worst of all, almost none of them have a clean backup to start from.

Is this solution for you? It is for a large number of people and it makes sense for them. But what about you?

Managed Website Maintenance

Having a managed service for keeping your website up to date makes sense for a lot of small and medium sized businesses. A managed service takes most of the worry, and work, off of your hands so that you can focus on your business.

Here is short list of what may be included in a managed website program:

Server updates: New versions of php, CPanel updates, Kernel updates and more.
Firewall security
Routine website backups: Monthly, weekly, even daily backups may be required. We work with our clients to develop that schedule. Timing is generally based on how much data you are willing to lose or rebuild from offline copies.
Plugin updates: In a typical week 30 to 40 individual plugins experience at least one vulnerability.
Core website updates: In the case of WordPress there is 1 update per month plus occasional emergency security updates.
Site recovery in the case of a failed update or hacking attempt
Even small content/page updates

At Web Narwhal we provide managed website maintenance for our website development and hosting clients allowing them to focus on what they do best - their business.

Having a website is just the first step. Keeping that website up to date is a process that should be done for as long as you have a website. Many people are quite capable, and have the time to do this themselves. But, even more business owners prefer to leave these details to people who are trained to perform these tasks, just as they are trained to provide the services and products that they provide.

Think about it this way, how many times have you had to follow up one of your customer’s DIY attempts in your own business. Is this the type of website owner you want to be?

Using Google Ads Automated Rules to Protect Against Overspending

steve@webnarwhal.com (Steve Gerencser) — Tue, 08 Aug 2023 23:46:02 GMT

There are plenty of stories about Google Ads campaigns suddenly spending their entire budget in just one or two clicks. You could have a $30/day budget and a $0.50 cpc and suddenly your cpc jumps to $25 or more. Or a $200/day budget with $4 clicks suddenly spending $180/click. Google reps are generally not very helpful in these circumstances, and unless you are looking at the campaigns hourly, you may not even realize it for several days.

To help protect our client campaigns we started adding simple automated rules to them. Automated #1 is designed to send an email when the average cpc crosses a certain amount, different for every client and campaign, and automated rule #2 will pause the campaign when it crosses an even higher average cpc.

For example, if our normal cost per click is $3 I have an email sent when the average cpc hits $9. If the average cpc hits $12 then the rule pauses the campaign until someone can look at it and determine if the campaign is behaving properly, big brain tip, it usually isn’t.

Not familiar with automations? Setting them up is easy.

To set up an automation in Google ads you need to log into your account and go to the main campaigns page. From there click the three dots in the top right and select Create an automated rule.

Now we follow the directions on the page.

Enter the name of the new rule: Email CPC Spike

Under Actions we create 2 actions.

Action 1: Email when the selected campaign has an average cpc about the set amount.

Name the Action, Send Email or Pause Campaign.

In the Apply to dropdown you can select the entire account, which I do not recommend, or a specific campaign under this account. By selecting and setting up a unique set of rules for each campaign you can gain a finer control over your ad spend.

Under conditions you will find a huge number of conditions you can use, but for our purposes today, we can find the average CPC under the Performance list. Here is where you set your average CPC trigger.

Under Action is where you can select what you want to happen, email or pause in our case. Since rules run in order, we place the Send Email first so that you get that email regardless of what the average CPC reaches.

Action 2: Pause the selected campaign when the average cpc exceeds the set amount.

The same process except with a higher Average CPC and instead of sending an email it pauses the campaign.

Under Frequency I set it to run daily and use data from the last 3 days and then email me every time the rule triggers.

Automated Rules are a very overlooked tool in the box of things we can do directly in the Google interface without the need for external tools and services. And adding these automated rules can help you to relax, knowing that anything important is going to be managed the way you want it every time. Or at least until Google changes something in the interface.

web-narwhal

Website Accessibility Checklist for 2024

Tools

Page and Text Formatting

Images and Video

Design Elements

How to Select the Best Hosting Provider for your Website

﻿ Platform

Type of Hosting Desired

﻿

Type of Server

Access to the backend

Location(s)

Availability of needed services

﻿

Up-to-date versions

Security

﻿

Cost

WCAG 2.2: 9 New Updates for Website Accessibility

Level A Compliance

Level AA

﻿ Level AAA

How Can Web Narwhal Help You?

Website Accessibility Design Support and Audits

What is Content Marketing and why is it Important for your Business?

What is Content Marketing?

Consult your Content Strategy

Tracking Results

How Vulnerable is your WordPress Website?

SSL/TLS

Strong Passwords

2FA/MFA

You’ve only just begun!

Improve Your Website Accessibility Today with 5 Simple Things

Website Accessibility Support and Audits

Self-Managed vs. Managed Website Maintenance and Hosting

Making the Right Choice for Your Small to Mid-Sized Business Website

What is Self-Hosting and Website Management?

What is Managed Hosting and Website Management?

Shared Hosting

VPS Hosting

Dedicated Hosting

Website Management, DIY or Managed?

DIY Website Management Using WordPress

Managed Website Maintenance

Using Google Ads Automated Rules to Protect Against Overspending

Platform

Level AAA