<header class="site-header">
  <div class="site-inner site-header-inner">

    <a class="site-title" href="{{ '/' | relative_url }}">
      {{ site.title | escape }}
    </a>

    <nav class="site-menu">
      {% assign pages = site.pages | sort: "order" %}
      {% for page in pages %}
        <a class="site-menu-item" href="{{ page.url | relative_url }}">
          {{ page.title | escape }}
        </a>
      {% endfor %}

      {% if site.author and site.author.github %}
        <a class="site-menu-item" href="https://github.com/{{ site.author.github | escape }}" title="GitHub">
          {% include icons/github.svg %}
          <span class="sr-only">GitHub</span>
        </a>
      {% endif %}

      {% if site.feed and site.feed.path %}
        <a class="site-menu-item" href="{{ site.feed.path | relative_url }}" title="RSS">
          {% include icons/rss.svg %}
          <span class="sr-only">RSS</span>
        </a>
      {% endif %}
    </nav>

  </div>
</header>

<header class="site-header">
  <div class="site-inner site-header-inner">

    <a class="site-title" href="{{ '/' | relative_url }}">
      {{ site.title | escape }}
    </a>

    <nav class="site-menu">
      {% assign pages = site.pages | sort: "order" %}
      {% for page in pages %}
        <a class="site-menu-item" href="{{ page.url | relative_url }}">
          {{ page.title | escape }}
        </a>
      {% endfor %}

      {% if site.author and site.author.github %}
        <a class="site-menu-item" href="https://github.com/{{ site.author.github | escape }}" aria-label="GitHub">
          {% include icons/github.svg %}
        </a>
      {% endif %}

      {% if site.feed and site.feed.path %}
        <a class="site-menu-item" href="{{ site.feed.path | relative_url }}" aria-label="RSS">
          {% include icons/rss.svg %}
        </a>
      {% endif %}
    </nav>

  </div>
</header>

Use aria-label to describe SVG images
Use aria-label to describe SVG images

The class "sr-only" breaks the page layout due to
"position: absolute".
