#A11y0 utenti parlano di questo argomento

Hi.

I’m interested in aspects of WCAG 1.4.10 Reflow as it relates to Lightning Web Components (LWC).  I’m not interested in how to test it; just simply what is in scope to be tested? My focus is on LWC which are designed to be placed in a page template component, but not page template components themselves.

I’m currently thinking that WCAG 1.4.10 Reflow is only applicable to LWC which:

1) are targeted at pages which themselves support a "Large" form factor;

2) either have no supportedFormFactors - so it is set by the page it is used in; or a supportedFormFactor set to "Large".

But, I wanted to reach out to the community for thoughts.   All comments welcome!  If it's already been answered somewhere, sorry.

I've considered the following resources to date:

supportedFormFactor as a child of targetConfig

From https://developer.salesforce.com/docs/platform/lwc/guide/use-config-form-factors.html

This governs the context in which the component is available - both by page and by viewing device. This means that via its config a component is restricted to specific pages it can be used in; and within that even specific devices it can be viewed by.

flexipageRegionWidth

From https://developer.salesforce.com/docs/platform/lwc/guide/use-width-aware.html

It deals with setting CSS - it is not just set at runtime.  Its value changes, and will update CSS throughout the period the page is loaded. This means that a user who chooses to resize their viewport might see different content relative to the size / selected breakpoints.

Valid CSS class values are SMALL, MEDIUM, and LARGE

screenResponsive="true"

From https://developer.salesforce.com/docs/atlas.en-us.exp_cloud_lwr.meta/exp_cloud_lwr/get_started_responsive_properties.htm

Deals with setting CSS - it is not just set at runtime.  Its value changes, and will update CSS throughout the period the page is loaded.  This means that a user who chooses to resize their viewport might see different content relative to the size / selected breakpoints.

WCAG 2.1 1.4.10 Reflow

From https://www.w3.org/WAI/WCAG21/Understanding/reflow 

Which seems to suggest that reflow should only be tested in a desktop environment, due to known support issues with browsers on mobile operating systems -> see sentence "The lack of magnified reflow support in browsers on mobile operating systems can therefore be regarded as a user agent support issue."

#DF23: American Sign Language Translators for Salesforce+

Love love love that Salesforce has implemented live American Sign Language interpreters on the Salesforce+ app for Dreamforce 2023. Nice job, team!

You can watch all the action here: https://lnkd.in/gDJbads5

#A11y #DF23 #Accessibility

Hi all,

So the Experience Builder has some accessibility challenges but I found some workarounds to be able to use most of its functionality with the screen  reader. The notes below are for NVDA since you need to use the click and hold functionality for dragging and dropping. 

When you open the Experience Builder, on top there are a few buttons like Refresh Page, Undo, Redo, Preview etc. When you get to preview, if you press the down arrow key once, you get to an element that will just say Clickable if you haven't disabled NVDA's hint stuff that tells you the element types. 

Once you are at this Clickable Element do the following: 

1. Press NVDA + Numpad Slash to move the mouse to the object. 

2. Move the physical mouse down a tiny bit. 

3. Press the up arrow key followed by the down arrow key. 

If the mouse pointer is on the top of the icon, you  should hear the text that gets revealed on mouse hover. It should say components. Pressing enter won't activate this, so you should press the Numpad Slash button to trigger a left mouse click to activate the button. Your focus will now move to a new dialog where you can access the components. 

Besides the Components, there are 4 more icons that reveal when the mouse is on top of them. To get to those, you will need to repeat the steps above, but keep moving the mouse pointer further down as they are vertically positioned on the screen one after another. Keep inspecting the revealed text by moving up and down with the arrow keys. 

Those are my notes about accessing those hidden icons. The icons are Components, Settings, Theme, Page Structure, and one more that escapes me at the moment :). 

For adding a component, after you reveal the component list, you will need to enter NVDA Focus Mode after expanding a section. For example, in the Content section, after expanding it, the first item in the list is Calendar. 

1. Enable focus mode with NVDA + Space and use the arrow keys to select a component. 

2. Move the pointer with NVDA + Numpad Slash on top of it, then lock the left mouse button with Shift + Numpad Slash. 

3. Exit Focus Mode with NVDA + Space 

4. Go up until you reach the area where your page sections are displayed, you should hear things like Content Header, Content, Content Footer. 

5. When you know where you want to drop the component, move the mouse pointer  there with NVDA + Numpad Slash 

6. Drop the component by pressing Shift + Numpad Slash. 

Finally, if you want to delete a component, the easiest way to do this is via the Page Structure menu which can be accessed by the icons with hover text that I talked about in the beginning. The Page Structure section displays all the components in your page which lets you access their properties or delete them. 

Hope this helps.