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>

.sr-only {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px; /* screen reader might not read if it's set to 0px */
  height: 1px;
}

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;
}