Archive index

A11y Slackers Gitter Channel Archive 10th of February 2017

What fresh hell is THIS now? - Patrick Lauke
  1. zakim-robot
    @zakim-robot
    Feb 10 09:33
    [pjmahs] Hi Guys! Was looking out for resources on disability design and web accessibility for disabilities, hopefully i came to the right place?
  2. [pjmahs] =D
  3. Job van Achterberg
    @jkva
    Feb 10 09:37
    @pjmahs: Anything in particular?
  4. zakim-robot
    @zakim-robot
    Feb 10 09:40
    [pjmahs] One of our clients was asking us if our digital product complies with the web content accessibility guidelines
  5. [pjmahs] the thing is that if its basic content its easy
  6. [pjmahs] but what how can we design internally to make way for keyboard web access and visual access and not bother normal users
  7. [pjmahs] i mean its just questions im asking now i just haven’t had time to look into details, just want to ask different people to see what they know
  8. Job van Achterberg
    @jkva
    Feb 10 09:42
    How would you define a normal user?
  9. This is a form of web application @pjmahs?
  10. zakim-robot
    @zakim-robot
    Feb 10 09:43
    [pjmahs] someone without disability?
  11. [pjmahs] digital product
  12. Job van Achterberg
    @jkva
    Feb 10 09:44
    @pjmahs: The short version is to make sure you follow web standards, and make sure that you comply to a level of the WCAG2.0 specification (preferably level AA)
  13. zakim-robot
    @zakim-robot
    Feb 10 09:45
    [pjmahs] https://www.w3.org/TR/WCAG10/#gl-facilitate-navigation
  14. Job van Achterberg
    @jkva
    Feb 10 09:45
    But how to do that is very dependent on your actual product and its implementation.
  15. zakim-robot
    @zakim-robot
    Feb 10 09:45
    [pjmahs] yea was just going to say i found a site that gives examples lol
  16. Job van Achterberg
    @jkva
    Feb 10 09:45
    I would advise https://www.w3.org/TR/WCAG20/ as WCAG1.0 is outdated. A good checklist is available on http://webaim.org/standards/wcag/checklist
  17. Can you give an example of a part of your product that you are concerned about?
  18. You can also run it through the tenon.io validator, the wave.webaim.org validator or browser plugin, or use Deque's aXe browser plugin, to get a good idea of what you need to take a closer look at.
  19. zakim-robot
    @zakim-robot
    Feb 10 09:50
    [pjmahs] I think the client is more worried about url labeling
  20. [pjmahs] we did the testing, and got a report on how our url labels are not labeled correctly i think?
  21. Job van Achterberg
    @jkva
    Feb 10 09:50
    Could you give an example?
  22. zakim-robot
    @zakim-robot
    Feb 10 09:50
    [pjmahs] even images need a label or something, i have to go through this deeper
  23. [pjmahs] this is what i got from business side
  24. Job van Achterberg
    @jkva
    Feb 10 09:51
    @pjmahs: Images need alternative text in some cases. For more knowledge read http://webaim.org/techniques/alttext/
  25. zakim-robot
    @zakim-robot
    Feb 10 09:51
    [pjmahs] Each A element must contain test of an IMG with an ALT attribute.
  26. [pjmahs] add text to the link, or ALT test if the link contains an image. If there is no line text or the ALT text is blank, screen readers have nothing to read, so read out the URL instead.
  27. [pjmahs] ok your link helps
  28. [pjmahs] i understand the labeling
  29. Job van Achterberg
    @jkva
    Feb 10 09:55
    Awesome
  30. @pjmahs There are a lot of aspects to good usability and accessibility. I wish you good luck - if you need help, this is a good place to ask it.
  31. zakim-robot
    @zakim-robot
    Feb 10 09:59
    [pjmahs] cool. i just didnt know there were rules and formulas about this. learn something new each day :)
  32. Mallory
    @StommePoes
    Feb 10 09:59
    And @pjmahs the thing to be careful about the people-with-disabilities-vs-normal-people is that there's often no such dichotomy. People without chronic disabilities can have something temporary that results in the same thing; people with chronic disabilities often use many parts of the web no differently than your normals. It's actually a range of different people.
  33. I say this because I've seen developers who "want to be accessible" write some pretty terrible code because they're making separate sections "for the blind people" and then basically repeating that "for the seeing people." The adage "the more code there is, the more code there is to break" comes to mind.
  34. Usually the real fights about accessibility-vs-design are in small details, not large structural decisions.
  35. Job van Achterberg
    @jkva
    Feb 10 10:02
    Yeah, I didn't want to go into that.
  36. Mallory
    @StommePoes
    Feb 10 10:02
    It might save pjmahs some unnecessary extra work: some people end up doing too much when they first get into web accessibility, which leads some to think it's harder than it is.
  37. Job van Achterberg
    @jkva
    Feb 10 10:03
    You're phrasing it better than I would have anyway.
  38. Mallory
    @StommePoes
    Feb 10 10:04
    The word "normal" didn't used to hit me the way it does now too, I guess.
  39. @pjmahs "we did the testing, and got a report on how our url labels are not labeled correctly i think?" <-- was this an SEO test about "human-readable URLs" ?
  40. zakim-robot
    @zakim-robot
    Feb 10 10:05
    [pjmahs] Yea i think initially i straight away though of the extreme cases, but after reading and talking with people i realised these things that businesses asks for are just to cover the basic guidelines of accessibility
  41. Mallory
    @StommePoes
    Feb 10 10:06
    mostly it comes down to labelling/naming, colour contrast, good HTML semantics and can you use the page with the keyboard. Everything after that is gravy.
  42. tasty, tasty gravy
  43. owls in the navy
  44. zakim-robot
    @zakim-robot
    Feb 10 10:06
    [pjmahs] Not really sure on the SEO test, business side did some test and generated some responses. I would see however how SEO would come into play in a page where audio accessibility is required...
  45. Job van Achterberg
    @jkva
    Feb 10 10:07
    How would SEO relate to audio accessibility @pjmahs?
  46. zakim-robot
    @zakim-robot
    Feb 10 10:07
    [pjmahs] Yea i also realised the site they tested accessibility on has horrible design
  47. Mallory
    @StommePoes
    Feb 10 10:07
    I asked because the phrase "URL labelling" sounds like an SEO requirement we used to have... that when a "normal human" looks at a URL from an address box, that they can correctly guess what that page is.
  48. Job van Achterberg
    @jkva
    Feb 10 10:08
    For instance, an audio transcript could positively influence SEO because it provides more information about the content that's on the page.
  49. Mallory
    @StommePoes
    Feb 10 10:08
    like foo.com/blog/posts/january/what-my-dog-had-for-supper is a human readable URL, while foo.com/b10g?media=453hfkslknmdjfb90&t=kjdhdsakjsd means nothing.
  50. zakim-robot
    @zakim-robot
    Feb 10 10:08
    [pjmahs] I think he was coming from a point where if audio “read-out” was enabled. If pictures or links were not labeled correctly, the program would skip it.
  51. [pjmahs] that could be a point as well, the URL name i mean
  52. Job van Achterberg
    @jkva
    Feb 10 10:09
    Ah, a screen reader
  53. Mallory
    @StommePoes
    Feb 10 10:09
    That's true, someone running such a program should be able to hear something if it's meaningful content on the page. Keep in mind that you are NOT required to add any audio reading anythings to your site (some people thing they do)
  54. zakim-robot
    @zakim-robot
    Feb 10 10:09
    [pjmahs] but in this case its definitely about content not URL
  55. Mallory
    @StommePoes
    Feb 10 10:10
    So the "human-readable" URL names isn't an accessibility concern, just SEO, but you could consider it a usability thing-- it's easier for all people to read the easier URLs :) but not required to be "accessible".
  56. ok good.
  57. Writing the alt text for an image is also a bit of an art. The first times someone does it, it can come out pretty silly :P
  58. but, you learn.
  59. I tend to be more practical than other people, describing what I think that image's purpose in life, the universe and everything is. Other people in this channel tend to go much deeper in description. Maybe something I need to work on.
  60. Mallory
    @StommePoes
    Feb 10 10:15
    @conley I remember complaining to Marco Zehe about the bumps because I can feel them really really well under my sandals. He replied he almost never noticed them, he wears real thick-soled shoes.
  61. He would have to catch them with a stick or something
  62. Job van Achterberg
    @jkva
    Feb 10 10:17
    Good lord @StommePoes. I had no idea about the context, this sounded like a weird medical condition
  63. Mallory
    @StommePoes
    Feb 10 10:18
    Sidewalk-itis
  64. Job van Achterberg
    @jkva
    Feb 10 10:18
    You need sole, with a capital S
  65. Mallory
    @StommePoes
    Feb 10 10:19
    Brutha you sayin I don't have sole?
  66. zakim-robot
    @zakim-robot
    Feb 10 10:23
    [pjmahs] :laughing:
  67. zakim-robot
    @zakim-robot
    Feb 10 10:55
    [sophieschoice_slack] @stommepoes yeah, writing ALT-text is an art. I am on the practical side as well. On my website in the jewellery section, the ALT)text is usually the name of the person and the jewels she wears. Though I got input from someone that I needed to describe the dress the woman was wearing in the pictures. I kinda get where he is coming from, but I don´t see the relevance of it to mention it. Or does make this me a bad accesibility-junior wannabe? :p
  68. Job van Achterberg
    @jkva
    Feb 10 10:56
    My rule is: alt text describes objectively what the image contains. "A beautiful woman wearing a ridiculously expensive necklace, and skimpy white dress"
  69. A caption for that image would be "Michelle Rodriguez showing off her new bling"
  70. zakim-robot
    @zakim-robot
    Feb 10 10:56
    [sophieschoice_slack] (joy/allthethings emoji)
  71. Job van Achterberg
    @jkva
    Feb 10 10:56
    Which would be context for every user
  72. I'm overreaching for comedy value - "A woman wearing a necklace and wearing a white dress"
  73. But in general "what does the image contain"
  74. and the caption for "what does the image MEAN"
  75. zakim-robot
    @zakim-robot
    Feb 10 10:57
    [sophieschoice_slack] Yeah, I got that ;)
  76. Job van Achterberg
    @jkva
    Feb 10 10:57
    because meaning is important for every user
  77. zakim-robot
    @zakim-robot
    Feb 10 10:57
    [sophieschoice_slack] Ha, but that might be the problem
  78. [sophieschoice_slack] I don´t use captions with the pictures
  79. Job van Achterberg
    @jkva
    Feb 10 10:58
    But how would a visual user then know what the image is about? That suggests it's purely presentational
  80. and then perhaps should have an empty alt
  81. I love socratic accessibility ;)
  82. zakim-robot
    @zakim-robot
    Feb 10 11:00
    [sophieschoice_slack] I will give an example page: https://www.allthingsroyal.nl/koninklijkejuwelen/belgie/diadeemdernegenprovincieen.php
  83. Job van Achterberg
    @jkva
    Feb 10 11:01
    Ah, the context is clear from the text around it.
  84. Yes, good point. I agree that an alt for just this image would be good.
  85. zakim-robot
    @zakim-robot
    Feb 10 11:02
    [sophieschoice_slack] I could do a small redesign fpr the images, to show a caption directly on the picture. Both for sighted and non-sightees.
  86. [sophieschoice_slack] And that would solve the problem with embedded Getty Images or tweets as well, I suppose
  87. Job van Achterberg
    @jkva
    Feb 10 11:03
    Something like "Het originele diadeem, een diamanten bandeau in Griekse stijl met 11 grote diamanten"
  88. Although I wonder if "Het originele diadeem" is not redundant here
  89. zakim-robot
    @zakim-robot
    Feb 10 11:04
    [sophieschoice_slack] right now for embedded Getty Images there is no context for both sighted and non-sightees (eg. event and date of event where picture was taken)
  90. Job van Achterberg
    @jkva
    Feb 10 11:04
    Hmm
  91. "Een zwart-wit foto met daarop een diamanten bandeau in Griekse stijl met 11 grote diamanten"
  92. [Het originele diadeem]
  93. zakim-robot
    @zakim-robot
    Feb 10 11:06
    [sophieschoice_slack] "Een zwart-wit foto met daarop een diamanten bandeau in orginele vorm/zetting in Griekse stijl met 11 grote diamanten"
  94. Job van Achterberg
    @jkva
    Feb 10 11:06
    You're the expert
  95. I thought of black-white photo being needless context, but then the viewer might not always have been blind
  96. We need to remain objective when describing
  97. zakim-robot
    @zakim-robot
    Feb 10 11:07
    [sophieschoice_slack] how about that? it makes it clear that the shown tiara is in the original setting.
  98. Job van Achterberg
    @jkva
    Feb 10 11:07
    If that is something that is specific to the thing (a taria) to someone who knows about the thing (tarias) then yes
  99. zakim-robot
    @zakim-robot
    Feb 10 11:08
    [sophieschoice_slack] OK, good to know =D
  100. Job van Achterberg
    @jkva
    Feb 10 11:08
    It's like saying "A Kreidler '63 typewriter with original chrome letter casting"
  101. But that's more like a caption
  102. The image is just a typewriter
  103. I have stuff to think about while I take the car to the garage (turn signal is broken, I can only turn right, how will I ever get there). See you later!
  104. I mean it's like saying "alt= a man sitting at the table, reading a book". "caption= Gary Busey reading Harry Potter and the Half Blood Prince"
  105. Would you put the fact that it's Gary Busey, in the alt
  106. decisions decisions
  107. zakim-robot
    @zakim-robot
    Feb 10 11:23
    [sophieschoice_slack] hm,.....
  108. zakim-robot
    @zakim-robot
    Feb 10 16:51
    [shawn.henning] The podcast 20k Hertz just had an episode on Descriptive Audio tracks. The decision in that situation is to describe what is going on and not imply more. "Woman is sad" versus "woman cries"
  109. [shawn.henning] Image captioning is slightly different.
  110. Job van Achterberg
    @jkva
    Feb 10 16:56
    Giving the image an alt that makes sense within context (what is the point of this image being here - what's it saying) is also a fair consideration. Captions for any information that would relevant to any user.
  111. sophieschoice
    @sophieschoice
    Feb 10 18:50
    How is this for accessibility? :
  112. <figure>
    <img src="../../assets/img/juwelen/duitsland/beieren/zonnestraaltiara/beieren_zonnestraaltiara.jpg" class="scaled">
    <figcaption><small>© Sotheby's</small></figcaption>
    </figure>
  113. is figure and figcaption well supported by screenreaders?
  114. sorry if it is a stupid question, I am still at apprentice-level :p
  115. zakim-robot
    @zakim-robot
    Feb 10 18:57
    [karlgroves] Try this:
  116. [karlgroves] <figure> <img src="../../assets/img/juwelen/duitsland/beieren/zonnestraaltiara/beieren_zonnestraaltiara.jpg" class=”scaled” aria-labelledby=”fig-desc" > <figcaption id><small>&copy; Sotheby's</small></figcaption> </figure>
  117. [karlgroves] Course it might help if I actually answered the question. The code I showed above is using an aria-labelledby to associate the caption with the image. This would be the most widely supported approach/
  118. sophieschoice
    @sophieschoice
    Feb 10 21:17
    I see, good to know. What is <figcaption id> for, if I may ask? And is the value of aria-labelledby the same for every image? Or do you alter that for every image?
  119. sophieschoice
    @sophieschoice
    Feb 10 21:24
    ah, wait, i see. the value of aria-labelled by is appended to figcaption.
  120. and that is how they are connected together. Sweet!
  121. adding alt text for good measure and it is accessible :ok_hand: