Blog

Did You Know:

Businesses & non-profit organizations with 50 or more employees should have made their website and web content accessible by January 1st, 2021?

It’s not too late! Make your website AODA compliant.

Visit aodawebsites.ca! 

A great home page layout makes the web page more interesting to look at because the viewer’s eyes will want to dance around in the page. It’s definitely easy to get lost on a home page and we want your viewers to enjoy the experience.

Just Breathe

People underestimate how important it is to give your layout white-space. By giving your users/viewers time to digest each section while clearly separating them at the same time, allows them to really take it all in; here are some tips to keep in mind:

• White-space emphasizes how impressive a photo is and gives it intrigue.
• Use the right amount of white-space:
  • Too much: the user will have to scroll through or “get stuck at” empty space.
  • Too little: the user might start feeling claustrophobic if things are squished together.
• Our website as an example, the Home Banner:
  • On the left-side is a big photo that showcases one of our clients’ website on a laptop, smartphone and tablet. There’s a good amount of space between it and REM’s logo. Never over-crowd logos, they need space all around!
  • Notice how the white space makes it really easy to read the headline, which is the 1st heading.

Layouts

Make your layouts dynamic, symmetrical and appropriately proportional. This will show that you as a company are structured, organized and thoughtful. Your layout will determine the home page’s information hierarchy. Here are some ways to accomplish this:

• Vary your layout throughout; use columns to put multiple items in a row.
• Use a grid. In our website’s case (and in most of our clients’ website’s case), the grid is based on 12 columns. Notice how we use 3 columns in some areas such as the buttons below the banner, the featured portfolio and the blog teaser.
• Maximize the use of your browser’s/device’s screen size, while still having proper white-space. Using our website as the example, notice how the angled grey background, large photos and Google Map take up the full width of the browser.

Headings

We often talk about headings, especially when it comes to having AODA compliant websites. On the home page, it keeps your viewers engaged and when sized correctly the end result is a sequential experience that your viewers will subtly perceive. Some things to keep in mind:

• Heading 1: biggest, stands out and as I’ve mentioned, the very first thing at the top that clearly states what we provide: web design and development. Important and useful for SEO.
• Use the correct sequence for SEO and AODA purposes (For more information, read this blog post about “AODA – Colour Contrast and Headings”)
• Headings in a home page are very useful for separating sections.

For our website, the headings start off the following areas:

• “We Provide Web Design & Development” introduces the website and attracts, using big imagery.
• “We build exceptional websites…” some vital text for SEO and to give users more of an idea of who we are, who we serve and what we do.
• “Some of our Featured Work” with highlighted projects.
• “Blog” teasers of our blog posts.

As you can see in our three-part series there is a lot that goes into designing your home page – it’s the most important page and we truly want to make sure that we support you and guide you through the process. It is a lot to stay on top of, and our designers are here to help organize and guide you through the process.

We want you to succeed; we sincerely love it when you do! So, if you’re looking to change up your existing website or looking to design a new one, feel free to reach out to us! We’re here to help.

Now that we have gone over the foundational aspects of a home page, we can dabble a bit into Branding. Your lead Graphic Designer will help you establish the overall look and feel during the design process. It’s the most fun part in my opinion because this is where you truly get to express who you are through emotions that your viewers feel when they view your home page! When we talk about look and feel we are referring to the colours and fonts – one key thing to remember is consistency.

Colour Us Simple

Using our website as the example, our primary colours are orange and dark grey. There are shades of much lighter grey throughout to complement the imagery and the primary colours. Notice that orange is used sparingly as it’s a very strong, prominent colour which naturally draws the eye. Hence, it’s only used for important elements such as action buttons that we really want users to click on and to highlight certain headings. The colours are not only on-point with branding, but they’re also AODA compliant.

It Feels Like Home

“Feel” aka overall tone is something you do not want to miss when it comes to your home page. It’s important to think about what you are trying to convey. Is your company approachable, friendly, laid-back, corporate, luxurious, natural, etc.? As our website as the example, we convey that:

