Common Web Accessibility Pitfalls [For Beginners] – XXL | UI UX Designer

Common Web Accessibility Pitfalls [For Beginners]

posted in: Post, UX | 0

Accessible web pages are good for everyone and it’s good for business. In this post I’m going to show you some common web accessibility pitfalls we encountered during designing for a cloud-based business application platform Dragonce.

The goal of web accessibility is to ensure that information or services delivered through websites are available to and usable by the widest possible audience.

– “Accessible Web Design” from the Pennsylvania State University

1. No alternatives for non-text content

Alternative text labels is supposed to be provided for images, icons, and interface elements. These text labels aren’t visible on screen, but they let VoiceOver audibly describe what’s on screen, making navigation easier for people with visual impairments.

Screen reader cannot read the picture.

Meaningful text description can be read by the screen reader.

 

1.1 No meaningful text alternatives for banners, images, icons

<img src = “image1.jpg” alt=“image1”>

<img src = “image1.jpg” alt=“Receipt”>

1.2 Null value “” should be used for decorative images

<img src = “home.jpg” alt=“home”>

<img src = “home.jpg”  alt=“”>

 

1.3 Speak: none should be used for decorative icon font

.dg-icon-rt-activityLog:before {

   font-family: ‘DragonceRT’;

   content: “\e940”;

}

.dg-icon-rt-activityLog:before {

   font-family: ‘DragonceRT’;

   content: “\e940”;

   speak: none;

}

 

1.4 Alt-text should be in the same language as the user-selected language

alt=“Ation to-do list”

alt=”待辦事項列表”

 

2. Not fully operable through a keyboard interface

Most of the Dragonce form elements are not implemented with standard HTML form elements except input, textarea and label. We have customised select menu, selection box, datetime picker, user picker and etc. Since most of them are implemented with div, span and icon fonts, to operate through a keyboard interface with intuitive tab sequence is the key factor to screen reader friendly.

<div class=”staffPickerInfo” title=”Click here to choose user or group” >

<div class=”staffPickerInfo” title=”Click here to choose user or group” onkeypress=”this.click();” tabindex=”0″ >

 

2.1 No text title and keyboard focus for div button or other customised actionable elements

<span id=”submit”>Submit</span>

<span id=”submit” title=”Submit”  onkeypress=”this.click();” tabindex=”0″>Submit</span>

 

2.2 Pop-up dialogue unable to close by keyboard interface

<div class=”formClose” title=”Click here to close pop-up” >

<div class=”formClose” title=”Click here to close pop-up”  onkeypress=”this.click();” tabindex=”0″ >

 

3. Insufficient HTML markup headers

HTML markup headers are not only used for better SEO results, they also play an important role in screen reader friendly. Good heading tags sequence can act like an outline of the web page, with main headings and subheadings which enable screen ready easier to understand the whole sctucture.

<label class=”caption1″ >Wholesale System</label>

<label class=”RAINBOWLABEL” >Records of Products</label>

<h1 class=”caption1″ >Wholesale System</h1>

<h2 class=”RAINBOWLABEL” >Records of Products</h2>

4. No input assistance for input fields

<input type=”email” name=”Email” >

<input type=”email” name=”Email” placeholder=”Email” >

 

5. Inaccessible PDF

Unable to access scanned PDF in the website

Accessible PDF should PDF in the website be provided

 

6. Not provide sufficient colour contrast

Before:

After:

Before:

After:

Colour contrast ratio less than 4.5:1 (large font – 3:1), corporate logo exempted

Colour contrast ratio at least 4.5:1 or 3:1 for large font

7. No caption and title for the table

No caption and title for the table

<table summary=”This is a supplier list table

for ……”>

<caption>Supplier List Table</caption>