title: Make a <pre> tag more accessible
body: <p>In our blog, we're showcasing blocks of code in <code>&lt;pre&gt;</code> tags and we want to make them more accessible.</p>
  
  <p>For now, a screen reader would read: </p>
  
  <blockquote>
    <p>Here is our code [...]<br>
    import.org.whatever.i.dont.understand.this.is.too.bad etc</p>
  </blockquote>
  
  <p>What would be great would be to have a wee announce like: </p>
  
  <blockquote>
    <p>Here is our code [...] Block of Java code [...]  > import.org.whatever.i.dont.understand.this.is.too.bad etc</p>
  </blockquote>
  
  <p>so that the user knows what's going to follow.</p>
  
  <p>How can we do this properly?</p>