Don’t make me struggle – Using IA and graphic design to enhace accessibility – FOWD Workshop

Kath  Moonan
AbilityNet

Kath Moonan, a senior consultant on AbilityNet’s web accessibility and usability team. She is a member of the Guild of Accessible Web Designers and a member of the PAS 78 advisory panel. Before joining AbilityNet, Kath was a senior designer and a company director for Poptel Technology, a company she led to become one of the UK’s first agencies to offer accessible web design. Kath believes firmly in technology being accessible to everyone. She sees improved web accessibility and usability as slowly but surely changing the web for the better. In her spare time Kath enjoys art, design and geek events. She also likes to work on projects that make rock and roll more accessible to everyone.

Many websites that AbilityNet test reach a good level of technical compliance but still represent significant challenges to users. In this workshop AbilityNet’s Senior Consultant Kath Moonan will show some examples of barriers diverse users face which are caused by architecture and graphic design – with ideas for how to fix them.

What you’ll learn

• How commonly used IA and design techniques can make life difficult for some users
• Video clips of real-life issues
• The importance of user testing
• Using diverse user personas as part of your design process
• Why thinking about diversity will give you a competitive edge

————————-

Recommends her favourite Book: don’t make mi think- struggle!

Why websites difficult to use?

Too little guidance for designers in WCAG?

The semiology of the wcag doesn’t like

Christioan halmon – is acces just for developpers?

The trinity of accesible web deisgn:

content – design – markup (semantic studio diagram)

content:

• relevant
• non-jargon
• concise
• clear&accurate
• summarised
• rich media enhanced

semantic in all this?

wcag guidelines helps…

• -solid guidance on technical aspects
• -achieving technical operability

understanding an testing tech benchmarks

what everyone know about access. web design

• use good colour contrast
• avoid busy bk
• use whitespace effectively
• group content relatively
• alt versions /styles /personalisation
• avoid all caps…

What else is there to know?

• there are some that designers like doing….
• whitespace
• group content
• alt versions
• avoid serif text

is acccess vieuwed as too much of a restriction on creativity?

Enabled bydesign (website) made this website to make things look really good, positive changes.

