Gutenberg Accessibility: A Screen Reader Users Perspective

Transcript

Roberto Remedios: Hello everyone, uh, welcome to the WordPress Accessibility Day 2020. My name is Roberto Remedios. I live in San Jose, Costa Rica, um

Raghavendra: Hello everyone.

Roberto: I’m user experience and user interface designer. I’m also an advocate to accessibility. I have been working on accessibility a couple of years already I fund with a couple of friends a local meetup group here and Facebook group, mostly material in Spanish. My native language is Spanish, so if you know the accent sorry um. Well the next talk that we’re gonna listen is the Gutenberg Accessibility, A Screen Reader User Perspective.

The speaker will be Raghavendra Satish. Raghavendra is a Digital Accessibility evangelist. He works at the Deque Systems as a Senior Accessibility Consultant. He’s always breaking the web and uh mobile accessibility challenges.

He’s author of an Accessibility Blog, and is galvanizing the adoption of accessibility by inspiring inspiring the local tech community with meetups and mentorships. He propelled his thoughts by founding HelloA11Y, a community accessibility, accessibility professionals.

When he’s away from his computer we can find Raghava at the local cafes and restaurants sampling cuisine, attending local meetups, these audiobooks or writing on his personal blog. He also helped the small business um, help a small business and individuals, digital training, marketing and SEO consulting. He has been building websites and doing SEO consulting for more than 14 years. So please, let’s welcome Raghavendra. And thank you.

Raghavendra: Thank you Roberto. uh am I audible now?

Roberto: You have your presentation right now and your presentation is full screen, so you’re ready to go.

Raghavendra: Okay, hi everyone. Welcome to WordPress Accessibility Day 2020. I’m excited to be here to sharing my views on Gutenberg Accessibility. Uh I’m a person with visual disability. My name is Raghavendra and I’ll be sharing some of my insights as a person with disability who is using Gutenberg.

I’ve been building websites on WordPress for about 12 years now. And just because it’s easy to build websites on WordPress. It’s it, like I fell in love with WordPress. I worked with Joomla, I worked with Drupal and other CMS content management systems, but I fell in love with WordPress about 12 years back when I initially started uh with web.

And as Roberto introduced, I work with Deque Systems as a Senior Accessibility Consultant. I also run a meetup community called HelloA11y, HelloA11y.com and we do a lot of meetups and small conferences here in India for to nurture accessibility and promote accessibility within the tech community.

So today’s agenda is going to be about Gutenberg Accessibility. We all know that Gutenberg is a rich editor that is introduced into WordPress and I, I’ll be taking you through some of the accessibility challenges, usability challenges, uh like how people with screen readers and people with disabilities perceive content and some of my insights on how I work with Gutenberg and basically how I work with content more for my blogs that I run.

I run about five to six blogs actively and earlier uh about few years back I used to own and run more than about 20, 25 web blogs. Basically I’m into affiliate marketing, search optimization also, so that’s where all my experience working with content editing and content management comes.

So today’s agenda is going to be why Gutenberg needs a learning curve. So even as a power screen reader user, when I mean a power screen reader user, I’m, I’ve been using screen reader for about 15 years now since 2005, 2006. I, I’m not born blind. I became blind at a later stage in my life due to Retinitis Pigmentosa  a genetical disorder. So I’ve been losing my eyesight for a while and I’ve been a low vision user.

I used a screen magnification software like Magic and then slowly I transitioned uh in using screen readers full time like JAWS and NVDA, uh which I regularly use now as part of my job and day-to-day activities on the computer.

So even as a person with a power screen reader user, like I’ve been using for 15 years the screen reader, even for me when I initially uh started with Gutenberg, it needs a lot of learning curve, because there are no tutorials on how to use Gutenberg with a screen reader.

So I’ll be demoing some of these challenges like as soon as as soon as you get on to the editing part of the post, what happens really and how, what are the challenges that I faced.

So, so how to work with Gutenberg using a screen reader. We will be walking through a demo and the usability challenges and and then the some of the accessibility challenges that I have seen in Gutenberg.

So what is Gutenberg? So Gutenberg is the introduced in WordPress 5.0. It is a rich uh editor and in my perspective, what I have seen is that you basically being used to create a rich content. When I say rich content, it’s not just headings, lists, paragraphs, great design also.

The topography, all the layouts and and it has evolved. Like it came into existence in WordPress 5.0 and right now the version WordPress 5.5 is running, and the core uh Gutenberg plugin gets updated every two, once in two weeks. And with every major update the core is merged into WordPress core.

So what I have seen is there’s a collection of blogs, when initially the collection of, when everyone started talking about Gutenberg and the saying, it’s a block based design. As a person with disability I did not understand what is a block. So I, I when I was reading articles on other blogs and websites they said heading block, paragraph block or you know all the list block. I did not understand what is a block.

Theoretically it was very difficult to understand what was a block.

Then when I started working with Gutenberg, then I got a clear picture that every section of the content area is designated a block, is called a block. Like you you create a heading, it is a block on its own. It, you have a paragraph, it’s a block on its own. And Gutenberg gives a lot of control over the content and the layout of these blocks.

So you can customize all the font size, colour uh and styling of all the fonts and all. So these are some of the options that I have seen and uh from the technical standpoint like for a person with visual disability, it was not very useful for me to go and edit, because I’m not sure what exactly, what the color is going to be on the front end. And also I normally generally use the basic themes settings that are there.

So we all know that the Gutenberg accessibility story, it’s merged with 5.0. There was a lot of push back from the accessibility community and a lot of accessibility professionals and the wider community itself said that it should not be merged with 5.0, because it’s not mature.

And what, there were a lot of articles on the web where it was told that it was written, like the design aspect, like accessibility is not considered from the start. But what I see is for, with a two week, every two weeks development cycle and being pushed every two weeks, it’s very difficult to keep up with both accessibility design, development, and fixes of accessibility bugs and all that.

So there were a lot of challenges because there were a lot of moving parts, but uh after two years, after two years and what happened in 2019 is a WP Campus called for an independent audit by an agency, and the agency provided it results and we had like close to 300 accessibility bugs that were found, that that were found on the Gutenberg.

And the Gutenberg was audited, not on the plug-in, but was in the core that was merged with WordPress. So what did the WP Campus audit show? It showed like considerable amount of accessibility bugs.

There were more than 300 accessibility bugs.

Like couple of more of these bugs were related to authoring tool where you upload a video and there were no there is no way to provide caption.

So some of these are authoring tool challenges and some of them are pure accessibility bugs.

And after the WP Campus audit there are a lot of bug fixes on the way and the accessibility team started, the development team started fixing a lot of these accessibility bugs. And we have seen, I’ve personally seen some of these accessibility fix being uh, in place, during the subsequent Gutenberg plugin releases and in the core merge also.

And if you go to GitHub, I, I provided the link here. There are a couple of significant more accessibility bugs still that are open. And some of these bugs are, you know, like pure technical related maybe as a person with disability you might not be uh finding it very difficult to navigate, but they are technically an accessibility bug, that’s why they are called upon.

So what, how Gutenberg is uh, very difficult, like, as I said in the previously, it’s very difficult for screen reader users.

So what I did is as a person with visual disability, I work with a lot of other people with disability uh in the local community, so me and couple of uh my friends who are all screen reader users and some of these people are accessibility specialists, so what what I did, I gave them the Guten, I installed the Gutenberg plug-in and we, I I studied them how they’re going to use.

And some of the power screen reader users found it very difficult. They they did not understand, but like, the there are a lot of elements like, as soon as you open the post screen add new post screen, there are lot of elements and you click on add block and your focus moves to a search field.

So there they are like caught off guard completely. So we are going to discuss some of these during the demo. Like I’ll be running a demo of how I use Gutenberg and how you know, it is very different from our Classic Editor. What happens in our Classic Editor is like you have the title screen and there you have the content area where you type in the content.

