15 Mar 2019

...new feature!

We've just rolled out another major new feature - website content monitoring. If the content of your website changes unexpectedly, Downtime Monkey will alert you.

website content monitoring - hacked websites


How Content Monitoring Works

A request is sent to the webpage and the source code of the webpage is checked to make sure that it contains a keyword phrase that you have supplied. If the phrase isn't found then the site will be recorded as "down: keywords not found" and alerts will be sent.

This works well as a complement to standard downtime monitoring, catching some website problems that would otherwise be missed...



Catch On-Page Errors

Most of the time when a website goes down the result is an http error. For example, "404 Page Not Found" or "503 Service Unavailable". These errors are caught by Downtime Monkey's downtime monitoring - no problem!

However, sometimes when a site goes down an http error is not produced. Instead the webpage is served with a normal response of "200 OK" and the error is printed on the otherwise blank page.

Database Problems

When a database problem occurs this usually produces an on-page error - an example is when a database is overloaded and the error is shown: "SQL Error: Too many connections[1040]". This is common on busy forums:

website content monitoring - database errors


Memory Limits Exceeded

When a script's memory limits are exceeded this also produces an error on-page - this is common in heavy content management systems such as WordPress: "Fatal error: Allowed memory size of xxxxx bytes exhausted":

website content monitoring - memory limits


These are just a couple of examples from a multitude of possible on-page errors - content monitoring will catch them all!

Catch Hacked Websites

It's a sad state of affairs but attacks on websites are now an everyday occurrence. Attackers regularly take over sites and replace the page content with their own, often malicious, content.

Content monitoring can catch this and send you an alert, so you'll get notified and can restore your website right away.

website content monitoring - hacked


Getting Started With Content Monitoring

It's really easy to set up content monitoring for your site - get started in less than a minute:

1) Login to your Downtime Monkey account (content monitoring is a Pro feature so you'll need to be on a Pro Plan).

2) Add a new monitor (skip this step if you want to add content monitoring to an existing monitor).

3) Go to your monitors, scroll to the monitor of your choice and click the monitor settings icon.

4) Select "On" from the "Keyword monitoring on/off" dropdown menu.

5) In the "Keywords" field, input an exact match phrase from your webpage.

5) Click update monitor - that's all!

Minimising Load To Your Server

One of the aspects that we spent a lot of time on when developing the feature was minimising the load to your server.

Unlike downtime monitoring, content monitoring requires that the webpage content is downloaded each time a check is made. This uses bandwidth and when considering the frequency of the checks it was important to take some steps to minimise this load:

1) Websites are monitored every 3 minutes (as opposed to every minute for downtime monitoring). This reduction in monitoring frequency reduces bandwidth by 1/3.

2) Only the source code (i.e. the text) of the website is downloaded. Images, video and other heavy content is ignored.

3) Where the website server permits, only the first 5KB of the page is accessed. However, not all servers are configured to allow partial page loads but where they do we take advantage of the savings in bandwidth.

4) When the website server doesn't permit partial page loads the page size is limited to a maximum of 50KB. This was a big decision for us as it means that some very heavy webpages won't be able to use this feature. However, we were also aware that we needed to place a limit as some sites have huge pages (over a MB of code) and owners of these sites probably won't want the load on their server to go through the roof. The limit of 50KB corresponds to roughly 50,000 characters of source code and when we surveyed a bunch of websites we found that 96% of sites either used less than this or allowed partial page loads.

Alerts

Alert settings for content monitoring are the same as the settings that are in place for downtime monitoring. If you already have alerts set to email, SMS or Slack then no need to change anything - you'll receive these alerts for both downtime and content monitoring.

Alerts are of the form: "URL is down: keywords don't match" or "URL is up: keywords match" so that you can tell right away that the alert is for content monitoring.

Rate limits that you have set for SMS and Slack alerts also apply to content monitoring - if you have a rate limit set the total number of alerts per hour won't exceed this.

Custom alert delays (e.g. only send alerts if a site is down for 2 minutes) don't apply to content monitoring. Alerts are sent instantly when a content mismatch is found - this is because content mismatches are an indication of a serious problem that usually doesn't self heal, so you'll get notified ASAP.

