Accessibility in Coding: HTML
Published: 2023-07-11 17:31:52

In coding, there are many times where you will lose your mind thinking about how your code isn’t working. Most of the time, it’s frustratingly, just a small detail that gets me tripped up. Whether it’s an incorrectly spelled word or just forgot some special character, there are a million ways for anyone to get stuck in coding. In coding, the details are so important, even the ones that don’t end up breaking your code, can result in a person not being able to use your website.

This is why accessibility is so important.

The web was created for everyone. It is a place where creativity flourishes and new innovations are created. A disability shouldn’t prevent someone from interacting with your line of code. So the details end up being more important than ever before. Especially when it comes to HTML.

A lot accessibility when it comes to HTML comes right down to labeling. From the heading to the paragraphs, everything must be labeled in HTML when it comes to accessibility. This comes down to the screen reader that is being used. Most screen readers read each header out as you make it through each section of content, stop after each element; allowing self-pacing, let you jump from the previous to next heading, and can bring up a list of all headings. All this labeling helps create a smooth experience for anyone using a screen reader.

An example of good labeling: 

```html
<h1>My heading</h1>
<p>This is the first section of my document.</p>
<p>I'll add another paragraph here too.</p>
<ol>
<li>Here is</li>
<li>a list for</li>
<li>you to read</li>
</ol>
<h2>My subheading</h2>
<p>
  This is the first subsection of my document. I'd love people to be able to
  find this content!
</p>
<h2>My 2nd subheading</h2>
<p>
  This is the second subsection of my content, which I think is more interesting
  than the last one.
</p>
```

Labeling is so important that when UI controls are implemented, in order to navigate a website faster, that if labeled incorrectly, the UI wouldn’t read a highlighted link properly. This is a problem because a lot people use the UI controls to navigate websites. 

An example of bad labeling:

```html
<div data-message="This is from the first button">Click me!</div>
<div data-message="This is from the second button">Click me too!</div>
<div data-message="This is from the third button">And me!</div>
```

An example of good labeling:

```html
<button data-message="This is from the first button">Click me!</button>
<button data-message="This is from the second button">Click me too!</button>
<button data-message="This is from the third button">And me!</button>
```

Labeling should also be descriptive and concise. Clarity is also key with a need to label the link as well. Only using non descriptors is in poor taste and makes it more difficult for the screen reader to reach that link. 

An example of a bad descriptor:

```html
<p>
  Whales are really awesome creatures. To find out more about whales,
  <a href="whales.html">click here</a>.
</p>
```

An example of a good descriptor:

```html
<p>
  Whales are really awesome creatures.
  <a href="whales.html">Find out more about whales</a>.
</p>
```

Images are incredibly important to most websites and we want people to able to see what we have to show. But some people can’t see but they can hear. For these cases, we need to describe the image to the person. Usually, having a long description for an image can be annoying and nobody wants to deal with that so the same rules as above apply; short, concise, and clear. 

An example:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dvt3bpg59trvexj6onaw.png)

```html
<img src="dinosaur.png" aria-labelledby="dino-label" /><p id="dino-label">The Mozilla red Tyrannosaurus…</p>
```

There are so many more ways to add accessibility to our coding and this is just a few. I’m glad to see that the detail in coding isn’t just regulated to making a website work; ALTHOUGH THAT IS SUPER IMPORTANT. Coding is fundamentally something that anyone should be able to do and being someone who might have a hand in shaping and changing coding, I do want to make it a more inclusive environment that anyone can participate in.

Bibliography:
https://developer.mozilla.org/en-US/docs/Learn/Accessibility

MozDevNet. “Accessibility - Learn Web Development: MDN.” *Learn Web Development | MDN*, developer.mozilla.org/en-US/docs/Learn/Accessibility. Accessed 11 July 2023. 

https://100daysofa11y.com/

“Home.” *100 Days of A11y*, 100daysofa11y.com/. Accessed 11 July 2023. 

https://www.digitala11y.com/accessibility-blogs/

Www.facebook.com/raghava. “The Great Accessibility Blogs Roundup • Digitala11y.” *DigitalA11Y*, 5 May 2023, www.digitala11y.com/accessibility-blogs/.