, , , , ,

Accessible Website Design: Inclusivity through Best Practices and Powerful Tools

Woman designing a website for accessibility

When designing or redesigning your business’ website, you should be trying to make it accessible. Having an accessible website is of practical interest to your business since it allows users with a range of hearing, movement, visual, and cognitive abilities to access your website and become potential customers or clients. It’s also a legal requirement to have an accessible website since January 2021 according to the Accessibility for Ontarians with Disabilities Act (AODA) if your business has over 50 employees. Since website accessibility is so critical, we’ll highlight some of the best practices and tools to help you ensure your business’ website has maximum inclusivity.

How to Know if Your Website Design is Accessible

There are numerous potential concerns for building an accessible website, so how do you ensure your design is inclusive? For that, the World Wide Web Consortium has created a set of international guidelines: the Web Content Accessibility Guidelines (WCAG). These are continuously revised and are currently in version 2.1, with 2.2 to be finished in the coming couple of months. These provide both quick introductions and thorough overviews for inclusive website design and will help you start designing for accessibility and identify any potential concerns.

Best Practices for Building an Inclusive Website

There are many things to consider when building an accessible website design. Here are some of the best practices to build and design an inclusive website:

  1. Start with accessibility in mind. It will be much easier to design a website that meets accessibility standards from the start of a design rather than trying to accommodate these afterwards. 
  2. Make sure content is accessible to users in the ways they can perceive. People have varying levels of ability to perceive by sight and sound, so an inclusive website provides alternatives for accessing content.
    • Use a variety of media, including text, video, audio, and images to convey information. 
    • Audio should be captioned or transcribed for speech or include a description for non-verbal sounds such as music.Include descriptive audio which explains what is happening in a video.
    • Write detailed and descriptive alternative text (alt text) which describes the contents of an image or video in detail.
  3. Be sure to consider text and screen readers when writing any copy or content. Some might not be able to read the text on your website due to their visual or cognitive abilities.
    • For example, don’t include excessive emojis. Screen readers read each of these individually. So a string of 👏👏👏 will be read as “clapping hands emoji clapping hands emoji clapping hands emoji.”
  4. Write with simple language to make it more accessible and inclusive. Often, it’s recommended to write at a “10th-grade reading level.” If more complicated terminology is needed, create a glossary that explains these terms in more simple language.
  5. Make sure your website scales. A scalable website modifies its appearance depending on the screen and text size of the user. This accommodates both the user’s device and personal settings for an accessible experience.
  6. Use spacing, headings, columns, and lists on your pages and blogs. These visually organize your materials into appropriate topics, that allow users to quickly recognize subjects and a page’s organization. Screen readers also use headings to navigate a page, so they are essential for anyone using such tools.
  7. Use sufficient contrast between the background and foreground. Inclusive websites make content easily discernible, and contrast is a huge part of that. For example, black text contrasts more heavily on a white background than a gray font.
  8. Along with contrast, be mindful of colour choice. Visual colour deficiency (often called “color blindness”) is common. While less typical in females, 8% of males in Canada have some form of colour deficiency. 
    • Use high contrast colours or one colour with grayscale. If using multiple colours, ensure they are visually distinguishable for someone who sees those colours less prominently or not at all.
    • Never use colour as the sole way to convey information in a design. For example, in a bar graph, include numbers, text labels, or texture. Someone with red-green colour blindness will have a lot of difficulty differentiating between a red and green bar.

Tools for Designing an Inclusive Website

Since website accessibility is a major concern, there are many tools that help you evaluate its compliance. The World Wide Web Consortium has a list of evaluation tools that includes over 160! These various tools are designed to identify concerns and either suggest changes to improve accessibility or automatically provide them. Here are just a few of Rosewood’s favorites:

AccessiBE

We regularly use AcessiBe when building websites. This AI-powered software continuously scans a website for accessibility concerns and updates pages to be WCAG 2.1 compliant.

They also provide accessScan which will immediately determine if a website is compliant with accessibility standards.

WAVE

WAVE is developed by WebAIM at the University of Utah. They provide comprehensive tools for evaluating and reporting your website’s compliance with WCAG standards. WAVE itself tests one page at a time, but provides a more enterprise-level service through Pope Tech that’s priced according to the number of pages it needs to scan. 

tota11y

tota11y is a free accessibility tool that helps you visualize and understand how assistive technologies interact with your website. The tool was recently deprecated in May 2023 by Khan Academy, so its development has ceased. It won’t stay up to date with the latest accessibility standards and may eventually become dysfunctional on newer websites, but for now it’s still an easy and powerful tool to quickly determine your website’s inclusivity.

Start With Accessibility in Mind

