I have found these attributes in many places of Bootstrap but it is not clear to me how they work.
Prerequisite:
Aria is used to improve the user experience of visually impaired users. Visually impaired users navigate though application using screen reader software like JAWS, NVDA,.. While navigating through the application, screen reader software announces content to users. Aria can be used to add content in the code which helps screen reader users understand the role, state, label and purpose of the control.
Aria does not change anything visually. (Aria is scared of designers too).
aria-describedby
aria-describedby is used to communicate additional information of the control other than label. aria-describedby can be used for various purposes like error message, tool tip, additional instructions of control.
How To Use
<label for = "email"> Email </label>
<input type = "text" id = "email" aria-describedby = "email-error">
<span id = "email-error"> Error: Invalid Email Address </span>
aria-describedby has the same value as the id value of <span> containing the error message. When the email control receives focus, label, type of control, error message is announced to users. In this case, the screen reader announces "Email edit field" and after a pause "Error: Invalid Email Address"
aria-hidden:
aria-hidden attribute is used to hide content for visually impaired users who navigate through application using screen readers (JAWS, NVDA,...).
aria-hidden attribute is used with values true, false.
Eg:
<i class = "fa fa-books" aria-hidden = "true"></i>
using aria-hidden = "true" on the <i> hides content to screen reader users with no visual change in the application.