Archive index

A11y Slackers Gitter Channel Archive 26th of May 2017

What fresh hell is THIS now? - Patrick Lauke
  1. zakim-robot
    @zakim-robot
    May 26 09:57

    [jpdevries] Anyone else wish <datalist> supported <optgroup>?

    I checked 4.10.9 The optgroup element but the only context specified there is

    • As a child of a select element.
  2. [michiel] What does datalist do exactly?
  3. [michiel] should look up spec
  4. JP DeVries
    @jpdevries
    May 26 10:00
    example http://jpdevries.github.io/datalist/
  5. zakim-robot
    @zakim-robot
    May 26 10:03
    [michiel] Ah, like a combobox thing
  6. JP DeVries
    @jpdevries
    May 26 10:04
    ya it’s like input and select had a baby
  7. but i really wish it supported optgroup to group the filtered options
  8. zakim-robot
    @zakim-robot
    May 26 10:04
    [michiel] I think it would make sense to have optgroup in there.
  9. JP DeVries
    @jpdevries
    May 26 10:05
    Me too. I’m just not sure who to send a box of chocolates to make it happen
  10. zakim-robot
    @zakim-robot
    May 26 10:06
    [michiel] File an issue on HTML? https://github.com/w3c/html/issues
  11. [jpdevries] will do
  12. [michiel] :+1
  13. [michiel] thumbsup emoji
  14. [michiel] shakes fist at IRCClouds auto-complete
  15. zakim-robot
    @zakim-robot
    May 26 11:12
    [scottohara] oh man. +1ing this issue. i wish datalists just had better support in general (still no safari….really?)
  16. zakim-robot
    @zakim-robot
    May 26 12:19
    [jpdevries] Thanks @scottohara! Ya, <datalist> is still kind of half-baked. Even in Chrome, scrollbars don’t activate when there are lots of options so they get cut off
  17. [scottohara] yeh. looking at caniuse, it seems that’s a persistent bug across multiple browsers
  18. zakim-robot
    @zakim-robot
    May 26 13:35
    [simong] I’m looking at converting semantic HTML into Braille and I was wondering whether I should use the translation tables (for things like contractions) of the document’s language or of the user’s language. I keep flip-flopping between the two :(
  19. zakim-robot
    @zakim-robot
    May 26 15:48
    [seankeegan] @simong Could you clarify, please? Do you mean converting the actual HTML code itself into braille along with any of the regular text content?
  20. [simong] Yeah, so I’m using liblouis to convert a simple semantic HTML file into BRF. But the HTML files could be in various languages (each have proper lang attr on the html tag). Liblouis allows you to specify the translation table you want to use so that the right contractions and braille typesetting is used. That translation table is language/locale dependant
  21. [simong] I think I should just be going with the language of the document right?
  22. zakim-robot
    @zakim-robot
    May 26 15:54
    [seankeegan] Yes.
  23. zakim-robot
    @zakim-robot
    May 26 16:33
    [harmony] Was wondering if anyone had thoughts about using the <i> tag for icons - I see a lot of debate on the issue but couldn’t find anything authoritative. It seems like it’s semantically incorrect, but I’m unclear as to how much of an issue this is. I’ve been asked to do this for a project, so if it shouldn’t be done, any help in articulating why would be awesome.
  24. powrsurg
    @powrsurg
    May 26 16:55
    If you're talking about what Font Awesome does where it just has empty <i> tags that uses a class to show them, then no, don't do it. Not only does it have bad a11y, but it can fall over and function incorrectly for a variety of non-a11y reasons too.
  25. If you just mean putting your <img> in <i> to try and make it stand for icon, then you're making an odd choice because <i> doesn't stand for icon in any HTML spec I've ever seen
  26. zakim-robot
    @zakim-robot
    May 26 16:58
    [philgruneich] If you add a label to these <i> and use negative text-indent, is it still as bad?
  27. [philgruneich] By label I mean some text.
  28. [philgruneich] If replaced by <span> it still looks bad, even if more semantically accurate.
  29. [backwardok] seems like <span role="img" aria-label="{insert alt of icon}" class="{whatever classes represent the icon}"></span> would be more apt?
  30. [scottohara] fontawesome typically does the <i aria-hidden=“true”>
  31. powrsurg
    @powrsurg
    May 26 17:02
    then what happens to people visually if the network request doesn't work?
  32. zakim-robot
    @zakim-robot
    May 26 17:02
    [scottohara] in that scenario, i personally would still convert those <i> to spans
  33. powrsurg
    @powrsurg
    May 26 17:02
    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i
  34. I believe they used <i> because it was less characters, and I think it had no corresponding HTML5 meaning at the time
  35. could be wrong though
  36. zakim-robot
    @zakim-robot
    May 26 17:03
    [harmony] It wasn’t Font Awesome, I was assuming it would be our custom icons used with replaced text (though I’m not really sure - the request was just to use them). I was looking at this: https://stackoverflow.com/questions/11135261/should-i-use-i-tag-for-icons-instead-of-span
  37. [harmony] And yeah - I think you’re right about less characters….
  38. [harmony] The top answer here seems to indicate that. I’ve never had anyone ask this before, so not sure what the benefit would be other than that.
  39. [philgruneich] https://stackoverflow.com/questions/11135261/should-i-use-i-tag-for-icons-instead-of-span#comment20308267_14555422
  40. [philgruneich] Perhaps my favorite answer is this.
  41. powrsurg
    @powrsurg
    May 26 17:05
    People do force web pages to render in certain font families, opera mini only supports SVG fonts (or none at all, I forget), and sometimes font requests just fail to load. I've always felt like it was a perf hack that now really doesn't make sense anymore now that h2 is a thing
  42. zakim-robot
    @zakim-robot
    May 26 17:07
    [harmony] Our icons are used with ::before - would you recommend we stick with using spans? That’s mostly what I’ve seen in the past. With screen reader only text if the icon is meaningful, and aria-hidden=“true” if it’s not, or if its meaning is indicated by adjacent wording?
  43. zakim-robot
    @zakim-robot
    May 26 17:35
    [backwardok] even if you use ::before, some screen readers will still read what’s set in content, which is usually some random character, and that can be confusing if you don’t set the appropriate attributes on the span
  44. [backwardok] kinda wish there was a role="icon", since an icon and an image feel like they represent different things
  45. powrsurg
    @powrsurg
    May 26 17:48
    If there is adjacent text that conveys the meaning I would argue then that it should be a background image
  46. zakim-robot
    @zakim-robot
    May 26 17:51
    [backwardok] we’re in the process at our company of documenting how to use icons properly and thinking about whether or not an icon is being used for informative purposes, such that its presence is indicating something that the text (or lack of text) is not, or decorative purposes - in all cases where it’s decorative, i agree it should be a background image (or treated essentially like a nonexistent element), but for cases where it’s informative, it’s important to convey that information appropriately
  47. [backwardok] i’ve definitely seen more and more sites use icons as the only content inside a button, or icons that are definitely providing more context than the text alone
  48. zakim-robot
    @zakim-robot
    May 26 18:11
    [quidkid] hey guys does anyone know if there is something like awwwards but for accessible websites?
  49. zakim-robot
    @zakim-robot
    May 26 18:28
    [garcialo] @quidkid Check out Knowbility’s Open AIR content. It’s not necessarily a contest for any website, but they award people that build accessible sites. :)
  50. zakim-robot
    @zakim-robot
    May 26 19:20
    [higley] oh wow, that takes me back. Knowbility’s Open AIR hackathon was actually the thing that first got me into accessibility
  51. zakim-robot
    @zakim-robot
    May 26 20:03
    [quidkid] @garcialo thank you!! that’s awesome!!
  52. [cmegown] @garcialo @quidkid this? https://air-rallies.org/
  53. [garcialo] Yup
  54. [garcialo] @higley When did you participate in it? Maybe I judged your site. :p
  55. [higley] Hm, I think it was around 2013, +/- a year. I’m trying to remember the site we made… it was some sort of legal non-profit, and I went with a team from the company I worked for at the time, Monkee-Boy Web Design :)
  56. zakim-robot
    @zakim-robot
    May 26 20:08
    [garcialo] ah, I don't recall any legal non-profits...which is probably good, I'm usually a harsh evaluator
  57. [higley] haha, I probably deserved it. I was pretty inexperienced then
  58. [garcialo] You should enter again this year and see how much better you do.
  59. [higley] I don’t live in Austin anymore, sadly
  60. [garcialo] You don't need to be in Austin to participate anymore.
  61. [higley] Really? That’s cool, I’ll look into it :)
  62. zakim-robot
    @zakim-robot
    May 26 20:48
    [harmony] @powrsurg & @backwardok - given that I don’t have control over the icon system itself (working with a pattern library) - I was thinking this seemed like the best solution with what I have to work with. In this example, the icon adds as a ::before on the span with the icon class, and sr-only is the hidden text:
  63. [harmony] Untitled
  64. [harmony] Does that seem right?
  65. [harmony] Thanks for all the help!
  66. zakim-robot
    @zakim-robot
    May 26 20:55
    [garcialo] That could work. You could also just put an aria-label on the button.
  67. [garcialo] ...coincidentally I gave a very similar suggestion in work slack this morning. :p