How to Make Your Website Accessible

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.

  1. 1Add 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]
    • Alt text should be functional, not a description of the image. For example, the symbol should have the alt text “Search”, not the alt text “Magnifying glass”.[3] 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]
    • 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. 2Describe 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.
  3. 3Consider using CSS for only decorative images. This way, these images also disappear if the user turns off CSS.[5]
    • Background images can be included using the CSS background-image attribute. For example: html { background-image: url(“example.png”); }
  4. 4Use 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]
    • 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]
    • 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]
  5. 5Use ARIA when necessary. Although it’s better to use the native HTML elements[9], 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]</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. 6Set the language of the document[11] 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]
  7. 7Use 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]
  8. 8Label 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] 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>

Part2Making the Site Readable

  1. 1Allow 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]This includes font size, colour scheme, contrast,[16] font style, line spacing, and margins[17].
    • 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. 2Set 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] In CSS, this is done as follows: line-height: 1.5;
    • Spacing between paragraphs should be at least 2 times the font size.[19] 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]
  3. 3Have 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]
    • Also provide an option to make low contrast, because too high contrast is also hard to read for some people.
  4. 4Avoid 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][23]
  5. 5Choose a big enough font. A good approximation is to use at least 12px[24], and optimally 16px[25] or even 18px[26].
  6. 6Avoid long lines. These can make it hard to follow the flow of the text.[27][28] Use maximum 80 characters (maximum 40 if the text is in Chinese, Japanese or Korean).[29]
  7. 7Use 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. 8Reduce animations to a minimum. Or remove them entirely. Animations can be a distraction and prevent the user from reading the main content.[30][31] If you have animations, have an option to turn them off.[32]
    • This also applies to auto-playing videos and pop-ups/overlays.[33]
  9. 9Don’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.[34]

Part3Making 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. 1Use 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.[35]
  2. 2Give 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.[36]
  3. 3Structure the content. Use headings and subheadings when it makes sense.[37]Prefer lists with bullet points or numbers to long passages of text.[38] Use paragraphs to break down long walls of text.
  4. 4Make 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.[39]
    • Give a clear focus outline. Don’t remove it. It shows which element has been selected with the keyboard.[40]
    • 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.[41]
  5. 5Provide different formats for media. Make text, video (with closed captions), audio, and pictures. This way, every user can choose the format that they prefer.[42]
About Frosh Niggar 2054 Articles
Hello There I am Adeyemi Aderinsola, An author on this great site. Feel free to contact me!!
Notify of
Inline Feedbacks
View all comments