Or generally what happens is as a person with disability, we generally use uh Microsoft Word and we type in our content and then we put it in the Classic Editor and we use screen uh shortcut keys in the Classic Editor to give a heading paragraph and block code and other markup to these, to the content that we created. So it was pretty easy for us and some of them you know said

that, we know HTML, so what they do is they use the Classic Editor text, text mode instead of visual editor and they mark up the content directly in Microsoft Word and they just put it in the editor and just publish the content. And that’s where you know as a screen reader user it needs a lot of learning curve here. And it, it’s a lot of visual aspect Gutenberg, as I said, earlier uh.

It’s, it’s there to create great visual design, but as a person with disability and who has been writing content for more than 12,12 to 14 years uh, I did not find it, like for me it’s just headings, paragraph, it’s more of content than visual aspect of the [unintelligible].

So one, one of the challenges that we also faced is with regard to the block definitions. So some of the blocks, like if you go out onto the Gutenberg search area and go category by category, there are some of these blocks like markdown block or uh some of the code or you know it’s a separator or so there are some of these blocks that we we did not understand, what it, what exactly that block does.

Okay so some of these blocks for which we tried to find definition and we were not able to find. So we felt that you know, if there is a help what exactly this block does? Like how it is going to show up in the front end? It would have been very helpful for us to use some of these blocks.

So I’m going to show a demo right now. So Robert, Robert, I’ll be sharing my uh screen reader sound, on over the zoom so that people will be able to hear what I’m navigating.

Roberto: Yeah the the thing is um let me talk with the administrator, because I think what you are sharing is your computer sound.

Raghavendra: Yes

Roberto: Maybe can you place uh your mic close to the screen reader?

Raghavendra: Okay, you’re able to hear my screen reader?

Roberto: Yes, we hear your screen reader.

Raghavendra: So I’m here on a screen uh, this is a post, I created a demo post here. So first to get a feel of this particular page this screen, I use headings. So what I’m going to do is I’m going to press control home to go to the top of the page and then

Screen Reader: [unintelligible]…. slower slower slower slower slower.

Raghavendra: I’m going to press H.

Screen Reader: Edit post heading level 1, script setting level 2, status and visibility heading level 2 button expanded, permalink heading level 2 button expanded, view post heading level 3, categories heading level two button expanded, tags heading level two button collapsed, feature image heading level two button collapsed, excerpt heading level two button collapsed, discussion heading level two button collapsed, link suggestions heading level two clickable, wrapping to top, edit post heading level one.

Raghavendra: So, I know I’m at the edit post then, I’m going to press tab here.

Screen Reader: Tab, document tools, toolbars only, add block toggle button.

Raghavendra: So that’s a tool bar, so as soon as I hear it’s a tool bar, as a person with screen reader user, I know that I had to use arrow keys to navigate. Let’s see what happens.

Screen Reader: Tool, undo button, redo button available, content structure button collapse,
block navigation button, add block toggle button, tools button collapsed, to activate press spacebar, undo button

Raghavendra: So, let’s add a block.

Screen Reader: Add block toggle button enter, toggle button, press search for a block, block library region, search for a block edit, search for a block, type and text, 110 results found.

Raghavendra: Okay

Screen Reader: Tab, tab, blocks tab, selected use clause key plus plus m to move the controled element, one of three.

Raghavendra: So if you see here, there are three tabs: one is blocks.

Screen Reader: Patterns tab selected styles …

Raghavendra: This, these are block patterns.

Screen Reader: Reusable tabs selected used

Raghavendra: And reusable blocks. So one of the one of the things that confused me is about this block patterns and the block templates. So uh after reading a lot of articles and tutorials, I came to understand that these are some of the pre, pre-designed templates that a person can use. Just select one of these block pattern and you can, the visual aspect of the pattern will appear in the front end and just you need to update the content.

So it was very difficult to understand when the blocks came, I, it took me a while to understand and then block patterns is something again it’s confusing for me. So let’s go to block.

Screen Reader: Blocks tab selected, use tab, blocks tab panel, text list box, markdown, one of 11

