FullStack Labs

Please Upgrade Your Browser.

Unfortunately, Internet Explorer is an outdated browser and we do not currently support it. To have the best browsing experience, please upgrade to Microsoft Edge, Google Chrome or Safari.
Upgrade
Welcome to FullStack Labs. We use cookies to enable better features on our website. Cookies help us tailor content to your interests and locations and provide many other benefits of the site. For more information, please see our Cookies Policy and Privacy Policy.

Inclusive Development: Software Guideline for Accessible Apps

Written by 
Andres Coca
,
Mid-Level Software Engineer
Inclusive Development: Software Guideline for Accessible Apps
blog post background
Recent Posts
Getting Started with Single Sign-On
Choosing the Right State Management Tool for Your React Apps
Accessibility in Focus: The Intersection of Screen Readers, Keyboards, and QA Testing

Table of contents

This blog post is a presentation inviting software engineers and technology companies to learn about guidelines from international sources aimed at developing accessible software for people with disabilities.

This specific meaning of accessibility to information technology (IT) has become essential in this decade, and some countries have created laws to make web content universal, like the international Web Content Accessibility Guidelines (WCAG).

As we work in the software industry, it is our responsibility to build applications that the population with impairments can access. Just think how a person that has an absence of a sense, like vision, could interact with the app you are building. Could they perceive its content? How easily could this person navigate through all the components or sections? WCAG presents some recommendations that could be included in our projects to develop more inclusive software.

WCAG principles

WCAG is a set of recommendations for improving web accessibility, explaining how to build websites and apps accessible to everyone based on four attributes every design should present. Those four attributes are:

  1. Perceivable: making sure users can navigate by perceiving all the information and content that is exposed, with the senses that are available to them. Some examples that address this principle include:
  • Providing text alternatives – ‘alt text’ – for non-text content.
  • Ensuring the content is structured in such a way that it can be accessible by a screen reader.
  • Offering transcripts for audio and video, as well as captions for video.
  1. Operable: allowing users to interact with and navigate through the app's content regardless of how they choose to access it, for example, using a keyboard or voice commands. Some examples of operable design are:
  • Ensuring everything works for users that only use the keyboard.
  • Providing a ‘skip to content’ link or similar.
  • Offering users a way to play, pause, and stop any moving content.
  • Using meaningful headings and labels, guaranteeing that any accessible labels match the ones present in the UI.
  1. Understandable: permitting people to understand the content and how they can interact with it by:
  • Specifying the language of the content.
  • Making sure all form fields have visible and meaningful labels – and that they are marked up properly
  • Helping users avoid and correct mistakes with instructions and error management.
  1. Robust: creating content robust enough to be interpreted by a wide variety of user agents using assistive technologies means:
  • Ensuring HTML elements have complete start ( < > ) and end ( </ > ) tags where needed.
  • Nesting all HTML elements correctly.
  • Using unique IDs.
  • Checking that HTML elements don’t contain duplicate attributes.

Levels

WCAG has three conformance levels that effectively categorize a website or application based on the recommendations.

  1. A – Minimal Compliance: addresses the most fundamental accessibility considerations for people with disabilities, making this level a baseline for the next two levels.
  2. AA – Acceptable Compliance: the webpage and content would satisfy all level A and level AA success criteria. This level is used in most accessibility rules and regulations around the world, including the ADA.
  3. AAA – Optimal Compliance: the webpage meets A, AA, and AAA conformance levels. Compliance at this level makes the software accessible to the maximum number of users. Level AAA adds 28 requirements to those outlined at level AA. Examples include: 
  • The contrast ratio between text and background is at least 7 to 1. 
  • Pre-recorded video content must have a sign language translation. 
  • The extended audio description should be provided for pre-recorded videos.

Note: WCAG does not recommend that Level AAA conformance be required as a general policy for entire sites because it is not possible to satisfy all Level AAA success criteria for some content.

You can find this kind of logo when a Web site meets the conformance level of WCAG; the following are the ones for level A.

W3C WAI-A WCAG 2.0
W3C WAI-A WCAG 2.0

Tools and sources

The good news is that we can take advantage of multiple tools and sources that we can use to make our software accessible. For example, an HTML validator is helpful to address the parsing recommendation for level A of WCAG. There are multiple HTML validators available on the Web. Personally, I use the Markup Validation Service of the World Wide Web Consortium organization to check the HTML documents. 

You can validate your HTML document by providing the URI of the page, uploading the HTML file with the option Validate by File Upload, or putting your HTML code using the Validate by Direct Input tab.

Once you press the Check button, the validator will show you the warnings and errors that are in your HTML document.

Other sources that help to develop accessible software are the following:

The power of the web is in its universality. Access by everyone regardless of disability is an essential aspect.” – Tim Berners-Lee 

Andres Coca
Written by
Andres Coca
Andres Coca

Andres Coca is a Mid-Level Software Engineer at FullStack Labs. He holds a bachelor's degree in Systems Engineering and has over 5 years of experience in development environments. Some of his major interests include accessibility, big data, machine learning, and data analysis.

People having a meeting on a glass room.
Join Our Team
We are looking for developers committed to writing the best code and deploying flawless apps in a small team setting.
view careers
Desktop screens shown as slices from a top angle.
Case Studies
It's not only about results, it's also about how we helped our clients get there and achieve their goals.
view case studies
Phone with an app screen on it.
Our Playbook
Our step-by-step process for designing, developing, and maintaining exceptional custom software solutions.
VIEW OUR playbook
FullStack Labs Icon

Let's Talk!

We’d love to learn more about your project.
Engagements start at $75,000.