# Accessibility: Focus management in topics

**URL:** https://meta.discourse.org/t/accessibility-focus-management-in-topics/78109
**Category:** Feature
**Tags:** accessibility
**Created:** [January 16, 2018, 12:48am UTC](https://meta.discourse.org/t/accessibility-focus-management-in-topics/78109 "2018-01-16T00:48:35Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![riking](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/riking/32/170938_2.png) [@riking](https://meta.discourse.org/u/riking)
#### Post date: [January 16, 2018, 12:48am UTC](https://meta.discourse.org/t/accessibility-focus-management-in-topics/78109/1 "2018-01-16T00:48:35Z")

</div>

> [@Accessibility: Need way to browse between messages quickly](https://meta.discourse.org/t/accessibility-need-way-to-browse-between-messages-quickly/77901/):
>
> This is split out from the master accessibility thread: [Accessibility audit and shepherd for making improvements](https://meta.discourse.org/t/accessibility-audit-and-shepherd-for-making-improvements/66620/16). This issue applies to when you’re looking at a topic with a bunch of replies. A page like [this](https://meta.discourse.org/t/accessibility-audit-and-shepherd-for-making-improvements/66620/4): The easiest thing to do would be to use a structure similar to the following, and using proper aria landmarks and labels. Each topic starter is followed by a sequence of replies, each of which may have replies. Tree structures like this are always messy to display. Here I’ll…

> [@Accessibility: Signal changes to screen readers on navigation](https://meta.discourse.org/t/accessibility-signal-changes-to-screen-readers-on-navigation/77897/):
>
> This is split out from the master accessibility thread: [Accessibility audit and shepherd for making improvements](https://meta.discourse.org/t/accessibility-audit-and-shepherd-for-making-improvements/66620/16). This is some feedback from an accessibility audit for one of our forum instances. The story is specific to that forum (eg, the post titles) but it applies to Discourse overall. I left it in the author’s original words to get the flavor of the feedback slight_smile I started by clicking on the category "cookin on the job" since I like to eat!! When you do this, the page does n…

I think that fixing the J/K navigation focus management will fix the first linked topic, and is a prerequisite for solving the second topic.

@kevinrobinson

List of problems noticed before creating this:

- Posts need to be focusable in order to properly direct the screen reader to the first post it should be reading. I think that setting `tabindex=0` and custom `:focus` styling is the best way to do this.

- Post controls have `outline: 0` set, and no custom `:focus` styles. This removes all focus styling from the buttons. I suggest applying the .d-hover rules to the :focus state.

- Activating the … “show more” post action blurs focus; it should focus the first revealed button.

---

<div class="post-metadata">

### Author: ![riking](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/riking/32/170938_2.png) [@riking](https://meta.discourse.org/u/riking)
#### Post date: [January 16, 2018, 2:33am UTC](https://meta.discourse.org/t/accessibility-focus-management-in-topics/78109/3 "2018-01-16T02:33:19Z")

</div>

Here’s a PR. Does **not** fix the … issue.

Wrote the comment entirely with my keyboard after I decided that would be a good idea, and found another issue: **we need a shortcut to focus the composer textarea**. It was extremely annoying to get my focus back in the composer, especially because it’s not where I expected it to be in the taborder.

[https://github.com/discourse/discourse/pull/5505](https://github.com/discourse/discourse/pull/5505)

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [January 16, 2018, 2:35am UTC](https://meta.discourse.org/t/accessibility-focus-management-in-topics/78109/4 "2018-01-16T02:35:35Z")

</div>

> [@riking](#):
>
> we need a shortcut to focus the composer textarea.

Ok then make it so.. small PRs that do individual specific things are easier to process than giant swaths of kitchen sink work.

---

<div class="post-metadata">

### Author: ![riking](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/riking/32/170938_2.png) [@riking](https://meta.discourse.org/u/riking)
#### Post date: [January 17, 2018, 3:42am UTC](https://meta.discourse.org/t/accessibility-focus-management-in-topics/78109/5 "2018-01-17T03:42:58Z")

</div>

Made a separate PR for composer refocus and restore from collapsed:

[https://github.com/discourse/discourse/pull/5506](https://github.com/discourse/discourse/pull/5506)

---

<div class="post-metadata">

### Author: ![kevinrobinson](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kevinrobinson/32/120056_2.png) [@kevinrobinson](https://meta.discourse.org/u/kevinrobinson)
#### Post date: [January 18, 2018, 8:29pm UTC](https://meta.discourse.org/t/accessibility-focus-management-in-topics/78109/6 "2018-01-18T20:29:53Z")

</div>

@riking this looks awesome! 🙂 It looks like you have a better understanding than I do of how to implement these changes within Discourse, but the gist of these changes look great to me. Let me know if I can help at all!