With these tips and tools, you can create a website that both complies with legal standards and is accessible to as many potential customers or clients as possible. That will ensure your business’s website has its greatest reach. Our designers are experts in accessible designs and compliance, so if you want help ensuring your site’s accessibility or want an inclusive redesign, contact our web design team.

/0 Comments/by
, , ,

Designing for Mobile First: How to Optimize Your Website for Mobile Devices

Phone, tablet, and coffee cup sitting on desk.

When (re)designing your website today, whether you’re setting up your brand-new website or because of new accessibility requirements, a new privacy landscape, or simply because it’s time for a refresh, you should consider designing for mobile first. Mobile-first design and optimization have become an industry standard for improving your website’s general accessibility and conversion rate across all devices. We’ll explain what mobile-first design is, why you should prioritize it for your site’s design, and what some of the best practices are for creating a site optimized for mobile devices.

What is Mobile-First Design?

As the name suggests, mobile-first design is a web design ethos that prioritizes functionality and user experience for users on mobile devices. As a result, mobile-first design optimizes a website for conditions of mobile use, such as touch screens, smaller displays, and cellular data connections. That doesn’t mean mobile-first disregards your many desktop visitors. Mobile-first websites are also fully functional and user-friendly for those using a computer or laptop. Mobile optimization instead considers the specifics and potential conditions of mobile use to ensure a site is optimally designed for that experience. If designing desktop-first, a site can quickly become slow or difficult to use on a mobile device. On the other hand, a website optimized for mobile will provide a desktop user with the same snappy and accessible experience. 

Why Mobile Optimization?

The result of mobile optimization design is simply that your website is more widely accessible to both desktop and mobile users. That’s especially important, since if you operate internationally, the majority of your users and potential customers/clients are likely visiting your website with a mobile device. For more than four years, mobile devices have provided the majority of website browsing, and in 2023 it has continued to grow to a worldwide average of 60% of all web browsing. While tablet users only make up another 2%, they also benefit from mobile optimization. That means if you aren’t designing for mobile-first, you’re potentially providing most users, an average 62%, a sub-optimal experience with your business. In Canada, desktop and laptop usage are still higher at 57% of web users, but mobile and tablet still account for a substantial 43%. 

There are other benefits when designing for mobile first. Mobile-optimized sites have been shown to receive 15% more unique clicks, and in 2020 Deloitte found that for every 0.1 second faster that a website loads, there is an 8% improvement in conversion and bounce rates. On the other hand, mobile users are also 5 times faster at giving up on a slowly loading page. If your website is not optimized for mobile, they are more likely to not return or go to a competitor. Lastly, a mobile-first website does better in search results, since platforms like Google prioritize websites designed for mobile in their search results. Overall, many now use phones as their primary device to access websites, which means having a site that functions optimally across various mobile devices is critical for your business.

How to Design for Mobile First

Mobile-first design prioritizes a website’s use and optimization for mobile devices. Thus, it considers certain key aspects of mobile use. Here are some of the key principles of mobile-first design:

Dynamic Scaling

A modern web design standard, dynamic scaling is where a website can accommodate different screen sizes, resolutions, and shapes by adjusting its layout. Mobile devices and tablets have various screen sizes and layouts. It’s impossible to tailor a website for each one. Instead, designing a scaling website accommodates these existing and future devices.

Readable Fonts 

Part of scaling should consider whether your fonts are large enough. Mobile displays often have resolutions that rival monitors, but they are also much smaller. Ensure fonts are easily legible on smaller screens by making them large enough and with high enough contrast. This will also help with various brightness levels and conditions. Remember, many use their phones outside in the bright sun.

Clear, Large Call to Action Buttons (CTA Buttons)

Another important aspect of the mobile and tablet user experience is touch screens. Fingers are convenient, but they also lack the precision of a cursor. If buttons or clickable objects on your website are small, it will be difficult for users to press them, and their fingers will obscure the very thing they are trying to touch. Make them large and easy to press. This also has the benefit of clearly visible CTAs across all devices. These easily pressable buttons will also give a better experience to those using their laptop or monitor’s touch screen as well.

Vertical Design

Desktops typically have a horizontal screen, e.g., 1920px x 1080px. Phones and other mobile devices are typically used with a vertical orientation. As a result, mobile-first websites are designed to function and look pleasing with this vertical layout and expand horizontally to accommodate other displays or a rotated device or tablet.

Reducing Load

Mobile devices and tablets are often used on cellular networks or less stable Wi-Fi connections. Overall, this means that websites can load slower if they have a large amount of data to send over a limited bandwidth. Big images and large pages are typically the culprits. As a result, smaller and compressed images and progressive loading are two standard practices for mobile-first design. If you have videos, it’s better to embed them from a third-party like YouTube, than hosting them yourself. These practices speed up a website and make it more responsive for both mobile and desktop users. 

