Skip to main content

We write about Digital Accessibility. This includes topics related accessibility news, accessibility events, accessibility techniques, reviews of websites and applications, tips related to accessibility and in simple words all possible things about digital accessibility.

Tagged as

testing

Tips for developers: Get your website teted for accessibility – Part 2 – Operable

This is Part 2 of 4 parts on how a developer should get their website or application tested for accessibility. Objective of this series is to provide easy method of accessibility testing to developers so that they can test as they code. This is how we would achive accessibility right at the development and design stage. These tips would not only be helpful to developers but also to interaction designers who decides interaction of elements and those who develop prototypes. This Part 2 is related to Operable section of Web Content Accessibility Guidelines 2.1.

Question: How to test for keyboard accessibility?
Answer: Load the page. Press CTRL + Home (Windows), this will take focus to the top of the page. Then use tab key to move from one element to another. Use enter or space key to activate an element. One should be able to activity every element including menus, modals, buttons etc.,

Question: When I was browsing a page with keyboard, focus does not move from an element, focus just gets stuck; is there a problem with my keyboard?
Answer: Probably not, this is called keyboard trap and needs to be avoided. When a component recieves keyboard focus, there should be mechanism to move away keyboard focus from same component.

Question: What to consider when there is a time limit for a page?
Answer: Check if there is an option to turn-off timing, adjust as per user’s requirement or extend the time limit. There could exceptions such as activity at real-time, esential time limit such as a test and time limit of 20 hours and more.

Question: What to look for elements that moves, blinks or scroll?
Answer: There should be a mechanism to pause, stop or hide. If content is being updated automatically, there should be a mechanism to pause or set how periodical that an update should happen.

Question: What is bypass blocks and how do we test?
Answer: Bypass blocks is a mechanism to enable keyboard users to skip representative set of blocks such as navigation and jump quickly to main content. This can be achieved by providing “Skip to main content” link at the top, using appropriate heading structure and/or using ARIA land marks.

Question: How to test page titles?
Answer: Look at top bar of browser window and see if page title does exist and is appropriate. For example Page title should be page name along with the company / domain name. It should not be just company name only on all the pages.

Question: What all needs to be considered as Focus order issues?
Answer: Ensure that the tab order is logical, if an element opens a modal, focus focus must be set to modal and must not move out until user closes the modal, When modal is closed, focus should be returned to the triggered element.

Question: Testing for link purpose
Answer: Ensure that all links have meaningful and spell out the context to the users. Avoid links like “Read more”, “Click here” etc., Using automated tools would be effective to test this requirement.

Question: What are the multiple ways required for a website?
Answer: A search functionality or a site map. There should be more than one way to reach a specific page on the website.

Question: How to test for focus visible?
Answer: When you tab through the page, every element should receive an indicator and you should be able to see where the keyboard focus is. It can be either custom focus indicator or browser’s default focus indicator.

Common mistakes of that a web developers make

Most developers feel making a website accessible require an additional effort, time consuming and needs to write a lot of additional code; which is actually not very true. But yes, there are certain additional things to be done, but they are most times enhancements. Having said that, most of the efforts that require to make a website accessible are the best practices of HTML. Here, I will endeavor to illustrate some of the common mistakes that a web developer commits.

  • Provide inappropriate page titles or provide a common title for all the pages across the website something like the name of the organization without the respective page title
  • Do not declare doctype External Website of the document
  • Do not define language of the document
  • Do not provide text alternative to non text elements such as images, CAPTCHA, audio etc.
  • Do not markup the headings in the documents
  • Use table attributes for the layout purpose
  • Do not mark up table summary, table headers
  • Do not mark up associated labels for form fields using “for” and “id” attributes
  • Do not provide site map to the website
  • Do not use accessibility techniques while using Java script, Flash etc.

Best reading…

A quick Web Accessibility Checklist

Often we hear people asking how can they check for a website for accessibility and what needs to be checked. Here is a quick checklist and hope this would be handy to someone!

  • Is the link “Skip to main content” exist? Although, there are several other ways to achieve quick navigation by providing heading mark-up, aria land marks, it’s still easier to hit on one link to reach the main content.
  • Does the website provides any accessibility options, such as “Color options” “Font re-size option” etc? This would be good, if your target audience have learning difficulties or new to internet users, else, a help page with an article how one could use the existing accessibility options within the browsers would be helpful.
  • Does all the informative images have appropriate alternate text?
  • Does decorative images has given empty alt text i.e. alt=””?
  • Does the web page has appropriate heading structure?
  • Does the website has a site map?
  • Is acronyms provided with appropriate information?
  • Does all the form fields have associated labels?
  • Does the website uses Frames, if so, appropriate titles provided to frames?
  • Is all the functionality of the web page available via keyboard?
  • Does all the links have descriptive screen text?
  • If an audio content is present, is there a synchronized captions or a text transcript available?
  • If CAPTCHA is present, is it accessible to screen reader users and to Braille Display users? if not, is there an alternative method provided such as Audio CAPTCHA or logical questions based captcha
  • Is semantic mark-up is used to designate headings and lists
  • Are Table columns and rows have associated headers using “th” tags?
  • Does tables have descriptive table summary and caption?
  • Is structure of the web page is logical and meaningful?
  • Color alone is not used to convey the information
  • Is foreground and background color has enough contrast?
  • Is there a pause / stop functionality for moving, blinking or scrolling content?
  • The content and functionality should not have time limits, if necessary, user should be allowed to extend the time as per their choice. If the authentication expires, user should be able to re-authenticate and continue the activity without losing any data
  • Page has appropriate and descriptive page title
  • The language of the web page is identified using the HTML tag “lang” attribute