Archive index

A11y Slackers Gitter Channel Archive 6th of September 2017

What fresh hell is THIS now? - Patrick Lauke
  1. zakim-robot
    @zakim-robot
    Sep 06 00:12

    [svinkle] @gokatgo I've used this in the past, works well! I've also started using just plain-old document.title like so: 

    componentDidMount() {   document.title = 'My page title'; }

    Not sure what the difference between the two solutions is; seems like they produce the same solution. (thinking face emoji)

  2. zakim-robot
    @zakim-robot
    Sep 06 00:20
    [gokatgo] I'll try that as well. Thanks, @svinkle
  3. zakim-robot
    @zakim-robot
    Sep 06 01:11
    [ugi] Quick question: If focus ring is partially visible (3 sides are visible but one side is cropped by the parent container), do you think it is failure of WCAG 2.4.7?
  4. [kmason] For pages with a lot of search results - is there a problem with using “load more” vs using pagination? Is there a preference?
  5. zakim-robot
    @zakim-robot
    Sep 06 01:36
    [svinkle] @ugi Depends on exactly how much is visible, but 3 out of 4 sides is okay, imo.
  6. [svinkle] @gokatgo Haven’t needed to store the state for the documemnt.title, no. I guess it would depend on how you’ve setup your components. I have “page” components which use this, with child components building the content. React router is used to go between my “page” components, which on load, calls the componentDidMount() method as illustrated above.
  7. zakim-robot
    @zakim-robot
    Sep 06 01:41
    [svinkle] @kmason I feel like there was a poll or some article that went around asking the same thing? I think most people prefer pagination over “load more” controls. I can’t recall exactly why, but maybe it’s because people can easily jump to a specific page if so desired? Not sure. (thinking face emoji)
  8. [kmason] I’ve read that, too - I’d prefer it from a UX perspective, if someone’s looking for something they know is a bit old, they can skip to page 3 or whatever. I’m not finding anything too obvious in terms of accessibility impact, though.
  9. zakim-robot
    @zakim-robot
    Sep 06 05:37

    [morgan] @vavroom Thank you so much for your valuable answer I will certainly implement this easy solution on the small site. But just for the sake of understanding let's say we have 6, let's say now, countries; I'm now talking about my company's website, and that the switch should be shown in the header.

    What pattern would you pick?

    I alsocame across the "Fake Menu" pattern from Ebay (https://ebay.gitbooks.io/mindpatterns/content/navigation/fakemenu.html), it seems that this is what they are using for their page for the country switcher. I believe it can be improved though to appears in the Landmarks as "change country" navigation for instance. But it seems decent to me at first sight.

  10. zakim-robot
    @zakim-robot
    Sep 06 13:47
    [car] Free seminar: What The Winn-Dixie Case & Other Important Rulings Mean For the Future of Web Accessibility Under The ADA
    September 12, 2017 at 2 - 3 pm ET
    Registration: http://www.3playmedia.com/resources/webinars/webinar-registration-09-12-2017/
  11. zakim-robot
    @zakim-robot
    Sep 06 14:36
    [vavroom] @morgan I don't have much time to investigate the fake menu thing, but at first sight, the button option seems viable. Button rather than link because a link takes you somewhere and a button does something. ;)
  12. [morgan] @vavroom thank you :) good tip
  13. zakim-robot
    @zakim-robot
    Sep 06 15:15
    [mattbartist] welcome @sarah.mount
  14. zakim-robot
    @zakim-robot
    Sep 06 15:22
    [kara.franco] hi @jacobsauerhoefer !
  15. [jacobsauerhoefer] :wave::tada:=D
  16. zakim-robot
    @zakim-robot
    Sep 06 17:20
    [droidpinkman] ummm question…
  17. [droidpinkman] https://www.w3.org/TR/selectors4/#current-pseudo
  18. [droidpinkman] "For example, the following rule will highlight whichever paragraph or list item is being read aloud in a speech rendering of the document:"
  19. [droidpinkman] 1. is this useful
  20. [droidpinkman] 2. does it work and what screen readers support this
  21. zakim-robot
    @zakim-robot
    Sep 06 17:30
    [dpogue] I don't think it's supported, and screenreaders tend to do their own highlighting?
  22. [ugi] @droidpinkman I think these are intended to be used for subtitles in videos. Not sure about the support, but I think they can be quite useful for situations like captioning a sign language training video, or a karaoke :) I don’t think screen readers can change the state of any object on the page, and I don’t think these states were intended to be used by screen readers.
  23. zakim-robot
    @zakim-robot
    Sep 06 17:36
    [droidpinkman] thats confusing cause the spec says "…being read aloud in a speech rendering of the document:"
  24. [droidpinkman] @ugi have u used it before?
  25. zakim-robot
    @zakim-robot
    Sep 06 17:43
    [droidpinkman] voice over does squat so far in terms of any highlighting
  26. [ugi] @droidpinkman nope, haven’t used them before. Not even sure they are supported by any browser out there.
  27. [droidpinkman] yeah i dont think so either
  28. [ugi] https://css4-selectors.com/selector/css4/time-dimensional-pseudo-class/
  29. [ugi] no support, according to this page
  30. zakim-robot
    @zakim-robot
    Sep 06 17:50
    [jasonday] Anyone else feel that Universal Design could easily expand to consume responsive, so design that is consumable by all people and devices of any ability?
  31. zakim-robot
    @zakim-robot
    Sep 06 17:58
    [svinkle] @jasonday I thought it included responsive already? At least it does in my definition. Also add on performance. thumbsup emoji
  32. [jasonday] @svinkle I agree, and it's how I've defined it, but looking at resources and I'm not seeing those viewpoints
  33. [svinkle] Interesting. Sounds like this could be a good blog post to me.
  34. [svinkle] Or at the very least, a precisely worded tweet.
  35. zakim-robot
    @zakim-robot
    Sep 06 18:07
    [jasonday] let me know when you do @rathernerdy
  36. zakim-robot
    @zakim-robot
    Sep 06 18:38
    [quidkid] where is a good place to find Philly accessibility lawyers to talk to?
  37. [kivi] Philly.
  38. [jasonday] born and raised
  39. [jasonday] on the playground is where I spent most of my days
  40. zakim-robot
    @zakim-robot
    Sep 06 18:58
    [quidkid] nvm i just googled for some. there’s just so many different specialties but i suppose it doesn’t matter for general research
  41. zakim-robot
    @zakim-robot
    Sep 06 19:18
    [thanks4allthefish] hello folks, I have a form which has an error message (span element) displayed below the text box. should I apply a tabindex of "0" on the error message and then a tabindex of say "10" to direct the user to the error message first?
    I do know that using a specific number to set the tab order is no best practice
  42. [thanks4allthefish] A user using nvda with keyboard will not read the error message otherwise
  43. [tyronem] @thanks4allthefish you can focus on the error message with javascript. I would advise against changing the tabindex to 10. (I only set it to 0 or -1, every other value means I’ve gone horribly wrong)
  44. zakim-robot
    @zakim-robot
    Sep 06 19:23
    [sshaar08] anyone have a good resource on the different levels of accessibility compliance eg. A vs A11Y etc
  45. [rselzer] @thanks4allthefish read this http://webaim.org/techniques/formvalidation/ you can use a combo of ARIA attribs to ensure the user is alerted to errors in their form
  46. [thanks4allthefish] thanks @tyronem and @rselzer, will look into both these solutions
  47. [tyronem] @thanks4allthefish No problem - and a great username to boot. Good luck!
  48. zakim-robot
    @zakim-robot
    Sep 06 20:24

    [svinkle] @thanks4allthefish I’m a fan of having the input and the error message directly inside the label element. This way, the error text will be announced when the input receives focus, *and*, the label will provide a nice, big touch/click target for folks with motor control disabilities or anyone else in a hurry.

    Looks something like this: 

    <label for="firstName">     First Name:     <input type="text" id="firstName" name="firstName" aria-invalid="true">     <span class="error">First name must not be empty</span> </label>