3 Intro Web Dev: Accessibility

2021-Feb-10

Home

1 Intro Web Dev Quick Start

2 Intro Web Dev: Notes

email Feedback About This Page

Accessibilty
Software
Windows Ease of Access
Macs have Apple Voiceover
CNIB: Screen Readers
WCAG
Training & Audits
Some Basic Rules
Web Accessibility Level
Your Web Accessibility Check Results: atlanticseabreeze.com
Your Web Accessibility Check Results: eugeneruthven.com

 

Accessibilty 🔼

  WCAG   = Web Content Accessibility Guidelines

As a web developer, you should be taking into account accessibilty standards from the beginning of your learning to build web pages. Doing this will make it seem a normal thing to do.

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

 

Software 🔼

Windows has on its menu:

Windows Ease of Access 🔼
Windows menu showing the Windows Ease of Access submenu. The submenu shows Magnifier, Narrator, On-Screen Keyboard and Windows Speech Recognition.

Macs have Apple Voiceover 🔼

.

CNIB: Screen Readers 🔼

A section of CNIB Foundation Canada web site showing +show preferences, a Province drop-down box with Ontario as the current selection.

 

WCAG 🔼

CanAdapt: WCAG training & audits 🔼

davidmacd.com: 19 WAI-ARIA attributes that every web developer should know (2020-Jan)

CanAdapt: What's new in WCAG 2.1, the web Accessibility Standard WCAG 2.0 vs WCAG 2.1

paciellogroup.com: Colour Contrast Analyser

siteimprove.com: A Complete Overview of Canada’s Accessibility Laws Jennifer Doyle 2020-Jul-22

 

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 the appropriate 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.
    1. Showing Bluefish's menu row, Main Toolbar and HTML Toolbar. The   Standard   tab is selected on the   HTML Toolbar   where the   Bold   tool is - don't use it.
      Showing Bluefish's menu row, Main Toolbar and HTML Toolbar. The Standard tab is selected on the HTML Toolbar.
    2. Showing Bluefish's menu row, Main Toolbar and HTML Toolbar. The   Fonts   tab is selected on the HTML Toolbar where the   Stong   tool is - always use this.
      Showing Bluefish's menu row, Main Toolbar and HTML Toolbar. The Fonts tab is selected on the HTML Toolbar.
    3. Showing Bluefish's menu row, Main Toolbar and HTML Toolbar. The   Quickbar   tab is selected on the HTML Toolbar. There are no tools on the   Quickbar   tab.
      Showing Bluefish's menu row, Main Toolbar and HTML Toolbar. The Quickbar tab is selected on the HTML Toolbar. There are no icons on the Quickbar tab.
    4. Showing Bluefish's menu row, Main Toolbar and HTML Toolbar. The   Fonts   tab is selected on the HTML Toolbar. The popup menu   Add to Quickbar   is shown highlighted in blue when you   right-click   on a tool. When you   click   on   Add to Quickbar   a copy of the   Strong   tool is put on the   Quickbar  .
      Showing Bluefish's menu row, Main Toolbar and HTML Toolbar. The Fonts tab is selected on the HTML Toolbar. The popup menu Add to Quickbar is showing highlighted in blue.
    5. Showing Bluefish's menu row, Main Toolbar and HTML Toolbar. The Quickbar tab is selected on the HTML Toolbar. The   Strong   tool is on the   Quickbar   tab.
      Showing Bluefish's menu row, Main Toolbar and HTML Toolbar. The Quickbar tab is selected on the HTML Toolbar. The Strong icon is on the Quickbar tab.
    6. Showing Bluefish's menu row, Main Toolbar and HTML Toolbar. The Quickbar tab is selected on the HTML Toolbar. I have 33 tools on the Quickbar tab.
      Showing Bluefish's menu row, Main Toolbar and HTML Toolbar. The Quickbar tab is selected on the HTML Toolbar. There are 33 icons on the Quickbar tab.
  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

    Rachel Leggett: How to Make Emojis Accessible in HTML 2020-Sep
    Nero Adaware: Accessible Emoji's 2019-Mar-20
  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

 

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
🔼