Basic Accessibility and Universal Design List

Enjoy this handy basic accessibility and universal design list.

Make your website more effective and accessible by following these basics based on universal design. They are simple to implement and will not change the aesthetics of your site. You may even want to print this for yourself or forward this basic accessibility and universal design list to your graphic designer for reference.

Be Conscious of Color Selection
Color is an important tool for highlighting the main message of your site, as well as its overall design. It’s not recommended that color be used too frequently when it comes to distinguishing different elements or creating differences between alternative meanings. There are a few reasons for this. One is that about 8.5% of the world’s population is affected by a form of colorblindness. The other reason is that many colors aren’t easily detected by screen readers, making them ineffective for some devices.

color blind When it comes to text, avoid using contrasting differences that may be too low, for example using a greyscale text against a white, or very light, background. Again it could potentially affect those with visual issues. To ensure the readability of the contrast, print out a test page of your webpage in grayscale. You can immediately see if readability will be easy for your viewers. It is strongly suggested to keep a lighter background with darker text.

Easy to Read Fonts
There are three fonts that are generally used for websites. They are used because they are universal in that they are very easy to read. Here are some principles for proper font use:

  • Typically, it’s best to stick to serif fonts and sans serif fonts. Fancy, scrolled fonts are fun and can look nice, but can potentially cause readability issues.
    • Serif Fonts – Book Antiqua, Georgia, Times New Roman
    • Sans Serif Fonts – Arial, Calibri, Tahoma, Trebuchet, Verdana
  • Out of the font options, Verdana is the most commonly used. It’s widely spaced, and there’s a distinct difference between its upper case ‘I’ and lower ‘L’. The second most widely used font is Georgia.
  • When using too many fonts, the outcome is a hard-to-read visual layout. Stick to using one or two font options, if any.
  • It’s almost never a good idea to use text that flashes or moves. It becomes distracting and can take away from your site’s overall message.

Creating a Clear Page Layout
Each webpage or document should offer a clear, to-the-point outline of what information is being provided. You can then use different heading styles to separate and strengthen each point. Available in Word and HTML, using Paragraph, Heading 1, etc. styles make it easy for the reader to go to each section they’re interested in. Making fonts bold to differentiate is a common practice as well, but isn’t as easy to read.

responsive-design-layoutKeep your content concise, and easy to read. It’s good practice to link out to longer pages that contain more information rather than making the reader spend too much time scrolling through pages. There are exceptions to the rule, of course. Our recommendation is to provide jump-links to let the user navigate to the section they need.

Because there could potentially be outbound links on your page, do not underline any wording that isn’t a working link. Typically, anything underlined is a link. Users will be frustrated if they expect to be taken to another page because of underlined dialogue that isn’t a link.

When using lists of any kind, it’s best to create a numbered or bulleted list. Numbered lists are used for ordering information in importance or progression while bulleted lists can be a free for all.

Effectively Using Illustrations & Graphics
Graphics, pictures, and illustrations are a great tool for getting major points across on websites, but the rule of ‘less is more’ should be applied when planning use and layout. Make sure your imagery serves a purpose and supplements your text and message, and doesn’t just clutter and confuse. If illustrations have been laid out properly, and not overused, they can act as a very important learning tool for those who may have cognitive and learning disabilities. Use them wisely!

Adding Alternative Text to Imagery
Alt text, as it’s commonly known in the web world, allows search engines to determine how legitimate your site’s content and imagery is. It also provides those operating on multiple search engines to read an explanation of the image if no image is offered for them. Here are some tips for creating optimal alt text:

  • First and foremost, if the visual shows text already, use it as the alt text.
  • Refrain from stating that it’s ‘an image’ or ‘picture of’. It’s obviously an image.
  • Keep the language succinct, to the point.
  • Don’t let the information become redundant by stating what’s already clear in your content.
  • When using an informational image, like a pie chart or graph, provide all the information.
  • For decorative and filler imagery, use text like ‘N/A’ or ‘non-essential’ to let readers know it’s unimportant. There’s also the option of using the HTML code alt=” “.

Smart Link & Button Labeling
Links and buttons are the key to navigating the reader to where they need and want to go. If your tabs and links are vague, hard to find, or labeled incorrectly, it’s more than likely the user will find another website suited to their needs. Make sure your links offer enough information. Avoid using terms such as ‘More’ or ‘Click Here’ to guide your user. Rather, use a chunk of words to navigate links. For example, ‘Learn more about dental hygiene’. Color and contrast are important when creating tabs and buttons as well. Again, don’t use light text on a dark background, avoid too many color options, and make sure the button shapes are in line with your site’s overall directive.

How to Caption Video & Audio Media
Captioning is necessary when using any form of video or audio. It’s useful for those with hearing impairments as well as those who might not be familiar with the language. A transcript can be used as a substitute for video as well.

Audio media, like podcasts, for example, require a transcript. They are searchable, printable, and allow users to have access to your content without needing to ‘search’ through audio.

Anytime there are live forums or discussions available, it’s possible to provide captioning done in real-time, or create transcripts from taped talks.

Accessibility For All

HTML 5 Accessibility

Another great resource for accessibility design is theWorld Wide Web Consortium (W3C) and its accessibility guidelines.  The W3C’s accessibility charter includes accessibility for all people, regardless of their devices or abilities. The consortium is responsible for creating accessibility guidelines that many governments and businesses strive to follow.

The W3C is strongly motivated by the UN Convention on the Rights of Persons with Disabilities.  They represent the information and communications technologies, including the viewpoint that the access to the Web, is a basic human right.  We agree. 

Examples of Accessibility for All:

To learn more about becoming a participant of the W3C, you can read more information here. If you require video captions and subtitles for accessibility, enjoy a complimentary video captioning trial.  Stay up to date on the latest in accessibility and caption requirements, sign up for our newsletter.

Nicole E. Flynn, CMO at cielo24, is deeply interested in exploring and communicating the ways in which Artificial Intelligence (AI) intersects with various aspects of our daily lives. She is passionate about exploring the ways in which AI can be ethically harnessed to improve the quality of life and make our world a better place. Nicole seeks to educate and inform audiences about the potential of AI technology and how it can be used to drive innovation and growth.