[wp-trac] [WordPress Trac] #40428: Introduce best practices to hide CSS generated content from assistive technologies

[WordPress Trac]

#40428: Introduce best practices to hide CSS generated content from assistive
technologies
----------------------------+--------------------------------
 Reporter:  afercia         |       Owner:  trishasalas
     Type:  defect (bug)    |      Status:  assigned
 Priority:  normal          |   Milestone:  Awaiting Review
Component:  Administration  |     Version:
 Severity:  normal          |  Resolution:
 Keywords:  a11y-task       |     Focuses:  ui, accessibility
----------------------------+--------------------------------

Comment (by jhabdas):

 FWIW, the [http://devdocs.io/html/attributes#media-attribute `media`
 attribute] accepts media queries, allowing one to use a
 [https://developer.mozilla.org/en-
 US/docs/Web/CSS/Media_Queries/Using_media_queries media query] to specify
 a ''media type'', such as `not aural`, intended to enable one to apply CSS
 to specific "types" of user agents. I tested the feature yesterday using
 VoiceOver on macOS Sierra against on both Chrome and Firefox using a very
 limited test case of:

 {{{
 <style media="only screen">
 h1:after {
   content: "=======";
 }
 </style>
 }}}

 '''Test results'''

 - Chrome read aloud the H1 body, and then the words "equals equals equals"
 - Firefox read aloud the H1, and that was all (though it does that with
 and without the media query)

 '''Suggestion'''

 When creating features, please consider special needs users may be more
 likely to choose the browser which works best for their needs, and that
 browser may already have affordances built in to provide a better
 experience for them when assistive technologies like VO are enabled
 anyway.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/40428#comment:3>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform