laurelthrash commented 1 year ago

Reported Issue:

Issue: For pages with for On This Page sections, the On This Page header is an <h6> element, which is too large of a level increase.
How to Fix: Change the header level for the On This Page header. More info.
Priority: Moderate
Affects: All pages with On This Page sections.
Pages: How to Apply for DCEG Fellowships, Transition to Industry Fellowship (T2I) (site in development), Stomach Cancer Treatment, etc.

Screen shots:

History: Reported on a July 2023 accessibility scan. Project board "Accessibility Issues (2023.07)" linked in the ticket. Original document here: Accessility Issues - Template and Non-Content (1).docx

Resulting tickets

4043

arcepaul commented 1 year ago

this does exist and should be changed in the field--otp-toc.html.twig template. Thinking it should be h3 but should be confirmed with IAs

santwuma commented 1 year ago

@lburack can you provide provide input into what level of heading the above should be?

cc: @laurelthrash

lburack commented 1 year ago

I believe "On This Page" was made to be an H6 from a stylistic perspective. This is also done with Related Resources at the bottom of pages. @bryanpizzillo can also weigh in on that.

Semantically, making "On This Page" an H3 doesn't make sense, since each link goes to an H2 on the page. Maybe "On This Page" shouldn't be a heading? Definitely do not want to make it an H2 and then knock down the current H2s to H3s; that would be terrible for SEO. From an accessibility perspective, does "On This Page" need to be tagged as a heading? A screen reader can jump through the current H2s on the page on its own, correct? @arcepaul

CC @santwuma @laurelthrash

bryanpizzillo commented 1 year ago

@lburack you could make On this Page be an H2, just with a different presentation. Same with Related Resources.

So a normal -->Article<-- document outline would be:

Page Title
- On this page
- Section 1
- Section 2
- ...
- Citations
- Related Resources

Other content types could be similar. Now for PDQ HP Summaries, References actually could be an H3 as they appear after each section.

bryanpizzillo commented 1 year ago

@laurelthrash and @santwuma also don't forget that this would need to apply to DCEG Connect.

bryanpizzillo commented 1 year ago

A quick search of the template reveals the following deep heading instances. Every one of these instances does not exactly check that there is an h2. (some of the h3 items may work out that then end up on a page with an h2 somewhere, but that is most likely happenstance and not all the time)

h6:

h5:

h4:

(Note the one SVG can be ignored)

h3:

santwuma commented 1 year ago

Next steps:

@arcepaul to create inclusive list of heading accessibility issues, and the content types they are used on, and possible general fixes.
@lburack to review and provide feedback.
Team to review and finalize approach. @santwuma to schedule meeting
Connect with OCPL leads on approach and prioritization.

santwuma commented 1 year ago

@lburack have you completed review of the list for this ticket?

cc: @arcepaul

lburack commented 1 year ago

I have some questions and comments: Heading level audit_LB.docx @arcepaul - if you want to respond to my comments in the doc, go ahead. If it's easier, we can set up a quick meeting to discuss and resolve.

CC @santwuma

santwuma commented 1 year ago

This needs to be broken down into smaller tickets for both dev and IA.

santwuma commented 1 year ago

Deprioritize for now as it's an accessibility best practice but not a a 508 error. @arcepaul to create sub tickets for dev work. Revisit after creating sub tickets to reprioritize.

bryanpizzillo commented 1 month ago

@karlikpj - Step 1 is going to be to list out all the headings in an easily edited way. Basically, so the same searches I did in https://github.com/NCIOCPL/cgov-digital-platform/issues/3956#issuecomment-1640690471. We need to have a list at each <h*> level that should list:

What the twig file is
What is being outputted. Either copy the text, or explain the variable.

Then we can move to triaging.

bryanpizzillo commented 1 month ago

Paul's Scrape of the Templates

H3

card_macros.twig docroot/profiles/custom/cgov_site/themes/custom/ncids_trans/templates/cards/card_macros.twig

macro featureCard(title, description, image, url)
<h3>{{ title }}</h3>

macro titleFirstfeatureCard(title, description, image, url)
<h3>{{ title }}</h3>

macro thumbnailCard(title, list_description, image, url)
<h3>
    <a href="{{url}}">{{title}}</a>
</h3>

macro recommendedContentCard(title, url, img)
<h3>{{ title }}</h3>

media--cgov-infographic--multimedia-card.html.twig docroot/profiles/custom/cgov_site/themes/custom/ncids_trans/templates/cards/media--cgov-infographic--multimedia-card.html.twig

set title = content.field_browser_title|field_value
<h3>{{ title }}</h3>

paragraph--pdq-summary-section.html.twig docroot/profiles/custom/cgov_site/themes/custom/ncids_trans/templates/content/pdq/paragraph--pdq-summary-section.html.twig

<h3>{{- content.field_pdq_section_title -}}</h3>

list_item_macros.twig docroot/profiles/custom/cgov_site/themes/custom/ncids_trans/templates/listing/list_item_macros.twig

macro _output_list_title(title, url, has_title_heading, media_link_type = null, file_type = null, file_size = null, file_ext = null)
{% if has_title_heading %}<h3>{% endif %}

macro _output_list_title_unlinked(title, has_title_heading, media_link_type = null, file_type = null, file_size = null, file_ext = null)
{% if has_title_heading %}<h3>{% endif %}

macro ncids_dynamic_list_macro(title, date, description, image, url)
<h3 class="usa-collection__heading">
    <a class="usa-link" href="{{ url }}">
      {{ title }}
    </a>
</h3>

H4

paragraph--cgov-cthp-guide-card.html.twig docroot/profiles/custom/cgov_site/themes/custom/ncids_trans/templates/content/cthp/paragraph--cgov-cthp-guide-card.html.twig