• We’re technologically savvy by showing current devices (laptop, smartphone, tablet, monitor). And our website is responsive and looks great on every browser/device.
• We’re fresh and creative using modern fonts, angled backgrounds and shapes. Our creativity is also shown in the work we’ve done for our clients.
• We’re reputable; our portfolio shows we’ve worked with well-known companies.

Although it sounds quite simple, determining the look and feel for your website and home page is a lot harder than it sounds. Our designers are here to help guide you through the process. As we build our relationship with you throughout the process, we’ll be sure to nail it down.

If you’re thinking it may be time for a refresh let us know; we would be happy to give you some ideas!

Our first AODA Webinar last week was a huge success! Thanks very much to everyone that attended!

Join us for the next free AODA webinar on Tuesday, December 8th at 9:30am.

Our AODA (Accessibility for Ontarians with Disabilities Act) certified Graphic Designers: Sean S. and Christine V. have put together an interactive presentation discussing what it is, how it affects you and your business, and its design factors. There will also be helpful resources to help make your website complaint.

This is a virtual event in Zoom hosted by The Cambridge Chamber of Commerce; please sign up in advance to get the link and details before the event.

Register to the event now by going to The Chamber’s event page.

Stay tuned for even more future webinar dates! For useful info and facts about AODA visit aodawebsites.ca.

Join us on Thursday, November 19th at 9:30am for our free, AODA webinar!

Our AODA (Accessibility for Ontarians with Disabilities Act) certified Graphic Designers: Sean Sanderson and Christine Votruba have put together an engaging webinar that explains what it is, how it affects your business and its design factors with resources to help make your website complaint.

Hosted by The Cambridge Chamber of Commerce, the virtual event will be held through Zoom; please register in advance so that we can send you the link and details prior to the event.

To register visit The Chamber’s event page.

Stay tuned for future webinar dates! For more information visit aodawebsites.ca.

Thoughtfully used pictures on websites go a long way. Not only are they used for decorative purposes and to spruce up the look and feel of your website. When strategically chosen and placed, images and graphics become a source of understanding the information presented on your website.

When it comes to AODA and the WCAG 2.0 it is imperative that images, videos and any content that isn’t text have some form of alternative text (Alt-Text) allowing them to be accessible to those with visual impairments. When using a screen-reader Alt Text become important so that computer programs can recognize and correctly describe images on a web page. When our designers and developers create AODA websites a significant amount of work goes into ensuring your images are correctly placed and have suitable Alt Texts attached in the code to ensure compliance.

When choosing images for your websites, our designers are sure to follow W3C’s Image Classification rules to ensure Alt Texts are assigned according to the images placed on your website. Some of the classifications are as follows:

• Informative: Used to represent concepts or information

• Decorative: Used to enhance the aesthetic and do not convey information

• Functional: Used to represent functionality on the page

• Complex: Used to simplify the representation of complex data

Our Customer Success Team will ensure that moving forward when you’re updating your websites, you are prepared to make use of our tools to easily update/add Alt Text to any images that you place on your website moving forward. This way you’re ensuring that images are accessible to those with visual impairments or those with other various disabilities.

When designing your website, we enjoy being adventurous with our clients, especially when it comes to the colours you choose. Your website truly is your brand, an online reference to who you are and it’s extremely important that your design and colour scheme match who you are and what you stand for. When designing websites that need to be AODA compliant our designers and developers need to go the extra mile to ensure the colours you choose are both representative of you and fall within the compliance parameters of WCAG 2.0. This could be a tricky feat and here is why.

Colour Contrast

People with colour deficiencies and low vision may have difficulties viewing your website depending on the colours that you use. It is incredibly important that the contrast ratios comply with the requirements allowing people to receive information from your website visually. When choosing colours and fonts our designers and developers must following the following regulations:

• Contrast– minimum ratio of 4.5:1

• Bold & 14pt or 18pt + colour contrast ratio of 3:1

• Add text labels to colour pickers

• Use texture to complement colour information

• Text on images should always use as high contrast as possible

• Incidental/Decorative items such as logos are exempt

• Colour Contrast Checkers: Web Aim Color Checker & CCA

Visual Hierarchy

