Re: <details> longer description of <label> screenreader?

Hi together,

There are so many situations  where we want to make additional 
information only after user interaction visible.
I think <details> can be very helpful in so many cases , but webworker 
are using it less. And this has a reason.
It is no problem to to use  a polyfill to bypass the missing Browsersupport.

1. But  like the screenreader tests shows us there are some semantic 
problems.
So the first thing to solve is the relation to its parent.
So how will devices know to what the element refers?
Is it the parent- Element or the element before?
We have to add lots of aria- attributes to solve this issue, this bloats 
the code on.
I think here there should be an other solution.
My first  idea was to implement something like the for-attibute  we are 
using for labels and inputfields

2.The other problem is a visual  and styling one.
  a) I think the summary- Element should be handled as a  link,
  the default browser  behavior should be the same (styling and 
functionality).
Then there is no problem with keyboard- access.

The arrows shown in chrome are  for  some people nice but for designer a 
restriction.
  I know we can disable them  via :-webkit-details-marker, but  this no 
guarantee that  this will work.
  (I rembember  the trouble we have with the appereance of select-boxes 
in Firefox)

b) following scenario:
     The web abounds of tooltips.
      Normally the title-attribute is used to store the additional 
information.
     I know that lots of screenreader users are disable the title, 
because of  developers misuse (redundant information).
     on the other hand we have limited length of the displayed information.
     So I think <details> can be very helpful.

    per default  <details> is a block-element. <summary> is inside.
    the text follows  can be semantic whatever <p><ul> etc.
     If I want to add the summary direct beside or after a word, I will 
have styling issues if I want to set  the text position:absolute  over that.

    So it will be very helpful if we will have a wrapping element around 
the content.
    <details> <summary> Properties of a dog</summary>
     <details-description>    Text  </details-description>
     </details>

This solution can solve  semantic issues as well.

Bye Angie

Received on Friday, 11 December 2015 07:57:54 UTC