I have headings of different sizes for components that are the same hierarchical level to emphasise certain components. The font sizes that I have got do not match the semantic hierarchy. Is this allowed? If this is allowed, how does this work for people with site impairment?
Yes—your visual hierarchy does not need to perfectly match your semantic hierarchy. This allows a page to have correct semantic hierarchy while maintaining a hierarchy that makes sense visually, as these often don't go together. When people try and force them to be the same, you often end up ruining the semantic hierarchy by skipping straight from an
h1 to an
h3, for example, for the sake of the visual font size. Mina Markham, a design system designer and developer, talks about this in her article on the design system Pantsuit.
It is so common to divorce semantic and visual hierarchy that most design systems have classes for type sizes so that type sizes are completely divorced from semantics. Some examples of design systems that approach typography scale this way include: Material, IBM's Carbon, and the US Web Design System.
You asked about people with visual impairments, and this is why it's so important for the semantic hierarchy to be correct. Screen readers will ignore the visual hierarchy and only care about the markup, so make sure the semantic hierarchy suits the content regardless of what's going on visually.