xi / a11y-outline Goto Github PK
View Code? Open in Web Editor NEWweb extension to navigate document outlines easily
Home Page: https://addons.mozilla.org/firefox/addon/a11y-outline/
License: BSD 3-Clause "New" or "Revised" License
web extension to navigate document outlines easily
Home Page: https://addons.mozilla.org/firefox/addon/a11y-outline/
License: BSD 3-Clause "New" or "Revised" License
The tool skips over iframed content. In some contexts (like learning management systems), iframed content is important or of the essence. Adding support for iframed content integration for the browser extension version (it's not possible for bookmarklet) would involve tweaking the manifest to get the right permissions, and some between-frame communication. My team believes we can do this work and would like to volunteer to do it and submit a PR.
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
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
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.
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.
Hi, first of all: I love your extension, is so useful for a11y development!
I don't not about other screen-readers, but I now that Orca supports navigation through <form>
elements.
It would be great to have it in your addon!
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
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?
โฆ 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.
Calling the shortcut more than once will show the UI again on top of the existing view.
Sent in via mail:
Could it be a bookmarklet rather than extension? Bookmarklets are
easier to organize into folders on the toolbar than extensions.
On most pages, the extension finds the same list of landmarks as desktop screen readers like JAWS and NVDA. But on pages that feature
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.