Skip to main content

Accessibility

At Schneider Electric, we are 100% committed to inclusion. We create products that understand and enable people of all backgrounds and abilities. This includes designing accessible interfaces that accommodate people with disabilities.

What is accessibility?​

Accessibility for web and software is making digital content easy to access, to interact with, and to use, by a wide range of people with disabilities.

This includes accommodations for: vision, hearing, cognitive/learning, psychological, mobility/physical, spinal cord, head injuries, and invisible.

The international standard for accessible digital content are the Web Content Accessibility Guidelines (WCAG) published by the Web Accessibility Initiative of the World Wide Web Consortium (W3C). Digital product teams that comply with these guidelines can ensure their web content is more accessible to people with disabilities.

The following recommendations are created and updated based on the latest WCAG version.

Why is accessibility important?​

It increases the perceived quality of the product​

Building accessible digital products brings in or maintains business as this:

  • Helps your brand to be positively perceived as ethical by customers
  • Allows your product to reach a wider audience
  • Improves your website SEO on search engines

It benefits all​

Everyone can become temporarily disabled (for example, sport injury, forgetting glasses, harsh weather conditions, bright sunlight, and more).

"…in countries with life expectancies over 70 years, individuals spend on average about 8 years, or 11.5% of their life span, living with disabilities."

As Hector Minto, technology evangelist at Microsoft said: "Disability isn't a diagnosis, it's a mismatch between the person and their environment that can happen to any of us, at any time."

Keeping accessibility in mind can often lead to innovations and makes web content more usable for all.

It is legally required​

Accessibility is not "nice to have" and is legally required in many countries.

Non-compliance with web accessibility laws and regulations may lead to fines, lost business, monetary settlements, cost remediation, and loss of goodwill or damage to reputation.

How Quartz supports accessibility​

Quartz components and code are designed to support the best practices in terms of accessibility. Here is a list of the topics that we have already incorporated:

  • Supports a clear page hierarchy with sections and subsections
  • Allows consistency of UI components
  • Hover and Focus states are consistent across components
  • Meets WCAG AA color-contrast ratios
  • Enables Tab navigation
  • Paragraph font size of 16 px
  • Labels on inputs
  • Code is compliant to standards and optimized for assistive software (ARIA), and SEO
  • Enable easy addition of Alt text for visuals
  • Dark and light themes

Which actions should you take?​

Although some actions can be carried out specifically by designers or developers, accessibility involves the entire team's responsibility. It should be improved and worked on collaboratively.

General strategy​

Check your country's legislation
High impact

Europe

US

UK

India

Make sure you answer the needs of all users
High impact

Empathize and be inclusive​

Consider people first. Sites, softwares, and applications are designed with the needs of everyone in the audience in mind. Visit the User-centric approach page for more information.

Run accessibility tests​

Following accessibility requirements is not a substitute for user research and testing as they do not address every user needs for people with disabilities.

Running accessibility QA with Accessibility Testing Tools like WAVE and Quality Logic helps identify errors.

Conducting accessibility testing with users can help identify issues early. For example, usability testing with screen reader users helps to catch 80% of accessibility issues during remediation.

Maintain the quality of the experience​

Including accessibility doesn't mean "ugly" or "a lesser experience". Working with accessibility in mind can sometimes force us to rethink the feature or the layout.

Ask an accessibility expert
Quick win
High impact

At Schneider Electric, we have an Accessibility community of experts. Visit the Accessibility Inclusive SE Teams channel

On social media sites (Facebook, Twitter, Mastodon, Spoutible, Instagram, LinkedIn, and so on), search for the tags #a11y and #accessibiility. Include both tags in your question to get answers.

Essential foundations​

Have a solid structure
High impact
Implemented in Quartz

Placing the needs of all users at the center of the design process, rather than designing for a narrow segment of the population helps to create products that are more effective, efficient, and satisfying for all users, regardless of their individual abilities and needs.

Make sure that the underlying framework is accessible (and test it with people with disabilities). If the framework isn't accessible, the project won't be accessible.

  • People should feel confident using the product because it is stable, robust, and secure.
  • Identify the main elements on the page–header, navigation, main content, footer, and so on, so that screen reader users and those who do not use the mouse can navigate more quickly with the keyboard. For more information, see WCAG Bypass Blocks.
  • Maintain a clear heading hierarchy and sections. For more information, see WCAG Headings and Labels.
  • Provide page titles that describe topic or purpose. Do not start titles with the company name; instead, put it at the end. For more information, see WCAG Page Titled.
  • Avoid redundancy and repetition of information on a page to prevent audio clutter for screen reader users and confusion for those with cognitive issues.
  • Group content. Create natural groupings (such as sections and subsections) to simplify complex content and avoid long scroll in a list of items.
  • Mark state of collapsible and expandable regions.
Simplify the navigation
High impact
Implemented in Quartz

