Web Site Accessibility

2020-Dec-6

email Feedback About This Page

Some Basic Rules

  1. Always include <!DOCTYPE html> or <!doctype html> as the first line in the page.
  2. Define the natural language of a web page by using the lang attribute for html tag: ie. <html lang="en-us">
  3. Include one of:
    <meta charset="utf-8">
    or
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    This should be within the first 1024 bytes at the start of the file, so it's best to put it immediately after the opening <head> tag.
  4. There is one <title></title> tag with apprppriate text per web page.
  5. Include the content-style-type meta tag for inline style attributes:
    <meta http-equiv="content-style-type" content="text/css">
    ie. <div style="color: red;">
  6. Do not use redirect meta refresh tag:
    ie. <meta http-equiv="refresh" content="0;URL='http://cbc.ca/'">
  7. Do NOT use the italic tag.
  8. Use the strong tag instead of the bold tag.
  9. Images
    • all images need alt attribute with suitable text
    • alt can't be a file name
    • WAI-ARIA image created using role="img", needs an accessible name
    • if image is informative or functional use WAI-ARIA attributes aria-labelledby or aria-label
    • if image is decorative - use WAI-ARIA attribute role="presentation" not role="img" so assistive technologies will ignore it
  10. input, textarea, select tags or role="listbox"
  11. All Element IDs are unique on a web page.
  12. form control label needs text - can add label tag or WAI-ARIA attributes aria-labelledby or aria-label
  13. Avoid problem colour combinations e.g. green/red. I was unable to find a list of such colour combinations.
  14. Use high contrast between the background colour and text.
    WCAG 2.0 AA requires a contrast ratio of 4.5:1 for normal text and 3.1 for large text.
    Large text is considered 14 point and bold text, or 18 point or larger text.
  15. Do not rely solely on colour to convey information. Ensure that information conveyed by colours is available in other visual ways.
  16. Do NOT use text:
    • over background images
    • as part of the image
    • the entire image may not have sufficient contrast in relation to the text colour

 

Accessibilty

And if you take into account accessibilty standards, your web pages will also be affected.

Googling with: web design accessibility standards returns lots of references.
Wikipedia: Web accessibility
Canada:

Wikipedia: Web accessibility: United States

Learning these can be a useful job-hunting skill.

Lawsuits/complaints have been increasing because of accessibility problems.

The things you need to do to meet accessibility standards in various jurisdictions will be very similar so if you meet one standard you'll meet others. Design for your own jurisdiction first then check others for any fine-tuning.

How to design websites for blind and partially sighted people

ontario.ca: How to make websites accessible

Cbwired: Canadian Web Accessibility Standards November 2020-Nov-5

Siteimprove: Check your website’s accessibility level

Your Web Accessibility Check Results
atlanticseabreeze.com
75% Nice job! Well done.
2020-Dec-6
1. Image with no alt attribute alt - all images need suitable text
2. Image link is missing alternative text alt - all images need suitable text
3. Input field has no description input tags need a description associated with them so users of assistive technologies know what the tag is for. If the input tag has a visible description indicating its purpose, it should be associated with the input field either as a HTML label or using the WAI-ARIA attribute aria-labelledby. If it's not possible to add a visible description, either add mouseover text (title attribute) or create an invisible label with WAI-ARIA attribute aria-label.
4. Text area has no description textarea tags need a description associated with them so users of assistive technologies know what the tag is for. If the textarea tag has a visible description indicating its purpose, it should be associated with the textarea tag either as a HTML label or using the WAI-ARIA attribute aria-labelledby. If it's not possible to add a visible description, either add mouseover text (title attribute) or create an invisible label with WAI-ARIA attribute aria-label.
5. Select box has no description select tags or role="listbox" need a description associated with them so users of assistive technologies know what the tag is for. If the select tag or role="listbox" has a visible description indicating its purpose, it should be associated with the select tag or role="listbox" either as a HTML label or using the WAI-ARIA attribute aria-labelledby. If it's not possible to add a visible description, either add mouseover text (title attribute) or create an invisible label with WAI-ARIA attribute aria-label.
6. Webpage has multiple title elements or no title element need one title tag only with apprppriate text
7. Webpage title is missing text need one title tag only with apprppriate text
8. Heading is missing text heading is missing text? h1?
9. Alternative text for the image is a file name alt must contain meaningful text not a file name
10. Element ID is not unique  
11. Form control label is missing text form control label missing text - can add label tag or WAI-ARIA attributes 'aria-labelledby' or 'aria-label'
12. Use of automatic redirect after a time delay do not use meta redirect with a time limit. Instead use one of the recommended techniques.
13. Language of page has not been set missing a definition of the natural language. use lang attribute for html tag
14. WAI-ARIA image is missing alternative text WAI-ARIA image created using role="img", doesn't have an accessible name, if image is informative or functional use WAI-ARIA attributes 'aria-labelledby' or 'aria-label', if image is decorative use WAI-ARIA attribute role="presentation" not role="img" assistive technologies will ignore it

Siteimprove: Check your website’s accessibility level

Your Web Accessibility Check Results
eugeneruthven.com
100% BOOM SHAKALAKA!
2020-Dec-6
1. Image with no alt attribute alt - all images need suitable text
2. Image link is missing alternative text alt - all images need suitable text
3. Input field has no description input tags need a description associated with them so users of assistive technologies know what the tag is for. If the input tag has a visible description indicating its purpose, it should be associated with the input field either as a HTML label or using the WAI-ARIA attribute aria-labelledby. If it's not possible to add a visible description, either add mouseover text (title attribute) or create an invisible label with WAI-ARIA attribute aria-label.
4. Text area has no description textarea tags need a description associated with them so users of assistive technologies know what the tag is for. If the textarea tag has a visible description indicating its purpose, it should be associated with the textarea tag either as a HTML label or using the WAI-ARIA attribute aria-labelledby. If it's not possible to add a visible description, either add mouseover text (title attribute) or create an invisible label with WAI-ARIA attribute aria-label.
5. Select box has no description select tags or role="listbox" need a description associated with them so users of assistive technologies know what the tag is for. If the select tag or role="listbox" has a visible description indicating its purpose, it should be associated with the select tag or role="listbox" either as a HTML label or using the WAI-ARIA attribute aria-labelledby. If it's not possible to add a visible description, either add mouseover text (title attribute) or create an invisible label with WAI-ARIA attribute aria-label.
6. Webpage has multiple title elements or no title element need one title tag only with apprppriate text
7. Webpage title is missing text need one title tag only with apprppriate text
8. Heading is missing text heading is missing text? h1?
9. Alternative text for the image is a file name alt must contain meaningful text not a file name
10. Element ID is not unique  
11. Form control label is missing text form control label missing text - can add label tag or WAI-ARIA attributes aria-labelledby or aria-label
12. Use of automatic redirect after a time delay do not use meta redirect with a time limit. Instead use one of the recommended techniques.
13. Language of page has not been set missing a definition of the natural language. use lang attribute for html tag
14. WAI-ARIA image is missing alternative text WAI-ARIA image created using role="img", doesn't have an accessible name, if image is informative or functional use WAI-ARIA attributes 'aria-labelledby' or 'aria-label', if image is decorative use WAI-ARIA attribute role="presentation" not role="img" assistive technologies will ignore it