Archive index

A11y Slackers Gitter Channel Archive 9th of August 2017

What fresh hell is THIS now? - Patrick Lauke
  1. zakim-robot
    @zakim-robot
    Aug 09 00:04
    [backwardok] Has anyone seen an issue on iPhone VO + Safari where flicking to a certain element will visually scroll the page to the top (but VO’s focus is still in the right place)?
  2. [alexlande] @backwardok: yeah! I’ve been meaning to file a bug about that
  3. [alexlande] i actually have the bug written but keep meaning to record a video before I open it. In my case, it happened when reading certain elements inside of a container with tabindex='-1'
  4. [alexlande] I made a JSBin to demonstrate: http://output.jsbin.com/viyibe
  5. zakim-robot
    @zakim-robot
    Aug 09 00:09
    [backwardok] in my case, there’s no tabindex=-1, but certain characters are causing it (ex …, >)
  6. [backwardok] and for me, it’s on non interactive content
  7. [alexlande] oh, interesting. Yeah, in my case it was the p elements in that demo. Interactive elements and headings worked fine
  8. zakim-robot
    @zakim-robot
    Aug 09 00:16
    [backwardok] oh actually - everything is in a tabindex=-1 (i didn’t look high enough up the tree)
  9. zakim-robot
    @zakim-robot
    Aug 09 11:42
    [herin] Sortsite is one of the tools. Its quite useful to crawl through and get results.
    Anyone have experience with that piece of software (powermapper)?
  10. zakim-robot
    @zakim-robot
    Aug 09 16:55
    [johnbhartley] Question about semantic headings. What should the h1 be for homepages generally? Internal pages tend to be easier, but the only place a site name may show up on the homepage is the logo itself. Was curious how people handle home page h1s. Thanks in advance for any thoughts
  11. [marcysutton] I personally make the homepage h1 the site title, and use the page title for every other page (About, My Awesome Blog Post, etc.)
  12. zakim-robot
    @zakim-robot
    Aug 09 17:06
    [marcysutton] Although it's worth noting that I've seen multiple h1's when blocking layers are used (modal dialogs, or layers with JavaScript focus management and inert backgrounds). If it's the only context available to AT at a time, theoretically you could include another H1 describing that portion of the page
  13. zakim-robot
    @zakim-robot
    Aug 09 17:21
    [johnbhartley] right, i guess that's my question is on the home page, the only area where the site title appears is the logo, so should the logo be the h1 on the home page only and standard link on internal pages? Generally I would have the site title somewhere on the homepage in plain text, but this is a client request to not show the site title except the logo.
  14. [ryan] This is probably a good place to ask about text-indent: -9999px. Is that a bad pattern?
  15. [cmegown] assuming your logo is part of <header> and the content of the page is contained within <main> you should be able to use an h1 in both places if you really want to.
  16. [marcysutton] Yes, I'd put the image in an h1 and use the alt text to expose it.
  17. [cmegown] or am i completely incorrect in that statement?
  18. [marcysutton] the html5 heading algorithm was never implemented, so that would be a problem for ATs.
  19. [cmegown] true
  20. zakim-robot
    @zakim-robot
    Aug 09 17:29

    [scottohara] i go back and forth on this a lot…

    currently i’m in the camp of the site title goes in the <title> and it doesn’t really need to be expressed in a <h1>. Instead, for a home page, put the primary heading/message in that h1.

    my feelings on this are pretty loose though…so please, call me out if that seems off to anyone

  21. [scottohara] for instance, i just finished work on a website where the primary heading was something along the lines of:

    “See how [company name] can help you with blah blah blah”

  22. [marcysutton] there is no one "right" answer, there's more than one way to do it! that sounds good though.
  23. [scottohara] so, it seemed silly to be like 
    <h1>company name</h1> ... <h2>words + company name!!!!</h2>
  24. [ryan] If you inline an SVG for logo on a site is using SVGs title attr the most appropriate way to make is accessible?
  25. [scottohara] the svg’s title element
  26. [scottohara] something like this: 
    <svg aria-labelledby="my_title">   <title id="my_title">my svg title goes here</title>   ... </svg>
  27. zakim-robot
    @zakim-robot
    Aug 09 17:34
    [cmegown] the aria-labelledby is necessary?
  28. [marcysutton] not needed anymore in Chrome, I know that much
  29. [scottohara] oh nice. i was just going to say, i knew there were bugs in firefox and chrome about needing to link them
  30. [ryan] Seeing now that there are bugs reported on Chrome and FF for only using title so aria-labelledby is still reccomended.
  31. [ryan] https://goo.gl/iY9DWg
  32. [ryan] ^Chrome bug
  33. [marcysutton] Chrome fixed it though
  34. Aaron Leventhal
    @aaronlev_twitter
    Aug 09 17:38
    yay we fixed something
  35. :)
  36. zakim-robot
    @zakim-robot
    Aug 09 17:38
    [ryan] thumbsup emoji
  37. [ugi] I don’t have a lot of experience with SCG’s but I think, Safari still requires role=“img” to properly expose SVG’s as “graphic”. In that case, aria-labelled may be required.
  38. [ryan] Thanks all
  39. zakim-robot
    @zakim-robot
    Aug 09 18:42
    [mtribone] @johnbhartley I’m in the “your logo isn’t an h1” camp: https://csswizardry.com/2010/10/your-logo-is-an-image-not-a-h1/
  40. [tink] aria-label/-labelledby is still needed to associate <title> with <svg> or other svg elements. Browser support is good, but screen reader support not so much (last time I checked).
  41. [mtribone] Describe the content of your home page in outline form, like writing a paper, and that top item is your <h1>
  42. [cmegown] @tink do you have a link for screen reader support in this scenario?
  43. zakim-robot
    @zakim-robot
    Aug 09 18:51
    [tink] @cmegown nothing scientific I'm afraid. I tested it a month back for a comment, I think on a CSS Tricks post, though I cannot find/remember where for the moment.
  44. [tink] Oh wait. Apparently I did make some notes http://test-cases.tink.uk/svg-title/
  45. [tink] It seems that Jaws and/or NVDA in Firefox are the problem children in this instance.
  46. [tink] It's also worth mentioning that support for multiple <title> elements is much worse.
  47. zakim-robot
    @zakim-robot
    Aug 09 18:56
    [tink] But I definitely don't have that tested/documented anywhere for the moment.
  48. [marcysutton] We have an issue open on axe-core to document this so we can add support, too. dequelabs/axe-core#20
  49. [tink] The whole SVG browser/AT support thing is a bit of a mess still sadly.
  50. [tink] BTW props @marcysutton for Shadow DOM support in aXe.
  51. [marcysutton] Thanks! we're excited! Got something brewing that will make it easier to test, too. Stay tuned :)
  52. zakim-robot
    @zakim-robot
    Aug 09 19:03
    [tink] Cool :)
  53. zakim-robot
    @zakim-robot
    Aug 09 19:15
    [ianderthal] For powerpoint accessibility, would providing (on the slide but keeping it visually hidden) a detailed explanation of an infographic or complex diagram's meaning be sufficient enough for non-visual users? I tried searching for precedence in this channel but couldn't find anything touching on it. Thanks for any help :]
  54. zakim-robot
    @zakim-robot
    Aug 09 19:25
    [mtribone] @ianderthal This tutorial from Michigan State might help? https://webaccess.msu.edu/Tutorials/powerpoint-mac.html
  55. zakim-robot
    @zakim-robot
    Aug 09 21:40
    [pcicere] Hi All! This is my first time posting, but does anyone here know if there are example of sites with a fixed/sticky navigation that is accessible? Is this even attainable? Any resources would be greatly appreciated! Apologies if this has already been addressed here.
  56. zakim-robot
    @zakim-robot
    Aug 09 21:46
    [garcialo] If by “accessible” you mean that the user can quickly get to the navigation after scrolling down a bit, I don’t think anyone has done that yet.
  57. [garcialo] But I don’t think that just having the navigation be sticky makes the page inaccessible.
  58. [pcicere] I guess I'm more concerned about keyboard tabbing
  59. [pcicere] since the position fixed could interfere with the tab order
  60. [garcialo] Well, keyboard users can tab back up to the top of the page just like they would with a non-sticky navigation…like a header.
  61. [pcicere] oh yeah that's true
  62. [pcicere] via landmark navigation?
  63. [garcialo] but yes, it would be more convenient than it would be for screen reader users assuming landmarks were used or pointer users
  64. [garcialo] er….I mean it wouldn’t be more convenient
  65. [garcialo] I guess you could do something like…remove stuff that isn’t in the viewport from the tab order…but then you have the problem of being able to tell that the user is trying to shift tab back up to the navigation instead of the previous content
  66. zakim-robot
    @zakim-robot
    Aug 09 21:53
    [pcicere] right
  67. [pcicere] that's a good point