Posted by suriyan2538 on Wed, Dec 06, 2023 - 11:37pm --- Updated: Dec 07 '23 - 9:06am

hello

I'm visually impaired. I access Backdrop using a screen reader.

What I'm wondering is I don't see the Block Weight configuration within the layout.

I'm not sure if I want to set a Weight value for a Block, how do I do it?

Or the Weight configuration menu within the layout already exists. But my screen reader can't find it. Or is the Weight setting not necessary when using the layout?

And if I have multiple Blocks within the same region How do I sort each block?

Thank you for the answer.

Sorry if my question confused you.

Most helpful answers

Hi suriyan2538,

Hi suriyan2538,

reordering blocks in layouts is slightly different to how reordering in other admin forms work.

Sad to read that it's not really working well. I'll try to explain a bit, how it's supposed to work.

The blocks have no numbers, but it should be possible to move them via keyboard.

Arrow up and arrow down moves the block within the same region. Arrow right should move the block to the next region, arrow left to the previous region.

After you moved a block, this action should get announced by your screen reader.

Does this help?

It seems like this handling isn't documented well and needs improvement. What would help the most? We're grateful for any advice.

regards,

Indigoxela

Comments

Thu, Dec 07, 2023 - 12:55am by yorkshirepudding

@suriyan2538

Thank you for raising this accessibility issue.

As far as I can tell, there is no weight field.  Looking at the config for a layout, this is how the blocks order is set:

    "positions": {
        "header": [
            "f0ccb240-6186-46f9-ad07-7febf0cbe3f7",
            "d55f5c31-ca77-44ef-8d00-c305e7525911"
        ],
        "top": [
            "c1935119-e6d1-4988-8e2c-442a536a32b2",
            "f650b3bc-ca95-4774-8b02-2f6a4e31d163"
        ],
        "content": [
            "e6a15059-c873-46be-8b47-710f7eaeb09d"
        ],
        "sidebar": [
            "1cc23779-4447-4df0-a500-b85cd23ded38",
            "bde8018b-4c6a-4396-8300-e8c132c7d18b",
            "ea72d4ec-c207-4a05-b503-3c92df5021ac",
            "2b619d93-3448-4d50-aa00-dd7709c659d1"
        ],
        "bottom": [],
        "footer": [
            "3587fdb4-9336-47cd-a64c-762d5d35fe48"
        ],
        "title": []
    },

Within the layout user interface, the blocks can be dragged within regions and from one region to another.

I will raise this wider on the chat channel, as we may need to make changes if this doesn't work for users with screen readers like yourself.

Perhaps we need an alternative screen that allows this with a selection interface rather than dragging and dropping?

 

Thu, Dec 07, 2023 - 1:08am by suriyan2538

@yorkshirepudding

Thank you for your answer.

If block arrangement requires using the mouse to drag and drop It shows that right now blind people really can't use this function.

Because screen readers for blind people Cannot use the mouse to drag and drop blocks.

In Drupal, people who are visually impaired You can do this by assigning a numerical value to Weight.

I'm waiting for this in the future.

Thank you again  

Thu, Dec 07, 2023 - 1:55am by yorkshirepudding

Further to this, we have the following accessibility features on that screen:

Let me know if this works for you.

Thu, Dec 07, 2023 - 3:58am by yorkshirepudding

That should be part of Backdrop already - that file is from the branch that docwilmot used to introduce the announce function.

indigoxela's picture

Thu, Dec 07, 2023 - 4:05am by indigoxela

Hi suriyan2538,

reordering blocks in layouts is slightly different to how reordering in other admin forms work.

Sad to read that it's not really working well. I'll try to explain a bit, how it's supposed to work.

The blocks have no numbers, but it should be possible to move them via keyboard.

Arrow up and arrow down moves the block within the same region. Arrow right should move the block to the next region, arrow left to the previous region.

After you moved a block, this action should get announced by your screen reader.

Does this help?

It seems like this handling isn't documented well and needs improvement. What would help the most? We're grateful for any advice.

regards,

Indigoxela

Thu, Dec 07, 2023 - 5:12am by suriyan2538

Hello @Indigoxela

I will explain the information as much as my English skills allow. And I will do my best to give you information.

Up, Down, Left, Right arrow keys on the keyboard in a screen reader Its function is to move the cursor to different positions on the web page.

When the cursor moves to any position The screen reader will then read the text at that location aloud. (upper and lower arrows The program will read words. along with giving details that In the location of this text are links, buttons, etc., and the left and right arrows. Screen readers read the spelling of words aloud. or that sentence)

So when I go to the block management page, the arrow keys can't move the block's position because the arrow keys are linked to the screen reader's speech.

Screen readers also don't have access to the block selection menu, making it impossible to determine which block you want to reposition.

In D 7, each Block has a field to set the Weight value, making this possible easily.

From my experiments, I found that Another way to change block sorting (that I can do) right now is to delete all blocks in the region I want to sort. Then gradually add those blocks back in. By ordering from the first block being at the top, adding the second block which is the next block down. And do this until it's complete.

The disadvantages of this method are Blocks can be arranged in only one way. is from top to bottom (according to the details the screen reader told me), but the side block cannot be defined.