Raghavendra: Okay.

Screen Reader: Paragraph, heading, list, quote, five of 11, code, six of 11.

Raghavendra: Okay, let’s

Screen Reader: Five of 11, enter, editor content region, add block, block tools, add title demo, content right heading, paragraph, block,write heading, paragraph block, empty block, semicolon, start writing or type forward slash that chooses a block, block colon, quote block, add block, block colon quote, right quote, edit contains text, type and text, percent, right quote edit, contains text, empty block, semicolon, start writing block colon quotes, right quote, edit contains text, type and text, write citation, edit write quote, edit contains text, type and text, home selected, out of table, right citation, edit, contain write quote, edit, contains text, type and text

Raghavendra: Okay

Screen Reader: t-h-i-s space i-s space a space e-x-a-m-p-l-e, home selected, this is a example quote

Raghavendra: Okay so I, I wrote a quote. So what if I want to insert a list block inside this particular quote?

I don’t know, I still did not able to figure out, I was not able to figure out how to embed one block inside and like generally what I do is like I write the HTML markup. It’s easy for me, but if I have to put a list block inside this code block code, I don’t know how to do it. Let’s see if there is an option.

Screen Reader: Shift tab block colon quote, shift tab, add block, block tools, block tools toolbar read only, change block type or style button menu, press space

Raghavendra: So I am here on the block tools. So there are some accessibility challenges with this particular version of Gutenberg, on the core right now.

Screen Reader: Space

Raghavendra: So I press space

Screen Reader: Space, change block type, or style button menu, press space to activate the menu then navigate with arrow keys, add title edit, contains text, type and text

Raghavendra: I press space, I’m not sure…

Screen Reader: demo content, demo content, add title

Roberto: We’re on the title right now.

Raghavendra: Yeah the focus has completely shifted. I, I was trying to expand the more tools.

Screen Reader: Add title, tab right, heading, edit, contains text, type and text, space

Raghavendra: Space, okay.

Screen Reader: Shift tab, add block, block tools, block tools toolbar, read only, change block type or style button menu, press space to activate the menu then navigate with arrow keys.

Raghavendra: I’m going to press space bar here.

Screen Reader: Space, expanded, menu, change block type or style menu to move through items press up or down arrow

Raghavendra: It says expanded, okay. I’m pressing down arrow here, I’m not sure if something is happening over there.

Roberto: Yes, you have several options about paragraph, group, full quote, but they are not accessible at this point.

Raghavendra: Yeah, yes so none of them are read and one of the

Screen Reader: Escape, leaving menus, editor content region, add block

Raghavendra: And it’s very difficult, one of the challenge that I’m faced, we faces, is like creating content directly in Gutenberg now.

If I have to keep adding, like just imagine I have like you know, like 10 paragraphs with 10 headings, if I have to go through the process of…

Screen Reader: Escape, virtual

Raghavendra: Building each block inputting content

Screen Reader: Add title, add title

Raghavendra: One more challenge that I face is

Screen Reader: Demo content, right heading, edit, contains text

Raghavendra: I’m inside this heading, but if I press, if I press down arrow from
here, it moves to the

Screen Reader: Paragraph block, edit, contains text, next paragraph,

Raghavendra: Next block.

Screen Reader: Right heading, edit contains text, type and text, home right heading, hello world, edit

Raghavendra: So if normally generally what happens is like when I use up and down arrow, I expect the content to be read in an edit area, but here what is happening is we move from block block to block.

And if I, if I want to select the content in this particular heading suppose,

generally in an edit area, I do control A, what what happens is it select all the blocks.

Screen Reader: Hello world

six blocks selected, main region, editor content region, add block, block tools, add title, demo contents

Raghavendra: So if you are seeing, have selected all the six blocks that are there in the

Screen Reader: Escape, edit post, single left point, edit post, add type

Raghavendra: So I’m going back to the screen.

Screen Reader: Right heading, edit, contains text, type and text, escape virtual PC, cursor, escape, tab right heading, button, paragraph block, row two, this is a paragraph block, we are trying to demo this with screen reader.

