Archive index

A11y Slackers Gitter Channel Archive 13th of February 2017

What fresh hell is THIS now? - Patrick Lauke
  1. stevefaulkner
    @stevefaulkner
    Feb 13 09:37

    adding alt text for good measure and it is accessible :ok_hand:

    note: the aria-labelledby overrides the alt text unless you do this:

    <figure> <img src="../../assets/img/juwelen/duitsland/beieren/zonnestraaltiara/beieren_zonnestraaltiara.jpg" class=”scaled” aria-labelledby=”fig-desc image" id="image" alt="some text"> <figcaption id="fig-desc"><small>&copy; Sotheby's</small></figcaption> </figure>
    i.e. reference the 'img' itself in the 'aria-labelledby'
    also note that figcaption labels the figure element (in browsers that have implemented the mapping refer to http://www.html5accessibility.com/) This means that the figcaption text will be repeated, if used a part of the accessible name of the img.

  2. sophieschoice
    @sophieschoice
    Feb 13 10:29
    so what would be the best way then?
  3. stevefaulkner
    @stevefaulkner
    Feb 13 11:40
    @sophieschoice I would suggest, providing a useful alt text for the image and using figure/figcaption without additional aria
  4. stevefaulkner
    @stevefaulkner
    Feb 13 11:49
    @sophieschoice this may be helpful guidance on alt text http://w3c.github.io/html/semantics-embedded-content.html#alt-text
  5. zakim-robot
    @zakim-robot
    Feb 13 11:50
    [alastc] I think example 9.1 covers a lot of situations when deciding between alt & visible text: https://dev.w3.org/html5/alt-techniques/#hbe
  6. [alastc] good balance between what alt text is for, and what a visible caption should do.
  7. [alastc] (I hope that isn’t an old link, seems to be the current top for “w3c html alt text”)
  8. stevefaulkner
    @stevefaulkner
    Feb 13 11:52
    @alastc yeah it is ages old here is latest http://w3c.github.io/html/semantics-embedded-content.html#images-of-pictures
  9. zakim-robot
    @zakim-robot
    Feb 13 11:53
    [alastc] ah, one of the dangers of “Cool URLs never die”!
  10. Srinivas Yedhuri
    @sri429
    Feb 13 11:53
    Is this wrong? <figure> <img src="../../assets/img/juwelen/duitsland/beieren/zonnestraaltiara/beieren_zonnestraaltiara.jpg" class=”scaled” id="image" alt="fig-desc image"> <figcaption id="fig-desc"><small>© Sotheby's</small></figcaption> </figure>
  11. i am still wondering why we need aria-labelledby
  12. zakim-robot
    @zakim-robot
    Feb 13 11:55
    [alastc] alt="fig-desc image” does not explain what the image is - I should be able to understand what the image is (or its purpose) from the alt without seeing it.
  13. Srinivas Yedhuri
    @sri429
    Feb 13 11:56
    yes thats what we give in alt-text right?
  14. in my example <fig-desc image> i meant description of the image not id's
  15. zakim-robot
    @zakim-robot
    Feb 13 11:58
    [alastc] I’m not clear what you mean. Given than code, a screenreader will read out something like: “fig-desc image, image, Sotherby’s”. That doesn’t tell be what the image is.
  16. stevefaulkner
    @stevefaulkner
    Feb 13 11:59

    [alastc] ah, one of the dangers of “Cool URLs never die”!

    unfortunately W3C is exceedingly uncool with these things, with stale spec links everywhere :-(

  17. zakim-robot
    @zakim-robot
    Feb 13 12:01
    [alastc] It wouldn’t matter so much if the top-level IA of the website was kept more upto date, so the latest specs had more links than the old ones.
  18. sophieschoice
    @sophieschoice
    Feb 13 12:05
    @stevefaulkner Thanks, will surely read that link on ALT-text
  19. stevefaulkner
    @stevefaulkner
    Feb 13 12:07
    :+1:
  20. sophieschoice
    @sophieschoice
    Feb 13 12:07
    @stevefaulkner but would it make sense for users to which picture the figcaption relates. Or is it clear to the user thanks to the structure of the code (nested fig caption inside figure tag?)
  21. stevefaulkner
    @stevefaulkner
    Feb 13 12:15
    @sophieschoice when SR encounter the figure they announce "group start 'caption text'"
  22. and when they navigate through the figure content, they announce the caption text again, which is not ideal, but needs SR's to be smarter in this regard
  23. sophieschoice
    @sophieschoice
    Feb 13 12:41
    @stevefaulkner I see, the context of the caption would be/stays clear in that case. Going to go with your recommendation then, no additional aria but well written ALT text and a good caption.
  24. zakim-robot
    @zakim-robot
    Feb 13 16:02
    [quidkid] Hey guys, I need suggestions on how to build an accessible website remediation process. Right now, ever since I’ve started, I’ve been a one-man crew, relying largely on the internet and this Slack channel for my education on how to remediate. With more projects down the pipeline and the realization of how much I still don’t know, I would like to ask my boss for training and also figure out how to build a team(which I will probably recommend hiring additional people who are more experienced)
  25. [quidkid] What do you guys recommend as a training? also as of right now, my QA process is just the free automated tools checker. I rely on the final review to tell me what to fix regarding screenreader issues.
  26. zakim-robot
    @zakim-robot
    Feb 13 16:13
    [quidkid] like Deque vs ssb bart group vs WebAIM
  27. [tink] @quidkid I use tenon.io as my checker of choice.
  28. [tink] For training materials there is Teach Access https://www.paciellogroup.com/blog/2016/07/announcing-the-teach-access-tutorial/
  29. zakim-robot
    @zakim-robot
    Feb 13 16:23
    [quidkid] @tink thank you so much! I’ll check it out.
  30. zakim-robot
    @zakim-robot
    Feb 13 18:40
    [beth] Ok guys, don’t lynch me (remember I’m on your side!) Can anyone think of a few good reasons, besides the obvious “It’s semantically wrong”, for why changing the <h1> of a page into a dynamically targeted advertisement space might be a WCAG violation?
  31. [johnbhartley] @beth if it's dynamically targeted would that mean that it's changing on every page load?
  32. [beth] Not exactly. It’s changing for certain targeted people. Some people would still get the proper <h1>, while others would get a line of advertising text, styled to look like it’s part of the page, but with a “learn more” link.
  33. zakim-robot
    @zakim-robot
    Feb 13 18:47
    [johnbhartley] the main a11y reason, imo, is that its confusing if the experience changes when they visit that same page more than once. if it caches and will always be the same for a user then maybe it's not quite as bad. the other worry would be that an h1 is set as a main point for everything that follows (book example with headings as table of contents). But if the content below the h1 follows and makes sense as being grouped underneath the h1 then it would be technically okay
  34. [beth] It doesn’t. Sometimes it won’t even be an add for our company. I believe they are hoping to sell this space to 3rd party advertisers. It makes my blood pressure rise.
  35. zakim-robot
    @zakim-robot
    Feb 13 18:53
    [marcysutton] Yikes. So an ad is the most important thing on the page?
  36. zakim-robot
    @zakim-robot
    Feb 13 19:02
    [beth] Guess so. :'(
  37. powrsurg
    @powrsurg
    Feb 13 19:56
    Is there a way to tell a browser that an input is not invalid when its value is forcibly set to an empty string? I have a form in a dialog that resets all the fields when it is brought up and it's thinking they're invalid because of that.
  38. zakim-robot
    @zakim-robot
    Feb 13 19:58
    [michiel] powrsurg: maybe something via setCustomValidity?
  39. [melsumner] beth: that feels super icky just to think about ><
  40. [michiel] No wait, that is just for messages.
  41. [michiel] Could you, instead off empty, remove and re-add the element?
  42. [michiel] Bit cumbersome, but hey
  43. zakim-robot
    @zakim-robot
    Feb 13 20:06
    [melsumner] I’d probably set a flag on the form to indicate “slate clean"
  44. [melsumner] that way you can re-set that flag state when you do the reset action
  45. zakim-robot
    @zakim-robot
    Feb 13 20:35
    [beth] Yes, I’ve been fighting it for about a year now.
  46. zakim-robot
    @zakim-robot
    Feb 13 22:20
    [deconspray] @beth are you referring to what I think you're referring to ... on our homepage?
  47. zakim-robot
    @zakim-robot
    Feb 13 23:15
    [beth] @deconspray you know it brotha!
  48. [deconspray] @beth Well, I guess we would have to go a visibly hidden heading then. But so sad that a page heading isn't "sacred."
  49. zakim-robot
    @zakim-robot
    Feb 13 23:38
    [herin] @beth : As per 2.4.6 Headings and Labels, headings need to descriptive of the page content and has to also confirm to 1.3.1 Info and Relationship. Visibility hidden heading sounds ok too. But, then if you have control of the section, then you could do role="presentation" on the H1 when advertisement is loaded and otherwise it will act as the actual heading of the page. You will be skipping the H1 heading in the first instance.