Dev.to WebDev 🛠 Dev 👁 0 📖 3 min read

Basis For Accessible HTML

What is accessibility? Accessibility is the practice of making your website usable by as many people as possible. Traditionally think of this as being about people with disabilities, but the practice of making sites ac

What is accessibility?

Accessibility is the practice of making your website usable by as many people as possible. Traditionally think of this as being about people with disabilities, but the practice of making sites accessible also benefits groups such as those using mobile devices, or those with slow network connections.

Accessibility can be thought as a treating everyone same, and giving equal opportunities, no matter the circumstances. In modern society providing accessible sites is part law in some countries, which can open some significant markets.

What are some of the benefits of accessibility:

  • Semantic HTML, improves accessibility, also improves Search Engine Optimization[SEO].
  • It improve your public image b demonstrating good ethics and morals.
  • It delivers content in more than one way, such as by text-to-speech or by video.
  • Focuses attention on important content.
  • Site authentication is made easy without compromising Security.

and the list is endless.

Accessibility Tools

As technology evolve some techniques and tools were discovered on how to test and fix websites accessibility and issues that undermined it.

Common Techniques and tools are as follows:

Testing Source order

Your content should make logical sense in its source order. One can always display it differently with CSS later on, but you should get the underlying structure correct to begin with. This is because assistive technologies read websites content based on the order of the source, and disabled people often modify or turn off parts of the CSS to make content more legible.

To test order, one can turn off a site's CSS and see how understandable it is without it. the easiest way is to use browser features.

Color contrast checkers

When choosing a color scheme for your website, it is advisable to make sure that text(foreground) color contrasts well with the background color. Your design might be great, but it is no good if people can't read your content. use a tool like WebAIM's Color Contrast Checker to check whether your scheme is contrasting enough.

NOTE: A high contrast ratio will also allow anyone using a phone or a tablet with a glossy screen to better read pages when in a bright environment, such as sunlight.

Screen Readers

Screen readers are pieces of software that reads out webpages content or content from other apps installed on someone's OS. They allow users to interact with sites without need to see any visual content. Web browsers exposes information about the page's content for screen readers to communicate to other user trough a representation called the accessibility tree. This provides semantic information such as names and description of elements , what their purpose or role is (E.g submit button, or even an input field), and whether they are in a particular state (E.g is a dialog box open or closed).

HTML and Accessibility

As you progress reading more recourses you'll keep seeing a common theme: importance of using semantic HTML (sometimes called POSH, or Plain Old Semantic HTML). This means using the correct HTML elements for their intended purpose as much as possible.

One might wonder why this is so important. When one can use a combination of CSS and JavaScript to make just about any HTML element behave in whatever way you want.

For Example:

`<div>Log in</div>`

but it makes sense using the correct element :

`<button>Log in</button>`

This way not only do HTML <button>s have some suitable styling applied by default but they also have built-in keyboard accessibility, hence, users can navigate between buttons using the Tab key and activate their selection using Space, Return or Enter.

Semantic markup has some benefits beyond accessibility:

  • Easier to develop, as you get some functionality for free
  • Better on mobile as they are lighter in file size than non-semantic.
  • Good for SEO as Search engines give more importance to keywords inside headings, links, etc.

The importance of semantics and how they co-relate with accessibility is vital to websites. Hence as a developer, one ought to use them and perhaps make a good impression on the tech industry.

In conclusion, when developing a website it's important to not think of how the product will benefit the majority but also the minority and the disabled by maximizing the accessibility tools and using the right semantics and Cascade for the better benefit of all. Upon achieving this one will be targeting a broader market.

📰 Read the original article on Dev.to WebDev

Originally published by Dev.to WebDev. Aggregated on AIWithGhost for educational purposes — full credit and traffic to the original publisher.