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

The same rules apply to all document types (except html): Word, Excel, PDF, etc.

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.

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

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

The HTML

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

Icon added via CSS

.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;
}

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:
The aria-describedby html
```
<div hidden id="descriptionID">Opens in new window</div>
```

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>

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

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

The SVG title HTML

<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>