Keep Optimizing

The need to optimize for mobile reflects how people interact with websites, and design practices continue to change and develop. Optimization is a constant process that should be a regular part of your website’s maintenance. Staying on top of best practices allows your business to provide the optimal experience for your potential customers. If you feel it’s time for a mobile-first redesign or want help optimizing your website for mobile users, contact Rosewood’s expert web design team.

/0 Comments/by
, , , , , ,

Impress with an Effective Homepage

Someone building an effective homepage on their laptop with stats.

Your website’s homepage plays an important role. It’s the first impression of your business’ digital space. It also doesn’t have a lot of time to provide that introduction. The average user stays on a webpage for only 5.94 seconds and they judge it in only 1/20th of a second. As a result, your homepage needs to be purposefully designed to create a proper impression quickly. For that, it needs to look good, communicate effectively, and motivate your visitor to stay and use your site. Our website design team has the first steps so you can start building that impressive and effective homepage. 

Who Are You?

Your homepage should clearly and concisely present what your business is and does. Name and display your main services or top products as the central thing visitors first see as they land on your homepage. They will immediately understand your business and see its products/services. This should also come with a short description that identifies your business’ name and what it does. First-time visitors to your site will not be familiar with your business. Use this opportunity to provide that information and show off your value proposition.

Navigable

Along with explaining who you are and what you can provide your visitors, you want to make it immediately clear how they can navigate your site for more information or products. Link the central images and descriptions to the appropriate dedicated pages so visitors can access them. The top should include a navigation bar with clear categories and page titles, so users know where to look and find what they are interested in. In addition to being a directional aid throughout your website, the navigation bar will quickly impress any visitor with the contents of your website, allowing them to understand its contents and services more quickly. Furthermore, your homepage will regularly be the return point for browsing. This easy navigation will ensure customers can readily move to the next page that interests them.

Calls To Action

Another aid to navigation that also helps keep a visitor interested is a call to action (CTA). Common examples are a prominent button in the middle of the page or in the navigation bar with a unique, contrasting colour. These will encourage your visitor to go beyond the homepage and guide them through your website’s main pages. The most common examples are “Shop Now”, “Learn More”, “Contact Us”, “Book a Consultation”, or “Request a Quote”. These short, simple instructions will also help a visitor immediately contextualize the products/services your website provides.

Newsletter or Contact Form

Presenting your visitor with a pop-up of a newsletter signup or contact form is an additional call to action that will keep your visitor connected to your website. These allow customers to learn more about your business, stay connected and return, and might include a discount as an incentive to purchase from you. 

Do not present this pop-up right away. Allow your customers to get their impression of your homepage and maybe browse a bit before prompting them with signing up to their newsletter or suggesting they provide contact information. An immediate popup will prevent them from seeing your informative homepage and come off as pushy. Why would they sign up for a newsletter or want to contact you before they know who you are?

Less is Better

Not overwhelming your visitor is essential. Minimalism is a hallmark for designing your website’s homepage. A homepage with too much text, images, video, or CTAs will only confuse or frustrate your visitors. Just like when first introducing yourself, stick to the essentials and be concise for a good first impression. Provide a single large image, a short blurb, and one CTA that shows the essentials of your business. Not every visitor will have the same interests about your business, so it is best to provide the basics and have them navigate deeper in for what they want. Additional details should be placed in their own dedicated pages that visitors can easily access through the navigation bar or calls to action. 

Optimized for Multiple Devices aka Responsive

A proper first impression means your website needs to function properly on various devices, particularly computers and mobile devices. As of this month, over 60% of web traffic comes from mobile devices. Your homepage needs to inform your visitor, allow direct navigation, and provide direction easily and elegantly on all of those different devices. If a visitor arrives on your homepage and not everything is visible or navigation is cumbersome or impossible, they will be left with a poor impression of your business and leave.

Adaptable

Your homepage should adapt to how visitors use and browse your website. Monitor website traffic to determine where users are going. If a specific service or product page is more popular, highlight it more immediately. This will sooner impress future visitors with the information they want. Remember you have less than 6 seconds. For example, if customers typically browse your new product page, it is a good strategy to link the “Shop Now” CTA to that page. Running user experience (UX) tests of your homepage and website will help you discover such potential site traffic patterns as well as unintended obstacles. Ever heard of heatmapping? Ask us about it!

Home is Where the Heart Is

Your homepage is the heart of your website. It introduces your business, directs visitors, and acts as the regular return point for browsing. It also does not have a lot of time to impress your visitors to stay and start exploring the deeper chambers of your website. These essentials will help guide you to create a homepage that gives the proper impression and welcomes your visitors. If you are looking to redesign or update your homepage to give your business the proper introduction it deserves, contact Rosewood’s website design team.  

/0 Comments/by