Content Monitoring Logs

All content monitoring records are logged and can be viewed on a monitor's stats page, along with the start time, end time, duration and explanation for the event.

Content monitoring events aren't included in the overall uptime stats for the site as content monitoring is treated separately from downtime monitoring.

A Short Period Of Beta

This feature is now live and will undergo a short period of Beta testing over the next few weeks.

If you have any questions check out the Content Monitoring FAQ.

Finally, a big thank you to all the people who submitted feature requests for this - you have really helped us to improve Downtime Monkey!

 

04 Mar 2019

...new feature!

We've just rolled out another major new feature - website content monitoring. If the content of your website changes unexpectedly, Downtime Monkey will alert you.

website content monitoring - hacked websites


How Content Monitoring Works

A request is sent to the webpage and the source code of the webpage is checked to make sure that it contains a keyword phrase that you have supplied. If the phrase isn't found then the site will be recorded as "down: keywords not found" and alerts will be sent.

This works well as a complement to standard downtime monitoring, catching some website problems that would otherwise be missed...



Catch On-Page Errors

Most of the time when a website goes down the result is an http error. For example, "404 Page Not Found" or "503 Service Unavailable". These errors are caught by Downtime Monkey's downtime monitoring - no problem!

However, sometimes when a site goes down an http error is not produced. Instead the webpage is served with a normal response of "200 OK" and the error is printed on the otherwise blank page.

Database Problems

When a database problem occurs this usually produces an on page error - an example is when a database is overloaded and the error is shown: "SQL Error: Too many connections[1040]". This is common on busy forums:

website content monitoring - database errors


Memory Limits Exceeded

When a script's memory limits are exceeded this also produces an error on page - this is common in heavy content management systems such as WordPress: "Fatal error: Allowed memory size of xxxxx bytes exhausted":

website content monitoring - memory limits


These are just a couple of examples from a multitude of possible on-page errors - content monitoring will catch them all!

Catch Hacked Websites

It's a sad state of affairs but attacks on websites are now an everyday occurrence. Attackers regularly to take over sites and replace the page content with their own, often malicious, content.

Content monitoring can catch this and send you an alert, so you'll get notified and can restore your website right away.

Minimising Load To Your Server

One of the aspects that we spent a lot of time on when developing the feature was minimising the load to your server.

Unlike downtime monitoring, content monitoring requires that the webpage content is downloaded each time a check is made. This uses bandwidth and considering the frequency of the checks it was important to take some steps to minimise this load:

1) Websites are monitored every 3 minutes (as opposed to every minute for downtime monitoring). This reduction in monitoring frequency reduces bandwidth by 1/3.

2) Only the source code (i.e. the text) of the website is downloaded. Images, video and other heavy content is ignored.

3) Where the website server permits, only the first 5KB of the page is accessed. However, not all servers are configured to allow partial page loads but where they do we take advantage of the savings in bandwidth.

4) When the website server doesn't permit partial page loads the page size is limited to a maximum of 50KB. This was a big decision for us as it means that some very heavy webpages won't be able to use this feature. However, we were also aware that we needed to place a limit as some sites have huge pages (over a MB of code) and owners of these sites probably won't want the load on their server to go through the roof. The limit of 50KB corresponds to roughly 50,000 characters of source code and when we surveyed a bunch of websites we found that 96% of sites either used less than this or allowed partial page loads.

Getting Started With Content Monitoring

It's really easy to set up content monitoring for your site - get started in less than a minute:

1) Login to your Downtime Monkey account (content monitoring is a Pro feature so you'll need to be on a Pro Plan).

2) Add a new monitor (skip this step if you want to add content monitoring to an existing monitor).

3) Go to your monitors, scroll to the monitor of your choice and click the monitor settings icon.

4) Select "On" from the "Keyword monitoring on/off" dropdown menu.

5) In the "Keywords" field, input an exact match phrase from your webpage.

5) Click update monitor - that's all!

Alerts

Alert settings for content monitoring are the same as the settings that are in place for downtime monitoring. If you already have alerts set to email, SMS or Slack then no need to change anything - you'll receive these alerts for both downtime and content monitoring.

Alerts are of the form: "URL is down: keywords don't match" or "URL is up: keywords match" so that you can tell right away that the alert is for content monitoring.

Rate limits that you have set for SMS and Slack alerts also apply to content monitoring - if you have a rate limit set the total number of alerts per hour won't exceed this.

Custom alert delays (e.g. only send alerts if a the site is down for 2 minutes) don't apply to content monitoring. Alerts are sent instantly when it is a content mismatch is found - this is because content mismatches are an indication of a serious problem that usually doesn't self heal, so you'll want notified right ASAP.

Content Monitoring Logs

All content monitoring records are logged and can be viewed on a monitor's stats page, along with the start time, end time, duration and explanation for the event.

Content monitoring events aren't included in the overall uptime stats for the site as content monitoring is treated separately from downtime monitoring.

A Short Period Of Beta

This feature is now live and will undergo a short period of Beta testing over the next few weeks.

If you have any questions check out the Content Monitoring FAQ.

Finally, a big thank you to all the people who submitted feature requests for this - you have really helped us to improve Downtime Monkey!

 

21 Feb 2019

In a recent blog post we answered the question: Why Whitelist an Email Address?

TLDR; "If you expect to receive important emails from a trusted email address it is worth whitelisting the address to make sure that emails won't be accidentally blocked by an overzealous email client."

In this post we show you how to do it in cPanel by adjusting the SpamAssassin spam filters. If you use cPanel webmail (e.g. Horde, Roundcube or Squirrel Mail) then this is what to do...



Overview of cPanel Webmail and SpamAssassin

When you manage your own email accounts through cPanel the spam management of messages to these emails is usually handled by Apache SpamAssassin.

Rather than managing spam settings for each email account individually, the spam settings for all email accounts in the cPanel account are managed together.

If you use cPanel webmail such as Roundcube, Horde or Squirrel Mail to access your emails then there is no whitelisting option inside each webmail account - instead use these SpamAssassin spam filters in cPanel:



How To Whitelist Emails with cPanel Spam Filters

1) Login to cPanel, scroll down to the email section and select 'Spam Filters':

cPanel select spam filters


2) Check that SpamAssassin is enabled. The 'Process New Emails and Mark then as Spam' button should be on. If it's off then there is no need to whitelist email addresses as spam management is not running:

cPanel SpamAssassin enabled

3) Scroll down and click 'Show Additional Configurations':

cPanel show additional configurations


4) Select 'Edit Spam Whitelist Settings':

cPanel edit spam whitelist settings


5) Click on 'Add A New "whitelist_from" Item':

cPanel add new whitelist from item


6) Add the email address that you want to whitelist. Here we have added monitor@downtimemonkey.com to ensure that we receive email alerts if one of the websites that we monitor goes down. Once the email address is added, click 'Update Whitelist (whitelist_from)'. The email address is now whitelisted:

cPanel add email address to be whitelisted


Whitelisting A Whole Domain by using Wildcards

cPanel spam filters allow the use of the wildcards: * and ?

* can be used to represent any string of multiple characters and ? to represent any single character.

In step 6, if instead of adding monitor@downtimemonkey.com we add *@downtimemonkey.com we would whitelist every email address belonging to downtimemonkey.com.

 

23 Jan 2019

The software review and comparison site CompareCamp recently reviewed Downtime Monkey, and we’re really pleased to have received awards for ‘Great User Experience’ and ‘Rising Star 2018’.

website monitoring awards


The CompareCamp review analyzed several important elements of Downtime Monkey. They considered the main features, ease of use, customer support and value for money. We’re pleased to announce that Downtime Monkey impressed the review experts, with the website monitoring tool receiving an 83% overall rating.

It’s great to have our hard work recognized, especially our efforts in delivering an outstanding user experience, which has been a top priority. From the start, our aim has always been to make Downtime Monkey incredibly quick and easy to use. This is why we’re proud to be recognized with the Great User Experience award by a notable review platform.

The Rising Star 2018 award highlights Downtime Monkey’s achievement in disrupting the website monitoring space last year. This award is also a recommendation from the review site that our app is considered as a reliable monitoring tool for alerting users to all instances of website downtimes.

To experience just how easy it is to use, sign up here and start monitoring your websites... in seconds.

 

29 Jan 2019

...new feature!

UPDATE - 29 Jan 2019 - this application has been tested and officially accepted by Slack. Downtime Monkey is now listed in the Slack App directory :)

New year, new feature... and this is a big one: downtime alerts to Slack.

As well as getting email and SMS alerts when your websites go down you can now receive alerts straight to your Slack workspace.

slack logo


What is Slack?

Just in case you've been living under a rock (no problem, rocks rock!)...

Slack is a hub developed to make communication between teams easier. It's really popular with web design and development teams.

There are a couple of features in Slack that make it a great fit for receiving downtime alerts:

1) When an alert is sent to Slack everyone on the team who has access to the Slack channel will receive it.

2) Slack is really fast - faster than email. Alerts are received almost instantly after being sent.

Features

Down Alerts

Choose the Slack channel to receive messages if a website goes down.



Up Alerts

Receive 'up' messages when a website comes back online.



Instant Alerts

Alert messages can be sent the instant a website is detected as down (default).



Custom Alert Timing

Alert messages can be scheduled to only be sent if a website stays down for a specific time: 1 minute, 2 minutes, 3 minutes, 5 minutes, 10 minutes, 15 minutes, 30 minutes and 1 hour are the options.



Repeat Alerts

Repeat messages can be sent if a website remains down for a specific time: every 10 mins, 20 mins, 30 mins, 1 hour, 2 hours, 3 hours, 6 hours, 12 hours and 24 hours are the options.



Rate Limit Alerts

You can set the maximum number of downtime messages that can be sent per hour. This is really useful for anyone managing lots of sites on the same server - if the server goes down it prevents you being bombarded with hundreds of messages. Note for every 'down' alert sent, you'll always receive an 'up' alert when the website comes back online.

downtime alerts to slack


Free & Pro

Slack alerts are available to everyone who uses Downtime Monkey - both Free and Pro users.

Free plan users can monitor up to 60 websites with default settings.

Custom alert timing, repeat alerts and rate limiting are advanced features available only to Pro plan users.

Get Started With Slack Alerts

This is really easy and takes about 2 minutes:

1) Login, go to Slack Settings and click on 'Add to Slack'.

2) Select the Slack Channel that you want to receive alert messages to, click 'Authorize'.

3 (Optional) Send a test alert to your Slack by clicking on 'Send Test Message' in Slack Settings - you should receive it in your Slack.

4) Update your monitors - you'll have the option to turn Slack alerts 'on' or 'off' for each monitor.

The App

To provide the functionality that enables website downtime alerts to Slack we developed a Slack App and integrated into Downtime Monkey.

At present the App is in a short period of beta testing - once this is completed we'll submit for review and endorsement from Slack.

The App has now been tested and officially accepted by Slack.

If you're interested you can see details in the Slack App Directory: Downtime Monkey Slack App.

 

18 Dec 2018

In a recent blog post we answered the question: Why Whitelist an Email Address?

TLDR; "If you expect to receive important emails from a trusted email address it is worth whitelisting the address to make sure that emails won't be accidentally blocked by an overzealous email client."

In this post we show you how to do it in Mozilla Thunderbird by selecting the correct address book settings and adding the email address as a contact in your address book...

1) First you need to select the correct address book settings. Login to Thunderbird and select the menu (hamburger) icon:

Mozilla Thunderbird Menu Icon


2) Select 'Options' from the drop-down menu:

Mozilla Thunderbird Options

3) Select 'Account Settings' from the nested drop-down menu:

Mozilla Thunderbird Account Settings


4) In the Account Settings window select 'Junk Settings':

Mozilla Thunderbird Junk Settings


5) In the Junk Settings window there is the option: "Do not mark mail as junk if the sender is in". Make sure that this is checked for 'Personal Address Book', then click 'OK'.

