How to Make Your Website Accessible

Last Updated: March 20, 2025 References

Accessibility is a complex issue. Many things can make it hard to access or understand your site. However, by implementing some measures and enough flexibility, you can make your website more accessible and also improve the user experience. This wikiHow will give you ways in which you can help make your website more accessible to others.

Note: This article is not about a specific standard. If you're required to conform to a specific standard, such as WCAG 2.0 or Section 508 of the US Federal Rehabilitation Act, please also look at what that specific standard demands.

Part 1

Part 1 of 3:

Making the Site Accessible for Alternative Technologies

Not everyone accesses web content by reading it from the web browser screen. Some people use screen readers to read the content aloud. Some people use their browser's Reader Mode because they need a consistent design that doesn't cause them problems. ^{[1]
X
Research source} Correctly separating content from design will significantly improve the user experience for these people.

1
Add alt text for all relevant images. The only exceptions are images that are only decorative, that are not necessary to understand the website or interact with its content. Alt text is text as an alternative for an image. Screen readers will read the alt text instead of the image. ^{[2]
X
Research source}
- Alt text should be functional, not a description of the image. For example, thesymbol should have the alt text "Search", not the alt text "Magnifying glass". ^{[3]
  X
  Research source} If the image is used on a button, give it an alt text of what the button does, e. g. "Submit".
- If there is text in the image, for example if the image is a logo, the text should be included in the alt text. ^{[4]
  X
  Research source}
- Include alt text in an image using the alt attribute. It is used like this:
  < img src = "example.png" alt = "Alt text belongs here" >
- If the image is only decorative, set the alt text as alt="" .
2

Describe the image elsewhere if it's very complex or has a lot of information. For example, if it's a chart or graph, describe its content above or below the image. Reference that in the alt text, for example "Chart of median household income in the USA from 2000 to 2017, as described below". You can also link to a document with all the values as text or a table.

Advertisement
3
Consider using CSS for only decorative images. This way, these images also disappear if the user turns off CSS. ^{[5]
X
Research source}
- Background images can be included using the CSS background-image attribute. For example:
  html { background-image : url ( "example.png" ); }
4
Use HTML5 semantic tags. HTML5 has added many semantic tags, i. e. tags that are used to describe the content. These tags allow technologies like a screen reader or the Reader Mode of some browsers to "understand" the content and display it in a meaningful way. ^{[6]
X
Research source}
- If you're using bold and italic text for emphasis, not just for styling, use the <strong> and <em> . This is also supported in earlier versions of HTML.
- Use <nav> for navigation sections. This allows screen readers and other technologies to identify these sections and decide whether or not to display them. ^{[7]
  X
  Research source}
- Use <article> for the main content of a web page which is meaningful on its own, without the other parts of the page. For example, the <article> tag should usually be used for blog entries, news articles, and forum posts. ^{[8]
  X
  Research source}
5
Use ARIA when necessary. Although it's better to use the native HTML elements ^{[9]
X
Research source} , sometimes there are none available for your purpose. In that case, you can use ARIA (Accessible Rich Internet Applications) .
- Note that you should not change the semantics of the HTML elements unless absolutely necessary. ^{[10]
  X
  Research source} </ref> For example, this:
  < div role = "banner" >< h1 > This is a banner with a first-level heading </ h1 ></ div >
  is preferred to this:
  < h1 role = "banner" > This is a banner with a first-level heading </ h1 >
6

Set the language of the document ^{[11]

X
Research source} and of parts that are different. This is done with the HTML lang attribute. It allows screen readers to pronounce the parts and the page correctly, and conventional browsers to render the text more accurately (for example to switch between right-to-left and left-to-right writing direction). ^{[12]
X
Research source}
7

Use form elements for forms. For example, to make a button, use button or input , not the a or div elements. The latter two rely on CSS and JavaScript to act like a button, which are not always available. Also, you need to do additional work to make it focus correctly and inform the browser that it's a button. So it's easier and more accessible to just use the button or input element. ^{[13]
X
Research source}

8

Label forms properly. To associate a label with a form control, use <label> . A screen reader will read that label when the user navigates to the form control, while non-label text is usually skipped. ^{[14]
X
Research source} An example of proper labelling would be:

 < 
 form 
 action 
 = 
 "/example_action.php" 
 > 
 < 
 input 
 type 
 = 
 "checkbox" 
 id 
 = 
 "agree" 
 > 
 < 
 label 
 for 
 = 
 "agree" 
 > 
I agree to the terms and conditions. </ 
 label 
 > 
 < 
 br 
 > 
 < 
 input 
 type 
 = 
 "submit" 
 value 
 = 
 "Submit" 
 > 
 </ 
 form 
 >

Part 2

Part 2 of 3:

Making the Site Readable

