Accessible mark-up to open a PDF document in a new window

• Must display the document name, or document title, not the document's filename.
• Must display the format type of the document. Examples: .pdf, .docx, .pptx, .xslx
• Must display the document file-size if it is considered downloadable.
• Must display an icon to visually represent opening in a new window. Alternatively, add plain text [opens in new window]
• Must be programatically labelled to inform screen-readers that activating the link will open in a new window.

This may be achieved using a few different techniques.

Techniques

Note: document links are for demonstration only and are not real.

1. Use a title attribute on the link, and add an icon via CSS:

   Example: Name of first document (.pdf 128MB)

   <a href="filename.pdf" target="_blank" title="Opens in new window">Name of first document (.pdf 128MB)</a>

   .link_external[href][target="_blank"]::after {
       background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path d='M28,4 39,4 39,15 M39,4 23,20 M28,9 7,9 7,34 35,34 35,15' fill='none' stroke='%23808080' stroke-width='3'/></svg>");
       background-size: 1em 1em;
       background-repeat: no-repeat;
       content: "";
       display: inline-block;
       height: 1em;
       margin: .125em 0 -.125em .125em;
       width: 1em;
   }

2. My personal preference – Uses an aria-describedby attribute on the link, and adds an icon via CSS:

   Example: Name of second document (.docx 12MB)

   <a href="filename.docx" target="_blank" aria-describedby="descriptionID">Name of second document (.docx 12MB)</a>

   Only one descriptionID reference is required for multiple links:

   <div hidden id="descriptionID">Opens in new window</div>

3. Use an aria-describedby attribute on the link, and an inline icon:

   Example: Name of third document (.xlsx 17MB)

   <a href="filename.xlsx" target="_blank" aria-describedby="descriptionID">
       Name of third document (.xlsx 17MB)
       <svg viewBox='0 0 40 40'>
           <path d='M28,4 39,4 39,15 M39,4 23,20 M28,9 7,9 7,34 35,34 35,15' />
       </svg>
   </a>
   

4. Use an inline icon which has a SVG title or an image alt text:

   Example: Name of fourth document (.pptx 1.6MB)

   <a href="filename.pptx" target="_blank">
       Name of fourth document (.pptx 1.6MB)
       <svg viewBox='0 0 40 40'>
           <title>Opens in new window</title>
           <path d='M28,4 39,4 39,15 M39,4 23,20 M28,9 7,9 7,34 35,34 35,15' />
       </svg>
   </a>