Mozilla Thunderbird Check Personal Address Book


6) Next you need to add the email address that you want to whitelist to your personal address book. Click the 'Address Book' button in the top menu:

Mozilla Thunderbird Address Book


7) In the Address Book Window select 'New Contact':

Mozilla Thunderbird Create New Contact


8) Add the email address that you want to whitelist to the new contact, making sure that 'Personal Address Book' is selected for the 'Add to' option. Here we have added monitor@downtimemonkey.com to make sure that we receive email alerts if one of the websites that we monitor goes down. Once added, click 'OK':

Mozilla Thunderbird Add Email Address To Contact


9) When the address has been successfully added you can see it in your list of contacts:

Mozilla Thunderbird Contact Added
 

19 Dec 2018

...new feature!

UPDATE - 19 Dec 2018 - new graphs now showing response times every minute, hourly average response time and daily average response time! More info here.

We've just rolled out a brand new feature: response time monitoring.

As well as monitoring websites for uptime and downtime we now monitor the time it takes for each website to respond.

The response times are logged and can be viewed in graphical format. Read on to see some pretty graphs of response times...

monitor response time for website


Why Monitor Response Time?

1) If a webpage is slow the experience for the visitor is usually bad. Many users simply leave a site if it doesn't respond within a few seconds.

2) When a site has a high response time it is usually an indication that the server is struggling. Slow response times are really common when servers are overloaded and the information can be used to identify server problems or to explain that there is a problem when contacting a web host.

3) Slow response times and high levels of downtime are linked. A site that has a high response time is more likely to suffer from downtime than a site that is running quickly.

What Is Response Time?

Don't confuse page load time with response time!

Page load time is "the time it takes to download and display the entire content of a web page in the browser window". This very much depends on the size of the webpage to be displayed - heavy pages with lots of large images or video will take longer than light pages with just text and a few optimised images. This is not a good value of response time.

Response time is sometimes defined as Time To First Byte, i.e. "the time taken to receive the first byte of data" from the server. However, this is not perfect because it is shorter than the time taken for the first byte of data to actually appear in the web browser.

We use Time To Receive Headers as response time because this most accurately reflects when website users see a response... headers are received immediately before the first content is loaded to the web browser.

You can find more technical detail on defining response time at the end of the post: When is a website considered down as opposed to just slow?

Logs & Stats

All users now have access to response time logs and stats. If you are already a Downtime Monkey user you don't need to do anything - all accounts have been upgraded automatically to include this new feature.

Free plan users can see individual response times (monitored every 3 minutes) for the last 24 hours and daily averages of response times for 90 days.

Pro Plan users can view individual response times (monitored every minute) for the last 24 hours, for the last 7 days and daily averages of response times for 2 years.

Graphs

Here are a some response time graphs taken from real websites. You can see the difference between a fast website and a site that has problems:


Fast website: response times every minute for 24 hours

This website was running well with responses mostly around 100ms. There were a couple of periods of slightly slower responses but no major problems.

Response Time (milliseconds) vs Time (UTC)


Overloaded website: response times every minute for 6 days

This website was running slowly and was frequently overloaded by comment spam bots. Even during better periods the response times were approximately 1-3 seconds and during periods of overloading they rose to more than 15 seconds. This site also experienced regular downtimes with only 82.139% uptime during 7 days!

Response Time (milliseconds) vs Time (UTC)


UPDATE - NEW GRAPHS:

During beta testing it was noted that some of the graphs simply had too many points to be easily read: in the second example above there is a response time shown every minute for 6 days - that's over 8600 points!

To make the information easier to view there are now three graphs shown for each monitor: response times every minute for the last 24 hours (unchanged from the first example above), hourly average response times for the last 7 days and daily average response times for up to 2 years.


Fast website: hourly average response times for 7 days

This website was running well with response times consistently around 100ms.

Mean Response Time (milliseconds) vs Time (UTC)


Overloaded website: hourly average response times for 7 days

The same website as shown in the second example above - it was running slowly and was frequently overloaded by comment spam bots.