As for moving blocks to other regions This one I can use because it's a combo box menu. It's in the settings page of each Block (I think that if the Backdrop has weight in the future, it can be added to this same page. so as not to clutter the layout page)

I have a very long explanation. If it makes you confused I apologize

indigoxela's picture

Thu, Dec 07, 2023 - 5:33am by indigoxela

Hi suriyan2538,

many thanks for the clear description of the problem. No need to apologize for a long post, your contribution is highly appreciated.

So, using arrow keys for moving blocks was a bad idea, it seems. I'm not sure if we can provide something based on numbers, but we'll investigate possible approaches.

In the meantime, I've opened an issue in the Backdrop core issue queue. This seems to be a major bug: https://github.com/backdrop/backdrop-issues/issues/6326

One question: what would be the second best solutions, if numbers aren't possible? But most of all: what would be the ideal solution from your perspective?

regards,

Indigoxela

Thu, Dec 07, 2023 - 6:14am by suriyan2538

Take what I can think of right now. In a way that I still haven't thought about whether I can do it or not.

in each Block  (e.g. Block User Menu, Block Main Menu) There should be a menu for enter or a spacebar (can be a pattern, button, or link). When you press the button there There may be questions that pop up. What position do we want to move the Block to?

such as moving to the top position of the region. Move to the right side of the block at the top of the region. Move to the top of the Main Menu Block. Move to the bottom next to the Main Menu Block. After selecting, press Save.

Or another way is There may be a copy/paste button for every block that can be pressed with the Enter key or spacebar.

Let's say I want to move Block 3 to replace Block 1, I would move the cursor to “Block 3” and press the Enter key or spacebar to copy “Block 3”.

Then I move the cursor to “Block 1” and press the paste button or link on “Block 1”.

When I finish, “Block 3” will replace “Block 1”, “Block 1” will replace “Block 2”, and “Block 2” will replace “Block 3” automatically

But this method still does not solve the problem of placing blocks on the left or right side.

It's just my opinion. I'm not a developer. So I'm not sure if this method is possible or not. But I think it might be a guideline.

indigoxela's picture

Thu, Dec 07, 2023 - 8:10am by indigoxela

Interesting, that's food for thought. Using a key to mark a block as "movable" and then you can navigate to another place and drop it by hitting another key? Did I get the idea right?

A curious question: how do you determine, where you are right now, when navigating through the layout form? Is that at least clear enough with our current approach?

klonos's picture

Thu, Dec 07, 2023 - 4:53am by klonos

Hello suriyan2538 from me as well,

Sorry to find out that we are not doing as good a job as we should with this, but thank you for taking the time to bring it to our attention. We will try to improve things, but since we are a smaller community than the wider Drupal community, it might take a bit longer to move things along.

As indigxela mentioned in the previous comment, there's a way to move blocks using the keyboard. Please tell us if that works for you, and what we could do to make the feature more obvious and easier to use. Is the use of the up/down, left/right and tab keys something intuitive and generally used as a standard for other keyboard-enabled navigation implementations you have been using, or should we be doing things differently?

Please keep in mind that the Drupal interface that allowed reordering blocks was listing all regions available in a theme stacked on top of each other, regardless of how these regions were positioned relative to each other (for example a sidebar and the main content region are typically placed next to each other, rather than vertically). In Backdrop, the UI for placing blocks is using actual representations of the regions, which helps to visually/mentally correlate the positioning in the backend with the end result in the frontend. Does that work well and is it helpful for visually impaired people, or it is irrelevant and of little or no use at all?

If you have the time, can you please try installing the CKEditor 5 module and testing it? The reason I am asking you to do that is because that module also has a keyboard-based navigation that allows you to configure its toolbar buttons and move them around. It has 2 rows of toolbar buttons (one listing the active ones and the other the available ones), and you can reorder the buttons within these rows (which would be the equivalent of regions in the block admin UI), but also move buttons from the enabled row to the available row and vice versa. I would like to understand if that implementation works better with screen readers, and if we can adapt it to be used in other places in our admin UI (including the "Manage blocks" UI).

Again, thank you for giving Backdrop a try, and for taking the time to report problems to us. Please keep it coming 🙏 ❤️

Thu, Dec 07, 2023 - 5:22am by suriyan2538

Hello @ klonos

I understand the limitations of the development team very well. Therefore, I am in no hurry in this matter.

I also understand that To design tools that are accessible to everyone It will take time and be tested in real use. Including having someone help test regularly.

I'll take the opportunity to test CKEditor 5 at your invitation.

Or if there's anything I can help test for you? Please don't be considerate.

I love Drupal 7 and now my passion has moved to Backdrop and I wait for the day when Backdrop takes over.

klonos's picture

Thu, Dec 07, 2023 - 8:40am by klonos

Thank you @suriyan2538,

FYI, we have also started a discussion about this in our public chat here: https://backdrop.zulipchat.com/#narrow/stream/218635-Backdrop/topic/Layo... and created a GitHub issue in our core queue here: https://github.com/backdrop/backdrop-issues/issues/6326

Can you please clarify the following for us: is the problem that you cannot move the blocks at all, or was the way to move them hard to discover? If the latter, then now that you know how it works, do you find it relatively easy/intuitive? Do you perhaps have any recommendations of similar user interfaces that might work better?