Archive index

A11y Slackers Gitter Channel Archive 19th of April 2017

What fresh hell is THIS now? - Patrick Lauke
  1. zakim-robot
    @zakim-robot
    Apr 19 02:02
    [lli] @backwardok Thank you for the clarification!
  2. zakim-robot
    @zakim-robot
    Apr 19 08:51
    [michiel] Also: resolution doesn't match browser window size. I have a 15-inch MBP with 2880 times 1800 because it's a HiDP screen, even if you halve that to come to the “practical” resolution of 1440 times 900 that doesn't mean my browser window is that size. I don't browse full screen, there's a menu bar, a dock, some space on the side of my screen so I can
  3. [michiel] easily drag in files from my desktop… when it comes down to the space actually allocated to the website it's probably close to that 1024 times 768 resolution.
  4. zakim-robot
    @zakim-robot
    Apr 19 09:04
    [michiel] For example, this is my screen right now:
  5. [michiel] alt=macOS desktop has a browser window that takes up about 2/3 of the screen on the left hand side. https://usercontent.irccloud-cdn.com/file/hkEJsAhv/Screen%20Shot%202017-04-19%20at%2010.04.12.png
  6. Adam Silver
    @adambsilver_twitter
    Apr 19 10:39
    Does anyone have an a11y friendly calendar control (to pick dates) that they recommend?
  7. zakim-robot
    @zakim-robot
    Apr 19 11:47
    [hdv] I always try to recommend my clients alternatives… many, many date picking situations can be solved with input type="text" placeholder="DD/MM/YYYY" (i.e. date of birth) or input type="date" or even a select with suggestions
  8. [hdv] I believe there are very few situations where a custom datepicker is worth the effort. An example I like to use is something to select a period of time (i.e. KLM.com lets you say from when to when you want your holiday… here seeing days of the week etc is actually useful)
  9. zakim-robot
    @zakim-robot
    Apr 19 15:33
    [cryberg] Hi all. Are there any good articles out there about how to use skip links in a single page application? This is the question on my current project: we've implemented a short list of skip links at the start of our application that helps a user easily skip to the various regions. However, the SPA almost never refreshes the whole page, just individual views, so the user almost never finds themselves at the start of the page where they can use those skip links
  10. [cryberg] Is that.....acceptable? Should we programmatically shift the focus to the beginning of the screen instead? Just not sure what the "right" answer is here
  11. zakim-robot
    @zakim-robot
    Apr 19 19:33
    [mayabenari] Question: when building out a card layout for articles, it’s probably most accessible for each card to be an <article> and have links within it, but what about when you want the entire card to be a link. Any thoughts on the best way to mark that up? <a><article></article></a>, <a role="article">, or something else?
  12. [scottohara] that’d be overly verbose to announce the entire card as a link. and you don’t want to change the role of a link to be an article, because then it kills the link semantics
  13. zakim-robot
    @zakim-robot
    Apr 19 19:39
    [scottohara] what i’ve done is have a primary destination link, and then use javascript to create a click event for the card, that will take the user to that primary destination
  14. [scottohara] so, your card only has one tab stop, which won’t pollute the DOM with redundant links
  15. [scottohara] and mouse users can still click on the whole card to go somewhere

  16. [dpogue] @mayabenari I was poking around at how the Google Play Store does its cards (since they play very nicely with the VoiceOver screen reader), and they have a unique way of making the whole card a link:
    ```<div class="card">
    <a href="..." aria-hidden="true" tabindex="-1" class="card-link"></a> 

    <h3><a href="...">Article title</a></h3>

    </div>```

  17. [dpogue] and then .card { position: relative; } .card-link { position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
  18. [scottohara] ^ that essentially does what i was suggesting, just without needing JS,
  19. [scottohara] probably even easier to implement as long as you can populate two links into your card
  20. [mayabenari] Thanks @scottohara and @dpogue! I’ve seen the technique of adding a click event to the card, but I haven’t seen the Google Play technique. Would be great to do it w/ no JS.
  21. zakim-robot
    @zakim-robot
    Apr 19 19:56

    [scottohara] if you go down the CSS only route, make sure you add the following: 

    .card-link { ...; z-index: 1; }  .card a { position: relative; z-index: 2; }

    otherwise any secondary links you have within the card and even the hover state for the primary link, won’t be clickable, since the card-link would be ‘blocking’ mouse events

  22. [scottohara] @mayabenari ^
  23. zakim-robot
    @zakim-robot
    Apr 19 20:04
    [higley] there’s also .card *:not(a) { pointer-events: none; }, if you don’t feel like messing with z-index
  24. zakim-robot
    @zakim-robot
    Apr 19 20:20
    [scottohara] That unfortunately wouldn't solve the issue I mentioned of the card-link blocking any other links from being clicked though.
  25. [higley] Oh, I was thinking it would be behind the other elements. Either way works :)
  26. zakim-robot
    @zakim-robot
    Apr 19 20:26
    [higley] (the other elements would need positioning if they don’t already have it, though)
  27. zakim-robot
    @zakim-robot
    Apr 19 23:21
    [spell] Hey all! Just wondering what the going rate per hour an accessibility professional might bill. I know it may vary and that's okay, just looking for average, etc. My company (ad agency) has a different rate for different roles (backend, qa, front-end, etc.). Thanks in advance!