DEV Community

Dahye Ji
Dahye Ji

Posted on

4 2

Writing HTML while considering Web Accessibility

I haven't really thought about web accessibility before but I've been hearing quite a lot about it lately. I realised that I didn't consider it at all when I was writing html before. So, I'd like to learn more about it and I think I should consider more about it when I am writing code.

Here are a few things I've learnt so far!

Writing HTML with accessibility in mind.

  • Do not use <br> because screen reader might stop from where it's located and wouldn't read what's after.
  • Reason that <flex-order> is not used a lot: Screen reader would read things by the order written in html but wouldn't consider what's been changed in CSS(even if the order's changed in CSS)
  • when hiding element on the browser, display:none is not recommended. Screen reader would not read if it's written as display:none.
  • Give headings in the sections or where they are needed even if they are not on the page visually so that screen reader can read them.(You can hide them in the CSS.)

How to hide text while considering web accessibility.

 <h1 class="sr-only">Movie information</h1>
Enter fullscreen mode Exit fullscreen mode
.sr-only {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px; /* screen reader might not read if it's set to 0px */
  height: 1px;
}
Enter fullscreen mode Exit fullscreen mode

Other ways to hide text

.text1 {
text-indent: -1000px;
}

.text2 {
 position: absolute;
 left: -10000px;
 width: 1px;
 height: 1px;
 overflow: hidden;
}

.text3 {
 position: absolute;
 width: 1px;
 height: 1px;
 overflow: hidden;
 clip: rect(1px, 1px, 1px, 1px);
}

.ally-hidden {
 overflow: hidden;
 position: absolute;
 clip: rect(0, 0, 0, 0);
 width: 1px;
 height: 1px;
 margin: -1px;
 border: 0;
 padding: 0;
}

Enter fullscreen mode Exit fullscreen mode

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Retry later
Retry later