Mean Response Time (milliseconds) vs Time (UTC)


Fast website: daily average response times

This website usually ran well for most of the 20 days that it was monitored, with average response times around 120ms. However, over a 5 day period the response times slowed due to higher than normal load on the server.

Mean Response Time (milliseconds) vs Date


Free plan users can view graphs of response times every 3 minutes for the last 24 hours and daily average response times for up to 90 days.

Response Times for Your Monitors

To view the response time graphs and stats simply login, navigate to your website monitors and click on 'view stats' for the website in question.

If you don't have an account yet, you can sign-up for a free account and begin monitoring your websites in seconds!

Note this feature is in a short period of beta testing and there may some changes as testing progresses.

 

30 Nov 2018

Previously we answered the question: Why Whitelist an Email Address?

TLDR; "If you expect to receive important emails from a trusted email address it is worth whitelisting the address to make sure that emails won't be accidentally blocked by an overzealous email client."

In this post we cover how to do it in Yahoo! Mail by adding a filter...

1) Login to Yahoo! Mail and select settings by clicking on the gear icon:

Yahoo Mail Settings


2) Scroll down the menu and select 'More settings':

Yahoo Mail More Settings

3) In the left-hand menu select 'Filters':

Yahoo Mail Filters


4) Select 'Add new filters':

Yahoo Mail Add New Filters


5) Type a name for your filter - here we chose "Whitelist Website Downtime Alerts":

Yahoo Mail Set Filter Name


6) Under 'Set rules', select 'From' as the rule and 'contains' as the criterion for the filter. The filter will be applied to any email that comes from an email address that contains the text you add:

Yahoo Mail Select From Address


7) Input the email address that you want to whitelist - here we input 'monitor@downtimemonkey.com' to whitelist all emails that come from this address:

Yahoo Mail Set From Address


8) Under 'Choose a folder to move to' select 'Inbox'. This ensures that all emails will arrive in the inbox and never be sent to spam:

Yahoo Mail Move To Inbox


9) Click save:

Yahoo Mail Save Filter


10) Once the filter has been successfully created, you can view it under 'Your Filters':

Yahoo Mail Filter Complete


Whitelisting A Whole Domain

In 'Step 7' a single email address was whitelisted. It's also possible to whitelist all emails associated with a domain.

By adding downtimemonkey.com to the contains field instead of monitor@downtimemonkey.com we would whitelist every email address belonging to downtimemonkey.com.

 

23 Nov 2018

...and how you can too!

We've just spent several days improving the accessibility of the Downtime Monkey website. Last week we carried out an audit of the site with Google's new tool web.dev, which is currently in beta.

The tool returned high scores for three of the four aspects that were tested: performance (i.e. website speed), best practices and SEO (i.e. optimisation for search engines).

This was no surprise as we'd focused heavily on best practice and SEO when developing the site and in January we undertook a very thorough performance audit where we reduced page load time by more than half.

However, the accessibility score was just 48%, so there was plenty of room for improvement.

Here are the scores before:

Accessibility Score 48%

...and after the accessibility improvements were completed:

Accessibility Score 90%

Side note: all of the pages with embedded YouTube videos showed reduced performance scores. This has previously been covered in-depth in this post on improving page speed.

What Is Accessibility?

From Wikipedia:

"Web accessibility is the inclusive practice of ensuring there are no barriers that prevent interaction with, or access to websites, by people with disabilities. When sites are correctly designed, developed and edited, generally all users have equal access to information and functionality."

In practice, this (mostly!) means ensuring that screen-reader software can access and interact with all the content that is in place on a website.

Why Improve Accessibility?

The web is possibly the modern world's greatest tool and good accessibility means that more people have access to this brilliant tool and all the benefits that come from it.

But that is not the only reason to improve accessibility...

If your website is inaccessible you are losing some users, which means that you are losing customers.

Improving accessibility is very straightforward, and we've provided full details of the optimisations that we made so that you can apply them to your own website.

Step 1: Run A Test

Our starting point was a website that had already been developed with accessibility in mind but had never been thoroughly tested.

Testing with web.dev is easy. Simply input the URL of the webpage that you want to test and hit 'run audit'.

The results include an overall score and a list of recommendations for each of the 4 categories. Here we're only concerned with the accessibility category.

Step 2: Act On The Recommendations

Following the recommendations is straightforward but it is time consuming as every page on a website must be tested and corrected individually.

This is because improving accessibility is about making all content visible to screen-readers.

It is easy to forget to add an 'alt tag' to an image or an 'input label' to a form field, and a few omissions can drastically reduce the accessibility of your website.

Here are some improvements that are easily made:

Alt Tags For Images

The error: "Image elements do not have [alt] attributes".

All images must have an 'alt tag' in place. This should consist of a few words that describe the picture so that a screen-reader can read out a description of the image.

For example:

			
<img src="images/blue-bird.jpg" alt="blue bird in forest">
			
		

Labels For Input Fields

The error: "Form elements do not have associated labels".

Most input fields should have an associated 'label' so that screen-readers can read out a description of the input field, letting the user know what to input into the field.

Note that labels are not required for hidden inputs, buttons or 'submit' inputs.

The common inputs that require input labels are:

			
<input type="text">
<input type="password">
<textarea>
<input type="radio">
<input type="checkbox">
<select>
<input type="tel">
			
		

It is best to apply the label 'explicitly', as in the following example. Note that the 'for' attribute should match the 'id' of the input:

			
<label for="name">Name</label>
<input type="text" id="name" value="">
			
		

Invisible Labels For Self-Explanatory Input Fields

The error: "Form elements do not have associated labels".

Sometimes an input field is self-explanatory for sighted users. One example from Downtime Monkey is the 'select your country' dropdown menu - it's obvious from the design of the site that the user needs to select their country. Adding a visible label here would actually decrease user experience.

But screen-readers can't read the design of the site!

The solution is to add a label that is visible to screen-readers but not shown on-screen. This is best done by creating a CSS class for 'screen-readers-only' and applying that to the label.

Here is the HTML:

			
<label for="add_country" class="screen-reader-only">Select Your Country</label>
<select id="add_country" name="add_country" onchange="this.form.submit()">
	<option class="country-placeholder" selected disabled> -- Select your country -- </option>
	<option class="country-option" value="1">Country 1</option>
	<option class="country-option" value="1">Country 1</option>
</select>
			
		

When creating the CSS class it is important not to use 'display: none' or 'visibility: hidden' because screen-readers skip content that is hidden like this.

Instead we positioned the content off-screen. This is the CSS:

			
.screen-readers-only {
	position: absolute !important;
	top: -1000px !important;
	left: -1000px !important;
}
			
		

Aria Labels For Image Links

The error: "Links do not have a discernible name".

Sometimes images are used as links - a common example is a logo that links to the home page of a website.

This poses a problem for screen-reader users as they cannot see the image and no text is in place.

The solution is to add an 'Aria Label' which describes the landing page:

			
<a aria-label="Home" href="index.php">
	<img src="images/downtime-monkey-logo-white.png" alt="downtime monkey logo">
</a>
			
		

Titles For iframes

The error: "frame or iframe elements do not have a title".

The cause of this error was embedded YouTube videos and it was something that we had missed completely.

Embed code supplied by a YouTube video comes without a title. Unfortunately this means that screen-reader users can't tell what the video is about or even that the iframe contains a video!

This can be rectified by adding a 'title' to the iframe:

			
<iframe src="https://www.youtube.com/embed/-SyWKnrECsc?ecver=1" frameborder="0" gesture="media" allowfullscreen title="Video on how to monitor a website"></iframe>
			
		

Allow Users To Scale The Webpage

The error: "user-scalable='no' is used in the meta name='viewport' element or the maximum-scale attribute is less than 5".

We have spent a lot of time ensuring that the website worked well across all screen-sizes from tiny phones to large widescreens. Part of this was making sure that the text is sized appropriately for the screen that it is shown on.

