This is a collection of ideas around FIRST Branding. I had experimented with some of these on other PRs, but pulled them out to avoid mixing issues as some PRs would likely go in before others. FIRST branding issues might need some FIRST corporate oversight. These are also FTC Docs site wide changes.
Reference: FIRST Branding and Design Guidelines PDF

Summary of issues:

1. FIRST word mark - FTC Docs probably should not use the <em> HTML tag for the FIRST word mark, use CSS to style the FIRST word mark.
2. FIRST Registered mark - FTC Docs should add the to the first FIRST at the top of each page.
3. FIRST Typography - we aren't following the FIRST Branding guidelines for fonts.
4. FIRST Copyright - FIRST Inspires uses:
   © 2025 For Inspiration and Recognition of Science and Technology (FIRST)
   A 501(c)(3) nonprofit organization
5. Only use the page heading in the HTML Title.
6. About the FIRST Tech Challenge (ftcoverview page). While updating the text on that page I wanted to introduce some text that would only read by a screen reader to assist blind users with the YouTube video on the ftcoverview page.

FIRST Word Mark

This was noticed when using a particular screen reader that inserts a pause before and after the word "FIRST". This is because the HTML generated by Sphinx surrounds the FIRST word with an <em> tag. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em

<em> is a semantic HTML tag that "marks text that has stress emphasis". The screen reader is attempting to add emphasis to the word, but it just sounded funny to me. There is no HTML tag to italicize words, CSS is supposed to be used instead to style text.

In our RST files we currently surround FIRST with * symbols, which Sphinx converts to <em> tags.
e.g. *FIRST* becomes <em>FIRST</em> in HTML

If we add a RST Role and a substitution plus some CSS we can get italic text without the emphasis.

.. role:: wordmark
.. |FIRST| replace:: :wordmark:FIRST
.wordmark {
font-family: Roboto, Arial, sans-serif;
font-style: italic;
}

e.g. |FIRST| becomes <span class="wordmark">FIRST</span> in HTML. A screen reader doesn't pause when it encounters a span but the wordmark class lets us apply CSS styling.

It's easy to apply in RST files, just replace *FIRST* with |FIRST|.

Getting FIRST italic in link text

This RST substitution was already in this page, but updated for the new wordmark CSS. It should be added to the style guide

.. comment
Build the FIRST Championship link so we can italicize FIRST.

Teams compete at regional events leading up to an exciting |text|_ that concludes the season.

.. _text: https://www.firstchampionship.org/
.. |text| replace:: |FIRST| Championship

FIRST Registered Mark

Page 8 of the FIRST Brand guideline document mentions using the Registered mark symbol.

On first use of the name in a document, both in heading/title and in body copy, include a
superscript registered symbol (®) after FIRST. Please note that FIRST must always appear in
all capital letters and must be in italics.

This also requires CSS, and we can use substitutions to make this easier (no need to insert a registered mark via they keyboard).

.. |reg| replace:: :superscript:®
.. |FIRSTreg| replace:: :wordmark:FIRST\ :superscript:®
.. |FTCreg| replace:: :wordmark:FIRST\ :superscript:® Tech Challenge
.superscript {
vertical-align: super;
}

e.g. |FIRSTreg| becomes <span class="wordmark">FIRST</span><span class="superscript">®</span> in HTML.

FIRST Copyright Notice

This isn't required, but it seems odd that the FTC Docs copyright notice doesn't match the FIRST Inspires site notice. We just have "© 2023 FIRST"

In addition, we needed to change the footer.html template to replace the use of <i>FIRST</i> with the wordmark CSS. <i> also has semantic meaning and should not be used to make text italic.

Since we have to change the footer anyway, we can make the FTC Docs notice look like the main site.

In the footer.html

    &#169; 2025 &nbsp; {%- trans copyright=copyright|e %}{{ copyright }}{% endtrans %} (<span class="wordmark">FIRST</span>)<br />
    A 501(c)(3) nonprofit organization

In conf.py replace FIRST with For Inspiration and Recognition of Science and Technology in the copyright = line.

FIRST Typography

We should be using the Google Roboto font, or Arial as per the Branding and Design guidelines. I think this would apply to headings also.

Only use the page heading in the HTML Title

I had noticed previously screen readers repeating FIRST Tech Challenge a few times too many. One place we say FTC too many times is in every page Title. This is the HTML Title that Sphinx builds for each page. It starts with the main page heading, but then adds an &emdash symbol followed by "FIRST Tech Challenge Docs 0.3 documentation".

There a FIRST word that is not italic above the FIRST logo:

We can make it italic by updating the project = line in conf.py as follows:

project = 'FIRST Tech Challenge Docs'

The problem is the <span> HTML tag ends up in the HTML Title:

<title>About the FIRST® Tech Challenge &mdash; &lt;span class=&#34;wordmark&#34;&gt;FIRST&lt;/span&gt; Tech Challenge Docs 0.3 documentation</title>

Some design sites recommend short page titles that are relevant. We're just stuffing the title with redundant words.

As mentioned, search engines can use the title in their results. Adding "FIRST Tech Challenge Docs 0.3 documentation" isn't very useful and gets truncated anyway.

This could be fixed by changing Sphinx to only include the page header. This would also reduce the amount of text read by a screen reader that is mostly redundant.

About the FIRST Tech Challenge page

I've added the RST roles and substitutions to the ftcoverview.rst page so we can see these changes. There's a draft PR I'll submit shortly which will allow us to see these changes in Read The Docs. These Roles and substitutions would likely go in conf.py if the PR proceeds so that all pages can use them.

There are also examples on this page of constructing link text that has FIRST in italic. Plus FIRST in italic in a page heading. Notice in the PR read the docs build how the sidebar for About the FIRST Tech Challenge includes italic and the registered symbol.

There are two content related changes on this page which stemmed from reviewing the page for accessibility and are not tied to the branding changes, but are not urgent either.

1. Screen reader only, no select text on Video:
   <span class="sr-only-no-select">The following YouTube video has students and mentors talking about the FIRST Tech Challenge. Locate the Play push button to start the video.</span>
2. At the bottom of the page in the Kahoot section we link twice to the same external page. Two links in the same paragraph to the same destination is not good design. Rewrote the section to explain a bit about Kahoots and what you will find when you follow the link since it is a link that is external to FTC Docs.
3. Add link to FIRST Inspire site for class pack info.

The screen reader only text requires another CSS change. It includes CSS to put the text out of sight and ensure it can't be selected if someone is copy page content.

.sr-only-no-select {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
-webkit-user-select: none; /* Safari no select*/
-ms-user-select: none; /* IE 10 and IE 11 /
user-select: none; / Standard syntax */
}