Keyboard accessibility: if menu can be operated with keyboard should it still retain tabbing functionality?

I’m trying to create an accessible menu that can be operated with the arrows, as described here:

In the example once user has tabbed to menu, next tab moves him out of the menu. In other words user can’t tab within the menu itself, only use arrows.

How widespread / discoverable is that? Or should menu retain “tabbing” functionality?

Web/Push Notifications and Accessibility

I would like to know if there is any information or support available regarding Accessibility features with respect to Web Notifications on Chrome and Firefox browsers. We are trying to implement Web Notifications using the Notifications API and are unable to use keyboard to get focus to the web notification in the bottom right. We can though access the Accept/Block popup that requests the permission to allow notifications when we use keyboard tab or spacebar. We believe it is a very important ability to support people with disabilities. Thanks in advance

Color Palette Accessibility for White Text Button Labels


I’m currently working with trying to bring text accessibility into the visual design of a SaaS product suite, which has cross-product primary and system feedback colors and a number of product-specific accent/secondary colors. Because we’re SaaS, for our clients, we also permit them to select brand colors that are used for certain elements on client-configured pages shown to end-users.

One of those brandable elements are our action buttons and some page banners, so to make sure we maintain accessibility, we use white text and only allow clients to choose brandable colors that have high enough contrast to meet a 1:4.5 contrast ratio. So, white text is a constraint here.

We also use Angular Material as a base for our own components, and for text accessibility, they do what Google Material does, which is to simply automate the use of white or black text at a certain transparency depending on the hex you use for the container to always maintain a minimum contrast ratio of 1:4.5.

But if we were to do that, we’re using white text for some buttons on parts of the UI that are client branding agnostic [e.g. a client dashboard that shows multiple clients] and potentially using white or black text for other buttons that are branded elements for client specific parts of the UI [the client specific pages, where a client company can configure custom content for their end-users and where we’d show brand colors]. So white labels has to be a thing.

My Current Struggle

So with those constraints in mind, my current struggle is trying to find a new primary blue that works with white text. This is our client agnostic primary color, which is overriden with the use of a branded color.

Our current hex is 3E99D8 (HSL 204.5°, 66.4, 54.5), which is fine to use with large-scale text, since it’s contrast with white is 3.1, but we obviously don’t want to use action buttons with 24px/18pt nonbold or ~19px/14 pt bold text sizes, since our body copy is 16px/12pt regular font.

Similarly, for our market, we need this primary color to still be blue, given our verticals/subject matter/marketing/etc.

Note: I’m using HSL while exploring alternatives only because it’s easier to work with, even though RGBA would give me more colors to pick from.

Exploring Alternative Colors

So, thus far, I’ve tried increasing the saturation, since 3E99D8 isn’t 100% saturation, but that nothing to help increase the contrast with white text. If I increase the saturation, I have to lower the lightness, but if I lower the saturation, the color becomes more grey than blue, since changing the saturation only either adds or subtracts the amount of hue in the color, which effectively means I’m similarly adding or subtracting equal amounts of black and white in the color.

I can increase the contrast easily by making 3E99D8 darker, going from a .55 lightness value to a .43 lightness value, which gives me #257bb7. However, there has been some feedback that this is too dark and too different a blue.

So, lastly, I’ve attempted to use different hue values entirely, but because of that, it makes finding a solid threshold for the lightness and saturation values problematic because a different hue will have it’s own slightly different saturation and lightness minimum values to meet a minimum contrast of 4.5.

This also means changing any other colors in our color palette to become accessible also becomes problematic, since there’s no way to easily maintain a consistent perceived brightness across the palette, since different hues with the same perceived brightness may very well have very different saturation and lightness values.

From some experimentation using Colorable, I’m finding that hues closer to pure blue (H=240) can have a greater lightness value and lower saturation and still meet the minimum contrast, but blues that are closer to pure green (H=120), have to be darker and less saturated for adequate contrast.

I’m limited by lowering saturation either way, since below 50% saturation, the color becomes more grey than blue, but at 100% saturation, I have to keep a darker lightness value, since the color becomes so much brighter, and obviously I have to keep lightness below 60%, since anything lighter is too close to white to keep the minimum contrast. So, at this point, I’m kind of blocked when it comes to finding a new blue that’s near 3E99D8 but still accessible with white text.

So, now for my questions:

  1. Can anyone explain in layman’s terms why pure green and pure blue (120 and 240 hue values, 100% saturation, 50% lightness) have different contrast ratios with white, especially if white is supposed to be comprised of equal amounts of blue, green, and red?
  2. How can I proceed with systematically trying to find a blue close to 3E99D8 that meets contrast with white text, but isn’t drastically different?
  3. How could this exploration improve or worsen if I try to use another color model? Is a systematic exploration of this even possible with other color models?
  4. Is this overkill entirely and I should just push for #257bb7 to become our new primary blue?

Which accessibility standard for mobile app?

The W3C has created accessibility guidelines for websites. A is the least accessible, and puts the least constraints on the design, AAA is the most accessible, and puts the biggest constraints on the design. The W3C encourage to apply accessibility standards to non-website content also (Source).

I design a mobile app for iOS & Android and would like to pick an accessibility standard. My team and I are debating if AA or AAA are better. This will have a direct impact on design decisions, for example the choice of color. The WCAG contain minimum contrast ratios between text and background color.

On the one hand we want to be as accessible and future proof as possible, which speaks for AAA. On the other hand both Android and iOS come with accessibility features, which drastically improve accessibility independently of our color choice, which is why AA could be enough. For example, Android has a feature to increase text size.

Is it ok to say: AA is good enough, because users can increase text size with Android’s built-in tool, which makes lower contrast acceptable?

My question is about this specific example (color contrast) but also the broader approach: Can we be less strict about design choices, assuming that the OS’s accessibility features will improve accessibility for those who need it?

Does any version of Microsoft PowerPoint for Mac OS export tagged PDF for accessibility?

Microsoft PowerPoint for MS Windows can export presentations (both in the old PPT and the newer PPTX format) to “tagged” PDF. This requires that the user checks the “tagged PDF” option or something similar (e.g. “Best for online distribution and accessibility”) in the export dialog. “Tagged PDF” is the informal name for those features in the PDF standard that make PDF documents accessible for people with disabilities.

A function for exporting tagged PDF also exists in LibreOffice, although it does not work well for PPTX. (PPT and ODP are fine.)

However, I have not been able to find evidence (online) that such an option exists in Microsoft PowerPoint for Mac OS. The features seems to be available in Word 2016 for Mac OS (see Tagged PDF on a Mac at Penn State Uni and this Microsoft Community thread from 2017).

So my question is whether any version of Microsoft PowerPoint for Mac OS provides an option for exporting tagged PDF for accessibility. If this is not the case, Mac OS users will probably need to export PPTX to PPT in PowerPoint and then use LibreOffice Impress to convert the PPT to tagged PDF.