O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Week van de Toegankelijkheid VU Amsterdam poster slideshow

32 visualizações

Publicada em

Posters created by VU Amsterdam students, who carried out collaborative research with disabled people to investigate online accessibility.

Publicada em: Design
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Week van de Toegankelijkheid VU Amsterdam poster slideshow

  1. 1. Item 1 Item 2 Item 3 Item 4 Item 5 50 40 30 20 10 0 Item 1 20% Item 2 20% Item 3 20% Item 4 20% Item 5 20% Text alternatives to images Meaningful links Focus indicated Subtitles for video Double trouble online Use Short sentences instead of Long sentences. This makes it easier to read for those with ADHD and dyslexia because it gives them more overview. Babs van Es Vrije Universiteit Amsterdam, studentnumber: 2648449 make things more visual instead of lots of text add a voice recorder and an audio function. People with ADHD and dyslexia can get help by reading and can use voice recording for searching things Contrast Using the header structure Entry fields for form webcriteria (4) It may be helpful when a website is as clear as possible. People with ADHD and dyslexia can be distracted very easily when there are to many different colours, lettertype and pictures (1,2,3). ADHD and dyslexia
  2. 2. Literature 1. Blomert, L. Dyslexie in Nederland. Amsterdam: Uitgeverij Nieuwezijds; 2005. 2. Parnassia groep. ADHD. [Internet]. Available from: https://www.parnassiagroep.nl/uw-probleem/adhd. [Accessed on 28th of September]. 3. MIND. Symptomen ADHD. [Internet]. Available from: https://wijzijnmind.nl/psychische- klachten/psychipedia/adhd/symptomen-adhd. [Accessed on 28th of September]. 4. Iederin. Quickscan Toegankelijkheid gemeentewebsite. [internet]. Available from: https://weekvandetoegankelijkheid.nl/doe- mee/materialen/ [Accessed on 28th September]
  3. 3. Back- ground& TextWhite #ffffff BirdBlue #007ab9 Text Grey #333 Dark Blue: #005b9c ACloserLookattheVU’sWebAccessibility Introduction: JustastheneedJustastheneedtomakepublicbuildingsand structuresphysicallyaccessibletoallpeople.So shouldtheonlinelocationsofdifferentinstitutions andorganizationsbeaccessibletoo.TheVrije Universitat’swebsite(https://www.vu.nl/en/) receivedamorethoroughinvestigationto determinewhetherornotitmettheieder(in) standastandard("Materiaal|Weekvande Toegankelijkheid",2020). FirstImpressions: Decorative,friendlypicturesofstudentssettingthe toneforabrightandoptimisticexperience: Afeweasyto ndimportanticonsatthetopwith enoughspacetoclearlydiscerneachfunction: Ateverystagethereistheprintfunction,theemail pagefunctionandtheself-readfunction: Thestyleisconsistentandrepetitiveenoughtoget afeelingoneknowswhattoexpectoneverypage. TextsforMeaningfulImages: TotestwhetherornottheVUwebsite’simageswere accessibletothosewithlimitedeyesight,weneedto checkweathereverymeaningfulimagehasanequally meaningfuldescription(a.k.a.an“alt-text”). TTheVUsitehasalt-textsforMeaningfulImages,although somearenotextensivelyinformative.Tomakeupforthe lackthereof,theyhaveconvenientlyputthecontact detailsbeforeandGoogleMapslinkafter,likeinthiscase oftheRouteDescription. MeaningfulLinks: TTomakenavigatingtheVUsiteasconvenientaspossible, everylinkismademeaningfulthroughoutitsdifferent pagesbyconciseandaccuratedescriptions: SufficientContrast: Todeterminewhetherornottherewasenough contrastbetweenthetypefaceandbackgrounds Tanaguruwasused("TanaguruContrast-Finder", 2020). AAnythinglargerthan4.5meanstheVUsitehas enoughcontrast. TheVUsitescolorpallet: Results: TextGreyvsBackgroundWhite= 12.6 BirdBluevsTextWhite= 4.7 DarkBluevsTextWhite= 7.1 CConclusion: TheVU’swebsitehasdoneagoodjobinmaking itselfaccessibletoasmanypeopleasitcan. Functionsnotfoundorutilizedfromtheieder(in) toolboxwastheHeadingStructuresfunction, Adjustablecontrastandadjustabletextsizes. BadíF.Reitz StudentNumber: 2647823 07.10.2020 References: Materiaal|WeekvandeToegankelijkheid.Weekvandetoegankelijkheid.nl.(2020).Retrieved6 October2020,fromhttps://weekvandetoegankelijkheid.nl/doe-mee/materialen/. TanaguruContrast-Finder.Contrast-nder.tanaguru.com.(2020).Retrieved6October2020,from https://contrast-nder.tanaguru.com/result.html?foreground=%23ffffff&background=%23005b9c&r atio=4.5&isBackgroundTested=false&algo=Rgb.
  5. 5.  
  6. 6. MAKING THE WEB ACCESSIBLE FOR PEOPLE WITH DYSLEXIAB R I T T E D E K O C K ( 2 6 2 0 2 0 9 ) 60% 40% Comparing two barriers for dyslectic student Too small letters Too long sentences § Dyslexia is more common than we realize § . § Recommendations: text size botton and fold and unfold bottons Too small letters and too long sentences Text size botton Search function Icons that support text Fold and unfold subjects bottons Subject and directly the text below
  7. 7. alt="screenshot of the website of Meander Hospital"> alt="screenshot of the website of the belastingdienst"> alt="Happy dyslectic person"> alt="Sad dyslectic person"> alt="good"> alt="bad"> alt="Result of selfscan accessibility. The website scores 3/4"> alt="Result of selfscan accessibility. The website scores 0/4"> Online accessibility for people with dyslexia Don't use large amount of text Don't make use of light coloured text Don't use difficult language alt="VU logo"> Make use of white space Provide text-to-speech possibilities Sufficient contrast levels Chaimae Mahtour 2636348 Vrije Universiteit Amsterdam AIM: Add accessibility criteria to curricula of webdesign courses
  8. 8. Internet accessibility for people who are deaf Code quality Alternative use of text Readability Keyboard navigation Accessibility test: Zelfscan Toegankelijkheid 2020 1. 2. 3. 4. Use simple words Use short sentences Use symbols Clear lay-out Subtitles with video or audio Sign language in video Recommendations: (Based on literature review & collaborative research) A lot of information on the homepage Use of words Symbols Short titles Examples of the topic Results collaborative research: Barrieres: Facilitators: A collaborative research with a person who is deaf to understand the experiences using the internet better The homepage of the city website Chantal Leguijt - 2642835
  9. 9. Accessibility test: C O D E Q U A L I T Y A L T E R N A T I V E T E X T R E A D A B I L I T Y K E Y B O A R D N A V I G A T I O N Q U I C K S Q A N A C C E S S I B I L I T Y G E M E E N T E W E B S I T E Accessible Inaccessible A P P L Y F O C U S F O R M F I E L D S M E A N I N G F U L L L I N K S T A B - K E Y F U N C T I O N H E A D I N G S T R U C T U R E N O A P P L Y F O C U S A L O T O F M O U S E M O V E M E N T T I M E L I M I T I L L O G I C S T R U C T U R E None Results research Barriers ACCESSIBILE WEBDESIGN FOR: REUMATOID ARTHRITIS A collaborative research with a reumatoid arthritis patient to get a better insight in computer use Author: Charmain kemper, Minor Global Health 2020, VU Amsterdam Click function Text suggestion Facilitators:
  10. 10. l Picture Story Poster
  11. 11. Meet Ellen! Being blind does not stop her from using the Internet. It is important for people like Ellen to be able to use the Internet themselves to keep their indepence. Together, Ellen and I put the accessibility of some websites to the test! Navigating the Internet when blind ‘Guaranteed accessibility for all websites. Not just accessible for me, but for everyone with a disability.’ - Ellen Accessibility tests The websites were scored on code quality, alternative text, readability and keyboard navigation Eline van de Kamp (2715911) • No meaningful links and buttons • Images without alt text • Using ‘ ’, is not recognized by screen reader • Returning to homepage without home button Click here! Log in 2/4 Gemeente Hellendoorn 4/4 Belastingdienst Main barriers Main facilitators • A clear overview with headings, for navigation • Search bar can be found easily • Mentioned when link was visited before Main facilitators <alt> Create awareness Emphasize benefits Hope for the future
  12. 12. Online Accessibility for people with Mental Health Problems Barrier People can not adjust text size or contrast Facilitators - Clear links - Addressing different groups - Good communication - Lots of initiatives Barriers - No accessibility statement - Not much information on mental health problems Facilitators - Clear links - Area teams - Adjustable text size and contrast - Forms that ‘force’ people to get help 0 Different approaches can confuse people with mental health problems, while they are in need of clarity/help. More collaboration/unity could prevent confusion & increase online accessibility. From people working separately… … to people working together! Screenshot of the GGZ website showing that people can not adjust text size or contrast Screenshot of the GGZ website showing that many different groups are addressed Screenshot of the city government’s website showing that it has no accessibility statement Screenshot of the city government’s website showing that people can adjust text size and contrast Eline Zwaan – Key Strategies in Disability and Neuropathy – workgroup 2A – 07/10/2020
  13. 13.  
  14. 14. 17 Picture story poster
  15. 15. Testing Gemeente Amsterdam website with low vision Improvements Social barriers Easy to use The website already has good features, but there is still room for improvement to make the website more accessible for everyone! Conclusion Zoom in software Quik scan in general Expert with low vision Include more pictures of disabled people on non- disabled related sites • Simple reading level B2 • Accessibility statement: level AA • Focus and contrast adjustment • Keyboard navigation • Search bar • Bold fonts • Clear links • Clear structure • Zoom in software possible Improvements • Darker text color • Read aloud option • Shorter paragraphs • No moving pictures • Describing text under pictures •
  16. 16. Too much information at once Small text Tanaguru Contrast Finder score should be above 4.5 Contrast Too many different colours - 19 years old male - Dyslexia - ADHD - Highly skilled webuser Logo VU Amsterdam Logo ieder(in)Logo Week van de Toegankelijkheid Screenshot of a website with a lot of information Improvement: expandable boxes Screenshot of a website that used expandable boxes Drawing of a boy that has an idea Screenshot of the moving form of the Gemeente Amersfoort with a small font Bad example of contrast: Tanaguru Contrast Finder score of 3.7 Good example of contrast Tanaguru Contrast Finder score of 21 Screenshot of a bad contrast: two shades of blue that are closely linked Screenshot of a good contrast: a white background with black text Screenshot of Yale School of Art, containing a lot of different colours and a busy background Barriers for web-accessibility for a highly skilled webuser with dyslexia and ADHD Drawing of a confused boy Screenshot of a website with a bigger font Made by: Freeke Homminga Course: Key Strategies in Disability and Neuropathy In colaboration with Ieder(in) Dutch Accessibility Week
  17. 17. Author: Heidi Talib, 2613655 Minor Biomedical and Health Interventions Vrije Universiteit Amsterdam Accessible webdesign for people with an intellectual impairment Barriers Accessible Accessible language Too many categories to choose from without contrast, causing confusion when navigating Easy to navigate with the help of pictures Not too much click throughs and direct reference for quick navigating Unusual words that are difficult to understand Long pieces of text without enough headings and blank space
  18. 18. Difficult words Well-ordered tabs Let's read! Web Accessibility Dyslexia Where can I find my info? Good costumer service Very much, small letters Where does the sentence continue? Accessible language IssuesUseful Chat with us! Ian Ligthart 07-10-2020 Principeverzoek Taxatieverslag Ambulant Results Zelfscan Accessibility Gemeente Medemblik Rijks- overheid DigID Space between lines, big letters Compact text, small letters ALT text Only symbols Well-ordered overview Chaotic layout Do's & Don'ts
  19. 19.  
  20. 20.  
  21. 21. Pubmed is not a good website. They lack customization options and a clear lay out How to help people with dyslexia acces the internet Choose your own text and background color Add a text to speech option to listen instead of read Use easy to understand words Use a clear and easy to use lay out Problems on the internet Text being too small Poor color selection Difficult text Confusing lay-out Recommendations dyslexia and web accessibility This is a good part of the website. There is a difference in colour and a clear goal. Mijnoverheid has a clear lay-out. They however lack customization options Joost de Haan
  22. 22.  
  23. 23.     Assessment of accessibility of VU sport centrum website  Link: https://sportcentrumvu.nl/  Kick Slooff 2465462   For who is this website meant?  This site is created for every person who  has some sort of the relationship with the  VU sport centrum. This is mostly  constituted of students.  12 to 15 percent of the total student  population has a disability. Most common  disabilities are:   Difficulties with movement (9‐ 12%),    Psychological disorders (5‐6%)    Dyslexia (2‐3%).   As a result, the website should be easy to  read and should have as little distractions  as possible.  First impression   Bit chaotic on first glance   Banner changes to itself every 2  seconds which is distracting   Lack of headers    Good use of color and lively   Clear links and hyperlinks  Deeper in website  When you press further on the site you get  more information on certain sports and  facilities certain things catch attention:   Bad contrast; grey text on white  background   Clear text however bit too much and  could be more concise   Some irrelevant banners (newsletter)   “Read more” button refers to same  page    Web accessibility tests   Alternative text and subtitles are  not available because there are no  videos   Links are well indicated and have  concise message   Focus is working   Contrast on homepage is fine, on  other pages it is lacking   No header structures   Contact sheet has logical structure  and is labeled. Moreover produces  pop‐up   Above  example of a  link and left  the contact  sheet when  an error  occurred.  Overall assessment, recommendations and conclusion  The website overall is quite accessible. However, some minor  changes could be made to improve it. Therefore, the following  recommendations are proposed:   Use header structure   Use contrast on specific pages   Make text concise and with clear goal   Make sure links and widgets are functional  Example of low  contrast text deeper in  website on the right 
  24. 24. Using heading structure Automatic accessibility test The website does not support navigation of headers using a keyboard Overall results indicate good accessibility of the website and generally agree with a manual check The website allows using the Tab key. It can be seen as framing of different components of the website The text level on the website was indicated as C1, which is a very high level. It can be hard to understand. Meaningful links Applying focus The main link to the website is meaningful. The website itself is filled with examples of bad links Text complexity level Accessibility fascilitator A screen reader is enabled on each page Accessibility fascilitator Toned down colors Contrast check has shown that the main texts which are written in black have sufficient contrast. Texts written in blue have insufficient contrast with their background Sufficient contrast The website only has decorative images, so no alternative text is needed Accessibility test of VU website Text alternative to pictures Tested website: https://www.rechten.vu.nl/nl/ Made by: Kirill Vlaskov Major accessibility barriers Lack of simple navigation Lack of text modification option Lack of keyboard navigation feature
  25. 25. “If a person with dyslexia designed the website, it would probably be accessible for everyone!” Observations on the accessibility of various websites Ziggo Gemeente Amsterdam My recommendations for designing a website: ❑ Font size should be at least 12-14 ❑ Always use bold for emphasis ❑ Add extra space between headings and text ❑ Single colour backgrounds. Never intense or dark colours! ❑ Be direct and try to use bullet points ❑ Use images to support the text ❑ Make an option to enlarge letters ❑ Use limited buttons in a menu Avans hogeschool Breda Dutch Accessibility Week: web accessibility Laura Samson 07/10/2020 Images Colourful button Too many buttons Difficult language Small letters “Everyone has equal rights to participate, navigate and interact with the internet.” Logical menu Colourful button Colour contrast Small letters Logical menu Chaotic layout Colour contrast Too much colour Many different font sizes Results of iederi(in)’s ‘7 criteria checklist’ for a lot of websites: Alt-text for images Meaningful links and focus indication Subtitles for video’s Colour contrast Use of header structure “If I see too many buttons, I instantly look for the search engine.” References Avans hogeschool Breda. Accessed from: https://www.avans.nl/ Gemeente Amsterdam. Accessed from: https://www.amsterdam.nl/ Ieder(in). Accessibility tests. Accessed from: https://weekvandetoegankelijkheid.nl/doe-mee/materialen/ Ziggo. Accessed from: https://www.ziggo.nl/
  26. 26. Web Accessibility of the VU-website 1. Add button for reading function 2. Add button for change of font size 3. Change the blue text color 4. Clearify the focus 5. Make the keyboard navigation better 1. Tekst alternative 7 important web criteria: Recommendations Automatic test tool AAAA 2. Meaningfull links 3. Focus 4. Video subtitles 5. Contrast 6. Headings 7. Forms 2. Meaningful links Reading level Self scan accessibility Sometimes only “www.vu.nl” Not clear enough Example webpage Lieke Steendam, 2622507 5. Contrast Good usage of headings Fixed position of home bar Overall Not possible to jump from heading to heading 1. Text alternative
  27. 27.  
  28. 28. A picture story about the accessibility of Vunet Section: ‘Bachelor Aardwetenschappen’ By: Manon Schraven (2646558) First  impression: clear & calm Not possible  to change  contrast and  font style Meaningful  link text  available Navigate  with the tab  key See which  element  currently  has focus Valid  contrast is  11.04 The chosen  colours are  good Headings  are  structured,  but cannot  be used  with the  keyboard Results ‘Zelfscan  toegankelijkheid’ Code quality Alt tags Readability Keyboard  navigation Forms: Error  message mistake Alternative  text is  present
  29. 29.   Digital Accessibility  For people with ADHD, the inattentive type By Marlou Groot Accessibility • Web accessibility is a human right  (UNCRPD). • Enables full participation to people with a disability • All government websites have to meet accessibility requirements by September 2020 Accessibility is for everyone ADHD means chaos in thinking Disability • Collective term for impairments,  activity limitations and  participation restrictions  • Interaction between people with  health conditions and  environmental factors The social model of disability ADHD • Two types: inattentive and hyperactive. • Focus is on the inattentive type • Symptoms: being forgetful, losing  stuff, easily distracted and being  unable to stick to and organize tasks Our findings Screenshot of ‘Belastingdienst’ website Screenshot of ‘Mijn.toeslagen.nl’ website What we liked:  • Enough color contrast • Clear top and bottom menu with links • Symbols used for ‘important topics’ • Quiet designs • Accessibility statements easy to find Green check What we did not like: • No option to make font size bigger • Only pictures of ‘non‐disabled’  people • Sites do not yet meet requirements Red ’X’ Introduction Pictures of ‘non‐disabled’ people from belastingdienst website  Conclusion: • The websites need some small adaptions • More inclusion of disabled people in pictures • Option to change font size • Overall the websites have an accessible design
  30. 30.  
  31. 31.  
  32. 32. Online accessibility visual disability Nadien Al-Rubaie Background retina pigmentosa Degeneration of rod and cone photoreceptors. Worldwide prevalence: 1 million. Symptoms: low vision, night- blindness, tunnel vision and loss of central vision. Methods online accessibility Testing online accessibility: o with research partner o with self scan o manually Using these websites: www.edam-volendam.nl www.inholland.nl Results self scan accessibility Code-quality Alternative text Legibility Keyboard navigation Edam-Volendam Inholland Results of manually test Municipality has a great score of 97,7% accessible. Recommendations More awareness More policy guidelines Results research partner Barriers No access to images Facilitators Voice-over Screen reader Braille laptop
  33. 33. Online accessibility visual disability Nadien Al-Rubaie Background retina pigmentosa Degeneration of rod and cone photoreceptors. Worldwide prevalence: 1 million. Symptoms: low vision, night- blindness, tunnel vision and loss of central vision. Methods online accessibility Testing online accessibility: o with research partner o with self scan o manually Using these websites: www.edam-volendam.nl www.inholland.nl Results self scan accessibility Code-quality Alternative text Legibility Keyboard navigation Edam-Volendam Inholland Results of manually test Municipality has a great score of 97,7% accessible. Recommendations More awareness More policy guidelines Results research partner Barriers No access to images Facilitators Voice-over Screen reader Braille laptop
  34. 34. Do! Don’t! Good colour contrast Use a high resolution for zooming Use autocorrect or ‘did you mean…’ Don’t use difficult language Enough space between pieces of text Use a small text size 3 out of 4 ’zelfscan toegankelijkheid’ Reading level B2 Web accessibility for dyslexics Author: Niek Wijnen
  35. 35.  
  36. 36. HTMLcode quality Alternativetext Readability ZilverenKruis=B1 GemeenteAmstelveen& Rijksoverheid=B2 Barriers Defectfoundinclick-throughlink UseofBoldtext=intense Notabletomodifycontrast Alternativecontactpossibilitynotavailable(only phone) Whitelettersonpinkbackground=very disturbing General: GemeenteAmstelveen: Rijksoverheid: Doublevision Difficulty tofocus Headaches Weariness Concentrationproblems Difficultiesexperiencedafterreadingandconcentrating foralongperiodoftime: Facilitators Because of COVID-19 our online world is growing, which makes web accessibility an urgent issue. The visual aspect of accessibility must not be neglected. Increasecontrastinwebaccessibility, decreasecontrastinsociety Descriptivelinks Usefulsearchfunction Clearandstructuredhomepages Calmcolours Alotofusefulfunctionsavailable Adaptfontsize&contrast Speechtext Translatetext General: ZilverenKruis: Online participation = as important as physical participation Automatic accessibility self scan GemeenteAmstelveen Rijksoverheid Researches websites: Accessible reading level: Disability: convergence spasm Subjective results BY NINA VAN LEEUWEN COMMISSIONED BY IEDER(IN)/ VRIJE UNIVERSITEIT AMSTERDAM - 07/10/2020 Accesstovoiceover HomepageofRijksoverheid: Image:girlon laptop
  37. 37. Web accessibility for anxiety issues DUO ANXIETY Barriers Facilitators "I can't click on the link" OV Chipcard is missing "The website has a clear overview." Simple and understandable language Where do i login? No Customer service? No contrast Made by: Noor ten Have Student VU Amsterdam
  38. 38. Web accessibility      The internet is for everybody    By: Paul Groen                                            Clear menu  Search bar  No pull‐down menu  Clear corona menu  Loss of muscle mass and function  so the access barriers are all  physical barriers  National Institute for Health and Environment (RIVM)  Institute for Employee Insurance (UWV)  ‐ Duchenne muscular  dystrophy  ‐ Male  ‐ 30 years old  ‐ Highly skilled in finding  information online   How accessible is the Internet?  Too many forms  Forms were  hidden at  the bottom  of the site  Login is easy  with DigiD,  code by text  Tools that improve accessibility  Online keyboard  Computer controlled by eye movement  Dragon speechsoftware 
  39. 39. Dyslexia Typical symptoms Difficulty reading, including reading aloud Slow and labor-intensive reading and writing Problem spelling Avoiding activities that involve reading Mispronouncing names or words Problems retrieving words MijnOverheid.nl Coping Word using the read button Online read button Read programme Kurzweil Pros: Images and coloured boxes Cons: Lot of text without visual structure  Lack of read buttons Bold and coloured words Images Using a marker Not too much text Laptop Goos Last 2618037 Zooming in
  40. 40. Higher online accessibility for users with low vision Clear headings &  usage of  applications Text with high colour  contrast and written  in bold font Build in chat‐ function to help  with problems Easy to spot  search‐function Using a lot of text When zoomed in,  having a big toolbar Ad’s that don’t  adjust when  zoomed‐in Giving the  preferred action  not a contrasting  colour by Pieter Voskens
  41. 41. DO… DON’T… Increasing web accessibility of Facebook for people with Cerebral Palsy Use icons that are clearly associated with their function Use larger icons so it is easier to click on them Ensure a design supporting tab key or speech navigation Provide a ‘back to top’ button Do not just use text but use supporting icons or images Avoid the use of moving elements because they are more difficult to click on Avoid the need for many clicks to get somewhere Rieneke Prins Do not change the website layout very often
  42. 42.  
  43. 43.  
  44. 44.  
  45. 45.  
  46. 46. What is dyslexia ? Websites of universities should be accessible to every student Thipa Kanagasabapathy (2590328) --------------------- What you should / should not do • Use bullet points • Large font size • Relevant images • Long sentences • Small font size • Irrelevant images - - - - - - - - - - - - - - - - - - - - - - - - - - Municipality Zoetermeer Code quality Alternative text Readability Keyboard navigation Code quality Alternative text Readability Keyboard navigation University of Maastricht ‘’Dyslexia is not due to a lack of intelligence, it’s a lack of access. It’s like, if you’re dyslectic, you have all the information you need, but find it harder to process.’’ – Orlando Bloom, an actor with dyslexia References: • https://www.zoetermeer.nl/ • https://www.maastrichtuniversity.nl/nl • https://zelfscantoegankelijkheid.thuiswi nkel.org/
  47. 47.  
  48. 48. Author: Anne Ruth Bakker | 2605521 | Minor Global Healt, VU Amsterdam Complex & unstructered webcontent not providing overview Unclear labeling of buttons Accessible webdesign for: Autism Inaccessible Clear & structured webcontent providing overview Simple colours and no blinking, flashing or other distracting content Accessible Meaningful labeling of buttons Recommendations on webdesign that helps to include autistics in the online world - based on experience of an experience expert & universal WCAG guidelines Implement enough blank space for quiet design Simple, clear language supplemented by meaningful images Short sentences and bullet points Difficult language, use of jargons, sayings & abbreviations. Long sentences & big blocks of text Full pages without enough blank space Click here! Distractive/flashing elements and use of bold colours Inaccessible websites easily overstimulates autistics. This can cause stress, anxiety & frustration. Inclusive and accessible design allows all people, including autistics, to access and make optimal use of apps & websites. Basisberoepsgericht Kadergericht Gemengde leerweg Theoretische leerweg
  50. 50. People without a disability 86.4% People with a disability 13.6% Cognitive D isabilities PhysicalD isabilities Speech D isabilitiesVisualD isabilities Auditory D isabilities 10 7.5 5 2.5 0 Website Accessibility #makewebsitesaccessible Diversity of abilities, by W3 Web Accessibility Initiative (WAI)** Cognitive Disabilities Physical Disabilities Speech Disabilities Visual Disabilities Auditory Disabilities At VU School of Business and Economics General Info Common barriers to website accessibility** People with disabilities in the Netherlands, 2012 13.6% with a disability 86.4% without a disability Audio content without captions for individuals with auditory disabilities Complex navigation mechanisms and layouts for individuals with cognitive disabilities Websites that do not provide full keyboard support for individuals with physical disabilities Websites offering phone numbers as only way to communicate for individuals with speech disabilities Images without text alternatives and sufficient contrast between for-and background for individuals with visual disabilities 2009 2014 100% 75% 50% 25% 0% Mobile screen reader usage has increased from 12% in 2009 to 82% in 2014* *https://webaim.org/projects/screenread ersurvey5/ **https://www.w3.org/WAI/people-use- web/abilities-barriers/
  51. 51. Facilitators The majority of the website has sufficient contrast Links are (mostly) meaningful Clear focus is applied to a selected website area Head Structure should be used more effectively for the screen reader. Without the need of 'clicking' a few times to arrive at general information, this makes it quicker and less stressful to navigate through the website. The SiteMap should be used at the top (instead at the bottom) of the website for a better website overview with a Screen Reader. VU website observations Screenshot showing the most searched aspects on the VU website include master's programmes, admission and application, as well as bachelor programmes Screenshot of the website, showing insufficient contrast at the bottom fields of the website The SiteMap of the VU School of Business and Economics website shows the layout of the whole website. This can be used for a screen reader on top of a website for an individual to get a general overview. Meaningful links are guiding the website user to the application to different programs clearly Made by Niklas Frieler, VU Amsterdam for the course of 'Key Strategies in Disability and Neuropathy' Recommendations Add the option for the user to manually change the contrast for more diverse usage of the website (see https://www.dcdd.nl/ as an example) Accentuating focus in higher contrast colours and changing focus box colour according to background will make the focus more clear