Accessibility

Making an SMB interface better for everyone means caring deeply about
creating a quality product and having the business interests at heart.
A top-quality product should have an awesome user experience (UX), including:

• A beautiful and efficient design
• Consistent and valuable copy
• Universal design and inclusivity guidelines

Usable for everyone

It’s important that B&M products—and Partner products—are usable and valuable to everyone.

Everyone is a pretty big group. It includes suppliers, our end customers, their customers, our web design partners, our employees, and the greater tech community at large. That also includes all members of the community who have disabilities.

People might be affected by varying degrees of disabilities such as auditory, cognitive, physical, speech, and visual impairments. Therefore, it’s important to take into account how to design and develop a product to support a wide range of needs and experiences.

In the United States, 61 million adults has at least 1 disability [Source: CDC]. Elsewhere the estimate is one in seven (roughly 15%) of the world population has one or more disabilities.

---

Building inclusive experiences

Using our components is a way to boost accessibility and consistency when building products related to catering and hospitality.

• The part library in this style guide includes code we can use across applications.
• This part code includes markup.
• As the code exists in a single reusable component, it’s easier to update and fix any bugs.

The build-it-once, use-it-everywhere model makes accessibility knowledge of the designers and developers involved in implementing these components is available to all of B&M and our partners. Because of this, anyone adopting our framework gets a consistent experience that can be leveraged into accessible products.

Many accessibility features come free in the components. However, it is also important to make sure that components are integrated in a way that doesn’t result in unforeseen accessibility hindrances. Depending on how components are used, there might be more things to consider for the design and implementation. Be sure to test user task flows after any integration.

Handling focus to support partners’ workflows

We won’t programmatically move focus to new content without partners’ input. B&M components using controls to display overlays, such as modals and popups, handle focus automatically.

The only case where the focus should be managed without the partner’s green light is when the partner must be interrupted because they cannot proceed with their current workflow.

Restricting non-standard interactions

Partners will expect to interact with controls and content in ways that comply with the defaults for their browser, platform, and adaptive technologies. Introducing non-standard features fosters better ways for partners to accomplish tasks, but they can also create hindrances.

For instance, partners who rely on the keyboard will expect that buttons can be activated with the / key or the key. If buttons are programmed to be used with different keys, partners will need to be instructed on how to use them.

Before designing or building custom features that use non-standard controls or interactions, first consider whether the objective can be met using existing default features.

If non-standard interactions are required:

• Carefully follow guidelines and best practices for designing, building, and testing custom features on your platform
• Give partners clear directions for using the custom feature
• Provide an additional, standard way to accomplish the task

Adaptive technology support

Our components are tested for accessibility with automated and manual techniques. Partners should expect to be able to access our component’s features using modern adaptive technologies. These include native and third-party tools like:

Screen readersSpeech recognition programsSupports for low vision and color blindnessAlternative keyboards

Switch devices

Tools for readability

Coding standards

B&M components start with web standards for HTML, CSS, and JavaScript. Features from the Accessible Rich Internet Applications (WAI-ARIA or ARIA) specification are used to build a functionality that is not available in native HTML.

Alternative text

To help people who rely on assistive technologies, such as a screen reader or other text-to-speech programs, our components use alternative text for icons and images used to convey information and actions (like buttons and links).

Meeting the Web Content Accessibility Guidelines (WCAG)

B&M targets WCAG 2.1 Level A and Level AA success criteria, and seeks to provide a highly usable experience for everyone. For more information, see the following resources:

WCAG 2.1

ARIA 1.1

B&M’s statement of commitment to accessibilityB&M is committed to treating all people in a way that allows them to maintain their dignity and independence. We believe in integration and equal opportunity.
We are committed to meeting the needs of people with disabilities in a timely fashion, and will do so by preventing and removing barriers to accessibility and meeting accessibility requirements under the ADA Accessibility for Americans with Disabilities Act.

Feedback

Building accessible and inclusive experiences is co-creative and iterative journey. Feel free to reach out and provide feedback on this style guide.