1
Allow users to change style. This is most important, because different users prefer or need different adjustments. For example, people with some vision deficiencies need high contrast to read the text, while some people with cognitive disabilities need low contrast to read it. ^{[15]
X
Research source} This includes font size, colour scheme, contrast, ^{[16]
X
Research source} font style, line spacing, and margins ^{[17]
X
Research source} .
- Turn off all stylesheets and try to navigate the site. It should still be readable and usable.
- Provide possibilities on your site to change the style, for example a button to resize text or a menu to select the colour scheme.
2
Set enough spacing. Make sure to make it relative to font size, so that if the font size is changed, the text is still readable.
- Line height (line spacing) should be at least 1.5 times the font size. ^{[18]
  X
  Research source} In CSS, this is done as follows:
  line-height : 1 . 5 ;
- Spacing between paragraphs should be at least 2 times the font size. ^{[19]
  X
  Research source} This can be done by setting the bottom margin of the paragraphs:
  margin-bottom : 2em ;
- You can adjust word spacing with the CSS word-spacing attribute and letter spacing with letter-spacing . Too much of it also makes the text harder to read, so use your good judgement. However, make sure that if the letter spacing is resized to 0.12em, and the word spacing to 0.16em, the text is still readable. ^{[20]
  X
  Research source}
3
Have high enough contrast. Some people can't read the text if the contrast is too low. There are many automated tools to check the contrast. You can also turn off colour and look at the website yourself. ^{[21]
X
Research source}
- Also provide an option to make low contrast, because too high contrast is also hard to read for some people.
4

Avoid justifying text on both sides. Keep text justified on left side with ragged right edge. This style is easier to read, especially for people with dyslexia. ^{[22]
X
Research source}
5

Choose a big enough font. A good approximation is to use at least 12px, and optimally 16px ^{[23]
X
Research source} or even 18px ^{[24]
X
Research source} .
6

Avoid long lines. These can make it hard to follow the flow of the text. ^{[25]
X
Research source} ^{[26]
X
Research source} Use maximum 80 characters (maximum 40 if the text is in Chinese, Japanese or Korean). ^{[27]
X
Research source}
7

Use colors tastefully. Too many bright colors could cause a headache in sensitive people. Use bright colors only as accents. Try a more subdued color palette with colors like grays, pastels, and colors that aren't too saturated.
8
Reduce animations to a minimum. Or remove them entirely. Animations can be a distraction and prevent the user from reading the main content. ^{[28]
X
Research source} ^{[29]
X
Research source} If you have animations, have an option to turn them off. ^{[30]
X
Research source}
- This also applies to auto-playing videos and pop-ups/overlays. ^{[31]
  X
  Research source}
9

Don't flash any element more than 3 times per second. Alternatively, keep the flashes below threshold by restricting them to a small area. Not doing this can cause seizures due to photosensitivity. ^{[32]
X
Research source}

Advertisement

Part 3

Part 3 of 3:

Making Your Content Usable

There is a difference between being able to read the text of your website and being able to understand the meaning of that text and interact with the website. All these things are necessary for your website to be accessible.

1

Use clear and concise language, especially for instructions. Don't use more than one conjunction and two commas. Use words that are commonly used in the context. Do not use double negatives. Avoid metaphors and non-literal language. ^{[33]
X
Research source}
2

Give the user enough time to read and process the content. Inform the user in advance about when their session will time out. Alert them when the time is about to expire, and give an obvious way to prolong it. ^{[34]
X
Research source}
3

Structure the content. Use headings and subheadings when it makes sense. ^{[35]
X
Research source} Prefer lists with bullet points or numbers to long passages of text. Use paragraphs to break down long walls of text.
4
Make your site keyboard-navigable. Some people have motor issues that prevent them from using a mouse. They need to navigate the site with a keyboard. ^{[36]
X
Research source}
- Give a clear focus outline. Don't remove it. It shows which element has been selected with the keyboard. ^{[37]
  X
  Research source}
- If the user can move the focus to an element, they must also be able to move the focus away from it using the keyboard. ^{[38]
  X
  Research source}
5

Provide different formats for media. Make text, video (with closed captions), audio, and pictures. This way, every user can choose the format that they prefer. ^{[39]
X
Research source}

Advertisement

Expert Q&A

Search

Add New Question

Ask a Question

200 characters left

Include your email address to get a message when this question is answered.

Submit

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]

[10]

[11]

[12]

[13]

[14]

[15]

[16]

[17]

[18]

[19]

[20]

[21]

[22]

[23]

[24]

[25]

[26]

[27]

[28]

[29]

[30]

[31]

[32]

[33]

[34]

[35]

[36]

[37]

[38]

[39]

How to Make Your Website Accessible

Steps

Making the Site Accessible for Alternative Technologies

Making the Site Readable

Making Your Content Usable

Expert Q&A

You Might Also Like

References

About this article

Did this article help you?

About this article

You Might Also Like

Explore Categories