Archive index

A11y Slackers Gitter Channel Archive 29th of June 2017

What fresh hell is THIS now? - Patrick Lauke
  1. zakim-robot
    @zakim-robot
    Jun 29 01:27
    [sugi] hi all. have a design question - i have a carousel that has some preview images. Clicking on the preview image would show the real image. My guts tell me that i should probably use button for the preview image but on the other hand - that doesn't feel like button as well. What would you advise the tag to use?
  2. zakim-robot
    @zakim-robot
    Jun 29 02:17
    [geekf] @sugi I think anchor tag would be the right thing for it.
  3. zakim-robot
    @zakim-robot
    Jun 29 03:23
    [sugi] @geekf But won't screen reader announce that as link
  4. zakim-robot
    @zakim-robot
    Jun 29 03:30
    [geekf] @sugi I found an example from @estelle where they are radio which she had shown in an meetup. See if it is helpful
    http://estelle.github.io/carousel-carousel/horse.html
  5. zakim-robot
    @zakim-robot
    Jun 29 03:40
    [sugi] @geekf thanks! that is interesting.. looks like i should try <input type="image">
  6. zakim-robot
    @zakim-robot
    Jun 29 11:27

    [scottohara] input type image is another form of button.

    it’d probably be best to use an actual <button> element to wrap the preview, as you’ll have more control of styling

  7. zakim-robot
    @zakim-robot
    Jun 29 14:12
    [geertmelotte] @sugi is it an option to use aria-label on a link tag or have a descriptive alt tag on your img that serves as your link text. In essence it is a link to another piece of content
  8. zakim-robot
    @zakim-robot
    Jun 29 15:32
    [dickson] What's the latest recommendation on the css to use for screen reader-only text? There're several floating about out there
  9. zakim-robot
    @zakim-robot
    Jun 29 15:42
    [scottohara] @dickson this list was compiled just the other day https://codepen.io/matuzo/pen/dRzzGv?editors=1100
  10. [scottohara] my article is mentioned on that list, but it depends on the context: http://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html
  11. zakim-robot
    @zakim-robot
    Jun 29 15:50
    [dickson] @scottohara your article mentions having an element come into view if it is able to normally receive keyboard focus
  12. [dickson] Do you mean that it appears visually?
  13. [scottohara] yes
  14. [dickson] The use case I have is for it to be visible to screen readers, but never becoming visible on screen
  15. [scottohara] there are methods to do that that i outline in the article as well
  16. [dickson] So I guess I can just delete all the :not stuff?
  17. [tink] @dickson I'd urge caution with making interactive elements available only to screen readers.
  18. [scottohara] but, i’m assuming you’re hiding a button / link off screen, why wouldn’t you want people to see what they focused on? not all screen reader users / keyboard users are blind
  19. [johnbhartley] for visually hidden, very similar to what's outlined in the @scottohara post 
    .visually-hidden {   position: absolute;   width: 1px;   height: 1px;   padding: 0;   margin: -1px;   overflow: hidden;   clip-path: rect(0,0,0,0);   border: 0; }
  20. [tink] @dickson @scottohara if a focusable element is hidden it remains n the tab order, so becomes a ghost tab stop for sighted keyboard users.
  21. [dickson] Not by choice sadly, fixing broken accessibility. The way the page has it done is to hide actual html5 radio buttons and checkboxes, but only visually show the label. The label is then updated depending on the state of the hidden controls
  22. [dickson] So as far as screen readers were concerned, its just a bunch of text
  23. zakim-robot
    @zakim-robot
    Jun 29 15:55
    [scottohara] @dickson you may want to look at this then: http://adrianroselli.com/2017/05/under-engineered-custom-radio-buttons-and-checkboxen.html
  24. [dickson] Thanks @scottohara
  25. [dickson] Yeah making sure that there are visual indicators is next on my to-do list
  26. zakim-robot
    @zakim-robot
    Jun 29 16:24
    [mayabenari] To anybody, but especially the non-sighted folk here, when writing alt text for images, is it preferable to name it by form or function? For example, an image of a clipboard would be clipboard or medical history or for another image: magnifying glass or search.
  27. [mayabenari] Assuming the image is not decorative where you’d leave alt text out.
  28. zakim-robot
    @zakim-robot
    Jun 29 16:39
    [garcialo] Ultimately, I’d say it depends on the context, but for the examples that are popping into my head, we typically suggest naming based on function.
  29. [garcialo] I can see some justification for including a description of the image; for instance if you have a magnifying glass that expands to reveal the search field, and someone that isn’t sighted calls tech support, and they were directed to click on the magnifying glass…then if it said “magnifying glass” somewhere in the alt, then it could save some time for the customer to explain that they use a screen reader, can’t see it, and the tech wouldn’t be having to scramble to figure out what the accessible names for any icon-only elements were
  30. Mallory
    @StommePoes
    Jun 29 17:15
    Does anyone have anything I can look at about modals that launch modals?
  31. Either a pattern for how it should work OR that it shouldn't because of UX study X?
  32. I've got teams stuffing whole web pages (as in, starting with the html tag and a whole document) inside our modals and those open modals sometimes also in modals and everything dies horribly which I'm blaming on them man-bear-pig building.
  33. zakim-robot
    @zakim-robot
    Jun 29 17:22
    [tyronem] Yeah, stuffing an entire page inside a modal (and having that page possibly launching a modal) is a path to disaster, usability-wise. I would discourage it at all costs.
  34. Mallory
    @StommePoes
    Jun 29 17:28
    They're not going to take my touchy-sweet-feels on board
  35. I either need a pattern they can follow if they continue or some study or UX or a11y authority that can demonstrate to third parties that this is bad because X, Y, and Z.
  36. Our documentation already discourages it.
  37. Nobody reads documentation though.
  38. zakim-robot
    @zakim-robot
    Jun 29 17:30
    [ryan] If you can't find anything, perhaps you should do a usability study. You will find very quickly that it will fall apart in use and you'll have 1st hand data to discontinue that pattern.
  39. Mallory
    @StommePoes
    Jun 29 17:39
    If that happens after it's released, we're doomed
  40. zakim-robot
    @zakim-robot
    Jun 29 17:46
    [dickson] Page I'm looking at has a tooltip that describes the function of groups of radio buttons. Noticed that when I group them with role="radiogroup" and set the aria-label's text so that it is the same as title="...", I hear it when forms mode is on, but not in browse mode. Whats the recommendation for making the text visible when forms mode is off?
  41. zakim-robot
    @zakim-robot
    Jun 29 18:15
    [kivi] Doesn't the screen reader automatically go into forms mode when it encounters a <form>?
  42. Michael Fairchild
    @mfairchild365
    Jun 29 18:29
    perhaps a silly question: are there any standards around printed color contrast ratios? Can WCAG's contrast requirements just be applied to print?
  43. zakim-robot
    @zakim-robot
    Jun 29 18:40
    [garcialo] You could apply it, but WCAG is specifically for Web content.
  44. [garcialo] It would probably translate over okay.
  45. Michael Fairchild
    @mfairchild365
    Jun 29 18:40
    Exactly, and I'm having a hard time finding a similar standard for print.
  46. zakim-robot
    @zakim-robot
    Jun 29 18:53
    [quidkid] does every usage of background video require a pause button?
  47. [quidkid] like what if the background video plays only when you hover over?
  48. Michael Fairchild
    @mfairchild365
    Jun 29 19:11
    This is where I have landed with background videos - it is best to provide controls to allow pausing them wherever possible. If the video has minimal movement ( for example, only one element of the video (such as a fire pit) is slowly moving, pausing might not be necessary. The reduced motion media query could be very helpful here, but is currently only supported by safari. https://css-tricks.com/introduction-reduced-motion-media-query/
  49. zakim-robot
    @zakim-robot
    Jun 29 23:08
    [cielt] Hi folks, i reckon there’s not a lot of love for carousels in a11y land, but i’m trying at least to improve the accessibility of a plugin out there (which we use in part of our UI, and which i’m hoping to make work in that context). Currently seeking feedback from some users with screen readers on whether it works and would also value suggestions on the implementation, if anyone has thoughts (even if it’s that this is a fool’s errand (thinking face emoji) :( kenwheeler/slick#2119 Thanks for your time!