So it was really annoying when some phones (we're looking at you iphone!) override this, apply their own zoom and muck-up the beautiful text sizing!

To prevent this we had used 'user-scalable=no' so that the correct text sizes were seen on iphones.

Unfortunately a side-effect of this was that everyone was prevented from zooming - so partially-sited users who need larger text would be unable to zoom.

This was easily fixed by removing 'user-scalable=no' from the meta viewport (iphone users will just have to live with slightly less perfect text sizing!):

			
<meta name="viewport" content="width=device-width, initial-scale=1.0">
			
		

Aria Labels For Icon Forms

The error: "Form elements do not have associated labels".

Sometimes when an icon is clicked a form is submitted. A common example is when a 'trash icon' is used to submit a form which deletes something.

This makes for a great user-experience for sighted users but there's no text present for a screen-reader to read.

The solution is to add an 'Aria Label' which describes what happens when the icon is selected. Note that in the following example the 'trash icon' is a Font Awesome icon which is supplied by its Unicode value &#xf1f8;

			
<input type="submit" value="&#xf1f8;" name="delete" class="fa blue" title="delete monitor" aria-label="delete monitor">
			
		

Aria Labels For Icons That Show Important Information

In this case there is no error from web.dev because icons only need to be labelled under certain circumstances.

When an icon is present purely to add style there is no need to add a label. For example, on Downtime Monkey when a user's list of monitors is displayed, every website that is up has a tick icon shown beside the word "UP". No extra information is provided by the icon so there is no need for a label.

However, when an icon provides additional information it is important to use an 'Aria Label' so that a screen-reader can provide the information to its user.

An example, again from the user's list of website monitors, is that the bell icon is shown when email alerts for a specific monitor are turned 'on' and the bell-slash icon is shown when email alerts are turned 'off'.

Here's the code for when a monitor has alerts turned on - again, Font Awesome was used for the icon:

			
<a title="email alerts on" aria-label="email alerts on" class="blue no-underline">email: <i class="fa fa-bell"></i></a>
			
		

Aria Labels For Icon Links

The error: "Links do not have a discernible name".

Sometimes an icon is used as a link. For example, a PDF icon is linked to a receipt document in a user's 'order history' so they can easily view and print their order details.

However, screen-readers need text to provide the context of the link.

Again, adding an 'Aria Label' to the link solves this problem.

			
<a href="invoice-pdfs/325.pdf" aria-label="Receipt 325"><i class="fa fa-file-pdf-o"></i></a>
			
		

Button Roles & Aria Labels for Linked Spans

In this case no error was caught by web.dev, however accessibility improvements were made.

In Downtime Monkey, modals are used as an alternative to dropdown menus because they provide better user experience.

The image below shows the modal that is used to display the 'user menu'.

User menu modal

Note that in the top right corner of the modal there is an 'x' which can be clicked on to close the modal.

This x is a span that acts as a button and this is potentially confusing for screen-reader users as it doesn't provide context for the link.

The solution is to add a 'role' to the link to tell screen-readers that it acts as a 'button' and also to add an 'Aria Label' to describe what the button does:

			
<span id="settings-close" role="button" aria-label="close menu" class="modal-close">×</span>
			
		

High Colour Contrast - Not Implemented

The error: "Background and foreground colors do not have a sufficient contrast ratio".

Low-contrast text can be difficult to read for partially sited users and high-contrast text is recommended to make text easier to read for everyone.

Most of the text on the site passed, but some blue, green and orange text failed.

However, implementing new colours is a big job. Simply upping the contrast of the current colours considerably reduced the user experience for most people. The high contrast text was either really bright (so bright that it hurt) or very dark (dark enough that it made it hard to distinguish between small headings and paragraph text).

It became evident that introducing high-contrast colours would involve redesigning the site. We thought long and hard about this and in the end it was decided that the benefits of keeping the colour scheme outweighed the disadvantages, although we may revisit this in the future when we have more time to spend on redesign.

Step 3: Re-run The Test

Running the test after making the changes provides a check to ensure that fixes have been applied correctly.

You should also see the accessibility score improve and congratulate yourself on a job well done :)

Accessibility Score 90%