Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Accessible UX in Government
Ross Mullen
Web Collaboration Solutions
In today’s session:
1. Federal Government procurement policy
2. Current web application development landscape in the
Feder...
Government Policy
confusion and assumptions regarding platforms and
frameworks Federal Government web applications run on
...
Government policy in practice
We are a Microsoft shop
• All web apps created in the Shared
Services Centre use the Microso...
Source of the problem
• 100’s of solutions for accessibility
• National Transitional Strategy 2010 – 2014
• DTO Design Sta...
Research
10
10
4
.NET DRUPAL SHAREPOINT
Source:
builtwith.com using Whole of Australian Government lookup list
filtered by...
Research continued…
Of those 10 using Drupal all are content only
websites none are web applications
education.gov.au
high...
Differences
Website
• Generally has static content
• Has a few client side widgets for interactivity
Web Application
• Is ...
Not all users are the same
“end user” generally means general public
other end user types:
• Business users performing man...
Why Telerik controls are used
• Largest collection of custom controls
• Accessibility statement provided
• Easy to use for...
KendoUI background
• Controls are HTML5 and JQuery based
• KendoUI powers other Telerik products
– ASP.NET MVC
– UI for JS...
Telerik Accessibility Statements
• "The Telerik ASP.NET AJAX controls follow the W3C
Web Content Accessibility Guidelines ...
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 w...
Possible solutions
• add JQuery script to fix these problems
• add more contextual text on the sort links
• add anchor tag...
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 w...
Our filter pattern (the screen)
triggers Javascript to
filter or sort the grid
different filter options for
each data-type...
The new problem
• KendoUI grid control creates two HTML
tables; the first is a table of the headers
and the second is a ta...
The new problem (screenshot)
Developers use them as:
• Telerik provides comprehensive support
• Minimal effort to get a control working
• Procured by t...
Vendor response
Telerik have been very open to our
feedback, thanks to:
• John Bristowe (Telerik Australia)
• Tsvetomir Ts...
Affects all third party controls
Not just a Telerik problem
Probably also affects controls provided by:
• Infragistics
• I...
What’s the alternative?
Short term
• Working with the .NET developer controls
fixing accessibility where we can
Long term
...
Design guides
GDS and 18F both provide great guides:
• However they're often that last bit of the
jigsaw puzzle, the front...
Static web content
Reasonably straight forward to make
accessible:
• Good document structure
• Explanatory link text
• Mea...
Dynamic web content
• To my knowledge a design guide that
details the complex interactions that need
to take place in a we...
“Simplify the screen”
• The statement is too simplistic
• Still instances where a power user
requires more functionality b...
One approach
Consider any third party control as a
starting point i.e. if using a grid:
• Mark up with script to be keyboa...
Points to remember
• If your web apps use Telerik controls
they’re probably inaccessible
• Regardless of the vendor statem...
Why isn’t this known more?
• There is no consistent approach across
industry with accessibility reviews
• The recommendati...
There is help available
The accessibility testing team in the Shared
Services Centre is aware of the scope of the
problem
...
Contact details
@MRRosco78
https://au.linkedin.com/in/rossmullen
Upcoming SlideShare
Loading in …5
×

Accessible UX in Government - OZeWAI 2015

460 views

Published on

There is still confusion and assumptions regarding which frameworks Federal Government web applications run on. I discuss the IT procurement policy in practice and how it shapes the choices for web application development in Government, why developers use third-party controls and the impact those controls have on making web applications inaccessible and approaches to consider when using third-party controls.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Accessible UX in Government - OZeWAI 2015

  1. 1. Accessible UX in Government Ross Mullen Web Collaboration Solutions
  2. 2. In today’s session: 1. Federal Government procurement policy 2. Current web application development landscape in the Federal Government 3. What controls web app developers use and why 4. The accessibility problems with those controls 5. Questions
  3. 3. Government Policy confusion 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
  4. 4. Government policy in practice We 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
  5. 5. 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
  6. 6. Research 10 10 4 .NET DRUPAL SHAREPOINT Source: builtwith.com using Whole of Australian Government lookup list filtered by Education and Training Department and Employment Department https://github.com/AusDTO/WoAG-Analytics/blob/master/dto-analytics/lookups/govauRegistrants.csv 10 URLs use .NET 10 URLs use Drupal 4 URLs use Sharepoint Sample of 24 Department of Education and Training and Department of Employment URLs
  7. 7. Research continued… Of those 10 using Drupal all are content only websites none are web applications education.gov.au highered.gov.au literacyandnumeracy.gov.au olt.gov.au studentsfirst.gov.au asbestossafety.gov.au employment.gov.au experiencepays.gov.au fwbc.gov.au nationalworkersmemorial.gov.au
  8. 8. 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
  9. 9. 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
  10. 10. Why Telerik controls are used • Largest collection of custom controls • Accessibility statement provided • Easy to use for developers • Award winning
  11. 11. 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
  12. 12. 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
  13. 13. KendoUI controls The controls are not accessible • From minor to major issues • ARIA support doesn’t work
  14. 14. KendoUI grid Column header sort Filter icons Pager links Popup filter menu
  15. 15. 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
  16. 16. 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
  17. 17. Our filter pattern Accessible filter and sort controls uses filterable list pattern from gov.uk
  18. 18. 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
  19. 19. Our filter pattern (the screen) triggers Javascript to filter or sort the grid different filter options for each data-type Int, String, Date, Bool
  20. 20. 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
  21. 21. The new problem (screenshot)
  22. 22. 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
  23. 23. Vendor response Telerik have been very open to our feedback, thanks to: • John Bristowe (Telerik Australia) • Tsvetomir Tsonev (Telerik Bulgaria)
  24. 24. Affects all third party controls Not just a Telerik problem Probably also affects controls provided by: • Infragistics • Independent JQuery control developers
  25. 25. 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
  26. 26. 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)
  27. 27. Static web content Reasonably straight forward to make accessible: • Good document structure • Explanatory link text • Meaningful ALT attributes on images
  28. 28. 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
  29. 29. “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
  30. 30. 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
  31. 31. 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
  32. 32. 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
  33. 33. 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
  34. 34. Contact details @MRRosco78 https://au.linkedin.com/in/rossmullen

×