Raghavendra: So this is one of the feature that I really loved about Gutenberg where you shift tab.

Screen Reader: Shift tab, right heading, button heading block, row one level…

Raghavendra: So there are like six blocks I know, row one, row two, it reads out this is a paragraph. So once the blocks are in place the hierarchy is easily understood, but creating content inside a Gutenberg, it it’s becoming very difficult.

Because or generally we create content like me and my friends or any all the people who manage this blog, that we create content in a Word document and we edit, we do spell check in Microsoft Word. We edit everything and we put it on a Google sheets, people take it from there and then we used to put it in the Classic Editor, format it, publish it.

But now taking each piece of content, like copying each paragraph or heading into this one became difficult. So now what we are doing is we are using the Code Editor.

So what I do, is like I press alt ctrl shift and

Screen Reader: Alt control shift, right heading, code editor selected, edit post, single left point add title, edit, add type, tab, type text, read [unintelligible]

Raghavendra: So what we do is we put the content here then we do the HTML markup on our own. We are not using the Block Editor as much as we are supposed to use. So generally what we do, we create a

Screen Reader: Alt control shift, edit post

Raghavendra: We create a block.

Screen Reader: Set of collapse, main menu ,add block toggle button, enter.

Raghavendra: We select the Classic Block

Screen Reader: Main region block library, cell A, sic, tab rest, search button, tab tab blocks tab selected, use [unitelligible] keyplus tab blocks tab panel text list box classic, one of one enter, editor content region, block colon classic block colon classic edit right heading right heading right head paragraph right heading, paragraph empty black semicolon start writing in the right quote edit block colon classic, classic, edit, toolbar blank edit

Raghavendra: So we we take the Classic block, we paste all the content here, then we go back to the Code Editor using alt, control, shift M.

We give the markup, the necessary markup, or we use some of these rich text  tools here.

Screen Reader: Shift tab, block colon classic shift tab, tab, block colon classic, toolbar with a paragraph button menu menu

Raghavendra: So it’s been easy you know

Screen Reader: Bold left bearing control

Raghavendra: Because

Screen Reader: Metallic left parenthe..

Raghavendra: So it is easy to mark a paragraph, to add text bold, hold it

Screen Reader: List left pair numbers list left block with left parenthesis line left left pair of the line center align right left insert slash at least left barricade

Raghavendra: So this has been very easy to do, otherwise it’s becoming very difficult for us to navigate within blocks, select content then put it here.

And some of the other challenges that we face is with the plugins.

Screen Reader: Edit post

Raghavendra: One of the confusion that we ran into is understanding the block structures.

Screen Reader: Block hold block block block hold block hold block insert tool bar and save button, preview blink left paren opens the publish button collapsed, settings toggle button

Raghavendra: So the settings we, we thought these settings is part of something to do with Gutenberg.

We, I did not realize these are post settings. So if I select this post this

Screen Reader: Heading publish button, publish button collapsed, settings toggle button pressed

Raghavendra: So all the

Screen Reader: Insert classic heading level two, scripts setting level edit post heading level wrapping to the bottom, classic heading level two, percent deep [unintelligible] notifications [unintelligible] classic heading level two, scripts setting level to toggle command, table with two header scripts clickable, edit the lab tool under content block nav and certainly output save draft button, preview button collapsed save draft button, enter, saving, preview button collapsed, settings toggle button pressed, space, main scripts setting level two, wrapping to top, edit post heading left percent D block blank notification blank, main reach list end, classic current, rightwards arrow, document button block bread crumb list of two items, document button, block breadcrumb list of two items, open publish panel button collapsed, open document settings button collapsed, blank, table end, combo box bottom pulling before closing a table, blank and open document settings, button collapse, space list, document button, block left parent selected right pair classic heading level two, wrapping the top, edit post edit heading, percent, document button open publish panel button collapsed, enter, main region visibility colon, publish heading, publish colon immediately, at suggestion colon add tags, share post heading level

