hinderlingvolkart / h123 Goto Github PK
View Code? Open in Web Editor NEWAccessibility HTML5 Outliner
Home Page: https://hinderlingvolkart.github.io/h123/
Accessibility HTML5 Outliner
Home Page: https://hinderlingvolkart.github.io/h123/
HTML heading elements that are assigned other (non-heading
) roles are still appearing in this tool's outline, but probably shouldn't be.
In my case I am retrofitting an existing website that used heading elements incorrectly. To do so I am modifying elements e.g. from
<h3>We put some sort of intro text here, and it shouldn't actually be a heading!</h3>
to:
<h3 role="presentation">We put some sort of intro text here, and it shouldn't actually be a heading!</h3>
My understanding is that this should take those elements out of the outline, sort of the opposite to how role="heading" aria-level="3"
of #1 works to put them in. But this bookmarklet continues to display such presentation elements in its outline. I believe that is incorrect behavior.
It also occurs to me that while it is the presentation
and none
roles that might most commonly be associated with a "non-heading" heading element, I think technically ± any other roles would have a similar effect. Meaning, if I had elements like <h1 role="status">…</h1>
or <h3 role="term">…</h3>
or any other non-heading
role then iiuc the accessibility tree would not include those as headers.
This bookmarklet used to recognize elements like this correctly:
<p role="'heading'" aria-level="'h1'">Homepage</p>
This is useful, when we want to have correct headings for screenreaders, but not actual heading tag elements due to e.g. SEO Reasons.
Today, when I wanted to use it, I noticed, that it is only showning NaN for such elements:
This little bookmarklet served me very well for all these years.
It's the first time that I'm having a problem when triggering it:
In plain text:
Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' https://static-beta.woz.ch". Either the 'unsafe-inline' keyword, a hash ('sha256-CjNGNj8URgGVcDemg+XsarcETiWp8ag2xSKWHb9iQrk='), or a nonce ('nonce-...') is required to enable inline execution.
iframe.onload @ VM1393:1
(anonymous) @ VM1393:1
(anonymous) @ VM1393:1
VM1393:1 Refused to apply inline style because it violates the following Content Security Policy directive: "style-src-attr 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-sGIZx7apmviM7XhBJiBkgw41NQBTODshucwc4ePW/VE='), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.
iframe.onload @ VM1393:1
(anonymous) @ VM1393:1
(anonymous) @ VM1393:1
12Refused to apply inline style because it violates the following Content Security Policy directive: "style-src-attr 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-uOhIMM/vKV/KpUM3Q0VKr+HCNkFKMjYEFAmOWM+/c2U='), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.
31Refused to apply inline style because it violates the following Content Security Policy directive: "style-src-attr 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-HX7KALlcxM42b6D0nzyBnZp966dWKRyFJOduZQauzAQ='), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.
VM1393:1 Refused to apply inline style because it violates the following Content Security Policy directive: "style-src-attr 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-sGIZx7apmviM7XhBJiBkgw41NQBTODshucwc4ePW/VE='), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.
It still seems to work on a functional level, but the visuals are ugly:
Any easy way to solve this?
Hi There,
I found your bookmarklet and it's very usefull. For a POC, I created a document simulating a correct header structure by using role="heading" and aria-level="x".
According to the source code of the bookmarklet, those simulated headings should be correctly detected, but when opening the bookmarklet, they "pseudo" headings do not get displayed.
You can see my example page here: https://www.widmer-web.ch/Heading-Structure.html
I inserted part of the bookmarklet's code into my example page. It is the part where you loop over all headings and elements having a role attribute. At least the console output seems to be correctly..
Any idea what I could be doing wrong?
I really like this tool. Is there any way you could ask the developer to update the bookmarklet to use a red circle instead of a red square to indicate Headings errors? In other words, is it possible to update this bookmarklet to use a change in shape, as well as a change in color to indicate the error?
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.