5 tricks to write extra accessible HTML – Mono

1. Begin off proper with a well-formed <head> part

All the time specify the doctype in your HTML. This lets browsers know which model of HTML you’re utilizing and avoids your browser from going into quirks mode which can danger your web page to look damaged.

<!doctype html>

Additionally, specify the language of your doc by utilizing the language attribute.

<html lang="en">

If you happen to don’t, you would possibly run the danger of the incorrect voice profile being triggered by a display screen reader, which may result in bizarre and inaccessible pronunciations of your content material. As a bonus, this additionally makes your content material extra indexable by serps and makes it translatable by third-party instruments.

2. Watch out about your assumptions about HTML’s built-in accessibility

It’s usually said that HTML is accessible by default. But, while you unravel it, truly testing complicated HTML, you’ll usually discover that browsers ship with inaccessible HTML.

Just lately, the GDS design crew (answerable for the GOV.UK venture), revealed an important blog post the place they state that HTML components reminiscent of a quantity enter ought to perhaps be averted. In response, Dave Rupert made a list of the inaccessible elements of HTML. Generally, don’t assume that as a result of it’s customary HTML, that it’s inherently accessible.

3. Semantics matter

Not everybody accessing your web site will see the complete model of your web site as you meant it.

Certainly one of our articles utilizing Safari’s studying mode.

Safari’s studying mode solely takes the structured content material of your web page and shows it with customized types. An RSS reader reads your content material in a special format – no matter you publish in your RSS feed. Search index bots (reminiscent of Google’s indexer) have a look at the uncooked HTML and attempt to derive which means from that. CSS may not be loaded as a result of a community downside. As a result of it’s extremely unpredictable how your web page shall be accessed (and what would possibly go incorrect within the course of), you will need to all the time keep good semantic markup.

What does this imply? It’s essential to make use of the suitable HTML components as a lot as potential. For instance, should you use the native button HTML aspect, it will robotically make it focusable, and embrace it within the keyboard tab order.

If you happen to use some other HTML aspect, you could have so as to add this in with CSS and JavaScript, making your button susceptible to breaking if these are usually not loaded correctly.

4. Make use of landmarks

Display reader customers will usually use landmarks to navigate by means of your utility. Instance display screen reader software program contains Apple’s VoiceOver, JAWS and NVDA.

Landmarks assist customers set expectations for the kind of content material they’ll discover all through your utility. For instance, a landmark with the function="fundamental" will assist customers perceive that that is the place the principle content material of the web page lives.

HTML components reminiscent of <header> and <footer> robotically develop into landmarks. There isn’t any must mark them with the respective ARIA roles.

Verify whether or not your web site conforms to a logical construction.

5. Keep a semantic header construction

One other means during which display screen reader customers navigate by means of your content material is predicated on the header construction, subsequently you will need to all the time comply with the order of headings on the web page.

Attempt to not skip any headings. If it ought to look smaller you may all the time use CSS to change the styling, so long as you utilize the suitable heading stage semantically.

Generally you don’t desire a header to be seen. On this case, it’s essential to solely cover it visually and nonetheless present it for display screen reader customers. Right here’s a snippet of CSS we like to make use of to cover one thing visually, whereas nonetheless making it accessible to display screen reader customers.

.u-sr-accessible {
  place: absolute;
  left: -10000px;
  prime: auto;
  width: 1px;
  peak: 1px;
  overflow: hidden;

That’s it for our 5 tips about writing extra accessible HTML. The subject of net accessibility is prime of thoughts for us, so keep tuned for extra posts round this.

Source link

Leave a Reply

Your email address will not be published. Required fields are marked *