Your weekly frequent11y newsletter, brought to you by @ChrisBAshton:

Olay Designs An Easy-Open Lid—& Shares the Inclusive Design

• Olay, the beauty products manufacturer, have designed a new lid prototype for its creams, designed to be accessible.
• It has an “easy open winged cap”, “extra grip raised lid”, “high contrast product label”, and Braille text spelling out “face cream”.
• The lids are currently only available on Olay’s website.
• The design is open-source, meaning other beauty brands are free to use it and build upon it.

Gorillas’ nav: a case study

• A really interesting article by developer & accessibility advocate Kitty Giraudel, explaining how they built the main navigation on their employer’s website, Gorillas.
• It’s a hamburger menu style across all screen sizes, not just on mobile. You have to tap on the ‘hamburger’ to expand the menu and show the menu items.
• This behaviour comes for free with the <details>/<summary> HTML elements, which as native elements, work without JavaScript. However, clicking outside of the menu should cause the menu to ‘close’ again, and that doesn’t happen with those elements, so Kitty & the team replace the elements with a <button> if JavaScript is available, adding a listener to the click and focusin events to close the menu if the event takes place outside of the menu container.
• “Landmarks such as <nav> can be listed by assistive technologies, [therefore] it’s important that the <nav> itself is not the element whose visibility is being toggled. Otherwise, it’s undiscoverable when hidden”. So Kitty’s implementation wraps the menu in a <nav role="navigation"> and the CSS visibility toggling is only applied to its contents, not to the <nav> element itself.
• Kitty walks through a good example of progressive enhancement in CSS, using the @supports query to check if backdrop-filter is supported before overriding the background-color.
• Elsewhere on the Gorillas page, there is a language selector. Kitty points out that they avoided using flags to denote language, as flags are ultimately for countries, not languages (think UK vs USA flags for English).
• The language selector uses 2-letter codes, e.g. “EN” for “English”, with visually hidden text to clarify the language name: <a href="/en" hreflang="en">EN<span class="sr-only" lang="en"> — English</span></a>. Note the hreflang attribute, which I hadn’t heard of before, but is supposed to indicate the language of the page that is being linked to. Kitty admits it “might do nothing”, given the lack of documentation on it.
• They initially tried applying an aria-hidden to the 2-letter language codes to avoid assistive technologies reading them out (as they’re often incorrect, e.g. “DE” being pronounced “duh”). However, this would fail WCAG SC 2.5.3 Label in name, as voice navigation users should be able to navigate the page by what they see, e.g. “click DE”.
• Finally, I’ve learned that “When using aria-expanded="true", the label should not mention “open” or “close” (or similar) as the state is already conveyed via the attribute”.

Vicky Teinaki shares this tip on Twitter: “I was today years old when I found out that I can share a Google Slides presentation in html (for screen reader users and magnification users) by swapping out ‘/edit’ in the URL for ‘/htmlpresent’.”

National Convention Sponsorship Statement Regarding accessiBe

• The (American) National Federation of the Blind made a statement in June, about accessiBe, the market leading ‘accessibility overlay’ company that I’ve written about several times now.
• I missed this when it came out, and wouldn’t have known about it were it not for Steve Faulkner’s tweet. He picks out this pretty damning quote:
• “This week, the Board of Directors reviewed accessiBe’s business practices at the urging of members who have researched and interacted with the company, and the Board believes that accessiBe currently engages in behavior that is harmful to the advancement of blind people in society”.
• The statement goes on to announce that the NFB has “revoked accessiBe’s sponsorship of the convention”.

Did you know that you can subscribe to dai11y, week11y, fortnight11y or month11y updates! Every newsletter gets the same content; it is your choice to have short, regular emails or longer, less frequent ones. Curated with ♥ by developer @ChrisBAshton.