Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Tota11y

khan.github.io

Post reply on HN
Print view View original

61–70 of 93 posts

Re: Tota11y

#61

Post by Someone1234 »

prezjordan wrote: post #45
agentgt wrote: post #18

I am surprised the tool doesn't do any color blind checking (ie putting red and green next to each other is generally not a good idea).

Creator here! I've heard of some ways to visualize this with SVG filters - so this will be coming soon. Still thinking of creative ways to find and label the errors, rather than just showing the user how the page will look under a certain type of color-blindess.

Can I ask you something...

So it is complaining that we have a link (A tag) with an image within it. The image has an alt tag. But the addon is claiming the A tag is "empty" and that I should add "screen reader text."

Some googling around suggests that adding "screen reader text" is unreliable since many unrendered texts aren't rendered by screen readers either, and on top of that it can cause element positioning issues.

So why is the alt text unacceptable "text" for within an A tag for when the image isn't rendered? Isn't that the entire point of the alt tag, to provide text for a non-rendered image?

Re: Tota11y

#62

Post by prezjordan »

liviu- wrote: post #56
prezjordan wrote: post #50

Earlier quoted context omitted.

Definitely not in the minority. Bookmarklet was a little easier to get out the door, and I haven't found a great way to maintain extensions for several browsers. Will definitely up its priority. Userscript is an awesome idea, thanks for taking the time to build this out. Is this something that will work in all browsers? What's the installation process like? Perhaps we can build one of those into the project page as w…

Although userscripts themselves are cross-browser compatible, I don't know of any browser that offers native support for them. However, there are extensions that manages them (Greasemonkey for Firefox, Tampermonkey for Chrome, etc.) Once the user has a userscript manager installed, the installation process is a matter of a one click job.

Interesting, thanks for the explanation.

Perhaps we can detect if a popular userscript manager is installed and provide a one-click link that way. Not sure if this is possible though.

Re: Tota11y

#63

Post by [deleted] »

amyjess wrote: post #40
JoelSutherland wrote: post #34

Earlier quoted context omitted.

If zooming is disabled, the browser can respond to clicks without a 300ms delay since it doesn't have to wait for a double-click zoom. It seems like the best solution to this problem would be to make a global toggle in settings.

Alternately, you can just require multitouch zoom and get rid of the antiquated notion that you can double-click to zoom.

[deleted]

Re: Tota11y

#64

Post by prezjordan »

Someone1234 wrote: post #61
prezjordan wrote: post #45

Earlier quoted context omitted.

Creator here! I've heard of some ways to visualize this with SVG filters - so this will be coming soon. Still thinking of creative ways to find and label the errors, rather than just showing the user how the page will look under a certain type of color-blindess.

Can I ask you something... So it is complaining that we have a link (A tag) with an image within it. The image has an alt tag. But the addon is claiming the A tag is "empty" and that I should add "screen reader text." Some googling around suggests that adding "screen reader text" is unreliable since many unrendered texts aren't rendered by screen readers either, and on top of that it can cause element positioning iss…

You are absolutely correct in assuming that having alt-text on the image inside the link is accessible.

This is a known bug (https://github.com/Khan/tota11y/issues/1) that comes from upstream (https://github.com/GoogleChrome/accessibility-developer-tool...) and will hopefully be fixed soon.

As for your notes on screen-reader text: you can "hide" it by not actually hiding it, but placing it off the side of the page. This will be picked up by screen-readers and will not cause any positioning issues.

We use the following snippet all over Khan Academy. Bootstrap 3 uses it as well.

    .sr-only {
        border: 0;
        clip: rect(0,0,0,0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }
So I'd like to assure you that your image link is good to go (assuming the alt-text is good!). Sorry for the troubles.

Re: Tota11y

#65

Post by Roodgorf »

rcaught wrote: post #17
sparaker wrote: post #16

Earlier quoted context omitted.

Yeah spot on. Accessibility is not something you show an award for. It's expected it will work on its own.

It wouldn't be an award, it would be a grade. Compliance and accessibility notices on websites have been used extensively over the years.

But what would be the incentive for other site owners to use it then? It seems like in this scenario, the only time anyone would want to use the tool on their live site would be when they are sure they are getting an A+, any other sites that don't care about that score just wouldn't add the tool and any changes that might lower that score would presumably being taken care of before rolling out to production.

It seems like it would just turn into unnecessary bragging for the site owner. I wonder if the scoring would still be useful for development though, or if they would just try to fix as many problems as possible anyway.

Re: Tota11y

#66

Post by Joe8Bit »

mkozlows wrote: post #26
Joe8Bit wrote: post #7

Is there a plan to able to run this in a CI environment?

If you want a11y testing for a CI environment, take a look at aXe, which is designed specifically for that purpose: https://github.com/dequelabs/axe-core

Awesome, thanks!

Re: Tota11y

#67

Post by Someone1234 »

prezjordan wrote: post #64
Someone1234 wrote: post #61

Earlier quoted context omitted.

Can I ask you something... So it is complaining that we have a link (A tag) with an image within it. The image has an alt tag. But the addon is claiming the A tag is "empty" and that I should add "screen reader text." Some googling around suggests that adding "screen reader text" is unreliable since many unrendered texts aren't rendered by screen readers either, and on top of that it can cause element positioning iss…

You are absolutely correct in assuming that having alt-text on the image inside the link is accessible. This is a known bug ( https://github.com/Khan/tota11y/issues/1 ) that comes from upstream ( https://github.com/GoogleChrome/accessibility-developer-tool... ) and will hopefully be fixed soon. As for your notes on screen-reader text: you can "hide" it by not actually hiding it, but placing it off the side of the pag…

Thanks for the reply. I'll add that to our CSS in case we need it elsewhere and ignore the warning about an empty A tag for now.

Re: Tota11y

#68

Post by yellowapple »

mkozlows wrote: post #37
metaobject wrote: post #21

I'll post this here since people interested in accessibility will be reading this thread. I have terrible vision. One of my pet peeves is when I go to a website on my phone through safari that doesn't allow me to zoom the text. For those occasions, I came across a JavaScript bookmark that I created on my phone that runs to undo whatever is preventing me from zooming in. I'm not a web developer (I do desktop/server so…

For what it's worth, using the viewport meta element to disable zoom is a WCAG AA accessibility violation: http://www.w3.org/TR/mobile-accessibility-mapping/#zoom-magn...

That seems to focus on font size adjustments, which would be unaffected by a meta viewport, no?

Re: Tota11y

#69

Post by mkozlows »

prezjordan wrote: post #64
Someone1234 wrote: post #61

Earlier quoted context omitted.

Can I ask you something... So it is complaining that we have a link (A tag) with an image within it. The image has an alt tag. But the addon is claiming the A tag is "empty" and that I should add "screen reader text." Some googling around suggests that adding "screen reader text" is unreliable since many unrendered texts aren't rendered by screen readers either, and on top of that it can cause element positioning iss…

You are absolutely correct in assuming that having alt-text on the image inside the link is accessible. This is a known bug ( https://github.com/Khan/tota11y/issues/1 ) that comes from upstream ( https://github.com/GoogleChrome/accessibility-developer-tool... ) and will hopefully be fixed soon. As for your notes on screen-reader text: you can "hide" it by not actually hiding it, but placing it off the side of the pag…

aria-label is well-supported enough that it's probably better to use that, rather than offscreen text, for most purposes.

Re: Tota11y

#70

Post by jkoudys »

The programmer in me loves how accessibility auditing enforces best-practices around semantic HTML, and my business-side loves making it cheaper to reach a wider audience.

Great project!

Post reply on HN