Accessible UX in Government

Ross MullenWeb Collaboration Solutions

In today’s session:1. Federal Government procurement policy2. Current web application development landscape in the

Federal Government3. What controls web app developers use and why4. The accessibility problems with those controls5. Questions

Government Policyconfusion and assumptions regarding platforms and frameworks Federal Government web applications run on

• In January 2011 saw the release of government policy requiring agencies to consider open source software for all software procurements.

• Open source software policy requires agencies to consider open source software in relation to any approach to market to acquire software.

Source:Australian Government Open Source Software Policy

http://www.finance.gov.au/sites/default/files/australian-government-open-source-software-policy-2013.pdf

Government policy in practiceWe are a Microsoft shop • All web apps created in the Shared

Services Centre use the Microsoft .NET framework

• Web apps created by Department of Education use .NET

• Developer capability for open source development does not currently exist

Source of the problem

• 100’s of solutions for accessibility• National Transitional Strategy 2010 – 2014• DTO Design Standard• Adoption and culture• Not educating the right people

Research

10

10

4

.NET DRUPALSHAREPOINT

Source:builtwith.com using Whole of Australian Government lookup list

filtered by Education and Training Department and Employment Departmenthttps://github.com/AusDTO/WoAG-Analytics/blob/master/dto-analytics/lookups/govauRegistrants.csv

10 URLs use .NET10 URLs use Drupal4 URLs use Sharepoint

Sample of 24 Department of Education and Training and Department of Employment URLs

Research continued…

Of those 10 using Drupal all are content only websites none are web applications

education.gov.auhighered.gov.au

literacyandnumeracy.gov.auolt.gov.au

studentsfirst.gov.auasbestossafety.gov.au

employment.gov.auexperiencepays.gov.au

fwbc.gov.aunationalworkersmemorial.gov.au

Differences

Website• Generally has static content• Has a few client side widgets for interactivity

Web Application• Is dynamic• Complex functionality and workflows• Client-side interactions sent to server

Not all users are the same

“end user” generally means general public

other end user types:• Business users performing management

tasks or requiring bulk updating of data• Public servants managing data and admin

screens

Why Telerik controls are used

• Largest collection of custom controls• Accessibility statement provided• Easy to use for developers• Award winning

KendoUI background

• Controls are HTML5 and JQuery based• KendoUI powers other Telerik products

– ASP.NET MVC– UI for JSP– UI for PHP

• Fix accessibility in one suite will fix in every suite

Telerik Accessibility Statements

• "The Telerik ASP.NET AJAX controls follow the W3C

Web Content Accessibility Guidelines 1.0/2.0 which set

the standards for applications providing accessible

content"

• "…because we know that Kendo UI is often used in these

types of applications, we thought it best to provide full

ARIA support to all Kendo UI Widgets out of the box."

Source: http://www.telerik.com/aspnet-ajax/tech-sheets/accessibility-support

KendoUI controls

The controls are not accessible• From minor to major issues• ARIA support doesn’t work

KendoUI grid

Column header sort Filter icons

Pager links

Popup filter menu

Filtering with the KendoUI grid

filter links have no link text and the href attribute

is #no link text when page viewed with JAWS Links List

Possible solutions

• add JQuery script to fix these problems• add more contextual text on the sort links• add anchor tags to the filter menu

all result in difficult to maintain code

Our filter pattern

Accessible filter and sort controls

uses filterable list pattern from gov.uk

Our filter pattern in detail

• Filtering and sorting controls in HTML• Labels associated to form fields • Form elements wrapped in fieldsets • ARIA live region update audibly for filter

and sort operations

Our filter pattern (the screen)

triggers Javascript to filter or sort the grid

different filter options for each data-type

Int, String, Date, Bool

The new problem

• KendoUI grid control creates two HTML tables; the first is a table of the headers and the second is a table of the contents potentially breaking any identifiable relationship

• Uncertain if this causes problems with AT

The new problem (screenshot)

Developers use them as:

• Telerik provides comprehensive support• Minimal effort to get a control working• Procured by the Department

– The accessibility statement provided by the vendor is assumed to be correct

Vendor response

Telerik have been very open to our feedback, thanks to:

• John Bristowe (Telerik Australia)• Tsvetomir Tsonev (Telerik Bulgaria)

Affects all third party controls

Not just a Telerik problem

Probably also affects controls provided by:• Infragistics• Independent JQuery control developers

What’s the alternative?Short term• Working with the .NET developer controls

fixing accessibility where we can

Long term • Transitioning away from vendor controls • Using capability within the APS and the

broader community to begin creating platform independent controls that are accessible

Design guides

GDS and 18F both provide great guides:• However they're often that last bit of the

jigsaw puzzle, the front-end UI styling the "window dressing"

• They don’t go into the depth of detail that is required for web app accessibility

GDS Government Digital Service (UK Government)18F (US Government)

Static web content

Reasonably straight forward to make accessible:• Good document structure• Explanatory link text• Meaningful ALT attributes on images

Dynamic web content

• To my knowledge a design guide that details the complex interactions that need to take place in a web application does not exist

“Simplify the screen”

• The statement is too simplistic• Still instances where a power user

requires more functionality beyond a collection of form fields and a submit button

• Not every user is the same

One approach

Consider any third party control as a starting point i.e. if using a grid:• Mark up with script to be keyboard

accessible• Downgrade the control to remove features• Combine with an ARIA live region • Offer an alternative way in regular HTML

Points to remember

• If your web apps use Telerik controls they’re probably inaccessible

• Regardless of the vendor statement, you will have accessibility problems and you should assume the worse

Why isn’t this known more?

• There is no consistent approach across industry with accessibility reviews

• The recommendations don’t necessarily work for dynamically generated controls

• It’s too hard to fix• Window dressing is easier

There is help available

The accessibility testing team in the Shared Services Centre is aware of the scope of the problem

• We have identified a number of approaches to fix accessibility in these components

Contact details

@MRRosco78https://au.linkedin.com/in/rossmullen