TinT

Do’s and Don'ts of Designing for Accessibility

Anxiety

Autistic Spectrum

Dyslexia

Physical or Motor Disabilities

Low Vision

Screen Readers

Deaf or Hard of Hearing

In the bottom right corner of every infographic is the following text: “For more information, contact: [email protected].”]

[Image 1: Designing for users with anxiety. 

Under the “Do” column is the following: 

Give users enough time to complete an action. 

Explain what will happen after completing a service. 

Make important information clear. 

Give users the support they need to complete a service. 

Let users check their answers before they submit them. 

Under the “Don’t” column is the following: 

Rush users or set impractical time limits. 

Leave users confused about next steps or timeframes. 

Leave users uncertain about the consequences of their actions. 

Make support or help hard to access. 

Leave users questioning what answers they gave. 

End ID of Image 1.]

[Image 2: Designing for users on the autistic spectrum. 

Under the “Do” column is the following: 

Use simple colours. 

Write in plain language. 

Use simple sentences and bullets. 

Make buttons descriptive: provided is an image of a button with the text: “Attach files.” 

Build simple and consistent layouts. 

Under the “Don’t” column is the following: 

Use bright and contrasting colors. 

Use figures of speech and idioms. 

Create a wall of text. 

Make buttons vague and unpredictable: provided is an image of a button with the text: “Click here!” 

Build complex and cluttered layouts. 

End ID of Image 2.]

[Image 3: Designing for users with dyslexia. 

Under the “Do” column is the following: 

Use images and diagrams to support text. 

Align text to the left and keep a consistent layout. 

Consider producing materials in other formats (for example, audio or video). 

Keep content short, clear, and simple. 

Let users change the contrast between background and text. 

Under the “Don’t” column is the following: 

Use large blocks of heavy text. 

Underline words, use italics, or write in capitals. 

Force users to remember things from previous pages - give reminders and prompts. 

Rely on accurate spelling - use autocorrect or provide suggestions. 

Put too much information in one place.

End ID of Image 3.]

[Image 4: Designing for users with physical or motor disabilities.

Under the “Do” column is the following:

Make large, clickable actions.

Give form fields space.

Design for keyboard or speech-only use.

Design with mobile and touchscreen in mind.

Provide shortcuts.

Under the “Don’t” column is the following:

Demand precision.

Bunch interactions together.

Make dynamic content that requires a lot of mouse movement.

Have short time-out windows.

Tire users with lots of typing and scrolling.

End ID of Image 4.]

[Image 5: Designing for users with low vision.

Under the “Do” column is the following:

Use good colour contrasts and a readable font size.

Publish all information on web pages.

Use a combination of colour, shapes, and text.

Follow a linear, logical layout.

Put buttons and notifications in context.

Under the “Don’t” column is the following:

Use low colour contrasts and small font size.

Bury information in downloads.

Only use colour to convey meaning.

Spread content all over a page. 

Separate actions from their context.

End ID of Image 5]

[Image 6: Designing for users of screen readers.

Under the “Do” column is the following:

Describe images and provide transcripts for video.

Follow a linear, logical layout.

Structure content using HTML5.

Build for keyboard-only use.

Write descriptive links and headings.

Under the “Don’t” column is the following:

Only show information in an image or video.

Spread content all over a page.

Rely on text size and placement for structure.

Force mouse or screen use.

Write uninformative links and headings.

End ID of Image 6]

[Image 7: Designing for users who are D/deaf or hard of hearing.

Under the “Do” column is the following:

Write in plain language.

Use subtitles of provide transcripts for videos.

Use a linear, logical layout.

Break up content with sub-headings, images, and videos.

Let users ask for their preferred communication support when booking appointments.

Under the “Don’t” column is the following:

Use complicated words or figures of speech.

Put content in audio or video only.

Make complex layouts and menus.

Make users read long blocks of content.

Make telephone the only means of contact for users.