Why Implement Accessibility?

Accessibility features benefit more than just those with disabilities. They help anyone facing temporary or situational challenges navigate websites and apps effectively, improving the experience for all users.

Accessibility practice also improves SEO by making your site more accessible. You make it easier for search engines to understand and index your content, which can boost visibility and reach a wider audience.

 

Common WCAG* Failures

The 2020-2021 Corporate Report on Accessibility Monitoring highlights the most frequent accessibility issues identified across public secto websites and apps during testing.

*WCAG = Web Content Accessibility

 
 


So... as a Designer,
How do I Implement Accessibility?

by designing with consideration for different

Color perceptions

 

Color perception varies widely for people with different types of color blindness, affecting how they interpret color combinations. Using high-contrast colors, patterns, icons, and textures helps individuals with color blindness distinguish items without relying solely on color. Icons also aid users with reading difficulties, providing visual cues that make navigation and content clearer for everyone, regardless of color perception.

Avoid these color combinations:

  • Green / Red

  • Green / Brown

  • Blue / Purple

  • Green / Blue

  • Light Green / Yellow

  • Blue / Grey

  • Green / Grey

  • Green / Black

Making sure that there is good

Color contrast

WCAG color contrast guidelines ensure that text, buttons, and icons are clearly visible on all screens and backgrounds, making it easier to read and use for everyone, including people with visual impairments.

4.5:1 contrast ratio for standard text.

3:1 contrast ratio for larger text, which is easier to see.

Below is an example of a mapping color plate for the design system concerning contrast and legibility, along with scoring for WCAG AA and AAA adherence. 

I design accessible

Buttons

The WCAG guidelines for button sizes on apps and websites state that buttons or press areas should be at least 44 x 44 pixels to ensure easy interaction. This is critical for users with motor impairments.

Spacing: there should be enough space around the buttons to avoid accidental clicks the smaller a button is to more distance. It needs from nearby buttons to avoid thi.s

 
 
 

Press area: smaller buttons are acceptable if a larger clickable area (press area) surrounds them

 
 
 

Labels and icons: text on buttons allow screen readers to provide clear, specific descriptions, helping visually impaired users understand the purpose of each button. It also helps users with cognitive or learning disabilities by providing direct guidance and minimizing confusion.

Building out buttons for a design system

Property Table

 
 
 

States

Default: Regular state when the button is ready for interaction.

Hover: State when the user hovers over the button with a

cursor.

Active: State when the button is being clicked or activated.

Disabled: State when the button is not available for interaction.

Variations

Primary Button: Highest priority actions like "Save", "Submit", "Confirm". Used to guide users towards the main action on a page.

Secondary Button: Less critical actions such as "Cancel", "Edit",

"View More". Supports the primary actions but is not the main focus.

Success Button: Indicates successful actions such as "Success",

"Done", "Completed". Used to convey positive outcomes.

Danger Button: This button indicates actions that might have serious consequences, such as "Delete," "Remove," or "Warning." It is used to alert users to potential risks.

Icon Button: Actions that can be represented by an icon only, such as "Delete", "Add", "Settings". Used when space is limited or for repetitive actions.

Conponents and button sizing

 
But this is not something i do just on my own


As a member of a design team I have focused on how design and technology can create more inclusive and accessible products …

• I work with both design and development teams to establish best practices to bring ADA compliance upstream into the design and code libraries.

• I review and test products and create documentation for remediation.

 

Design and Development support

Accessibility is not a fix; it's a process.

The neurodiversity group I work with promotes the idea that everyone involved in the product development lifecycle has a role in making products accessible to people around the globe. By learning about users with disabilities and keeping these users in mind as features, designs, interactions, and code decisions are made and evaluated, we can raise the quality of the user experience for all customers.

Below are the four focus areas where the company has been making time and effort to become more inclusive.

  1. Plan and Lead - Participate in Neurodiversity Leadership Group
    Product managers, project managers, and leadership have a critical role in ensuring a successful accessibility effort. Accessibility must be a priority from the beginning, with direction and strategy pointing to features that include as many people as possible.

  2. Design - Champion accessibility principles in design
    The design team can deliver more inclusive designs by understanding how users interact with our products and consume our digital content.

  3. Develop - Partner with developers and designers to improve tools and processes.
    Developers must be disciplined and thorough in delivering pixel- and interaction-perfect interfaces that maintain the inclusivity of the designs they are given.

  4. Test - Ensure principles are applied
    Automated and manual testing is used to validate that accessibility has been effectively considered in a product.

 

Testing

Customer Facing Attributes

If you are familiar with design heuristics, Customer-facing attributes (CFAs) are in the same family. We use them to systematically determine a design's/product's usability. As experts, we go through a checklist of criteria covering four main topic areas to find flaws design teams may have overlooked.

  1. Ease of use (intuitiveness, accessibility, recognition, satisfaction)

  2. Efficiency (speed, accessibility, user control, recognition)

  3. Accessibility -A11y (Visibility, clarity, audibility)

  4. Globalization -G11N, depending on the product, the evaluation could include:
    Translation (T9N) and localization (L10N), internationalization (I18n).

Excel screenshot of framework

Screen markup example

Screen Markup for screen reader and keyboard user sequence

 

These are some of the accessibility certifications I have acquired.
I'm excited to keep learning so I can make a bigger impact.