Accessible and inclusive website design

It's not a gimmick or a trend, it's just really good design!



Let's start with what it is:

What is accessible design?


Accessible design basically means creating usable, functional and easy-to-use sites that meet the needs of as many individuals as possible. Accessible design is more about creating tags and alt-text to describe images on a web page for visually-impaired users to still experience the content to the fullest capacity. By tagging your images (saving a description for the image) that means screen readers will help users better understand the full message behind the information on the page.


Users of screen readers aren't just the visually-impaired however. It's not a small minority group of users, it's actually bigger than that: tagged images improve the user experience for colour-blind people, the cognitive-impaired, even people who just prefer to use a screen reader while they're doing something else. Tagging an image also improves viewing images within a gallery and pop up window - by naming an image rather than keeping the default name (IMG342.jpg for example) means that users can view a more detailed description and that will enhance their experience.


If you would like to read further on this topic I've found these interesting articles:


What is inclusive design?


Inclusive design and Accessible design are often interchangeable - at it's most simple description, It means designing websites, applications, browsers, tools, and every other digital product keeping in mind everyone who is permanently or temporarily disabled. It also means taking into consideration other cultures and races to 'include' as large an audience as possible, which can only be a good thing for your business, especially if you're considering growing your reach to a global audience.


Added benefits of accessible and inclusive website design


  • As well as enabling those who are visually-impaired through their assistive technologies like screen readers to browse your site. By adding alt text to your images you can also benefit your website’s SEO (Search Engine Optimisation). It can improve your Google rankings and help your customers to find you

  • Adds to the overall professionalism of the website

  • Shows the added attention given which adds to the impression of customer care and consideration

How is it done?


In Wix it's very simple and it's probably done in a very similar way within your own web platform. Have a look at the gallery and follow these steps to add alt-text to your images:

  1. Select the image you want to tag

  2. Click the Settings cog

  3. The Image Settings window will open

  4. Change the name of the image from the default text to a name with more description, in this example I've changed the name to 'Langford Estate Agents Business Card Front'

  5. Remember to add a tooltip to help users of screenreader know if the image has an action - if the image has a link to another page then the tooltip can be: 'Click to go to a page with xxx promotion'. In this example I've added the feature that when clicked, the image opens up in a pop out box, I've added the tooltip: 'Click to view larger' - this way the user knows that there is an activity associated with this particular image.

  6. That's it! close the window

  7. Save

  8. Publish

  9. And the image is tagged. If there is an opportunity to add your SEO words then do so, it all helps to get you found easier and enhances your site browsers experience


Top Tips:

  • If you don't have the time to alt-tag every image then consider the default and save the image with a better description then it's already done - so instead of saving it as IMG342.jpg, save it as LangfordEstatesBCard.jpg it gets you one step closer to identifying the image the name saved then becomes the default and will allow you more time to rename the image later on while still making sense to users

  • Remember when naming images for web you can't have spaces between the words, replace all the spaces with dashes or get rid of them altogether: Langford-Estates-B-Card.jpg

  • Images also need to be saved as RGB for websites otherwise they can't be viewed on this platform

  • If you have the ability to reduce the file size of the image, this will speed up your upload time on your website and make your whole website 'lighter' which means it's quicker to navigate


Hows your website working for you? Are you getting traffic, does it reflect your business in a professional way? Is it simple and organised in such a way that it's easy for users to navigate?


If you would like Mystery Hare review your website and recommend some simple improvements please email me at caroline@mysteryhare.com if you're thinking of updating your website, prices start at £600 and your site will be created using the Wix platform as it's simple and intuitive for you to use when the site is passed over to you to manage. You'll have full control over your website and won't be 'held to ransom' by having to rely on a developer to make regular changes for you, reducing your expenses. Feel free to contact me here >


#branding #smallbusiness #website #selfemployed #graphicdesign #smallbusinessowner

8 views

ILLUSTRATION    |    GRAPHIC DESIGN    |    ABOUT   |    BLOG    |    CONTACT   |    TERMS & CONDITIONS   |    FAQs   |    THE PROCESS

© 2020 Mystery Hare   |   Website designed by Mystery Hare with Wix