Building an accessible and responsive SmartHub®

This guide highlights best practices and useful tips for clients wishing to build great layouts on SmartHub®. 

In this article, we'll take a closer look at:

• Accessibility – Why it's important and how to make sure your layout is more accessible.

• Responsiveness – Build layouts that send the right message and look good both on desktop and mobile.

• Self-sustainability – Make it simple for layouts to be easily updated by anyone, regardless of design capabilities.

Why accessibility matters

Accessibility affects many people, and in ways that aren’t always obvious. No matter who the target audience, people with accessibility needs are already within it. And the older the audience, the greater those needs become.

Solve for one, extend to many

Everyone has abilities and limits to those abilities. Designing for people with permanent disabilities actually results in designs that benefit people universally.

When developing our solutions, we always make sure they are accessible to the widest possible audience. Designers, Developers, and Quality Assurance Specialists make sure our products meet accessibility standards and enable assistive technologies. 

SmartHub® Layouts is an extremely flexible product, giving our clients the tools and freedom to make their platforms fully align with their unique company culture and branding.

Giving such freedom to our clients, means they're in charge of making sure the content added is accessible. That' why we made this guide to provide examples of what good accessibility and less good accessibility looks like, as well as to share useful tips and tricks.

Tips for making a SmartHub Layout accessible

• Avoid embedding text in images. Although it may seem better to embed text in an image to have company font, this is not good for accessibility because:

  • The text could end up blurry.

  • Screen readers won’t be able to read that copy. They will simply consider this as an image.

• Use good color contrasts and a readable font size.

• Describe images 
  When you hover your mouse over an image on a website, the little words that pop up are called alt tags. For someone who has a visual impairment and uses a screen reader (a software program that reads text on a website out loud), the alt tags are read aloud and are the only way a user knows what the image is.

  Take alt tags seriously and use them as an opportunity to describe the image accurately and succinctly. If it’s a picture of a person, write out the person’s name. If it’s an object, use a couple of words to describe it. If it’s not relevant to the content though and is just being used as a decoration, leave the alt tag blank.

  
  
  

• Provide transcripts for videos.

• Write descriptive links and a call-to-action. This will ensure we send a clear message and stimulus for the end user. A bad call-to-action is “Click here”. Good call-to-actions are more descriptive and imply what will happen if they are clicked. Here are a few examples: 

  • “Recognize a colleague”.

  • “Send an ecard”.

  • “Apply now”.

  • “See offers”.

• Align text to the left and keep a consistent layout, because we read from left to right. Use bold, italics, and CAPS only when they are really needed. Keep content short, clear and simple. This will make the text easier to read by people with dyslexia, and… people who don’t have dyslexia. It is a win-win situation.

Pick sensible colors

Picking sensible colors is useful for a website of any kind. Avoid using garish colors, and be wary of using yellow, blue and green close to one another to help color-blind users. Also avoid picking colors that don’t contrast enough against each other – like light grey text on a white background, or white text on a yellow background (as below) – to help even more. 

Lastly, never use color as the only means of conveying information. Always combine it with another property, like shape and size, to enable the element to be distinguished from a group. 

Tips

• If there's any uncertainty about the colors used, stick to simple black text on a white background, as it's readable for most audiences.

Think about heading structure and break text into clear paragraphs

This is helpful for any audience but is imperative for elderly audiences or those with learning disabilities. If there's a lot of text on a page, break it into smaller paragraphs. If headings are being added to the text, make sure they are in a logical order as the reader progresses down the page. 

Tips

• Use simple, straightforward language in the active voice. Check out this guide for more information.
• Don’t put big important headings at the bottom of the content.

Make it mobile-friendly 

Even if a workforce is predominantly working on desktop computers or laptops, we can be sure they'll also log in from their mobile while on-the-go.

Here are some tips to make sure the layout looks good on smaller devices:

• Always check how the layout looks on smaller screens.
  Tip: Resize the browser window to see how it would look on tablet and smartphone.

• Use more “Image & Text” and “Icon & Text” tiles instead of “Background image” tiles.

  • “Image & Text” and “Icon & Text” tiles in SmartHub® Layouts keep the image and text separate, so the system keeps a copy in the font size that will make it easily readable

  • The “Background image” tile scales the font size together with the image. This is to avoid text being unreadable on certain parts of the background.

  • If using “Background image”, make sure to choose a bigger font size and check how the tile looks on mobiles:

    • For 1 column width tiles (1x1 and 1x2 tiles), use a minimum font size of 14px, or optimally use 16px.

    • For 2 column width tiles (2x1 and 2x2 tiles), use a minimum font size 18-20px, or optimally use 20-22px.

• We recommend our clients refrain from using tiles that are 3 or 4 columns wide. These become very small on mobile devices.

  • If clients still decide to use wide tiles, make sure their height is at least 2 rows and both the image and the text are very big.

• "Please keep in mind that the top navigation bar does not appear in the Connect+ mobile app. Our recommendation is to ensure that all content can be intuitively navigated to via SmartHub tiles. The Navigation Bar should be used as a 'shortcut' to help web users get to where they need to go."
• Make things easily editable if the layout is likely to change often

Layouts using “Background image” tiles designed by professional designers look great, but they may not be right if the hub layout is going to change its look regularly, as it would require design time to change it each time.

It's possible for clients to produce a similar effect to a designed banner thanks to software such as PowerPoint, Keynote or any graphic design software, but still, the images will need to be exported and uploaded to the new layout. 

Instead, to make things much simpler and easier to edit, we advise clients use tiles such as “Image & Text” and “Icon & Text”. With these, clients can edit the copy straight away and will achieve visually great results on any screen size. 

Making it simple means that layouts can be easily updated by anyone, regardless of their design capabilities!