~scolby33/scolbyblog

7d6097b7d200b6f8f05d054a4bf4baecbcc8ec39 — Scott Colby 8 months ago 1647a98
Swap from display: none to hidden attribute for invisible metadata.

This makes the hidden content actually hidden in readability mode, and should also help screen readers to ignore it.
M themes/scolbyblog/static/main.css => themes/scolbyblog/static/main.css +0 -4
@@ 194,10 194,6 @@ h3 {
    font-size: 1.25rem;
}

.hidden-metadata {
    display: none;
}

section.article-list {
    margin-top: 0.75rem;
}

M themes/scolbyblog/templates/article.html => themes/scolbyblog/templates/article.html +3 -3
@@ 18,14 18,14 @@
            <article class="h-entry">
                <h1 class="p-name" id="{{ article.slug }}">{{ article.title }}<a class="deeplink" aria-label="Anchor" href="#{{ article.slug }}"><img src="/{{ THEME_STATIC_DIR }}/link.svg" alt="chain link icon indicating an anchor to a heading"></a></h1>
                {% if article.author is defined %}
                <div class="hidden-metadata h-card vcard p-author">
                <div hidden class="h-card vcard p-author">
                    {% if H_CARDS[article.author | string] is defined %}{{ H_CARDS[article.author | string] }}{% else %}<span class="p-name fn">{{ article.author }}</span>{% endif %}
                </div>
                {% endif %}
                <p class="date"><time class="dt-published" datetime="{{ article.date | isoformat }}">{{ article.date | fancydate }}</time></p>
                {% if article.edited %}<p class="date">Last modified <time class="dt-updated" datetime="{{ article.edited | fromisoformat | isoformat }}">{{ article.edited | fromisoformat | fancydate }}</time></p>{% endif %}
                <p class="hidden-metadata"><a class="u-url u-uid" href="/{{ article.url }}" rel="bookmark">{{ article.title }}</a></p>
                <div class="hidden-metadata p-summary">{{ article.summary }}</div>
                <p hidden><a class="u-url u-uid" href="/{{ article.url }}" rel="bookmark">{{ article.title }}</a></p>
                <div hidden class="p-summary">{{ article.summary }}</div>
                <div class="e-content">{{ article.content }}</div>
            </article>
        </main>

M themes/scolbyblog/templates/index.html => themes/scolbyblog/templates/index.html +6 -6
@@ 7,23 7,23 @@
{% block content %}
        <main class="introduction clearfix">
            {% if AVATAR %}<img class="avatar" src="/{{ AVATAR }}" alt="a photograph of {{ AUTHOR }}">{% endif %}
            <div class="hidden-metadata h-card vcard p-author">
            <div hidden class="h-card vcard p-author">
                {% if H_CARDS[AUTHOR] is defined %}{{ H_CARDS[AUTHOR] }}{% else %}<span class="p-name fn">{{ AUTHOR }}</span>{% endif %}
            </div>
            {{ INTRODUCTION }}
        </main>
        <section class="article-list h-feed hfeed">
            <h1 class="hidden-metadata p-name site-title">{{ SITENAME }}</h1>
            <div class="hidden-metadata p-summary site-description">{{ INTRODUCTION }}</div>
            <a class="hidden-metadata u-url u-uid url uid" href="/">feed URL</a>
            <div class="hidden-metadata h-card vcard p-author">
            <h1 hidden class="p-name site-title">{{ SITENAME }}</h1>
            <div hidden class="p-summary site-description">{{ INTRODUCTION }}</div>
            <a hidden class="u-url u-uid url uid" href="/">feed URL</a>
            <div hidden class="h-card vcard p-author">
                {% if H_CARDS[AUTHOR] is defined %}{{ H_CARDS[AUTHOR] }}{% else %}<span class="p-name fn">{{ AUTHOR }}</span>{% endif %}
            </div >
            {% for article in articles_page.object_list %}
            <article class="h-entry">
                <h1 class="p-name"><a class="u-url u-uid" href="/{{ article.url }}" rel="bookmark">{{ article.title }}</a></h1>
                {% if article.author is defined %}
                <div class="hidden-metadata h-card vcard p-author">
                <div hidden class="h-card vcard p-author">
                    {% if H_CARDS[article.author | string] is defined %}{{ H_CARDS[article.author | string] }}{% else %}<span class="p-name fn">{{ article.author }}</span>{% endif %}
                </div>
                {% endif %}

M themes/scolbyblog/templates/page.html => themes/scolbyblog/templates/page.html +2 -2
@@ 16,12 16,12 @@
    <article class="h-entry">
        <h1 class="p-name" id="{{ page.slug }}">{{ page.title }}<a class="deeplink" aria-label="Anchor" href="#{{ page.slug }}"><img src="/{{ THEME_STATIC_DIR }}/link.svg" alt="chain link icon indicating an anchor to a heading"></a></h1>
        {% if page.author is defined %}
        <div class="hidden-metadata h-card vcard p-author">
        <div hidden class="h-card vcard p-author">
            {% if H_CARDS[page.author | string] is defined %}{{ H_CARDS[page.author | string] }}{% else %}<span class="p-name fn">{{ page.author }}</span>{% endif %}
        </div>
        {% endif %}
        <p class="date">Last updated <time class="dt-updated" datetime="{{ page.date.isoformat() }}">{{ page.date | fancydate }}</time></p>
        <p class="hidden-metadata"><a class="u-url u-uid" href="/{{ page.url }}" rel="bookmark">{{ page.title }}</a></p>
        <p hidden><a class="u-url u-uid" href="/{{ page.url }}" rel="bookmark">{{ page.title }}</a></p>
        <div class="e-content">{{ page.content }}</div>
    </article>
</main>