Design for Accessibility

When creating your website or even a blog post, there are many things that you need to consider for all users to have a positive experience. The UK Government  recently came out with posters that cater to the accessibility for those with – low vision, deaf and hard of hearing, dyslexia, motor disabilities, as well as those on the autistic spectrum and users of screen readers. The great part about this poster series is the insight on how we can create content and website to accommodate every person. Each of the posters share the do’s and don’ts of design principles.

While creating your own content, we usually only think about our accessibility needs above others. By taking these posters into consideration into your next website build or even a blog post, you can always test your layouts that suit every user’s needs.

Autistic Spectrum

When designing a layout for those on the Autism spectrum, there are a few things that you need to look out for. For those with Autism spectrum disorders, they have a wide range or challenges including social, communication, and behavioral and these can all range from mild to severe.

Do’s:

• Use simple colors
• Write in plain English
• Use simple sentences and bullets
• Make buttons descriptive
• Build simple and consistent layouts

Don’ts:

• Use bright contrasting colors
• Use figures of speech and idioms
• Create a wall of text
• Make buttons vague and unpredictable
• Build complex and cluttered layouts

Screen Readers

For those who are blind or visually impaired, they use a software program called screen readers that reads the text that is displayed on the computer to them or in braille.

Do’s:

• Describe images and provide transcripts for video
• Follow a linear, logical layout
• Use HTML5 for your content
• Keyboard use only
• Have descriptive links and headings

Don’ts:

• Showing information only in an image or video
• Content is spread throughout the page
• Relying on text size for structure of page
• Forcing mouse or screen use
• Uninformative links and headings

Low Vision

Having low vision unfortunately can’t be corrected or improved with regular glasses and therefore those who have low vision are not able to see the screen as clearly as those who don’t have it.

Do’s:

• Readable font size
• Information on pages as HTML
• Using a mixture of color, shapes and text
• Text flow when it is magnified
• Buttons and notifications in context

Don’ts:

• Low color contrasts and small font size
• Information in downloads
• Color to convey meaning
• Spread content out
• Separating actions from context

Physical or Motor Disabilities

No matter what type of disability the user has, your website and content should be adapted to their needs.

Do’s:

• Large clickable actions
• Space in form fields
• Design for keyboard or speech only use
• Mobile and touch screen design
• Shortcuts

Don’ts:

• demand precision in clickable actions
• group interactions together
• content that requires a lot of mouse movement
• short time out windows
• lots of typing and scrolling

Deaf or Hard of Hearing

Videos are the great to have on websites but without subtitles or a transcript, deaf and heard hearing users will not be able to understand the video’s purpose.

Do’s:

• Write in plain English
• Use subtitles for videos
• Linear layout
• Break up content with headings, images, videos
• Ability for users to ask for interpreter for appointments

Don’ts:

• Complicated words / figures of speech
• Content in audio or video only
• Complex layouts and menus
• Read long blocks of content
• Telephone the only way of contact

Dyslexia

Certain styles that people use on websites are not friendly to those with dyslexia. Small changes can make a huge difference in interpreting words, letters, and other symbols.

Do’s:

• Images and diagrams
• Align text on the left
• Audio or video materials
• Content is clear, short, and simple
• Contrast change

Don’ts:

• Large blocks with heavy text
• Underline words, italics, all capitals
• Remembers content from previous pages
• Rely on accurate spelling
• Too much information in one place

There is also an accessibility tool that you can download as an extension on Google Chrome that will take a look at the overview of your website to tell you your accessibility issues. For help designing your website with all users in mind, call Big Marlin Group. We have a group of dedicated content and web developers that are able to help you design your website for accessibility.