[Extract] Accessibility is an important topic in web design, but one that previously hasn't been covered on the Econsultancy blog.

Full article is at; https://econsultancy.com/blog/67625-making-your-html-accessible-for-the-visually-impaired/

To rectify this omission, I'll be writing a series of posts exploring how to make your websites more accessible from the outset. 

In this first post we’ll look at creating a design that people with visual impairments will hopefully find easy to use.

Put simply, the quality of the HTML you use to write your website is as important as how it looks visually.

Sure, you’ll have been told that your “HTML must be semantic”, but what’s the underlying reason, and who does it affect if it isn’t?

And, for that matter, what does that even mean?

What are semantics?

To understand why semantic HTML is so crucial, we first need to define what the term ‘semantics’ means in the context of a web application.

In the general sense, semantics can be described as: 

...the branch of linguistics and logic concerned with meaning.

When using a website, humans associate meaning with parts of the page through a variety of senses - visually (via the browser interface), aurally (if you use screen readers for example), or through touch (Braille output devices).

How do they apply to my website?

Since you have visitors who use assistive technologies, providing a quality interface for them to consume your content should be a default position. We will discuss how to do that in a later post. 

In terms of website interaction, two distinct interfaces are used to convey meaning to the user.

The portion of your user demographic who use browsers such as Chrome or Firefox and rely solely on visual cues will be inferring the meaning of the page purely from its visual design language.

However, users of some assistive devices such as screen readers will be reliant on the semantic nature of the HTML to deduce the same meaning.

Assistive devices and machine readability

Assistive devices can use a number of mechanisms that infer meaning from HTML. These include:

• A hierarchy-inferred representation of the page referred to as the document outline. It relies upon important structural elements to build up a structure of the document that can be used for presenting the document in many different ways. 

  A typical example would be OSX Voiceover’s ‘web rotor' feature, which presents the user with a list of ‘landmarks’ within the document that allows quick navigation.

• A high-level composition that includes an enriched document object model (DOM) representation, as well as objects from the user interface - referred to as the accessibility tree.

  I highly recommend Léonie Watson's article on Accessibility APIs that goes into more depth on the subject.

Read the full article at https://econsultancy.com/blog/67625-making-your-html-accessible-for-the-visually-impaired/