Another very important aspect of AODA compliance is the ability to visually organize design elements in order of importance. This becomes mainly apparent when someone is using a device or screen reader to navigate content and information presented on a web page – typically this is done by tabbing on a specific type of keyboard.

In order for devices to navigate the content accordingly, headings must be strategically placed to allow a reader to comprehend the content, our designers and developers ensure the information is presented in an organized manner by making use of the correct Headings on a page:

• Heading 1 – Only to be used once on a page

• Heading 2 – Must be at least 1-point size smaller and follow an H1. Can have different styles

• Heading 3 – Again must be smaller than H2. Is to be used as a subheading for H2 only

• Heading 4 – must be smaller than H3. Is to be used as a subheading for H3 only and so on

When adding content to your website or designing the layout, it is extremely important to keep these regulations in mind. If you have any more question in regards to AODA compliance, or the information from this blog, please reach out to us!

Now that we have established the importance of being AODA compliant in a previous blog. We will touch on some of the pieces that make your website compliant. First, we need to understand the importance of compliance, in the world of digital marketing we need to remind ourselves the larger the audience we reach the better it is for our businesses. Currently 15% of Ontarians have a disability, that is 1 in 7 Canadians above the age of 15, 80% of these Canadians reported to use an assistive device. This is potentially a large untapped market for your business if your website is not AODA compliant.

Providing you with a laundry list of updates our designers and developers do when creating compliant sites would be far too granular. We will highlight main challenges and some best practices we follow to ensure your website is geared to all Canadians, regardless of their abilities. After rigorous training, our senior designers learned about the AODA’s four core principles and the twelve corresponding Website Content Accessibility Guidelines (WCAG). They are as follows:

Think POUR:

Be Perceivable - All content on a website should be distinguishable

• All non-text content should have alternatives

• Video content should have alternatives

• Create content that can be easily be displayed in multiple formats

• The level of contrast between foreground and background should be distinguishable

Be Operable – All content should be useable

• Website functionality should be keyboard accessible

• Provide users flexible time to read and use content

• Avoid animated flashes and blinking

• Provide tools for wayfinding

Be Understandable – All content should be comprehensible

• Provide readable and understandable content

• Design functions in predictable ways

• Provide tools to avoid and correct mistakes

Be Robust – All content can be interpreted by a wide variety of users

• Maximize compatibility with all potential users

By following the above core principles and their guidelines, our designers and developers analyze existing websites and make recommendations to our clients, after the design is complete our developers build the updated site and conduct multi-step testing to ensure your website passes all AODA requirements. Once the testing is complete your customer success manager completes a final test and reviews the updates with you.

Aside from the workflow and the guidelines we must follow to keep our customers safe from penalties, we believe we are doing our part to build an inclusive community here in Ontario. A community that abides by the law, helps our customers build successful businesses and most importantly advocate for those who may find it difficult to do so for themselves.

As the summer winds down and the cooler air creeps upon us we tend to reflect on the year that we’ve had and prepare for the year ahead of us. With the pandemic (whose name we choose not to speak), companies have beefed up their online presence. Websites have been redesigned, new functionality has been implemented to suit the ever-changing world we live in now, businesses have really stepped up their game and we love that!

With all the new changes in the world that businesses were forced to adapt to, there may be one last thing on the list… one very important checkmark to give you a head start in the new year. The Accessibility for Ontarians with Disabilities Act, 2005 (AODA) became law on June 13, 2005 – its purpose is inclusivity. Our goal collectively is to make Ontario accessible to people with disabilities by 2025 and we mean it! If you have a business with 50+ employees and a website, as of January 2021 your company and executives can be fined up to $100,000 each day that your website is not AODA compliant.

With that being said, the team at REM Web Solutions has also beefed up our game, we have implemented our internal policies and procedures to ensure that we are compliant. We have also invested in our designers to receive top training on how to design and build AODA compliant websites to better serve our customers who fall into this category.

If you are a business with 50+ employees and your website is not AODA compliant – or you simply don’t know, please reach out to us as soon as possible. We are armed to educate, help and most importantly provide you with services you need to be law abiding business owners.