Raghavendra: So if you see all these settings are hidden inside this button. It’s been very difficult to find some, of these settings for us. In the Classic Editor it has been very easy. Like you have the Classic Editor, you have the categories, you have the sharing settings you have the uh you know your store rank math, the SEO snippet where you can edit everything.

It’s just one screen with uh you know what what you want to show on your screen or not. Like in in the screen settings we we used to customize them in the screen settings show these these these uh custom meta boxes and you know they used to, we used to edit them, but it after the Gutenberg it’s been it was difficult.

Like one particular time we spent half an hour trying to find where the categories heading was, because it was assigned to a default uh uncategorized category, one article. So we were trying to find out where the categories is.

It became very difficult for us to.

Screen Reader: Feature image heading level two share this post heading level two button expanded suggestion colon

Roberto: For regular users we, we got lost at the beginning with all the interface.

Raghavendra: Yeah so it’s, it’s been very difficult for us like that and

Screen Reader: Edit post, add the tool under content struct, block navigation button collapsed, content structure button collapsed

Raghavendra: So content structure, this this one I understood at a very later stage. It gives out the structure of the content like which headings, paragraphs you have, but all this needs lot of learning curve and there are no tutorials like how how to, see there’s a specific way we are taught how to use screen readers on the web.

During one of our uh you know like we, me and our friends we gone through professional training because we are late blind people and they are taught like how to use screen reader on the web. But after a while you get hang of it, how you know, things are laid out on the web.

But all this is so confusing because there’s so many moving

Screen Reader: Block navigation button circle toolbar end, preview button and [unintelligible]

Raghavendra: And this preview also.

Screen Reader: Preview, tab editor top shift tab, preview button collapsed, space

Raghavendra: I expand it.

Screen Reader: Tap, menu to move through items

Raghavendra: Nothing happens there also, even in the preview and I think this preview, I’m not sure if it is broken or if it is like accessible

Screen Reader: Tab

Raghavendra: Because when I press enter

Screen Reader: Enter, title, edit post single left pointing tab, T equals 4206 and shift tab, tab, B equals, tab tab, PC cursor

Raghavendra: I don’t know

Screen Reader: To move through items press up or down arrow.

Raghavendra: This stuck

Screen Reader: To move through, tab tab P equals 4206 and preview equals true.

Raghavendra: It reads some code. I’m not able to preview my posts also properly most of the time.

Screen Reader: Escape, leaving menus, editor top bar region, preview button

Raghavendra: The preview button is also not accessible.

Screen Reader: Virtual PC click left pane opens in a new tab right, publish button expanded, settings toggle button pressed, Genesis toggle branch toggle button

Raghavendra: So the these been, after I understood what settings, what Genesis,

Screen Reader: Jetpack toggle button

Raghavendra: All these things do, I understood all the options of these other block related plugin are here.

Screen Reader: [unintelligible]

Raghavendra: [unintelligible]

Raghavendra: I understoond that as soon as I press rank math table

Screen Reader: Edit collab, add to the content block added, certainly change block, move up, more option, preview button collapse, publish button expanded, settings toggle button Genesis toggle button, rank math toggle, button enter

Raghavendra: So what I’m doing is I’m using the button B, uh the keys key stroke B to move from button to button.

Screen Reader: Scripts heading level to focus keyword, heading level two, basic scale, six errors, heading level two button expanded

Raghavendra: So I’m pressing H to go to the headings.

Screen Reader Additional seven errors, heading level two button collapsed, title readability two errors, heading level two

Raghavendra: This has been pretty easy once I understood the layout of this, uh how the plugin block plugins work, I understood that the plugins are, they they come in the top region and I have to you know activate them and select the options.

I think this is pretty much what I wanted to show like some of these accessibility and usability challenges. Uh I think we have, we can go for questions.

Roberto: Yeah, sure thank you very much for the demo. I mean it has been really really nice um get the real vision of people who interact with the Gutenberg usability. I mean for regular users, for most of the users at the beginning is kind of difficult, because there is like um a lot of stuff to learn.

