Comments (9)
Thanks for bringing this up @hexalys. Your observation is valid I think. Can you post an HTML snippet that is failing?
from accessibility-developer-tools.
@hexalys Agreed, this seems like it might be a bug.
What happens when you tab to this anchor element? Do you see a focus ring around the image? As @ckundo says, a code snippet would be very helpful here to help us confirm whether this is a bug or not.
from accessibility-developer-tools.
@alice The focus ring generally does not show. However the Safari screen/voice reader over has no issue reading the link, and do pick up a focus ring around the image when announcing the link. Its peculiar because the <img> element cannot be 'clearfixed' because it's a self closing node. And the anchor tag is technically not a layout element.
@ckundo Here is an example snippet:
<p><a href="/" title="Home"><img src="http://www.google.com/images/srpr/logo11w.png" width="269" height="95" alt="Google" style="float:left"></a></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
<p><a href="/">Google</a></p>
It could be also be a Chrome bug specifically because The OS X VoiceOver does not pick up on the link in Chrome (30.0.1599.66 beta) while it does in Safari 5.1.10
from accessibility-developer-tools.
Thanks for the snippet! I had a play with it and found that, as you say, no focus ring is shown. It's on JSFiddle here: http://jsfiddle.net/Ln3nL/show/light/
I'm inclined to say that's still an issue. Focusable elements should be visible and that focus should always be discernible, and in this case the anchor is the focusable element. While, as you say, screen reader users can still interact with the link, it does affect keyboard-only users, since there will be no feedback that they have placed focus on the link and can thus interact with it.
I experimented with your suggestion of styling the anchor element with float: left and found that that resolves this particular issue (a focus ring is drawn around the image when tabbing to it) - see http://jsfiddle.net/Ln3nL/1/show/light/. It also does improve the experience for screen reader users, at least on Chrome on OSX, as VoiceOver doesn't report focus on the link when it has zero area, but does when the image is not floated, so the user can tab through the page and hear all of the interactive elements being spoken.
from accessibility-developer-tools.
@alice Well it's problematic both ways. Unfortunately, that's how many sites, including all wordpress sites, are made when aligning images left and right within an article. And it's unlikely that the W3C specs can address that...
Due to the large amount of such issues out there, I think a mention should be made with a recommendation to place the Float on the anchor, instead of the image, so that people don't pull their hair out as to why they get those warnings.
from accessibility-developer-tools.
@hexalys the warning is still valid and accurate, and the fact that it surfaces a pervasive issue is important. It may in fact be worth submitting an issue to the Wordpress team.
There may also be room for more detailed messaging in the warning output, but it could be that the specific case is out of scope for this tool. In any event, we'll keep it in mind when we come around to revising the warning and error messages. Sincere thanks for bringing it up.
from accessibility-developer-tools.
@hexalys I really encourage you to submit a ticket to Wordpress. It's important to upstream issues to frameworks where we can, so that these problems are addressed at the source.
http://codex.wordpress.org/Reporting_Bugs
from accessibility-developer-tools.
@hexalys Good point about the messaging: I've updated https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#-ax_focus_01--these-elements-are-focusable-but-either-invisible-or-obscured-by-another-element to explain the issue and give an example. What do you think?
from accessibility-developer-tools.
@alice Sounds good, thanks. @ckundo Nods
from accessibility-developer-tools.
Related Issues (20)
- Export results to Checkstyle
- Project status HOT 2
- Unable to generate accessibility reports for dynamic web pages HOT 2
- v2.12.0 doesn't contain all tests
- Too many tabs. Doing too much. HOT 1
- Wi-Fi v's Bluetooth HOT 2
- Is accessibility-developer-tools being replaced by Google lighthouse?
- Link With Unclear Purpose fails even when aria-label is defined
- TypeError: null is not an object (evaluating 'axs.utils.getRoles(a).valid')
- All links to WAI-ARIA specs broken in README and Wiki HOT 3
- AX_ARIA_08 triggers on <tr>
- Authentication issue
- Hack game
- Add `aria-current` to the list of valid attributes
- AX_HTML_03 missing from Audit Rules documentation
- Developer tools chrome HOT 1
- Missing role="switch" validation HOT 1
- Code
- aria-haspopup does not include all possible values HOT 1
- make it easier
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from accessibility-developer-tools.