# Enabling accessibility on prosemirror

**URL:** https://discuss.prosemirror.net/t/enabling-accessibility-on-prosemirror/3147
**Category:** Show
**Created:** [September 16, 2020, 11:18am UTC](https://discuss.prosemirror.net/t/enabling-accessibility-on-prosemirror/3147 "2020-09-16T11:18:53Z")
**Posts on this page:** 11
**Page:** 1

<div class="post-metadata">

### Author: ![dreamweiver](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/dreamweiver/32/1710_2.png) [@dreamweiver](https://discuss.prosemirror.net/u/dreamweiver)
#### Post date: [September 16, 2020, 11:18am UTC](https://discuss.prosemirror.net/t/enabling-accessibility-on-prosemirror/3147/1 "2020-09-16T11:18:54Z")

</div>

Hi Team, I have using prosemirror for quite some time now and its really easy it use and pretty cool too.

however, there is one thing I am unable to perform over a prose mirror instance is that keyboard navigation, in order to support accessibility on my webpage.

I searched the docs, didn’t find any suitable info for enabling accessibility, can somebody help me out here.

Any Quick help would be really appreciated 🙂

---

<div class="post-metadata">

### Author: ![marijn](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/marijn/32/15_2.png) [@marijn](https://discuss.prosemirror.net/u/marijn)
#### Post date: [September 16, 2020, 4:15pm UTC](https://discuss.prosemirror.net/t/enabling-accessibility-on-prosemirror/3147/2 "2020-09-16T16:15:20Z")

</div>

The core library should be accessible by default. The menu module is pretty terrible, in terms of keyboard access and screen-reader support, but easy enough to replace.

---

<div class="post-metadata">

### Author: ![dreamweiver](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/dreamweiver/32/1710_2.png) [@dreamweiver](https://discuss.prosemirror.net/u/dreamweiver)
#### Post date: [September 17, 2020, 6:57am UTC](https://discuss.prosemirror.net/t/enabling-accessibility-on-prosemirror/3147/3 "2020-09-17T06:57:06Z")

</div>

Hi @marijn,

thanks for replying.

I had some issues even with core library, probably i will create a demo code and post it here for better clarity

btw,what do you mean by “The menu module is pretty terrible, in terms of keyboard access and screen-reader support, but easy enough to replace.”?

Are you saying to replace this menu module with something else ? do you have anything in mind, that might work with prose mirror lib ?

---

<div class="post-metadata">

### Author: ![marijn](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/marijn/32/15_2.png) [@marijn](https://discuss.prosemirror.net/u/marijn)
#### Post date: [September 17, 2020, 7:23am UTC](https://discuss.prosemirror.net/t/enabling-accessibility-on-prosemirror/3147/4 "2020-09-17T07:23:27Z")

</div>

> [@dreamweiver](#):
>
> btw,what do you mean by “The menu module is pretty terrible, in terms of keyboard access and screen-reader support, but easy enough to replace.”?

The prosemirror-menu package isn’t part of the core, and should be taken more as an example of how a menu can work than a production-quality package. Most serious integrations display commands in a custom way.

---

<div class="post-metadata">

### Author: ![dreamweiver](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/dreamweiver/32/1710_2.png) [@dreamweiver](https://discuss.prosemirror.net/u/dreamweiver)
#### Post date: [September 24, 2020, 7:19am UTC](https://discuss.prosemirror.net/t/enabling-accessibility-on-prosemirror/3147/5 "2020-09-24T07:19:39Z")

</div>

Hey @marijn, i have a requirement as part of keyboard navigation that I need to exit out of the currently focussed editor when i press the key “escape” while the focus is inside the editor.

I have added an event handler for the keypress event to capture the ‘escape’ key , but however I am not sure how to remove the focus from current editor, because I don’t see any ‘blur()’ on `EditorView` instance.

```
handleKeyDown: (view, event) => {
            console.log('key Down event', event);
            // when escape key is pressed, move the focus away from canvas
            if (event.key === 'Escape') {
                // view.blur(); // unfortunately there is no blur() method on EditorView
            }

            return false;
        },

```

any quick help would be really appreciated 🙂

---

<div class="post-metadata">

### Author: ![marijn](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/marijn/32/15_2.png) [@marijn](https://discuss.prosemirror.net/u/marijn)
#### Post date: [September 24, 2020, 7:33am UTC](https://discuss.prosemirror.net/t/enabling-accessibility-on-prosemirror/3147/6 "2020-09-24T07:33:14Z")

</div>

You should be able to call `view.dom.blur()`

---

<div class="post-metadata">

### Author: ![dreamweiver](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/dreamweiver/32/1710_2.png) [@dreamweiver](https://discuss.prosemirror.net/u/dreamweiver)
#### Post date: [September 24, 2020, 7:44am UTC](https://discuss.prosemirror.net/t/enabling-accessibility-on-prosemirror/3147/7 "2020-09-24T07:44:23Z")

</div>

Thanks a ton, @marijn 🙂

I was searching `blur()` under `view` object just like `focus()`. btw, any specific reason why `focus()` & `blur()` methods are not under `view` object ?

---

<div class="post-metadata">

### Author: ![marijn](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/marijn/32/15_2.png) [@marijn](https://discuss.prosemirror.net/u/marijn)
#### Post date: [September 24, 2020, 8:10am UTC](https://discuss.prosemirror.net/t/enabling-accessibility-on-prosemirror/3147/8 "2020-09-24T08:10:04Z")

</div>

`focus()` will restore the DOM selection from the state, which `.dom.focus()` won’t do. For `blur()` there is no such requirement.

---

<div class="post-metadata">

### Author: ![dreamweiver](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/dreamweiver/32/1710_2.png) [@dreamweiver](https://discuss.prosemirror.net/u/dreamweiver)
#### Post date: [September 24, 2020, 8:19am UTC](https://discuss.prosemirror.net/t/enabling-accessibility-on-prosemirror/3147/9 "2020-09-24T08:19:56Z")

</div>

hmmm, make sense.

@marijn Also, do you know how I can ignore certain keys from being entered into editor. eg. `tab` key looks irrelevant to us in our editor, so we want to ignore it altogether.

how can we prevent this key from ever being feeded to the editor?

---

<div class="post-metadata">

### Author: ![marijn](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/marijn/32/15_2.png) [@marijn](https://discuss.prosemirror.net/u/marijn)
#### Post date: [September 24, 2020, 11:18am UTC](https://discuss.prosemirror.net/t/enabling-accessibility-on-prosemirror/3147/10 "2020-09-24T11:18:29Z")

</div>

If you register a [DOM event handler](https://prosemirror.net/docs/ref/#view.EditorProps.handleDOMEvents) that returns true without `preventDefault`-ing the event, ProseMirror will not further handle it.

That being said, you have pretty much full control over what keys are bound, so unless you bind Tab, you shouldn’t worry about the editor handling it.

---

<div class="post-metadata">

### Author: ![dreamweiver](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/dreamweiver/32/1710_2.png) [@dreamweiver](https://discuss.prosemirror.net/u/dreamweiver)
#### Post date: [September 24, 2020, 11:27am UTC](https://discuss.prosemirror.net/t/enabling-accessibility-on-prosemirror/3147/11 "2020-09-24T11:27:00Z")

</div>

@marijn yup, I figured this out from the docs after posting this reply 😃

however, my next obstacle is to identify this `TAB` key within specific dom inside the editor, which is where I would need your expertise.

here is the new topic I have created to showcase this next issue. [Get actual target dom element on edit](https://discuss.prosemirror.net/t/get-actual-target-dom-element-on-edit/3175)