I mean visually it looks very clean, it looks very simple, but I think it’s a lot a lot more complicated than the regular editor. Even at a pro tip when you create content you can paste all your content on the Classic Editor and then convert your Classic Editor into all the different blocks and most of the times uh WordPress it will translate all your different content, but yes it’s difficult.

And about the plugins, I mean, most of the plugins are available as a block and then you call the plugin, but then you need to make configurations in the same plugin. So it’s very difficult. Let’s start with the first question and the first question is: Will you find useful to have easy options to disable blocks that you can’t or you don’t wish to use?

Raghavendra: So there are too many block.

I think the, it’s not the question of disabling the blocks uh, like I think there are very few blocks that I use on some all my websites. So sometimes you know, I might use the Jetpack, Eventbrite, the calendar leave block. They, I use them rarely, but I need them. So disabling is not an option, but maybe you know the way I want to approach the content itself should be a little different, because I, I don’t use all these blocks all the time and all the options. Robert?

Roberto: Yes sorry sorry, hello over here uh. Okay the the next question actually is my personal question and is away from the native blocks, because there is a lot of native blocks uh, did you find the other blocks the the plug-in blocks accessible for example, Woo-Commerce, Yoast SEO, other Gravity Forms, Contact Form seven, stuff that you usually use a lot to create content, are they friendly with screen readers or not?

Raghavendra: Okay Woo-Commerce I’m playing with Woo-Commerce right now and Contact Form seven, I’m not using it right now, because I tend to use the Jetpack forms, Jetpack forms are very accessible and Mailchimp block is accessible uh Ranked Math SEO, Yoast SEO and there are other plugins that are very like Atomic uh the Atomic Blocks from StudioPress, they are accessible, the accordions, uh the testimonials block and the author block.

So most of the blocks that are coming, the blocks are whatever I encountered are very accessible. Like creating content has been very easy inside them.

Roberto: Okay thank you very much. The next question it will be: Do you find any particular combination of the screen reader and browser to be better?

Raghavendra: I use JAWS plus Chrome, NVDA plus Chrome these are my default screen reader combination.

I used to use NVDA plus Firefox earlier, but now I prefer NVDA plus Chrome. It’s more supported and and you know I come from that era where I used to, I learned screen readers using JAWS. So it’s a very little difficult transition for me to use full-time N-V-D-A, so I tend to use JAWS a lot uh when I’m not doing accessibility testing, but when I do accessibility testing specifically for my clients and or I’m testing some widget for accessibility I tend to use NVDA plus Chrome.

Roberto: Okay thank you, we have the last question is:

Unexpected changes of focus are one of the WordPress Accessibility Team common complaints about Gutenberg. How often or rarely do you feel that happen in your users of Gutenberg?

Raghavendra: Robert can you repeat the question?

Roberto: So often, but like the unexpect, the unexpected changes on, from one element to another one, the focus, is one of the main complaints of of Gutenberg. How often did you get that, that do you think you are on one specific place, where you want to go to another place and it’s not working properly?

Raghavendra: So the the major problem that you run into Gutenberg is because you need to understand how this Gutenberg is laid out. Like you you being a person with screen reader user or you you can be a even a sighted person, just can’t open Gutenberg and understand it instantly.

Like I run the, I run the Island, Hyderabad blogging club also here. I run a club full of bloggers and most of them, I think I’m the only person with disability me and another friend are the only person with disability in that club and lot of them are sighted. And when the Gutenberg came in, they are like, is there a way to switch back to the Classic Editor? Is the question they asked.

So we told about the Classic Editor plugin, but a lot of them uh did not transition to Gutenberg immediately. That took a long time to understand.

Like we we did a lot of workshops with them uh to make them understand how Gutenberg works and how it helps with the design and all that and uh now they fell in love with the Gutenberg. They don’t want to transition back to Classic Editor. So because it was so easy for them to create stories uh it was visual, visual stories storytelling and all that.