Examle: axel goodcrisps (peel potatoe thing, made easier to use. That increase by 50% yer on year

chat can graphic designers do about it?

• dont assume thanwcag 2.0 compliena toce will make a site accesible
• never asume your audience is exaclty like you (unless you’ve been told they are!)
• employ user centred design techniques
• consider diversity within user centred design
• ther is creativity in restrictions
• design beautifiul websites for a variety of people to enjoy

Diverse user testing

• disabled user testing is engaging disables users in website testing
• tests conducted with user’s assistive tech or custom settings
• test are aseries of commmonn tasks to determine whether the website is easy to use: focus your tastks and make sure what you users are doing
• a test may be conducted remotely or observed in a lab
• compile a report at the end of the test
• it is note the same as full usability testing but wil hihglight the way

why diversity and not disability?

many people do not consider themselves disabled

• -deaf users
• -dyslexia. low vision, etc

moves away from a medical model of disabiliy

• -the environment is the barrier (social model)

why conduct diverse user testing?

• test whether your website works with real people
• DRC report highlighted that disabled users will find the problems with a web page all users may hae, plus many more
• disabled users are individuals. not all preferences can be picked out from the guidelines
• follows current best practices: PAS recommendations (UK guides) IST45
• disabled user testing is part of WCAG
• many issues lie beyond a code audit or the guidelines – disabled user testing may pick these up
• measure the experience as well as functionality (how someone can use that form, ask questions like if it was considered easy, etc)
• combines access with good usability for diabled users
• exposes development teams to end users rather than a theoretical approach to web accessibility

whats the diff with testing with diverse users?

• no diff int hte way the test is conducted
• test access as well as usabilitty
• diverse users will encounter more problems quicker
• more efficient
• puts the website through a more extreme test (people with some impediments could struggle with something that others really not)

who to test with

select participants across a range of different access neeeds /requirements:

• vision -low vision, blindness, colour blindness
• motor – upper limb impairments
• cognitive – dyslexia, short term memory loss
• learning difficulties – mild to moderate
• hearing deaf/hard or hearing

elder users

level of tech expertise. using voice recognition soft, is very difficcult to use, lots of commands to learn, so difficulties increases. different reasons why people find tech hard to use

target audience

how many testers

at least one tester from each category

• this is ceonomical but requires expert evaluation and the possibility of further testing before conclusions can be droen
• evaluate user as an individual

standard set of a user test

disability	technology used
severe vision impaired	screen reader
medium vision impaired	magnification soft
mild vision	large text /high contrast
servemotor diff	voice recognition
medium motor	keybiard alone user with no mouse
mils motor	fine mouse control difficulties
medium dyslexic	no special access methodologies
learning disability	no special access methodologies

conducting a user test

• ensure tests include users from each disability group
• allow aprox. 1-2 hours per test
• some disabled users may require longer for task comletion, ensure this is accounted for
• assistive technologies
• observed or remote?
• follow guidance in PAS 78 / Just ask (when you just dont undersand cause the reader goes that quicker)

can I do this myself?

• yes with the right equipment and knowledge
• involve experts were possible
• learn from your participants

benefits

• ensure your website is truly accessible and usable
• usability and accessibility in one test – economical (and include diverse users on those tests)
• reach new audiences – organisations can’t afford to ignore diversity
• easier for everyone to use

getting buy-in

• combine usab and access budget – substantial saving
• why not test with user groups that ALWAYS include diverse users?
• involve diverse users

20-40pounds an hour, for the user tester. include taxi bills etc.

Common challenges faceb by users

she thanks BT for being tough

————-

learning difficulties

mild to moderate

users with a learning disability

• a large variation on impairments within this gropu of users – difference in impairmente type and severity
• it can be difficult to read large chunks of text or complicated words
• video or audio content is much easier (though controls may be difficult)
• over complicated layouts are harder to navigate
• small sized text is difficult to read – user may not know how to increase text size in their browsers (look at the default settings)
• can quickly experience information overload
• may find id hard to user search because they can’t spell
• user may haver more than one impairment

learning disability users – examples

british museum floorplan (find the mexico gallery)

special note: this tester is a regular visitor to the museum and the test was still hard!

• the floor plan was too complicated
• room are labelled with numbers!
• who would visist the BM to go to room 17?
• writing is too small!

———–

cognitive impairments

dyslexia

ADHD

users with dyslexia – issues

• white bk can be too bright – many people use monitor screeners
• orange and red text (particularly normal weight) is hard to read
• may have short term memory problems which make learnability more challenging (reading, speaking, more difficult). amazon or ebay, we remember it from the last time we used it, but maby they don’t
• can quickly experience information overload
• may find it hard to use search because of spelling – use Google as a spellchecker
• over complicated layouts are harder to use
• also find filling out forms difficult. her experience is that if you got an additional need, they’re more challenging

users with ADHD – issues

• «turn the lights down!»
• clashing bright colours (distract the atention)
• movement / flashing
• unfocused / too many distractions
• easily frustrated

examples

a dyslexia nightmare (BT EXCHANGES)

• the first site we tested with BT
• lots of issues because standards / accessibility hadn’t been considered
• the layout makes it very difficult for the user to browse and understnd information on the page
• too complicated
• too crowded
• users don’t know how to operate inteface!

there is a component on the left, that was to interact with the content, but users just didn’t know houw to use it

problems with the complexity of the page

decorative graphic could come a barrier

———–

motor impairments

keyboard only users

• may experience pain and fatigue while using the computer
• may have a limetd time to complete task
• tab focus is hard to follow without a visual hightlight
• a lot of links with no visible skip navigation
• some of the inteface may not work – form elements, player controls
• many users have limited mouse use but this can quickly bring on symptoms
• inconsistent tab order can be frustrating
• tab order between websites is different. as designer you want to make your website different, but people with impairments asks themselves ‘why should all the sites had to be different??’

———–

voice recongnition soft users

• user often have poor expereince and are put off from using the web
• software is often laborious to use – users may only surf the web when they need to
• scrolling / long pages can be laborious – additional voice commands to scroll up and down
• forms are tricky and laborious to complete
• users can formget the software commands (use cheatsheets to help remember a few things)
• media players hard / impossible to navigate
• issues with javaScript / AJAX /Flash -doesn’t work with voice at all-
• many users can use a mouse but may very quickly experience pain

BT Vision

• voice recognition software commands not being picked up
• video is impossible to control
• lightbox not adapted for this user
• no podía controlar el vídeo, si no tenía mouse
• los enlaces de los tabs no funcionaban con los comandos de voz del sistema (click link, click, press tab…)

———

large text size users

• many users don’t know how to increase text size
• users may not know how to adjust browser options
• many users would benefit from screen magnification software but can’t afford it
• text resize is incosistent across websites – can be confusing for the user
• may miss content on the left hand side
• may develp posture problems / eye strain because of leaning into the screen
• poor colour contrast is also a big problem

BT Vision – text size and contrast

• text is too small
• too low contrast
• screen glare
• deep banner – causes lots of problems
• fake icons (pretending to be icons but are not clickable)

screen magnification users

many users rely on multiple browsing methods

• -altering the zoom level to get a feel for overall page layout
• -audio output for large blocks of text
• …

———-

Different impairments – similar issues

DEEP BANNERS

• screen maginifiacion software users may miss important content – it seems that has no content, that is just the deep banner
• large text size users – may miss important content
• voice recognition software – have to scroll to read the content
• learning disability – the screen is half full of meaningless information
• (in bt visions, users were losing the secondary level menu below the deep banner)

ICONS – CONFUSING AND OR UNLABELLED

voice recognition software – what do I say?

learning diab –

(pay per view films -like itunes store-: they don’t know how to use it)

changes on bt exchanges:

• decorative graphic on the background
• quick explanation about what the site is fore, what you can do on it
• icons with clicable text
• take out that left hand side that didn’t helped

new bt vision:

• make much more vision to the user on what is the content about