xi/a11y-outline

web extension to navigate document outlines easily

a11y-outline's Issues

Feature request: ability for the user to reposition the window on the screen

Submitted via mail:

Use case: I am an evaluator inspecting a page that has a lot below the fold. I open A11y Outline and select "Links". I'm comparing the contents of the page with the contents of the A11y Outline dialog. This helps me assess the general situation. At times, I want to focus my attention on particular item in the dialog and the corresponding item on the page. This helps me diagnose a problem (e.g., "What would be a better name"? "Do I really need so many links on this page"). I need to reposition the dialog as I scroll down and look at different parts of the page

Multiple instances stacking

Calling the shortcut more than once will show the UI again on top of the existing view.

Keystroke conflict

Send in via mail:

Your keystroke to activate the dialogue is Ctrl+7. In Windows, with
Firefox 57, that keystroke not only opens the dialogue but moves focus to
another browser tab (where I have multiple tabs open). Is there a way to
change the keyboard shortcut?

Bookmarklet

Sent in via mail:

Could it be a bookmarklet rather than extension? Bookmarklets are
easier to organize into folders on the toolbar than extensions.

Idea: Focus first focusable descendant instead of making elements focusable

Taking inspiration from https://github.com/skipto/extension/blob/dd38ca9f4fbea9e21359c1a30c95e454a155f6b5/chrome/content.js#L32

Feature Request: Please make it a 'proper' Chrome Extension

I think the extension is great, and can be really useful for testing a web page for how a screen reader user would experience landmarks, headings and links.

But the extension is also really useful for sighted keyboard users who can take advantage of the functionality.

If such users are Chrome users, but are not deep level developers, your instructions for installing the Chrome extension would probably make no sense at all. I'm an occasional developer and I have to admit that they don't really make sense to me either.

iframed content not included

The tool is an excellent replacement for a screen reader for rapid a11y testing, except for one big problem: it ignores the contents of iframes. A lot of academic course content is enclosed in iframes for security reasons (Partners provide the content, and the LMS / platform provider cannot audit or maintain all of it.)
Inclusion of iframed content is (I believe) a Manifest v3 configuration issue for browser extensions. See all_frame here https://groups.google.com/a/chromium.org/g/chromium-extensions/c/gtC-JIKVsgo

You can test this by enrolling in any course on edx.org (auditing is free), and look at any learning unit in the course. The course content below the H1 and Bookmark This button is iframed.

Thanks!
Jeff Witt
Accessibility Specialist for edX.org

Headings undefined

Hi there,

first, thanks a lot for this extension, really cool (and it works with websites that have enabled CSP!).

I've tested it on some of my websites (https://www.nicolas-hoffmann.net/ and https://rocssti.net/en/), and I had a strange bug: the extension provides the correct outline, but says headings are undefined.

The only difference that I have with these two examples is that there are served as application/xhtml+xml (I don't know why it creates an issue to be honest).

Hope you will find a workaround!
Thanks a lot,
Nicolas

Esc to close does not work on gmail

submitted via email:

I notice that ESC will close the extension in firefox. I am using the
bookmarklet in chrome. ESC does not work there. Must refresh page or
navigate somewhere. Can ESC be added to the bookmarklet to close it?​

ah... tested again before I sent email. ESC works on the dozen websites I
checked, except for GMAIL. must be a google thing.

Small font size with sites using html { font-size: 62.5%; }

… which are countless doing:

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
}

because it's then really easy to use rem or em unit by thinking in pixels and having to divide by 10 and not having to use a calc or a mixin in a preprocessor.

The extension sets body>dialog to 0.9rem thus gives 9px like in our site https://www.alsacreations.com (screenshot below):

I'd suggest using em unit (or maybe font-size: inherit;, equivalent to 1em here) in #a11y-outline { font-size: 0.9em) would fix this problem because dialog is a direct descendant of body.

Feature Request: Ignore <section> elements with no accessible name

On most pages, the extension finds the same list of landmarks as desktop screen readers like JAWS and NVDA. But on pages that feature

elements without an accessible name, these show up in the extension's list of landmarks as a series of regions, but not when using NVDA or JAWS.

An accessible name here is one that is provided by an 'aria-label' or 'aria-labelledby' or 'title' attribute. See: https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/landmarks/HTML5.html

Examples:
<section aria-label="My label"><h2>My heading<h2> - should feature as: 'My label region'.

<section aria-labelledby="sh"><h2 id="sh">My heading<h2> - should feature as: 'My heading region'.

<section><h2>My heading<h2> - should not feature as a region.

To have plain regions listed in the extension doesn't really help anyone in my view.