Ensure that people can navigate a site, feature, or page following self-explanatory signposts. Be concise, brief, and sensible, and follow navigation best practices:

  • Ensure that the main navigation occurs in the same order on each page. For more information, see WCAG Consistent Navigation.
  • Avoid hidden navigation content (for example, click on isolated profile picture to access profile menu).
  • Place secondary actions inside menus (or non-modal dialog boxes) and don't use hover state to access navigation elements.
  • Add labels to all navigation icons and links to indicate when a new window or tab will open.
  • Indicate when a new window or tab will open by adding an icon with alt text.
  • Provide multiple ways to navigate (keyboard, gesture, voice).
  • Highlight the current location by verifying there is a focus state.
  • Design a logical content order for keyboard navigation for those who do not use a mouse screen reader users navigate by using the TAB and arrow keys.
  • Before publishing a PDF, verify that the source document (Word, PowerPoint, or something else) is accessible to minimize issues in the PDF.
  • Design accessible popup windows so users can get into the popup or non-modal dialog box and are able to remove it.
Use components consistently
Quick win
Implemented in Quartz

To help people perceive and understand the different elements in the interface:

  • Use components consistently for the same functionality. For more information, see WCAG Consistent Identification.
  • If icons or other non-text content have the same functionality, then their alt text should be consistent as well.
Make your app responsive
Quick win
High impact
Implemented in Quartz

People can use the product across all modes of interaction while using a broad range of devices.

  • Leave enough inactive space around controls so that they don't overlap with other touch targets.
  • Make sure the zoom function is activated. Disabling zoom on mobile makes it inaccessible and unusable.
  • Use a fluid layout to allow multiple device orientations and usage. For more information, see WCAG Orientation.
  • Touch targets (clickable area) should be equal to or larger than 44 x 44 px and do not overlap. [WCAG Target Size](https://www.w3.org/TR/WCAG21/#target-size?subject=WCAG target size)
  • On devices with a large pixel density (for example, retina displays), set the width to at least 88 px relative to the true screen dimensions.
  • Functionalities activated by alternative device motions (WCAG Motion Actuation) and complex gestures should also be available to operate by a single pointer UI component (WCAG Pointer Gestures).

General considerations for creating accessible content​

Use plain language
High impact

Clear writing allows people to read, understand, and use the information displayed.

  • Use plain language and avoid figures of speech, idioms, lengthy and complex sentences, and complicated metaphors. For more information, see WCAG Reading Level.
  • Make sure buttons, labels, and links have understandable and semantic descriptions and use verbs rather than nouns. (Avoid vague link destinations, such as "click here" or "more". Screen reader users can open a list of links, and a list with "click here" for all links is useless because there's no context.) For more information, see WCAG Info and Relationships.
  • Whenever possible, use multiple indicators, visual and verbal, to make sure the information is identified and understood.
  • Use a lang tag on all pages. Add a lang attribute on the html element in the header area of each page code. W3C Language of Page
Use inclusive color-combinations
Quick win
Implemented in Quartz

Be mindful of certain color combinations that are difficult to differentiate by people with certain vision deficiencies.

  • If using a background color, choose a single solid color rather that a gradient, a texture or a pattern.
  • Ensure a strong contrast between adjacent colors. Refer to the Build section for contrast ratio per component.
  • Use a color contrast checker if introducing a new color scheme contrastchecker.com
  • Don't specify important information by color alone and always use color in addition with a symbol and/or text WCAG Use of Colors
  • Avoid red and green shown together as it is not differentiated by some users who live with vision deficiency like color blindness.
  • Ensure your color scheme settings can be over-ridden by the browser settings (e.g some people can only read with black on white or yellow on black)
Make sure your text is readable
Quick win
Implemented in Quartz
  • Avoid italic text as it can be difficult to read for some people.
  • Do not write titles or sentences in capitals as capital sentences are harder to read.
  • Avoid wide text differences: ensure the text is not too large or too small, and keep it to a standard size to let users adjust the text size through their browser settings.
  • Don't underline text that is not a linked text as it can confuse the user and be difficult to read if too long.
  • Consider using dynamic font sizing (WCAG Resize Text) and spacing (WCAG Text Spacing) instead of fixed.
  • Use left-aligned text for left-to-right languages, and right-aligned text for right-to-left languages. W3C Visual Presentation
Add alt-text to graphics and images
Quick win
High impact
Implemented in Quartz

All images need alt text.

**If the image is decorative: **

  • Tag with "" (null)
  • Specify an empty alt attribute so non-visual browsers know to ignore them (for example, alt="")

If the image is active:

  • Describe the action or task
  • Keep alt text length to 50 characters max

If the image is static:

  • Provide context in ALT text and tell the story
  • avoid subjective or ambiguous words
  • do not use jargon or branded words

Optimize for compactness by grouping alt text for icon and related text to avoid repetition.

Support multi-sensory access to medias
High impact

People can understand and use information contained in media, such as images, audio, video, animation, infographics, carousels, CAPTCHA, live events, and presentations.

  • If a dynamic content is longer than 5 sec, controllers (pause, play, etc) should be included.
  • Provide close captioning for all video content.
  • iFrames are not recommended as they lock user on the screen within the frame and should be labeled properly.
  • Avoid carousels: replace with alt text with visible controllers
  • Avoid parallax scrolling : poor contrast, confusing, and not accessible by keyboard

Component-specific guidelines​

Accessibility requirements relative to each component can be found on their respective page under Build > Components

Further resources and references​

More references to come.

Last updated on