Designing isn’t just about shapes and colors! UI/UX world design goes way deeper to deliver accessibility to the users no matter who they are and in which condition they are using the site including people with disabilities.

This blog presents the best tips and good practices to meet and master the basics of the Web Content Accessibility Guidelines (WCAG) requirements. 

Adjust the contrast between the background and  foreground of the design

Contrast is a setting display that differentiates and brings forward an element over the other such as text, image, buttons… etc by leveraging light, gradients, and shadows in order to increase the visibility of elements in a design.

Sensitive elements such as text need to be clear net and easily readable in the Foreground and so should be displayed in colors sufficiently contrasting with background colors. 

Don’t over-rely on color contrast to convey information

While differentiating elements by contrasting and overlapping colors seems the easiest way in design as it is natural to the human eyes to understand surrounding elements by color it isn’t the best way!

Simply not everyone can perceive colors notably color-blind people who don’t fall under the category of disabled users and are probably using regular apps and websites. UI is made to serve the UX and if the less fortunate of  the users can’t understand  the information displayed on the app then the whole design is failed 

Other methods to help you avoid over-relying on colors to differentiate elements in the design are :

• Forming information in different visible blocks 
• Using asterisks or other symbols to indicate a section 
• Using clear labels 

Highlight interactive elements within your design

Interactive elements in the design are the dynamic components and focus indicators that push the user to take action or make a decision regarding the use of the app such as buttons, directory links, zooming images …etc 

There is no point in adding one of those if the user CAN’T SEE IT!!

Styling and distinguishing interactive elements and smoothing the navigation towards them is a key goal in UI design and an essential asset to website success. 

It is important that users can reach all interactive elements using the mouse, touch screen, keyboard, or any other components made for disabled people.

Provide clear and consistent navigation options

Providing different methods to navigate a website, such as a site search or a sitemap helps the user clarify where they are on the page and what they should do next.

Ensure that navigation across pages within a website has consistent naming, styling, and positioning and clear orientation cues like arrows, breadcrumbs, and clear headings.

Labeling, labeling, and more labeling

Users don’t usually spend much time scrolling. It is mandatory to organize information in a very distinctive and clear way to help the user find what they want faster. Adding labels to every field is one effective way to describe what is coming next after it

Notifying the user and guiding him in case of error

Mini messages and notifications that appear on the screen when the user takes action such as  “confirming form submission”, “invalid password “, icons or alerting background colors to make an error stand out are essential to provide a smooth user experience as the instant feedback helps the user know what to do next and serves as a guideline for him to not get lost within the website. 

Design for different sizes

There is no size fit all in UI! Switching from one screen to another or zooming one screen affects the content displayed as space differs and element positions change. Consider how page information is presented in different-sized viewports, such as mobile phones or zoomed browser windows. 

Text isn’t the only type of content

Not everyone is a fan of reading! Text isn’t the only way to describe something and content within a website can be in different non-text formats such as:

• Images
• Audio
• Videos
• icons  
• Graphs 

The interface of the website should be designed to support all types of content clearly.

 Conclusion

Those were just the basics of accessibility in web design! A real designer can provide only accessible consistent designs and nothing less!

Adapt Arsenic Design System and design limitless accessible designs in perfect consistency to make technology usable to all people regardless of their condition!