Volkan Uzun

    When a user using screen reader, visits a page that has forms, the screen reader enters into this special mode called “Forms Mode”.

The screen reader tries to match the form elements with corresponding labels. Such as if you have input element (except button), the screen reader will try to find a <label> element or a title attribute.  When it finds the matching label tag for the input element, it will read the input element and the label together so it will make sense to the user.
Let’s assume you have the code below:

<form>
<p>First name: <input type='text' id='fname' name='lname'></p>
...

As you can see we didn’t put the label tag for the text. When the screen reader hits this part; it will say “First Name” and it will say textbox, but no details about the textbox. A sighted person can visually make the connection between the First Name and the textbox; however a user who needs screen reader may not be able connect this 2 elements.

The right way to do this is :

<form>
<p><label for='fname'>First name:</label><input type='text' 
                     id='fname' name='fname'/>

What we did is to add a label for the input. The id we write for label for has to match with the id of the input element.
Now the screen reader has enough information to make a relation with the input element and what this is for. When the screen reader hits this place, now it will say input text for first name, and the user will understand the form elements better.

What if we can’t put a label for the form element? Such as we have a 3 textboxes that will make up a date. Below is the code:

Date of Birth: <input type='text' id='month' name='month' maxlength='2'>
 <input type='text' id='day' name='day' maxlength='2'>
 <input type='text' id='year' name='year' maxlength='4'>

We can not have 3 labels for each of the input element, as it will look ugly, but also we want to make this form accessible to all users. So what do we do? Now we can use title attribute of the form element to help the screen reader.  Here is the fixed form:

Date of Birth:<input type='text' id='month' name='month' maxlength='2'
               title='Date of Birth Month'/>
<input type='text' id='day' name='day' maxlength='2'
               title='Date of Birth Day'/>
<input type='text' id='year' name='year' maxlength='4'
               title='Date of Birth Year'/>

This time we put title attribute to the input elements, to help the screen reader understanding what these input elements are about. You should prefer label for whenever possible and use titles if labels are not applicable. There is also a nice benefit when you use labels, whenever the user clicks on the label text, the browser will move the cursor to the corresponding form element, think how useful this is with checkboxes.

Another things to be watch out when making forms accessible is the required fields, their location, error message etc. Assume you have a form where user can create an account for himself, and this form is asking first name, last name and email. All these 3 fields are required, and if the form fails the validation (such as the email is not valid, first name is left blank etc), you put an error message right below the form.  Now when a user who uses a screen reader, fill this form, and submits the form; if he makes a mistake filling the form element or writing his email wrong, he may be confused. After the form submission the screen reader will the read form again, so user knows he is still on the filling form page, after reading the input elements, the screen reader will read the error message. The user has to listen to the form that he filled in again before he listens the error message, after listening the error message tab back into the form element to fix it. Sighted person can easily skip the form, and concentrate on the error message, however a blind person has to listen the form again. If you move the error message right above the form, now whenever the form fails to validate, user know what has failed, and can tab into the form element to fix it.

As you can see forms requires little more special attention to make it accessible however it is still pretty simple.

Tags: accessibility, forms accessibility, section 508

    Yesterday I talked about Web Accessibility 101 - Images, and today I will be talking about skip navigation.
    If you have a repetitive navigation on your website, then you should supply a method to your users to skip these navigation links. First let’s try to understand why the people using assistive technology needs a skip navigation.
Let’s assume your user is a visually impaired person, and he uses a screen reader. Your website has probably either an upper menu, left menu or right menu. The first time visually impaired person visit the page, he listens the pages (screen reader reads the page), including the navigation section of your page. He clicks or selects one the links on the menu, and new page has the navigation of course, and the user listens the navigation again before he gets a chance to listen the content. So every time the user selects a link on the site, he has to listen the same navigation again and again. 
    You have 2 options to help your user to reach the content without listening the navigation all the time. One method is the old method which is putting a skip navigation link on your page as the first item. This link could be 1 pixel image link on the top-left of your screen that takes the user to the body part of the page. This also helps the people that visits your page with their mobile phones as they can skip everything to the content.
You don’t have to put only 1 skip navigation link on your site, you can put as many as you want. Actually in one of my projects, I had to use 3 skip navigations. The first one was to jump from the upper company menu to the department site content, the second link is to skip the department site navigation, and the third one is to skip the filter options on the page.
An example code for the skip navigation could be like this:

<a href="#mainContent"><img src="/images/skipNav.jpg"
 alt="Skip to Main Content" ></a>

and at the beginning of the your content part:

<a name="#mainContent"/>

Another solution is using header on your page which will a topic of another blog post as there is more than skipping the navigation with headers, however a small tip is : if you use h1,h2..h6 in your pages, users can easily navigate on your page using these headers.

Have fun making your site accessible :)

Tags:

    If you work for any federal agency, or you sell a product to a product to a federal agency, this product must be complained with Section 508 Guidelines. Although Section 508 guidelines covers a lot of stuff, I will be talking about Web Accessibility. So I will assume you either work for federal agencies (universities, colleges …), or you sell products to these organizations, or simply you want to target everybody as your potential client and you want to be accessible. There is so many things when it comes to accessibility, so in this post I will only cover images.

    When a visually impaired person visits your site, he may not see the images, or he may disable the images, he may be using a screen reader to surf your site. You have to accommodate his needs, and give him a chance to visit and understand your site as much as you accommodate a sighted person. How will you achieve this?

• Your images that have a content should have an alt attribute that explains what  the image is.
  Bad Example: <img src=”/images/acrobat.gif”> or <img src=”/images/acrobat.gif” alt=”acrobat”/>
  Good Example: <img src=”/images/acrobat.gif” alt=”Acrobat Pdf Logo”/>
  As you can see not having an alt attribute and  a bad description in the alt attribute is not accessible.
  Put yourself in the shoes of a blind user, who is visiting your site with a screen reader, this will help to improve your common sense.
• If you are using the images for decorative purposes, you should put an empty alt attribute to the image tag.
  Bad Example: <img arc=”/images/background.gif”/>
  Good Example: <img src=”/images/background.gif” alt=””/>
• If you have a complex description for your image, that you can not possibly use alt attribute to describe the context, use longdesc attribute of the image. For example if your image is a graph that shows the monthly sales, for different departments, it will be very difficult to explain this graph in the alt attribute. Luckily image has a longdesc attribute, you can link to another text or html file for more description. Here is an example:
  <img src=”/images/JanuarySales” alt=”January Sales per department” longdesc=”/reports/januarysales.htm”/>
• If the images are disabled from the page, you should not lose any of the content from the page. Sometimes this happens because the image does not have an alt attribute, or the image is used as  a background decoration, and the front text color is same as background color and text disappears.

It is easy to test your page for this type of violation,  simply disable the images from your browser, and see if you still get the content :)

Tags: