Blind or Low Vision

Introduction

People who are Blind or Low Vision either cannot see or have some vision.

Making ICT platforms accessible requires some awareness and effort on the developer’s part. We would recommend following this guideline and refer to international standards on web accessibility; WCAG 2.0.

Website owners in Qatar fail to make websites accessible by putting up barriers to people who are Blind or Low Vision.

ICT Platforms

  • Websites
  • Mobile / Devices and Applications
  • Computer Applications
  • eLearning
  • Kiosk / ATM
  • Television
  • Cinema

Assistive Technology (AT) Devices for people; Blind or Low Vision

  • Screen Reading software
  • Braille display device
  • Keyboard
  • Screen Enhancer, Magnifier / Reader

Free tools used for testing

Making content accessible for people who are; Blind or Low Vision

  • Language; Arabic and English Website:
    • Language of Page
      Use Arabic and English language specifications in both Web Sites, this is required for usability of Assistive Technology (AT) users.
      Use the following code:
      Arabic text; <HTML lang=”ar”  xml:lang=”ar” dir=”rtl”>
      English text; <HTML lang=”en”  xml:lang=”en” dir=”ltr”>
    • Arabic and English Website: Language of Parts
      If English text is written in the Arabic website, make sure the Language and Reading Direction attribute is used for all English text;
      English text; lang=”en”  xml:lang=”en” dir=”ltr”
      If Arabic text is written in the English website, make sure the Language and Reading Direction attribute is used for all Arabic text;
      Arabic text; lang=”ar”  xml:lang=”ar” dir=”rtl”
      Attributes may be applied to; <p>, <span>, <div>, etc…
      Whenever there is a change in language, use the language attribute so Assistive Technology (AT) users are able to differentiate between Arabic and English text. This especially applies to AT users who use text to speech technology such as screen readers.
  • Keyboard and AT users​
    • Ensure all interfaces used for navigation and input are keyboard usable
    • Do not create keyboard trap for users who are dependent on it
    • On Focus and On input, ensure website content and interfaces behave in a predictable usable way for keyboard and AT users
    • All links, buttons and form controls must be in Tabindex; keyboard users must be able to use Tab key to navigate through links and form controls
    • The Focus must always be visible
    • The reading order (focus) must be logical, consistent and in correct order according to the visual order
  • Navigation and Functionality​
    • Multiple ways; Providing an opportunity to navigate sites in more than one way can help people find information faster
      • Provide site map
      • Use breadcrumb navigation
    • Main Menu; Sub-menu flyout menu must be usable to keyboard users.  On focus show, Out of Focus close
      Reading order must follow logical path
    • Use iframe Title with description to facilitate frame identification, purpose and navigation
    • Dynamic content; Menus, Lightbox, Dialogue, Forms
      • Avoid using only “mouse over” event handlers
      • Provide notification or instruction on the content or element of the status / state of dynamic content; In alt or title attribute, use phrases like Collapsed / Un collapsed, closed / open
      • Use Links, form controls or Images to place instructions or notifications in ALT or TITLE attributes
      • Use dynamic page content without using page refresh; this could cause focus problems which result in orientation issues for Assistive Technology users
      • Reading order must flow logically from the invoked content / element onto the dynamically generated content. Focus must move onto the new dynamic content
      • The new revealed content should be immediately placed below the triggering element with minimal spacing (1 space at the most)
    • A mechanism is available to bypass blocks of content that are repeated on multiple web pages. Create “Skip to Content” link, when link is invoked, Focus must be on Title H1 of page content
    • Timing Adjustable: For each time limit that is set by the content, the user should have the ability to; Turn Off, Adjust or Extend the time. There are exceptions on online time dependent functions such as; Online Auctions
    • Pause, Stop, Hide: For moving, blinking, scrolling, or auto-updating information;
      • There is a clear mechanism to pause, stop or hide the content
      • Auto updating information: control the frequency of the update
      • There is an exception if it is part of an activity where it is essential.
    • Responsive design; Ensure keyboard accessibility; Tab and Gesture usability across multiple devices; Computer, Tablet and Mobile
      Also ensure visual layout is usable across screen resolution of many device types mentioned above
  • Text
    • Minimum Text Size should be CSS 95-100 % on English website,
      for Arabic website; 125-140 %
    • Use Arial or Verdana font
    • Use Bold text on all Menus
    • Avoid using styles such as; drop shadow, strike through
    • Use italic styles with Bold text
    • Color contrast minimum ratio must be 4.5:1 and higher. High colour contrast between text and background must be achieved
    • Use descriptive link phrases on text links, avoid using link phrases like; “click here”, “More”, “Read More”, etc and avoid repeating duplicate link phrases that link to different URL’s. Use accessible link phrases like; “Read More About Mada”
    • Links in the content body of the document should be underlined so it is easily distinguishable from read only text. Never use Underline only for styling effects.
      All other links; underline links on focus from keyboard or mouse
  • Document Structure, Layout and Design​
    • Use nested Heading elements for document structure;
      best practice;  H1 page title, H2 headings, H3 sub-headings
    • Use paragraph element for actual paragraphs, avoid repeatedly using break tags <br>
    • Use List element; ordered or unordered for list of items
    • CSS disabled mode, all web pages must usable. Make sure all pages display and function properly with CSS disabled.
    • Avoid using Table element exclusively for webpage layout purposes
    • Use CSS and DIV element for Website layout and design.
    • Use accessible CMS platforms; Content Management Systems
    • Such as Drupal,
    • Provide a good balance of graphic elements and text.
    • Reduce the number of colours and keep the website design simple
    • If possible, try to use at most; 3 column layout in all web pages
    • Avoid using strong busy backgrounds, example: Using a busy photo as a background.
    • Keep the website design and layout consistent.
    • Clearly define different sections of a webpage with headings and organize content so it is located consistently on repeating pages.
    • Create simple, usable, visual layout of all web content and use a consistent style of presentation between pages.
      • Space: minimize space in between content to 1 or 2 space; character space
      • Align: English content, left align all content to the left side of the web page. Also left align table headers and headings in page sections, etc … Right align all Arabic content
      • Consistency: all important usable functions and content must be consistently placed on all web pages
    • Page Titles. All title elements must be uniquely labeled to describe content of each webpage. Use page level descriptions, similar to way breadcrumb navigation is described.
      Examples of good practice;
      <Title> Ministry of Public Health, Home </Title>
      <Title> Ministry of Public Health, Services, Department </Title>
    • Data Tables; If possible, avoid using Tables only for layout purposes. Tables should be used to present tabular data. Make sure the following table structure elements are used;
      Table Header TH
      and
      Table Caption, title of table
  • Images and Graphics
    • When images are used, include ALT text as place holder to add description:
      <img src=file.gif Alt=”description” title=”put title here”>
      To enhance Usability for AT users; also use ALT text to provide additional information, behaviors, notifications and instructions
    • If image is used as decoration, conveys no meaning, use ALT text with blank quotes “ “.
    • If image is used as link; describe link destination in the ALT
    • If image of text is used; also write the text in ALT
  • Form Fields
    • Use the Label element to associate form controls:
      Code: <label for=”firstname”>First name:</label>
      <input type=”text” name=”firstname” id=”firstname” />
      Important: All Label ID’s must be unique, do not repeat on the page
    • Labels must be visible and placed above form controls
    • When using radio and checkbox form controls; use Label element with Fieldset and Legend elements
    • Form Validation messages must be accessible and usable, The error messages must be grouped and placed above the form fields starting the message with Required field; Attention or Error.
      The focus must also follow and be placed on first line of messages
      OR
      Create accessible dialogue window message for each instance of failed validation. It is very important to clearly identify which form field failed to validate. The focus should be placed on the dialogue window message and focus should be returned to the form control that failed to validate.
    • Avoid using Red colour by itself to communicate error messages;
      Best practice to actually write word Error, Attention or Required field with Red colour text. When using read text, use darker shade with at-least 6:1 colour contrast.
    • Always provide a button for submitting forms whenever the form element is used. As a best practice, avoid creating only input fields by itself. If image buttons are used, describe the form process / action
    • To make sense of complex forms, logical reading order of form controls are very important to AT users. If required, use the TABINDEX attribute to control the reading order in complex form fields. Code: <input type=”text” TABINDEX=”1” Name=”Field1”>
    • If CAPTCHA’s are used, Provide accessible alternate version of the CAPTCHA image of text. The CAPTCHA interface must also be usable by keyboard and AT devices
      Example of accessible CAPTCHA; use Google re-CAPTCHA: https://www.google.com/recaptcha/intro/index.html
  • Multimedia
    • All downloadable documents must be accessible (Word, PDF)
    • If Audio is embedded or used in any way to add context; provided separate link to accessible text transcript file; Word, PDF or HTML page. Ensure the text transcript uses document structure; Headings at the least
    • If videos are used and there is no Spoken Dialogue;
      • Ensure there is Narration / Audio description of visual
      • Do not substitute Narration / Audio description with only music
    • Ensure embedded video player interface is accessible by keyboard and At devices
    • Online; Google Maps in nature are only visual and not accessible to people using screen readers and keyboards. The solution is to provide an equivalent, descriptive text alternative of the map location
      • Place the text equivalent information above the embedded online map or link
      • When Labeling links to Google Map; ensure to include phrase Google Map in the link phrase; E.g. “Google Map of Mada”
      • If applicable, provide directions from point A to B
      • Include a list of addresses and/or descriptions to key locations on the map
      • Describe intersections, surroundings and nearby public transportation if applicable