Archive index

A11y Slackers Gitter Channel Archive 20th of February 2016

What fresh hell is THIS now? - Patrick Lauke
  1. jonathantneal
    Feb 20 00:53
    I’d like to write a PostCSS plugin that warns you if the background-color and color combo don’t meet the AA or AAA threshold.
  2. jonathantneal
    Feb 20 00:54
    Is the algorithm that is used to calculate this threshold available as JS? Does it use CIEDE2000? https://github.com/markusn/color-diff
  3. jonathantneal
    Feb 20 01:01
  4. jonathantneal
    Feb 20 01:31

    So the calculations suggest:

    var R = RsRGB <= 0.03928 ? RsRGB / 12.92 : Math.pow((RsRGB + 0.055) / 1.055, 2.4);
    

    Would R be considered the relative luminence of just red?

  5. MichielBijl
    Feb 20 01:33
    I don't know anything about this, but I think Lea Veru's thing is opensource on github.
  6. jonathantneal
    Feb 20 01:39
    @MichielBijl, thanks for suggesting that. I googled that and found it. It looks like a frontend tool. I’m looking for something that can be run as part of a build or watch process.
  7. jonathantneal
    Feb 20 01:39
    If it’s a PostCSS plugin it can work like colorguard.
  8. MichielBijl
    Feb 20 01:39
    Yeah, but she has the algorithm for contrast in there somewhere.
  9. MichielBijl
    Feb 20 01:40
    Guessing that would be the same regardless of syntax.
  10. jonathantneal
    Feb 20 01:42
    The spec is directly translatable to JS. I was just wondering what the individual R calculation was. I presume it is the relative luminance of R.
  11. jonathantneal
    Feb 20 01:43
    Where L = 0.2126 * R + 0.7152 * G + 0.0722 * B would then be the relative luminence of the whole color.
  12. jonathantneal
    Feb 20 02:42
    I have the initial plugin complete. Woohoo!
  13. sophieschoice
    Feb 20 09:47
    Can I remove the usr/local/src folder after installing Lynx on Mac? Or is Lynx installed in that folder if I use the following command: '''cd /usr/local/src
    sudo curl -O http://invisible-island.net/datafiles/release/lynx-cur.zip
    sudo unzip lynx-cur.zip
    cd lynx2-8-9
    ./configure --with-ssl --mandir=/usr/share/man
    make
    sudo make install'''
  14. MichielBijl
    Feb 20 11:55
    What's in the src folder?
  15. MichielBijl
    Feb 20 11:56
    @jonathanneal ah, okay, yeah, like I said, I don't know anything about it :P
  16. sophieschoice
    Feb 20 13:01
    @MichielBijl there is no src-folder yet, the command creates it or requires it to created before running this command, as far as I can understand.
  17. MichielBijl
    Feb 20 13:44
    @stevefaulkner, you here?
  18. stevefaulkner
    Feb 20 13:45
    Tu
  19. stevefaulkner
    Feb 20 13:46
    Yup
  20. MichielBijl
    Feb 20 13:46
    Cool
  21. MichielBijl
    Feb 20 13:46
    Uhm, I'm doing recordings for the AT aural thing
  22. stevefaulkner
    Feb 20 13:46
    Cool
  23. MichielBijl
    Feb 20 13:47
    For address, VO only announces “content information”, but does announce the content on a subsequent VO+right arrow. Do you want just the first thing announced, or the complete recording with something like “requires subsequent navigation to read out content” under interaction or something?
  24. MichielBijl
    Feb 20 13:49
    So that is what I get with additional navigation command.
  25. MichielBijl
    Feb 20 13:51
    And this is all that is announced when you navigate to the address element. https://usercontent.irccloud-cdn.com/file/QGigcVBw/address-clean.mp3
  26. MichielBijl
    Feb 20 13:52
    Could just put in the clean version and add “Needs additional navigation to read out contents.” in the comments column.
  27. stevefaulkner
    Feb 20 14:09
    sure sounds reasonable
  28. stevefaulkner
    Feb 20 14:19
    actually complete recording with explanation
  29. stevefaulkner
    Feb 20 14:19
    document steps
  30. MichielBijl
    Feb 20 14:29
    Okay
  31. MichielBijl
    Feb 20 14:30
    I've put Press <kbd>VO + Right Arrow</kbd> to read contents. under interaction.
  32. stevefaulkner
    Feb 20 14:32
    👍
  33. stevefaulkner
    Feb 20 14:33
    And thanks for contributing ✌
  34. MichielBijl
    Feb 20 14:35
    No problem, will take a while to work through the whole table though.
  35. MichielBijl
    Feb 20 14:47
    This sounds like a bug: image map area's are ordered based on visual position. So if I have two links, the second one is visually above the first one, I have to navigate backwards to reach it with VO keys.
  36. jonathantneal
    Feb 20 15:02
    If you had a Grunt task that checked rules for WCAG contrast compliance, and you wanted to set an option that determines whether it checks for AA or AAA compliant, what might you expect that option to be called?
  37. jonathantneal
    Feb 20 15:04
    I’m undecided between { score: 'AAA' }, { compliance: 'AAA' }, and { aaa: true }, and I’m open to other options to consider.
  38. MichielBijl
    Feb 20 15:04
    {isItWorthIt: true}?
  39. compliance : 'AAA' seems most readable to me
  40. And in gruntfiles, readability over cleverness always wins
  41. sanity checking of the value renders under the hood
  42. Error: 'compliance' option should be one of ['A','AA','AAA']
  43. Possibly with a default fallback to A
  44. var compliance = {   A: 1,   AA: 2,   AAA: 3, };  function getCompliance (level) {   if (level === null || level === undefined) {     return compliance.A;   }    if (level in Object.keys(compliance)) {     return compliance[level];   }    throw new Error('compliance option should be one of...) }
    
  45. Hmm, strange. Editing a wiped message seems to have an unexpected side effect.
  46. And I didn't properly close my error message =)
  47. jonathantneal
    Feb 20 15:17
    It’s weird because it shows up fine but it’s greyed out.
  48. @jonathantneal Yeah, seems I should not edit a deleted message in the future. Going to raise an issue with gitter.
  49. .chat-item.deleted .chat-item__container {     opacity: .5; }
    
  50. jonathantneal
    Feb 20 15:21
    @jkva, thanks for your help so far. I’ve written it to work the way you suggested.
  51. @jonathantneal: H2H =)
  52. jonathantneal
    Feb 20 15:23
    I’m having trouble finding A contrast compliance, if there is such a thing.
  53. jonathantneal
    Feb 20 15:25
    ^ https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast (I don’t see plain A compliance, and I’m presuming I misunderstand A, AA, and AAA compliance)
  54. jonathantneal
    Feb 20 15:36
    Yeap. There is no such thing as WCAG “A” contrast compliance. http://stackoverflow.com/a/2430844
  55. jonathantneal
    Feb 20 15:38
    @jkva, do you think compliance: 'AAA' and compliance: 'AA'are still the most readable options? I just don’t want to confuse people into thinking compliance: 'A' does something.
  56. @jonathantneal: They correspond to how compliance is used in WCAG context, so I'd say so. You can restrict available options to AA and AAA, possibly elaborating on the exclusion of A in //comments or README
  57. Issue created as #1129
  58. gitterHQ/gitter#1129
  59. jonathantneal
    Feb 20 15:44
    “18 point or 14 point bold” I wonder if this includes semibold.
  60. StommePoes
    Feb 20 15:46
    Their assumption is that smaller text may still be readable because the width of the letters is now wider than 1 solid pixel
  61. StommePoes
    Feb 20 15:46
    Which is often what bold does.
  62. jonathantneal
    Feb 20 15:47
    From a general standpoint, should font: 600 14pt "Open Sans" be evaluated as bold or normal? W3 lists common correspondance of non normal/bold weights.
  63. StommePoes
    Feb 20 15:47
    I'm talking about, when you zoom into a letter, and it's anti-aliased, and you're trying to pick the colour representing the font, and you notice... that you're not sure which pixels are actually showing the "true" colour vs a mixture of the colour and the background.
  64. jonathantneal
    Feb 20 15:48
    @StommePoes, yes, and I know no two fonts can be evaluated absolutely. I’m just wondering from a general point of view if I should set the threshold to >= 500 or >= 600 versus >= 700. (and I’m aware that technically 100-900 are keywords and not actual numbers)
  65. StommePoes
    Feb 20 15:53
    use whatever threshhold turns a non-weighted font into a bold font. Like, what my computer does with all fonts (it does not use the various weights, only normal and bold) and what Windows does with Arial.
  66. StommePoes
    Feb 20 15:54
    so if 500 doesn't bold the font, go up to 600
  67. StommePoes
    Feb 20 15:54
    I don't remember what number they usually switch to bold
  68. StommePoes
    Feb 20 15:54
    and with a web font, you may indeed have real weights, and not browsers-making-stems-thicker and other fake font tricks
  69. StommePoes
    Feb 20 15:55
    in which case, it may vary by font-- if it's a Narrow font, I would think you can't just rely on boldness to switch something on the fence to "contrasted enough" at 14pt
  70. @jonathantneal: Depending on how your users use the tool, you could have coercion in your compliance levels. Say you have an 'overall' compliance level you want to reach of A, but as you say, contrast has only AA and AAA. Depending on your tool, you could coerce into the nearest level to A, which would be AAA and

    warning: compliance level 'A' unavailable for 'font contrast', available levels: ['AA', 'AAA'], coercing to 'AA'.

  71. But without really knowing what you're building, it's an educated guess =)
  72. Sorry, coercing from A => AA, is what I meant.
  73. In any case, that uses a 'Do What I Mean' strategy, while still informing the user that it is doing so.
  74. The alternative is to hard error on it and have the user correct the setting.
  75. But in this case, the user clearly wants to conform to the lowest level for contrast, which in this case is level AA, so the user gets what they want, while still conforming to WCAG.
  76. jonathantneal
    Feb 20 18:41
    @jkva, got it. I’m not sure what else I can test outside the browser. This is just useful to protect the developer in the CLI before they get into the browser.