It became very easy for them to create, so they don’t want to transition back to the Classic Editor. They’re using Gutenberg. It takes a lot of time to learn Gutenberg, that’s the only aspect here and as a person with screen reader use, as a disability and the screen leader user, it took a lot of time for me to understand Gutenberg end-to-end.

Like now I can create blocks, content and all, it’s just a little difficult for me to manage content rather than create content. Like if I have to copy each paragraph from Word, Microsoft Word and put it here into, create one block, put it in a put it inside that block then go back to Word again, come back here put it in heading, it’s taking too much of my time.

Roberto: Awesome, thank you. Uh, well we don’t have more questions at this moment so please the people who is watching this over YouTube feel free to add your questions into the YouTube chat and we will those answer that on on the presentation um. Meantime, maybe I have a last question because we have another two minutes maybe uh.

What what did  you recommend for people who is blind who have the disability uh, to interact directly with Gutenberg?

You already say it take a lot of time not just to understand how Gutenberg work, but great content beyond the tip that you already give, create your content on a Word document and paste it into WordPress. What other kind of uh tip did you have for the people?

Raghavendra: So one of the other thing is, as you said earlier what I do is like I create the content I put it in the Classic Block, Classic Editor then I use this plugin called I think uh bulk Gutenberg, so you change all the posts into blocks.

So I, I converted the old posts and new posts. I put them as a regular Classic Block and then I convert them into blocks. So what I also did is right now I had a virtual assistant who is helping me with, who’s a sighted person helping me with all the visual aspect of the design aspect. Like I only concentrate on the content and they take care of the pictures, the visual aspect of all the other things.

Roberto: Okay, awesome thank you. And maybe the the last question, because we don’t get any other ones and I have always questions: If you run as a lead of the WordPress project at this moment and you decide let’s do this 100 percent accessible, where did you focus to make Gutenberg and this experience more accessible? What do you want to see on the future or what do you want to see on Gutenberg to be more accessible?

Raghavendra: If you ask me like what I am thinking is as I said, uh I want to create content in Microsoft Word.

Just come here put it and then work on the formatting and then maybe you know a button or uh option where it will convert everything into blocks. And then I hand over it to my design team.

So basically I, I come from the content aspect of this and as a person with the visual disability, I don’t know if I insert a picture, I don’t know where I’m inserting it, or you know what is the, is it taking completely over what is, you know the cropping of the image, where it is placed. Is it placed to the left or right, all that aspect. So I normally tend to leave all the design decisions to the design team and then just work on the content aspect.

So uh if you ask me right now what I would want to see is, I just want to see uh uh like how this Classic Block is there right now, if I want to input the content I want to input here, format it, then a button or you know an option just to convert everything into blocks. And then you know where the design team can take it forward from there.

It should be easy for me to publish content, format content, uh edit content also. One of the main challenges that we are facing right now is with the editing of the content.

So once we put all the content into blocks uh editing of the content is becoming very difficult.

Like you want to edit a certain line in a particular paragraph, earlier what we used to do is we used to copy all the content into Microsoft Word from the Classic Editor do Control F, look for that particular keyword and wherever we are supposed to edit them and edit and just put it back into the editor. But now with the Gutenberg, it’s it’s like you know I have four paragraphs, four headings, couple of lists, uh it became very difficult for us to edit the content. And if I copy from the Code Editor, all the HTML code also comes in. So it’s just not really working out. So it should become easy for us to edit content in the Gutenberg.

Roberto: Awesome, well thank you very much um great.

This talk, you have been amazing um um I think that’s all for tonight guys um. Please let’s thank Raghavendra and let’s um remember we we’re gonna have our next talk on possibly 10 minutes, 6 UTC time uh. It will be Accessibility by Default in Authoring Tools by Susanna Laurin. It will be on the same channel. So uh let’s gonna take a little break and we will see you again soon. Bye.

Raghavendra: Thank you, thank you everyone I’ll be updating my presentation and put it on, give it to the team here and you can all follow me on Twitter and other accessible, all the other channels.