Design With Accessibility in Mind


During the Design stage designing a site with Accessibility in mind saves Development time and helps define a structure for accessible webpage content. 

Designers should think of the visual content and its users and how they interact with the pages. Below are a few categories one should think of when attempting to design an accessible page. 

Below are a few points one should consider regarding Accessibility. 

Color Contrasts and Color Blindness 

Contrast relates to how users, especially ones with a visual impairment, perceive content on the page. Can they easily tell the difference between a Foreground Text and Background Color? 

In regards to WCAG 2 (Web Content Accessibility Guidelines) requirements, contrast is a measure of the difference in perceived “luminance” or brightness between two colors — the term color contrast is never used. 

Ratios are used, for example, 21:1, which would mean black text on a white background. 

If the text and background colors are inverted, the contrast ratio remains the same. 

Text effects, like outlines, can impact perceived contrast — WCAG 2 states that the color of a text outline or border can be used as the text foreground color when measuring contrast. 

Here are a few links Designers can use to check color contrasts and Color blindness testing. 

UI – design UI, alerts, accessibility mobile 

UI components must work across multiple devices with varying screen sizes and different kinds of input. 

There are four key areas of disability that must have UI accessibility: 

1. Visual Issues 

  • The minimum contrast ratio threshold must be met for text content 
  • Ensure all text is resizeable 
  • All user interface components should be able to be used with assistive technologies such as screen readers, magnifiers, and braille displays 

2. Hearing Issues 

  • Content must be made to be understandable using text alternatives for all content, not just text 
  • UI components must still be functional without sound 

3. Mobility Issues 

  • Content of UI must be functionally accessible from a keyboard for any actions you would use a mouse for 
  • UI must be correctly marked up for assistive technologies such as voice control software and physical switch controls which tend to use the same APIs as other assistive technologies like screen readers 

4.Cognitive Issues 

  • Avoid flashing (lights flashing on the screen) 
  • Avoid timing-based interactions 


Alerts are most often boxes of text that can pop up on a webpage or be present during a certain time period — they are very similar to modals. 

To use them in regards to accessibility, make sure the information you are presenting in an alert warrants taking away the attention of the user from what they are doing. 

Make sure to use polite language. 

Also, think of the close/cancel functionality of the alert. 

Use the ARIA function  role=’alertdialog’ for an alert that is not time-sensitive but contains an important prompt or piece of information for the user. 

Alerts should not be visibly hidden if they are not being used — but if you do not want the screen reader to pick up the alert then use the function aria-hidden=’true’ HTML attribute and/or {display: none;} in your CSS. 

UX flow — tab flow 

It’s important to address the many ways a user would navigate the content on the site, either with a mouse, keyboard, voice instructions, etc… The user should be able to step through the elements on the page in order using tab flow. Below are a few recommended points. 

  • A user should be able to use the tab key on their keyboard to navigate to and activate every interactive element on a page 
  • They should be able to tab through interactive items in a logical order (left to right and top to bottom) this becomes more complex if the layout is complicated — here you would need to identify the tab order in your wireframes or mockups 
  • Each interactive element should have a visible focus state — this can be done by working with a visual designer 

Here’s a Tab Order reference: 

Image alt — recommended alt: 

ALT text refers to the invisible description of images that are read aloud to blind users on a screen reader 

Adding ALT text allows authors to include images, but still, provide the content in an alternative text-based format 

  • It is read by screen readers in place of images allowing the content and function of the image to be accessible to users with visual or cognitive disabilities 
  • It also provides semantic meaning 
  • When using ALT, besides including ALT text, you also should provide a useful context of the document 
  • When doing this you should include in the ALT text how you would describe the image to a blind user in a concise, descriptive manner 
  • Do not include any information about copyright or any other extra information not pertaining to the description of the image 
  • ALT tags should be no more than 125 characters 
  • Every image must have an ALT attribute — this is a requirement of HTML standard 
  • Images that do not have an ALT attribute are most likely inaccessible 
  • The alternative text of an image may be largely different based on the context and surroundings of the image itself 
  • Here is a tab order link: