Archive index

A11y Slackers Gitter Channel Archive 27th of March 2017

What fresh hell is THIS now? - Patrick Lauke
  1. zakim-robot
    @zakim-robot
    Mar 27 14:38
    [michiel] @robdodson: which editor did you use in your latest video?
  2. [michiel] I’m looking around for alternatives, because Atom is way too slow with large files.
  3. [michiel] TextMate is nice, but has some weird quirks that sorta rule it out.
  4. zakim-robot
    @zakim-robot
    Mar 27 15:20
    [lgray] hi folks - thoughts on skipping H1 and starting a page with H2? I have always started with H1 and thought it was required to pass WCAG 2.0 AA, but have a client who wants to start with H2. I’m looking for WCAG documentation that points to always having an H1 on the page, but haven’t found it yet
  5. [michiel] What is their motivation to start with h2?
  6. [lgray] using common CSS that their other webapps have, and the H1 looks too big/out of place on the new one
  7. [sri429] you should use a css reset
  8. [marcysutton] Couldn't that be handled with a CSS class?
  9. zakim-robot
    @zakim-robot
    Mar 27 15:25
    [michiel] Yeah, that doesn’t sound like a good reason to not start with <h1>
  10. [michiel] <h1 class="h2">Yay I look like a h2</h1>
  11. [sri429] yeah h1 {margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline; }
  12. [sri429] that should make it look like a normal text.
  13. [michiel] In most projects I work on the CSS will look something like this: h1, .h1 { … } h2, .h2 { … } etc.
  14. [lgray] thanks @sri429 @marcysutton @michiel :)
  15. [kevmarmo] personally i prefer semantic classes to decouple styles from mark up structure
  16. [kevmarmo] so H1 with class of primary_heading {}
  17. [kevmarmo] etc
  18. zakim-robot
    @zakim-robot
    Mar 27 15:31
    [kevmarmo] cleaner and keeps a clear separation of interests
  19. [michiel] Good point
  20. [hdv] isn't 'h1' a semantic class as it means first heading level?
  21. [kevmarmo] @hdv in a way yes but it also leads people to think in terms of mark up
  22. [kevmarmo] by creating an abstract class over a descriptive mark up linked class you decouple the mental model
  23. [kevmarmo] an h2 with the class of h1 doesn't read right to me
  24. zakim-robot
    @zakim-robot
    Mar 27 15:37
    [hdv] agree it feels hacky in a way… still better than a purely visual one (ie class green_heading)
  25. [kevmarmo] @hdv yup
  26. [kevmarmo] hence why i use things like primary_heading
  27. [kevmarmo] they describe what the class should be used for
  28. [michiel] :matches(h1, h2, h3, h4, h5, h6) .h1 { … }
  29. [michiel] Limit the class to other headings.
  30. [michiel] But yeah, I like the abstract class names.
  31. zakim-robot
    @zakim-robot
    Mar 27 15:45
    [trave] doesn't look like IE11 supports :matches http://caniuse.com/#feat=css-matches-pseudo
  32. [michiel] It does not, no :(
  33. zakim-robot
    @zakim-robot
    Mar 27 17:01
    [garcialo] @lgray There isn’t anything in WCAG that says that H1 needs to be the first heading on the page. There are use cases where you wouldn’t want to start with an H1, but it depends on the structure of the page and its sister pages. For instance, if you have a subsite that’s like “Account Settings” with several page under it. It would make sense to have “Account Settings” as the first heading on every page of the subsite, but I wouldn’t suggest it be the H1 of every single one of them since the point of a particular page would be more specific.
  34. zakim-robot
    @zakim-robot
    Mar 27 18:04
    [lgray] this is great information, thanks everyone!
  35. zakim-robot
    @zakim-robot
    Mar 27 18:21
    [sri429] since we are discussing on headings, a related question. Should a modal dialog start with h1 or if not what should be the heading it should start with.
  36. [sri429] also same question for an iframe as well. say i have a h3 after which there is an iframe and the content in it starts with h1 is it okay?
  37. powrsurg
    @powrsurg
    Mar 27 18:41
    I don't agree that a dialog should have a header tag, but it should definitely have something that is used as an aria-labelledby
  38. zakim-robot
    @zakim-robot
    Mar 27 18:46
    [conley] heading help from a landmark perspective but is not required @sri429, @powrsurg is correct as aria-labelledby is crucial
  39. [conley] regarding <h3> to <iframe>w/<h1> there's little you can do if the iframe source is controlled by someone else
  40. [conley] it's no ideal to use<iframe>s, best to avoid whenever possible
  41. [sri429] yeah agree that they are not required, but semantically wouldn’t it make more sense to use a heading for the dialog’s aria-labelledby element?
  42. zakim-robot
    @zakim-robot
    Mar 27 19:12
    [conley] personally I would use at least an <h2>
  43. [conley] but as long as you have aria-labelledby and aria-describedby, the appropriate elements will be annouced
  44. zakim-robot
    @zakim-robot
    Mar 27 19:47
    [mayabenari] If you wanted to give an Accessibility 101 class to a project manager, where would you start? Are there any existing trainings that come to mind (e.g. Udacity's Google Accessibility class)?
  45. zakim-robot
    @zakim-robot
    Mar 27 20:03
    [ira] Hey everyone! I'm wondering if anyone has any information on how the VoiceOver cursor works. Right now I have a carousel/slider-type component that contains a list of anchors. You can only see a certain number of links at a time (there's an overflow: hidden on the <ul>) and the rest are hidden (aria-hidden) unless the user presses the next/previous buttons which triggers a translateX on the list to bring them into view. On VoiceOver in Safari if the user tabs to focus on the "Next" button the VoiceOver cursor follows but this moves the list to the last element. And since technically the last focused element isn't really the last link in the list, the user can still press the "Next" button which causes the list to translate and show a bunch of empty space at the end. Does anyone know why this happens or if there's a way to avoid it? My guess is the Voiceover cursor moves to the end of the element before moving to the newly focused element but I can't find any information to verify.
  46. zakim-robot
    @zakim-robot
    Mar 27 20:30
    [elliottregan] oh,
  47. [garcialo] @mayabenari Robert Jolly talked about PMing and accessibility at ID24 last year. https://www.youtube.com/watch?v=JcdYkxjLtaM&list=PL95LOQw9SLWxmcZtzBiFuT9HAJKFJnl2n&index=6
  48. [ira] @elliottregan only on Safari, good to know I'm not alone! :pensive:
  49. zakim-robot
    @zakim-robot
    Mar 27 21:04
    [karlgroves] Has anyone ever been able to make the locators/ markers in Google Maps accessible?
  50. zakim-robot
    @zakim-robot
    Mar 27 22:32
    [backwardok] ^ also curious about this question - and adding on to it, curious what’s desired to be described when you come across a map marker (name seems insufficient to me, but does the address help enough? coordinates? rough neighborhood? distance from a specific point?)
  51. [caesar] @mayabenari Re: your 101 question, try #training so that it doesn't get lost in the other discussion
  52. zakim-robot
    @zakim-robot
    Mar 27 23:11
    [mayabenari] @caesar thanks, will do!