<h4 class="cthp-pdq-label">
    {{ content.field_cthp_pdq_link_heading }}
</h4>

pager--press-releases--pr-archive-block.html.twig docroot/profiles/custom/cgov_site/themes/custom/ncids_trans/templates/content/press_release/pager--press-releases--pr-archive-block.html.twig

<h4 class="visually-hidden" id="pagination-heading">Pagination</h4>

H5

field--paragraph--field-cthp-view-more-info.html.twig docroot/profiles/custom/cgov_site/themes/custom/ncids_trans/templates/content/cthp/field--paragraph--field-cthp-view-more-info.html.twig

 <h5>{% trans %}More information{% endtrans %}</h5>

H6

field--paragraph--field-cthp-view-more-info.html.twig docroot/profiles/custom/cgov_site/themes/custom/ncids_trans/templates/content/cthp/field--paragraph--field-cthp-view-more-info.html.twig

<h6>{% trans %}On This Page{% endtrans %}</h6>

Sorted

To be resolved in #4419

block-content--cgov-image-carousel--full.html.twig docroot/profiles/custom/cgov_site/themes/custom/ncids_trans/templates/block_content/image_carousel/block-content--cgov-image-carousel--full.html.twig

<h4>{{ content.field_carousel_image_title }}</h4>

block-content--cgov-video-carousel--full.html.twig docroot/profiles/custom/cgov_site/themes/custom/ncids_trans/templates/block_content/video_carousel/block-content--cgov-video-carousel--full.html.twig

<h4 class="show-for-sr">{{ block_description }}</h4>

video_macros.twig docroot/profiles/custom/cgov_site/themes/custom/ncids_trans/templates/media/video/video_macros.twig

macro video(name, content, showCaption = true, additionalClasses = "")
<h4 tabindex="0" class="title">{{ name }}</h4>

To be resolved in #4412

node--cgov-event--event-list-item.html.twig docroot/profiles/custom/cgov_site/themes/custom/ncids_trans/templates/content/event/node--cgov-event--event-list-item.html.twig

<h3 class="event-title">
     <a class="title" href="{{ url }}">{{ label }}</a>
</h3>

node--cgov-event--event-list-item.html.twig docroot/profiles/custom/cgov_site/themes/custom/ncids_trans/templates/content/event/node--cgov-event--event-list-item.html.twig

<h4 class="event-series">{{ content.field_event_series }}</h4>

To be resolved in #4411

node--cgov-blog-post--lb-primary-content.html.twig docroot/profiles/custom/cgov_site/themes/custom/ncids_trans/templates/content/blog/node--cgov-blog-post--lb-primary-content.html.twig

<h4>{{ series.field_recommended_content_header.value }}</h4>

To be resolved in #4409

field--node--field-citation--cgov-press-release.html.twig docroot/profiles/custom/cgov_site/themes/custom/ncids_trans/templates/content/press_release/field--node--field-citation--cgov-press-release.html.twig

<h6>
      {% if items|length == 1 %}
        {% trans with {'context': 'CGov Press Release' } %}
          Reference
        {% endtrans %}
      {% else %}
        {% trans with {'context': 'CGov Press Release' } %}
          References
        {% endtrans %}
      {% endif %}
</h6>

field--field-citation.html.twig docroot/profiles/custom/cgov_site/themes/custom/ncids_trans/templates/field/citation/field--field-citation.html.twig

    <h6>
      {% if items|length == 1 %}
        {% trans %}
          Selected Reference
        {% endtrans %}
      {% else %}
        {% trans %}
          Selected References
        {% endtrans %}
      {% endif %}
    </h6>

field--field-related-resources.html.twig docroot/profiles/custom/cgov_site/themes/custom/ncids_trans/templates/field/related_resources/field--field-related-resources.html.twig

<h6>{% trans %}Related Resources{% endtrans %}</h6>

field--field-article-body.html.twig docroot/profiles/custom/cgov_site/themes/custom/ncids_trans/templates/content/article/field--field-article-body.html.twig

<h6>{% trans %}On This Page{% endtrans %}</h6>

Ignored Templates

Old Home/Landing Components

Note commented out codefield--paragraph--cgov-column-two.html.twig*** docroot/profiles/custom/cgov_site/themes/custom/ncids_trans/templates/content/home_landing/field--paragraph--cgov-column-two.html.twig

<h3{{ title_attributes.addClass(title_classes) }}>{{ label }}</h3>

field--paragraph--field-container-heading--cgov-primary-feature-row.html.twig docroot/profiles/custom/cgov_site/themes/custom/ncids_trans/templates/content/home_landing/field--paragraph--field-container-heading--cgov-primary-feature-row.html.twig

<h3>{{- item.content -}}</h3>

paragraph--cgov-column-one.html.twig docroot/profiles/custom/cgov_site/themes/custom/ncids_trans/templates/content/home_landing/paragraph--cgov-column-one.html.twig

<h3>{{ content.field_container_heading }}</h3>

OK Templates

block--cgov-blog-archive.html.twig This appears in the Archive block where "Archive" is an H2, so the reading order is correct. docroot/profiles/custom/cgov_site/themes/custom/ncids_trans/templates/content/blog/block--cgov-blog-archive.html.twig

<h3>{{ year }}</h3>

santwuma commented 3 weeks ago

This is a meta ticket - smaller tickets have been created to cover this

NCIOCPL / cgov-digital-platform

Accessibility: Heading levels should only increase by one (2 of 2) #3956

Resulting tickets

4043

Paul's Scrape of the Templates

H3

H4

H5

H6

Sorted

To be resolved in #4419

To be resolved in #4412

To be resolved in #4411

To be resolved in #4409

Ignored Templates

Old Home/Landing Components

OK Templates