An introduction to accessibility and usability in Software Product Design

How do you make Software Product Design and services accessible to all users while accommodating disabilities and potential barriers to accessibility?

Our latest blog post breaks down what you need to know:

An introduction to accessibility in relation to Software Product Design

Accessible design allows disabled people to understand, perceive, navigate and interact with software and websites without any challenges.

For instance, if adequate contrast isn’t added to progress buttons, it could be challenging for a user with visual impairment to navigate.

Accessibility aims to understand and anticipate the issues that disabled users might face and optimize the product’s design and usability so that it becomes accessible to all.

An introduction to Usability

Usability is about designing a user experience that is efficient, satisfying and effective.

Some of the main elements of usability are as follows:

• The navigation efficiency that the design offers
• How memorable the design is, meaning if the user doesn’t use it for a while, how soon they will be able to get back to the same user proficiency level
• How easy the design is to use and navigate for a first time user
• How satisfying the user interface is and will users want to reuse it
• There are some basic product design principles that act as guidelines in order to help create product designs that are usable for all.

There are some basic product design principles that act as guidelines in order to help create product designs that are usable for all.

Consider these basic design principles:

• Set information in a logical and natural order
• Prevent glitches and errors, to whatever extent possible, and warn users before they take decisive actions
• Keep options visible so that users don’t have to remember information
• Design flexible systems, so that experts and amateurs can navigate through them alike
• Maintain uniform standards so that users can move to next steps without having to learn novel interfaces
• Create minimalistic and easy to comprehend designs so that users don’t get distracted or confused due to visual clutter
• Provide troubleshooting resources that are easy to find and use
• Avoid technical jargon in error messages so that it's easier for people to identify and solve problems
• Offer constant feedback so the user feels informed
• Maintain a simple format for redo/undo of actions

Understanding Inclusivity

In this context, inclusion embraces diversity by ensuring that there is a “Design for all” that addresses the following concerns:

• Access to good quality software, hardware as well as decent internet connectivity
• Accessibility for disabled people
• Geography and cultural differences
• Age and language gaps
• Diverse education and economic backgrounds

The objective is to adopt an inclusive Software Product Design mentality that takes into account different categories of disabilities and constraints that have an effect on how people consume digital services. These are mainly:

• Motor problems caused by physical deformities, hand tremors and amputations
• Vision impairment, low vision, blindness or color-blindness
• Hearing impairment which may include low hearing, tinnitus and deafness
• Cognitive impairment which may be caused by dementia, dyslexia or simply being sleep deprived

Many people can experience one of the above forms of disability, whether temporarily, situationally, or permanently, and the objective of product design should be to accommodate all these differences whilst also creating an improved experience for users with no accessibility issues.

Two primary standards that serve as pillars of accessibility:

• Web Content Accessibility Guidelines
• Section 508

(WCAG) Web Content Accessibility Guidelines

These are guidelines developed by the World Wide Web Consortium and are representative of web accessibility standards that are internationally applicable for web apps and websites.

There are four UX layers that guide designers in improving the usability and accessibility of their designs:

The information, as well as the user interface components that a design offers, should be perceivable in nature

• Offer text alternatives for information so that it can be presented in other forms such as symbols, braille, larger prints, speech and/or a simpler language
• The content created should be adaptable in the sense that it can be displayed in different structures without it’s essence being lost
• Alternative options should be made available for time-based media
• The layout should be such, that the content is distinguishable, making it easy for users, to hear or see it, separating background from foreground

An example for this would be adding video transcripts to interviews/Ted Talks.

The components and navigation of the user interface should be operable in nature

• It should offer the users enough time to comprehend and consume the information
• Don’t incorporate designs that are known to trigger seizures
• Make all functions accessible via the keyboard
• Make content easy to navigate

An example of this is Apple’s Assistive Touch, which helps in accessing key settings and creating your own gestures.

The operation and information of the user interface should be understandable in nature

• The content created should be easy to read and understand
• Keep the appearance and operation of web pages predictable in nature
• Help the user correct or avoid mistakes altogether

An adept example of this is the error messages displayed by Twitter, which do not include jargon, are easy to understand and follow simple color and icon patterns.

Ensure that the content is robust, and can be interpreted reliably by different users

• This may include assistive technology such as screen magnifiers, Ergonomic keyboards, switch devices, screen readers etc.
• The content should offer compatibility with present and future user agents

An example of this would be a responsive web design that is optimized for various screen sizes and browsers and that can be accessed by different screen readers.

Section 508

This is a guideline specific to the U.S and was created as a part of the 1973 Rehabilitation Act. This is the required standard while working on various projects that are funded by the government and those done by private government contractors. There are many features that Section 508 has in common with the WCAG.

A better way of understanding this is that the WCAG may be a set of guidelines, whereas Section 508 is more of a set of requirements that need to be fulfilled for the project to maintain legal compliance. 

ISO 9241

This is a European standard, which was laid out by the International Organization for Standardization situated in Geneva, Switzerland. This is the technical accessibility standard that must be followed in Europe. 

How do you ensure WCAG compliance?

There are many checklists available that developers and designers can adhere to, as well as several checklist tools that help make accessibility easy to achieve. Here's a good example of one.

Now let’s talk about how you can incorporate accessibility in your product design:

1. Clear and precise tab navigation: Ensure every interface element has a clear indicator or visual emphasis. For example, hyperlinks are indicated by a blue underline.
2. Alt Attributes for images: All web images should have an alt attribute, which includes a description of what the image contains, with some additional context if required. This text describes the image to users with visual impairments.
3. Don’t use only color to highlight information: Being sensitive towards colorblind people is essential. Use different elements like size, font, symbols, grouping and value instead of just color to highlight information.
4. Ensure that forms have labels: This is another important aspect, ensure that all forms that you display have labels to help users interpret input requirements. There should be no exception to this rule. It’s best practice to avoid using placeholder text in the form of input labels.
5. Check colors adequately: Though it sounds obvious, color plays a huge role in making content user-friendly and accessible. Make sure that the color values, saturations and hues for colors that you use have contrast high enough to ensure optimal readability.
6. The use of Semantic HTML: The onset of HTML5 has brought about the use of semantic HTML such as <main> and <header>, that convey a particular meaning to assistive technology and screen readers. It’s advisable to use semantic HTML instead of divs and spans while writing the markup.

Use autocomplete for inputs when appropriate.

Put in a little more groundwork to avoid consequences later. While designers may find it to be a lot more work upfront, it’s best to adhere to best practice accessibility guidelines, keeping the bigger picture in mind. 

This not only helps more users by making your product accessible to all audiences but also sets a great ethical example and a general standard of quality for others to follow.