Accessibility from the Jump

Semantic HTML

<body>
<h1>My heading</h1>
This is the first section of my document.
<p>I'll add another paragraph here too.</p>
<ol>
<li>Here is</li><br>
<li>a list for</li><br>
<li>you to read</li><br>
</ol>
<font>My subheading</font><br>
<div>This is the first subsection of my document. I'd love people to be able to find this content!</div>
</body>
<body>
<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>
</body>
<form>
<div class="fs">
<main>
<p>Fruit juice size</p>
<div>
<input type="radio">
<p style="display:inline">Small</p>
</div>
<div>
<input type="radio">
<label>Medium</label>
</div>
<div>
<input type="radio">
<p style="display:inline">Large</p>
</div>
</main>
</div>
</form>
<form>
<fieldset>
<legend>Fruit juice size</legend>
<p>
<input type="radio" name="size" id="size_1" value="small">
<label for="size_1">Small</label>
</p>
<p>
<input type="radio" name="size" id="size_2" value="medium">
<label for="size_2">Medium</label>
</p>
<p>
<input type="radio" name="size" id="size_3" value="large">
<label for="size_3">Large</label>
</p>
</fieldset>
</form>

Additional Resources

--

--

--

Full-time Software Engineering Student at Flatiron School, musician, and lover of plants

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Unraveling the myth of seamless design

Tinnitus and hearing technology in 2020

Developing and testing accessible app in Flutter

Why Google’s RankBrain is the Best Thing to Happen to SEO

The danger of default young

Digital accessibility is an opportunity, not a burden

An older man and young child using a tablet device

Designing with accessibility in a Microsoft product having 800M+ consumers

If you want to talk about Accessibility, then we need to talk about Readability issues.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
JD Brewer-Hofmann

JD Brewer-Hofmann

Full-time Software Engineering Student at Flatiron School, musician, and lover of plants

More from Medium

The Tech Industry — Where Discrimination is A-OK

Three Ways to Make Your Software More Accessible

Let Developers Be Developers

View of a planet in outer space with a rocket flying past it. There are lines of code around the planet and in the flames of the rocket, representing rings or fumes.

The Curb Cut Effect in Code