Blog

Web Accessibility Guidelines

Web accessibility is the ease of use of information and communication technologies, such as the Internet, by people with disabilities. Websites need to be developed so that disabled users can access the information.

Reading order should be considered

The reading order and visual order should be the same.

Good contrast has to provide

Should be careful with light colored shades like Orange, Yellow, and Gray.

Wherever possible use true text

True text loads fast and easy to translate. It also enlarges better, use CSS styles to improve visual effect.

Watch the use of Upper case letters

It is difficult to read for screen readers and cannot read correctly, so try to avoid all Upper case letters.

Use appropriate font size

It is officially stated that visitors must be able to resize all text on the page up to 200% of its original size. Font size can vary based on the font chosen, but 14px – 16px is minimal.

Balanced Line Length

Line length should be balanced, make sure that it should not too short or too long.

Links should be Recognizable

Differentiate links in the body of the page with underlines or something other than color alone.

Consider link focus indicators while designing

Ensure keyboard users can visually identify links when navigating with a keyboard.

Design a “Move to Top Main Content” Link

A keyboard accessible link for users to skip navigation should be at the top of the page.

Ensure Link Text Makes Sense on Its Own

Avoid “Click Here” or other ambiguous link text, such as “more” or “continue”.

Use Animation, Video, and Audio Carefully

Provide a play/pause button.

Don’t Convey Content only with Color

Users often can’t distinguish or may override page colors.

Form Controls should be Accessible

Ensure form controls have descriptive labels and instructions.

Pay close attention to form validation errors and recovery mechanisms.

Web accessibility while coding in Angular/React/HTML/CSS

 

Identifying the page language

Adjust speaking rate of content in order to provide the correct accent and pronunciation, identifying the page language helps screen reader to switch language profiles. To determine the page language or a section of page language while developing a web page the lang attribute should be used. <html lang=”en”> </html>

Write your HTML smartly

Using tags like <button> gets you all the keyboard events for free and it saves valuable time, helps in achieving accessibility. Nest or Structure your Heading tags correctly. It will help to create and speak out the text hierarchy correctly in assistive devices. It will add value to navigation. Use paragraph, span and heading tags for text content. Use correct page layout like don’t write footer or header inside main tag. Use html5 Semantic tags header, main, section, article, aside and footer for page layout. It will help the user to navigate easily from one section to another section.

Alternative text should be used media

The alt text could be captions or audio description for web based audio or video and images. It will help at the time when visitors can’t see media in their browsers due to browser issues or formatting issues.

Error handling and mistake correction

It may get frustrating when user fills the form details. It may get frustrating when user fills the form details. For example: Name should not have special characters or numbers, Password should be strong enough by including special characters and alphanumeric values, Phone number to be written in specific format adding or removing space from field.

  • Keep error messages next or below the fields and highlight the text and set focus to respective fields.
  • Remove any space from phone number and other fields while validating user inputs.
  • Show help text and suggest corrections/audio content to help user understand the format of that fields.
  • Provide some means for reviewing, confirming, and correcting information before finalizing the submission.

More Blogs

Demystifying Vector Databases: Unleashing the Power of High-Dimensional Data

A vector data store is a specialized database designed to store high-dimensional embedding representations of diverse data types, including audio, video, images, text, and more. One of its core functionalities is the ability to efficiently search for vectors within the store that closely resemble a given query vector.
Vector stores streamline the process of storing embeddings and conducting similarity searches among these vectors, simplifying the management and retrieval of high-dimensional data representations.

Read more

Enhancing Customer Experience with GenAI Applications

In this blog, we will explore the creation of GenAI applications that significantly enhance the customer experience by leveraging OpenAI’s Large Language Models (LLMs) through their APIs, as well as key AWS services like Amazon Kendra, AWS Transcribe, and AWS Polly. Additionally, we’ll discuss the pivotal role of AWS S3 and In-Memory Cache for storing indexed data, chat history, and serving the GenAI application’s various functions

Read more

Evolution of Application Integration and API First Approach

Over time, the landscape of application integration has undergone significant changes. We’ve moved from integration within Mainframes to traditional file-based communication to more advanced methods.

In the ever-evolving digital landscape, APIs (Application Programming Interfaces) have become a crucial component in various domains, including e-commerce, banking, social platforms, and enterprise applications, enabling seamless communication between software components and services.

Read more
Contact us

Partner with us for Comprehensive IT

We’re happy to answer any questions you may have and help you determine which of our services best fit your needs.

Your benefits:
What happens next?
1

We Schedule a call at your convenience 

2

We do a discovery and consulting meeting 

3

We prepare a proposal 

Schedule Consultation