Protiviti / SharePoint Blog

SharePoint Blog

May 25
Accessibility Tips in Design


Although I am not a creative designer, I do know good design versus bad design. I also know that accessibility should always come into account when creating a user experience (which includes prototyping, designing, and implementing a website). This blog will cover two aspects of creating user experiences for websites: design and implementation. 

 

Accessibility in Design

When designing for the web, many considerations are taken to create the perfect, easy-to-use, sleek, modern design. To create a design that will aim to please visually, color is the first thing to come into account. Black text on a white background is the easiest to read for anyone. It’s also boring. This is where designing for accessibility comes into play. As a designer, you want to create a functional design with plenty of visual aspects without being overwhelming. When designing, keep the following tips in mind:

  • Use triad or analogous colors. This may seem like basic knowledge, but many designers are restricted to what colors they can use when designing a site because of a company’s style guide. First and foremost, be sure to check your color palette with a style guide if applicable. Once colors are approved, use a color wheel to make sure the colors that you have chosen go well together.
  • The main body of text should always be black or dark grey. When users are reading articles or long sections of text, be sure that the main portion of the text is either black or dark grey on a white background. Break up the text by using headings in different sizes and colors, but make sure the colors are readable against a white background as well.
  • Do not use complementary colors for text. Complementary colors are great when you need to make something stand out, but for readability, they are awful. For example, do not have a green background with read text. Even to those who may have perfect eyesight, this is a strain on the eyes and difficult to read. 



For more on colors in design, visit tigercolor.com (http://www.tigercolor.com/color-lab/color-theory/color-harmonies.htm)


Accessibility in Implementation

Most front-end developers do not have accessibility at the forefront of their minds when implementing websites. Usually, they don’t have to take too much into account, but with all the devices now available to assist those with accessibility needs, it is vital that front-end developers take these devices into account along with phones and tablets. Below are tips on what to take into account when coding a website.

  • Do not always use display:none for hiding elements on a page. When using this code, the element and the children of that element are rendered invisible on the site, and this includes being visible on screen readers. There are other options instead of using display:none to hide elements that may need to be accessible to screen readers. For more on this, visit Roger Johansson’s website here (http://www.456bereastreet.com/archive/201108/do_not_use_displaynone_to_visually_hide_content_intended_for_screen_readers/)
  • ALWAYS use alt tags for images. This is a requirement in web development, but so many times these vital pieces of code are left out. Alt tags describe the image to a person using a screen reader. The screen reader picks up the alt tag information and reads it to the user. Without having an alt tag, the user will have no idea what the image is on the page.
  • If uploading types of audio to a site, make sure that a transcript of the audio is readily available. This is a content related issue, but can be brought up by the web developer if they notice that audio files are being provided but with no transcript. By only having audio files, a website is limiting their audience to exclude the hearing impaired. 



For more on accessibility and the web, visit w3.org for requirements and suggestions for users with accessibility issues!


If you are interested in improving your site's usability and accessibility, check out our Usability & Accessibility Assessment!
Protiviti’s Usability and Accessibility Assessment is conducted by skilled UX professionals with a focus on applying advanced usability principles to the observed structure and operation of your website. During the assessment, the reviewer will go through your website and evaluates it based on organization, function, structure, accessibility, flow, feedback and other essential criteria. Learn more.

Quick Launch


© Protiviti 2019. All rights reserved.   |   Privacy Policy