News

In our way to WCAG 2.0: Accessibility Improvements (Episode 2)

thumbnail
Julio Camarero
Published Date14 Years Ago - 40588 Views

 Hi Everyone, 

it's been more than a month since episode 1 about accessibility improvements. It's not because we didn't have anything to tell, it's just because we didn't have time to do it...  but there have been a lot more of accessibility improvements and most of them are already available in the Liferay 6 RC.

  • "Skip to content" link. This link appears now at the top of all our pages in the classic theme and the control panel. This link allows the users to skip the navigation and go directly to the content of the page.
  • Keyboard navigation and ARIA support for liferay menus. All the button menus in liferay are built using the <liferay-ui:menu> taglib. Right now we have followed the ARIA standard, so that you can open the menu pressing enter and then navigate through the items using the up/down arrows. To close the menu you can either press scape or press tab. We have tested this improvements with JAWS and the result was really satisfactory, using ARIA roles allows JAWS to tell the user: "This is a menu button, press enter to open the menu and use up/down arrows to navigate through the items" and once it is open it says "Item 1 out of 7 Edit, Item 2 out of 7 Permissions, Item 3 out of 7 RSS.. " and so on.
  • Icons taglib in liferay. Most of the icons in liferay which are followed by some text are built using the <liferay-ui:icon> taglib and this taglib generated two links: one for the image and one for the text, which could be very confusing for people using screenreaders as they would listen to every link twice. We have fixed it so that there is only one link and the alternative text for the image is "" when there is complementary text (as it is only decorative).
  • Providing more information in links. Asset publisher and other portlets have been improved to provide more information in all of their links. For example, originally, all the text was "edit", "print" or "pdf" (as the rest of the infomation pointing to the resource is visual) and some users may have problems with these links. Now, the html text includes the name of the resource, althought is is not visible using a normal browser. The text is something like "Edit article one" or "print report on schools".
  • Language information. Screenreaders need to know the language of the content they are reading. We have added the language in the W3C standard at the top of every page. 
    <!DOCTYPE html>
<html lang="fr"> 
<head>
  <title>document écrit en français</title>
    We have also added the language attribute to all those places in which we are using different languages (for example, the language selectors). 
    <select>
 <option lang="ar-SA"value="ar_SA"> العربية(السعودية) </option>
 <option lang="eu-ES" value="eu_ES"> Basque (Spain)</option>
 <option lang="bg-BG" value="bg_BG">български(България)</option>
 <option lang="ca-AD" value="ca_AD"> català (Andorra) </option>
 <option lang="ca-ES" value="ca_ES"> català (Espanya) </option>
 <option lang="zh-CN" value="zh_CN"> 中文 (中国) </option>
 <option lang="zh-TW" value="zh_TW"> 中文 (台灣) </option>
</select>
  • Accessible ratings. Ratings in liferay (stars and thumbs) are built using the taglib. This component is very difficult to use for some users as all the information there is visual, it is based in the color of the stars. This component has been modified, so that users with screenreaders to use this component easily as the html for the stars is as follows.
  • Opens in a new window link. Links that open a new window of the browser now notify the user about it. The text can be changed for an image using css, as it is all wrapped by a span with the class "opens-new-window-accessible".
           

 

As always, more info in this wiki page... And there are even more but this blog entry is starting to become too long, so I will keep them for the next episode, keep tuned! see you soon!

Comment (6)

More Blog Entries

thumbnail

Sesame Street Releases Google Search Parodies

thumbnail
Joshua Asbury
21 Apr
0
thumbnail

Liferay modules communication

thumbnail
Juan Fernández
22 Apr
15
Blogs
thumbnail
Thiago Leão Moreira
14 Years Ago
Hey Julio,

I was thinking in another "Accessibility Improvements" on Liferay. How about we add the capability on message board to navigate through the threads using the keyboard, like GMail, using the letters J and K this will be awesome!! Most of the time I hit these keys when accessing our internal MB trying to move on or back in threads... hehe
Please sign in to reply.
thumbnail
Julio Camarero Thiago Leão Moreira
14 Years Ago
Hey Thiago, that would be very cool... you can add that subtask here, and I will have a look at it when I have some time: http://issues.liferay.com/browse/LPS-9250
Please sign in to reply.