你离你需要的地方不远了。下面是一些建议/建议。

可访问的Tips

与其在tip上使用aria-describedby，为什么不使tip键盘可访问呢？你可能已经考虑过屏幕阅读器，但是那些使用键盘或其他辅助技术而没有屏幕阅读器的人呢？目前，他们无法访问您的“提示”。
最简单的解决方法（尽管不是完美的）是在焦点上显示tooltip，同时悬停，并使提示成为具有tabindex="0"的可聚焦项。这样做的缺点是屏幕阅读器用户仍然需要aria-describedby
更好的解决方法是使提示本身可访问，并使其持久/可切换。
因此，您可以在DOM中的按钮旁边使用带有display:none的div或span作为内容，然后在按Enter键时激活并隐藏它。
把它想象成一个迷你模式（所以有一个关闭按钮，并确保它可以关闭退出键。与模态不同，您不必捕获焦点，但是您应该使用tabindex="-1"和一些JS将焦点移动到工具提示，并在关闭时将焦点返回到打开它的按钮。
这个article about tooltips and 'toggletips'是一个很好的参考点，'toggletips'是我建议的方法，因为它更适合你的'i'按钮的目的。

'必填'星号

我注意到你在这里添加了一些屏幕阅读器文本，这很棒。但是你没有考虑到有认知障碍的人。星星不像写“（必填）"那样清晰。
通过使用“（required）”（写在<label>中的输入名称之后，例如<label for="Textbox3836">First Name (required)</label>）而不是“*”，然后你就不需要你的“sr-only”文本和对font-awesome字体的依赖（这有自己的可访问性问题......见最后的标题“最终考虑”）。

使用aria-labelledby将占位符文本暴露给不支持它的屏幕阅读器。

这个问题没有对错之分。是的，一些屏幕阅读器不会暴露这些信息，而其他人会，无论你做什么，你都会给一些用户给予不太理想的体验。
我会坚持你的做法，让一些用户听到信息两次总比完全不听到好。
然而，你可能会争辩说，因为你已经在第1点中正确地暴露了提示信息，所以第二位信息就不必要了，所以可以被删除，把它作为占位符保留在适当的位置，供那些阅读它的屏幕阅读器使用。
你可以做的是在你的“提示”中包括信息，在“提示：请输入您的法律的名字。（例如Andrew）”
在这里走极端，不确定你是否应该使用“e.g.”或“Ex：”例如，我会去做一些研究，因为我总是使用“e.g.”，但你让我思考。

最终考虑

正如我前面提到的，如果最终用户替换字体，“font-awesome”和其他图标字体会使您的应用程序变得不那么容易访问。
例如，患有阅读障碍的用户可能会使用自定义样式表来覆盖页面上的所有字体。在这一点上，你的图标成为'失踪的字体方块的厄运'，失去了所有的意义。
相反，使用内联SVG，它们更快，更容易访问，减少了对超过100 kb字体的需求，减缓了初始页面渲染的速度，并允许您更多的控制。
最后，在您显示的输入图像上，输入和背景之间的对比度可能不符合对比度要求（尚未检查）-输入（边框或背景）与页面上的背景的对比度应该为3：1。
你也可能会发现这篇半相关的文章很有趣，关于我建议如何处理图像上的title属性。它可能会帮助你把一个模式放在一起，为您的'提示'部分。
我该怎么办？
我会保持简单，首先将所有这些元素设计到页面中。
它使标记中的所有内容更清晰，更易于维护，为每个人提供提示信息，节省了对font-awesome的需求，并且可以通过一些小动作使其看起来同样漂亮（我的示例有点粗糙）。
参见示例：

.input-container label, .input-container span{
  display: block;
}
.input-container label{
   font-weight: bold;
   font-size: 1.2rem;
   cursor: pointer;
}
.input-container span{
   color: #555;
}
.input-container input{
   display: block;
   width: 94%;
   margin-top: 10px;
   padding: 2% 3%;
   border: 1px solid #666;
   border-radius: 5px;
}

.input-container {
   width: 75%;
   padding: 15px;
   background-color: #f8f9fa;
   border: 1px solid #333;
}

<div class="input-container">
  <label for="ID1">First Name (Required)</label>
  <span>Tip: Please enter your legal first name. For Example 'Andrew'</span>
  <input id="ID1" placeholder="Your First Name"/>
</div>