Archive index

A11y Slackers Gitter Channel Archive 28th of November 2016

What fresh hell is THIS now? - Patrick Lauke
  1. zakim-robot
    @zakim-robot
    Nov 28 04:15
    [michiel] jnurthen: you can also log a bug against aXe, because bolder shouldn't be on that list.
  2. James Nurthen
    @jnurthen
    Nov 28 04:17
    I'm guessing it will never match. It will return the actual number not bolder.
  3. I agree it is a bug as not valid but I'm guessing the computed style will never return bolder so no big deal.
  4. zakim-robot
    @zakim-robot
    Nov 28 04:18
    [michiel] Given this HTML and a font family that includes 100, 400, 700:
  5. [michiel] \` **\[michiel\]** <h1><span>This is not bold</span></h1> **\[michiel\]**`
    [michiel] Combined with this CSS:
    [michiel] \` **\[michiel\]** h1 { **\[michiel\]** font-weight: 100; **\[michiel\]** } **\[michiel\]** span { **\[michiel\]** font-weight: bolder; /\* 400 \*/ **\[michiel\]** } **\[michiel\]**`
  6. [michiel] Yeah all right.
  7. James Nurthen
    @jnurthen
    Nov 28 04:19
    I'm. It sure I agree that 600 is bold though. That may be worth a bug.
  8. I'm not sure is what that should have said. Damn you autocorrect.
  9. So did you move to Bristol?
  10. zakim-robot
    @zakim-robot
    Nov 28 04:27
    [michiel] Tomorrow morning
  11. [michiel] Or in UK time, in about 5 hours ;)
  12. James Nurthen
    @jnurthen
    Nov 28 04:29
    Nice. I like Bristol. I went to university there.
  13. zakim-robot
    @zakim-robot
    Nov 28 04:29
    [michiel] Hmm
  14. [michiel] This is interesting.
  15. [michiel] If you have a font with 100, 200, 300, 400, …
  16. [michiel] And set h1 to 100
  17. [michiel] span to bolder
  18. [michiel] it will return “normal” (400)
  19. [michiel] In Safari anyway.
  20. [michiel] So it skips 200 & 300 :/
  21. James Nurthen
    @jnurthen
    Nov 28 04:30
    Span is child of the h1?
  22. zakim-robot
    @zakim-robot
    Nov 28 04:30
    [michiel] Aye
  23. James Nurthen
    @jnurthen
    Nov 28 04:30
    Heh. Probably thinks no one would want to do that.
  24. zakim-robot
    @zakim-robot
    Nov 28 04:30
    [michiel] Yeah I’ve been to Bristol couple of times now and enjoy it. I’m actually up in Filton, but still.
  25. James Nurthen
    @jnurthen
    Nov 28 04:30
    I'll be honest. I have never seen bolder used.
  26. zakim-robot
    @zakim-robot
    Nov 28 04:30
    [michiel] Me neither, but hey
  27. [michiel] I’ve seen weirder things as I’m you have too.
  28. James Nurthen
    @jnurthen
    Nov 28 04:31
    I'd be interested to know the number of times it is actually used in the wild correctly. And not as someone who wants something really really bold.
  29. zakim-robot
    @zakim-robot
    Nov 28 04:34
    [michiel] font-weight: bolder !important;
  30. [michiel] If you want it really bold :see_no_evil:
  31. James Nurthen
    @jnurthen
    Nov 28 04:40
    Lol
  32. zakim-robot
    @zakim-robot
    Nov 28 05:08
    [michiel] Sorry, I got a bit carried away: https://moiety.me/research/font-weight/
  33. James Nurthen
    @jnurthen
    Nov 28 05:13
    I'm guessing it depends on what the actual font supports. If it supported 9 discrete font weights then bolder may just move up to the next value in the numeric font weights. But if the font only supports 3 actual weights then bolder will move up to the next one. I.e. Light->normal->bold
  34. But that is all just guesswork. There is no science to back it up as it is late. (... and this is America and apparently we don't need science here)
  35. zakim-robot
    @zakim-robot
    Nov 28 05:17
    [michiel] jnurthen: font family I used is Helvetica Neue, that has pretty much all weights.
  36. zakim-robot
    @zakim-robot
    Nov 28 05:23
    [michiel] My role=status is broken in that thing, but am too lazy to update that now.
  37. [michiel] Plus I have to pack the last bits and bobs.
  38. zakim-robot
    @zakim-robot
    Nov 28 05:29
    [michiel] jnurthen
  39. [michiel] <p role="status" aria-relevant="text"><code>font-weight</code> for <q>all the fish</q> is <code id="output"></code></p>
  40. [michiel] Say I change #output to something else, that should only announce that change to AT right?
  41. [michiel] Instead of the entire line?
  42. [michiel] Currently in VO it doesn’t do anything.
  43. [michiel] I’m clearly messing something up because NVDA doesn’t announce anything either.
  44. James Nurthen
    @jnurthen
    Nov 28 05:32
    Theoretically. That stuff is flaky as hell as you are discovering. I would add aria-atomic=true on the outer <p> as I would want the whole thing to be announced.
  45. zakim-robot
    @zakim-robot
    Nov 28 05:33
    [michiel] Would you really want that entire line read each time you change the value?
  46. James Nurthen
    @jnurthen
    Nov 28 05:33
    You are changing a text node child of a child too. Perhaps that isn't triggering it.
  47. zakim-robot
    @zakim-robot
    Nov 28 05:33
    [michiel] JAWS announces it just fine, but is now only announcing the updates.
  48. James Nurthen
    @jnurthen
    Nov 28 05:34
    Yeah. I think I would. If it just read "bold" that is a bit unclear as to what it means.
  49. zakim-robot
    @zakim-robot
    Nov 28 05:34
    [michiel] What I want: announce entire thing on first go, then only the changed bit.
  50. [michiel] alert with relevant=text maybe?
  51. [michiel] Meh it’s stupid anyway, you don’t want to alert that thing when you load the page.
  52. [michiel] So role=status with atomic=true should be fine.
  53. James Nurthen
    @jnurthen
    Nov 28 05:35
    Yeah.
  54. zakim-robot
    @zakim-robot
    Nov 28 05:36
    [michiel] JAWS handles that fine, NVDA not so much.
  55. [michiel] VO doesn’t announce the actual result…
  56. [michiel] All right, it’s going well so far…
  57. zakim-robot
    @zakim-robot
    Nov 28 09:45
    [alastc] @michiel Filton?? Well, you definitely ignored my advice then, don't blame me if you don't like that area! (It's probably fine, but I don't know that area so couldn't recommend it.). Best of luck with the move.
  58. zakim-robot
    @zakim-robot
    Nov 28 09:52
    [michiel] alastc: haha, well I viewed a couple of places in all the areas you recommended. They were all pretty expensive/not as nice. Filton isn't the best place I guess, but the house is nice.
  59. [michiel] https://andrewsonline.co.uk/rent/details/302192/wallscourt-road-filton-bs34
  60. zakim-robot
    @zakim-robot
    Nov 28 15:14

    [sareh] Hi everyone! Does anyone have an example of an accessible search field with auto-complete, that has a list below it, as you type? One where you can go down the list and select an item and it to populate the search field

    I’ve been looking about online and have found lots of /almost there/ examples, but am not sure which is the least worst! Any advice would be hugely appreciated. :)

    (e.g. I’ve found this example https://webkit.org/blog-files/aria1.0/combobox_with_live_region_status.html)

  61. zakim-robot
    @zakim-robot
    Nov 28 16:18
    [peter.antonius] @sareh have you seen https://leaverou.github.io/awesomplete/ ?
  62. zakim-robot
    @zakim-robot
    Nov 28 17:02
    [sareh] @peter.antonius no, I hadn’t, thanks for the link!
  63. stevefaulkner
    @stevefaulkner
    Nov 28 17:49

    [caesar] ... not to mention supposedly obsolete? https://www.w3.org/TR/html-markup/th.html

    the doc you pointed to is obsolete though "This document has been discontinued and is only made available for historical purposes." suggest bookmarking http://w3c.github.io/html/ always up to date

  64. zakim-robot
    @zakim-robot
    Nov 28 17:56
    [cyns] thanks on the fonts. This has always been a weak spot in wcag. I think I'll go make a comment that a proper formula is needed in 2.1.
  65. zakim-robot
    @zakim-robot
    Nov 28 20:15
    [una] Hi! Question: What do y’all do for graphs/charts? Any decent solutions out there?
  66. zakim-robot
    @zakim-robot
    Nov 28 21:28
    [techthomas] @una I saw @marcysutton discussed HighCharts on a11ywins https://a11ywins.tumblr.com/post/150641256818/accessible-highcharts Also Adina Halter presented on accessible bar graphs at Accessibility Camp NYC this year https://www.youtube.com/watch?v=33tvdXHPbuY&index=5&list=PL5HfShxoX0vse1_Vlw5Xlu5Ob0LpO1_W6
  67. [techthomas] I would be interested to hear of other recommendations
  68. [una] thanks @techthomas
  69. zakim-robot
    @zakim-robot
    Nov 28 21:56
    [chris__pearce] I’m curious how D3 (https://d3js.org/) stacks up.
  70. [lowellreade] @chris__pearce so am I! Would love to hear about any experiences folks here have had using D3 for making accessible graphs/charts/data viz
  71. zakim-robot
    @zakim-robot
    Nov 28 22:28
    [caesar] @stevef @stevefaulkner Thanks for the link. My question about that though, is the Github link is the editor's draft. Would it not be better to reference the most recent published version? (But also, I accept that the page I referenced was an outdated version.)
  72. [mattgregg] If you have a survey with one question on each page would you guys recommend adding an increased tabindex to the input for each page so the user jumps there first? What’s best practice there?
  73. zakim-robot
    @zakim-robot
    Nov 28 22:36
    [marcysutton] Could you use autofocus instead and leave the page tab order as-is?
  74. BH
    @yohoho
    Nov 28 22:38
    So I have a single page application that is a booking flow, for each step of the flow each page is 95% new loaded into the DOM by ReactJS, and between these steps there is loading icon. When each new step is loaded I temporarily populate an aria-live=assertive div with a 'new page content ... loaded'. Does this seem like a legitimate method?
  75. zakim-robot
    @zakim-robot
    Nov 28 22:42
    [mattgregg] I could use autofocus. If you have a set of scale radio buttons from 1-5 would you set autofocus to 1 or 3?
  76. [mattgregg] I was thinking tabindex might be nice since every page will only have one action. A question and a single input form but I’m just not sure
  77. [marcysutton] For the SPA flow I would make the aria-live content more explicit. Which page loaded? You could also use focus management to send the user to the new content. Just be sure to test it in screen readers...for example there is a known issue with NVDA and Angular mentioned in the #angular channel
  78. [marcysutton] @mattgregg the issue is maintaining tabindex....positive integers are generally an antipattern because of the gotchas involved
  79. [mattgregg] Yea I know I just thought this might be an application for them.
  80. BH
    @yohoho
    Nov 28 22:45
    @marcysutton Thanks, right now I insert which content has loaded, e.g. payment page content has loaded -- newbie question, can I force focus to non-link elements?, e.g. the H1
  81. zakim-robot
    @zakim-robot
    Nov 28 22:46
    [mattgregg] @marcysutton The previous and next buttons are absolutely positioned so you hit those in the page content before you get to the form inputs which is sorta awkward. Thought it might help with that too
  82. [una] basically, trying to capture live data about server runtime and trying to present it in a more accessible way is hard
  83. zakim-robot
    @zakim-robot
    Nov 28 22:53
    [marcysutton] @yohoho yes you can–by adding tabindex="-1" onto the h1 and scripting focus to it
  84. [marcysutton] @mattgregg I suppose it does exist for a reason :)