Here are two headings because they are big - they look important.
Liverpool Waterfront
and
Liverpool Waterfront
Visually they look similar but only the first one is a <h1> tag. That tag allows us to understand that it is the most important heading of the page and gives us textural clues to content below. The other one is simply a font at 50px but contains no heading references.
Increasing a font size to imitate a heading is problematic for screen readers. Screen readers rely on heading tags to understand the structure of a document and to provide a list of headings to the user. When text is simply formatted to look like a heading, screen readers will not be able to identify it as such. This can make it difficult for users to navigate the document and to understand the hierarchy of the information.
Here are some of the problems with using font size to imitate headings:
It can make it difficult for screen reader users to find the information they are looking for. Screen reader users often use the heading list to jump to different parts of a document. If a heading is not properly marked up, it will not be included in the heading list, and the user will have to read the entire document to find it.
It can make it difficult for screen reader users to understand the hierarchy of the information. Screen readers use the nesting of heading tags to convey the hierarchy of a document. For example, an H1 heading is a top-level heading, and an H2 heading is a subheading of the H1 heading. If a heading is not properly marked up, the screen reader will not be able to convey this hierarchy to the user.
It can make it difficult for screen reader users to understand the relative importance of different pieces of information. Screen readers often use the font size of text to convey its relative importance. For example, headings are typically larger than body text. If a heading is simply formatted to look like a heading, the screen reader will not be able to convey this relative importance to the user.
