Posted: 18th August 2020 by Matt Commons
It's great when you see a new and improved website take shape and the journey is finally over! But if you’re not a developer, how do you know the website is built correctly?
When you take a car to get serviced, you’re trusting the mechanic to do all the little things right. But unless you have a deep understanding of how cars work, you can’t be sure they haven’t cut corners. It’s the same with websites. Unless you understand how websites work, how do you know the developer has made your website accessible, error-free, fast and easy to use? In other words, how do you know if your website’s functionality matches its great new looks?
The answer is that you test, test and then test again.
Ideally you should do this before you launch the site, but sometimes you may have launched your site without realising there is more to check than just whether the links work and the forms submit. You also need to check if your site works for everyone, including people with disability. Does your website work in all modern browsers and on all devices? Will people find your website easy to navigate?
If you’ve launched your site without doing all these tests, don’t panic! You are about to learn how to use some free tools to identify whether you have any of these problems.
Here are some simple tests you can use to help assess parts of your website you’ve never considered.
Accessibility Testing
Accessibility is about making your website as user friendly and inclusive as possible. People with disability may see or use websites in particular ways that need to be taken into account. Dismissing the needs of people with disability is bad practice, but happens all too often. Making your site accessible also makes it more usable for everyone. Learn more from this talk from Confab by Sarah Richards
Web Content Accessibility Guidelines (WCAG) were developed to make content accessible to a wide range of people with disability.
All Australian Government websites must meet a minimum of WCAG 2.0 Level AA compliance and your site should too!
You don’t have to have a deep understanding of how accessibility on the web works to address some of the issues your website might have.
Accessibility testing tools can help you identify issues you would never notice. Accessibility should always be reviewed and refined once your site is launched.
Wave (web accessibility evaluation tool) - Ideal for non-developers
This free tool runs through the website page you want to review and highlights any accessibility issues. These can range from incorrect HTML markup to colour contrast issues, even something as simple as missing alt text on an image. (Alternative text or alt text gives a description of an image for people who can’t see it.) These types of issues can impact the overall user experience for different kinds of users.
Wave visually identifies the page elements that require attention so you can see exactly where your issues are located. This is a great tool to make a start in testing for accessibility issues if you don’t know what could cause problems.
Visit the WAVE Web Accessibility Evaluation Tool
Browser extensions are also available for Google Chrome and Firefox.
Whatever tool you decide to use, make sure you check how your website looks on mobile. This will help you assess it for usability as well as accessibility. For example, responsive websites reduce the size of text as the width of the page is reduced. Designers can often push the boundaries of what passes WCAG 2.0 AA level accessibility with regards to colour contrast that is not considered when the size of fonts are reduced at a different screen size.
This accessibility tool will only flag contrast issues if it detects them at the window size you are using to test.
So, for example, an element’s contrast ratio might pass AA for large text (above 18pt or bold above 14pt). But the mobile rendering of the site with a reduced font size will be ignored when testing at desktop size. This would mean the element might be bold and 14pt in font size in theory, but on mobile the font size might be reduced to 10pt. This would mean it no longer passes AA level, and would be inaccessible for some users.
It is important to note that accessibility checking tools are not perfect. They don’t always identify every problem, but they will help improve your overall website experience for users you have not considered. Also, these tools only check technical aspects of accessibility: if you're creating content you need to know how to make your content accessible.
For more detailed accessibility reporting, you can hire an organisation that specialises in accessibility audits.
The Australian Government provides a guide to accessibility and inclusivity
Look at your website on different devices
Many people forget to look at websites across all devices. Just clicking through links on your phone can help discover issues you have overlooked because you are so focused on how the website looks on your computer screen. A webform on your homepage could be overlapping your mobile menu, for example, making the menu unusable when expanded.
Check for HTML validation
Validating your HTML is comparing your website’s code to standards set by the World Wide Web Consortium (W3C), the main international standards organization for the web. By validating your HTML, you’re ensuring the website works across different browsers correctly and preventing poor code issues that detract from the user experience.
HTML is a language, and validating it is just like giving your homework to your English teacher to correct.
Run this validation test and contact your devs outlining your concerns from the validator’s results to make the appropriate fixes.
PageSpeed Insights
Page speed refers to how long it takes a page to load on a user’s device. Fast page speed not only improves your SEO ranking but also helps improve the user experience. A slow page load could see your audience abandon your site or could even cost you a conversion.
PageSpeed Insights is a free service provided by Google that provides reports on page performance for mobile and desktop devices. It analyses a page to give you a score and provide suggestions on how the page can be improved.
Your page could be scored as 0 to 49 (red), 50 to 89 (yellow), 90 to 100 (green). In other words... bad, okay, great!
If your score is below 89 it might be in your best interests to discuss the issues and suggestions provided by this tool with your developer.
Visit PageSpeed Insights by Google
Usability testing
If you’re launching a new website, your layout and navigation have probably changed a lot. It’s great to try new things when it comes to your content, but how do we know if it truly works?
Test your navigation with a small group of different users who might want to use your website.
Ask your test users to try doing some specific tasks you want to make sure people can complete as you intended. While testing, bite your tongue even if the user can’t complete your set tasks without your help. After all, your target audience doesn’t have you there to help them!
Watching these tests can open your eyes to how people use and perceive websites and how they work. Some people don’t even think to scroll on the home page! I know what you are thinking… “that’s not true”. I also once thought that until I saw it happen over and over again during usability testing. That “Scroll down” button you see on some websites… that might not be there for you but for others who definitely need it!
Rocket Surgery Made Easy by Steve Krug is a great resource to learn more about usability testing.
Easter egg hunts
One last idea to try if your website isn’t publicly launched yet: place an intentional content error on your website. Once you have this little ‘Easter egg’ in place, send out an email to staff in your organisation asking them to find the intentional error on your website. Don’t give details about what the error might be. You’ll be surprised at the errors they might discover.
