Download - Accessible UX in Government - OZeWAI 2015
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