SlideShare une entreprise Scribd logo
1  sur  12
Access Accessibility Design Guide
1 Introduction
As technologytouchesmore andmore lives, we riskexcludingmillionsof peopleunintentionallythroughour
designchoices.Worldwide, more thanabillionpeople have adisability. Asdevelopers,we mustdesignsolutions
that allowall users,regardlessof theircapabilities,touse ourproducts.DesigningaccessibleAccessapplications
has sometimesbeenchallenging becauseof alack of guidance andeducationmaterial available.Thisdocument
seekstoprovide guidance thatwill help youcreate Access databases thatare usable to everyone.
Here are some keyprinciplestokeepinmindwhendesigning Accessapplications foreveryone:
 Informationshould be communicated throughmultiple channels,not justvisually
 Keyboardingisthe onlyinteractionthatmanyuserswill be able touse
 Minimize keystrokestoaccomplish scenario-critical tasks
 Use more than justcoloras a meansof communicating information
1.1 Content
 2) UI flow
o 2.1) Header, detail, footersections
 3) Navigation
o 3.1) Settingtaborder forcontrols
o 3.2) Using the F6 keyboardshortcutfornavigation
 4) Controls
o 4.1) Labelsassociatedwiththeircontrols
o 4.2) Captions
 5) Colors
o 5.1) High contrastmode
o 5.2) Luminosityratio
 6) Testingchecklist
 7) Walkthrough of a user scenario
2 UI flow
Whenyou begindesigninganAccess application,take some time tothinkaboutthe flow of auser’sexperience.
Users needinformationthathelpsthemunderstandthe purpose of the current database objectthey’reworking
withat that moment.Commandbuttons ona form,forexample, thattake formlevel actions suchas navigation
and printingneedtobe discoverable immediately. Fromuserstudies,we findthata user’sfocuswill naturally
start at the topof the formand thenscan down.Because of thisuserbehavior,inmostcases we recommend
that youput informationaboutthe formandcommandbuttonsat the top.
Below formlevel actions,we recommendthat youlimitactionsthatthe usercan take to the currentform.This
iswhere youshouldputyour maincontrols anddetail information.
At the bottomof formsandreports,we recommendyouput summarizations thatare relevanttothe database
afterthe user isfinishedwiththe details.Onareport, for example,add controlsthatdisplayaggregationsor
calculations atthe bottombecause thisisinformationrelevantafterthe userhasseenthe individual record
details.
Rememberthatthese are guidelinesandnothard andfast rulestothe designof yourformsand reports.Every
Accessapplication isdifferentso designtheminaway thatprovidesthe bestlogical flow of information.Ask
yourself,whatinformationwouldyoulike toknow first andwhatinformationisrelevant next?
2.1 Header, detail, footer sections
In thissection, we provide anexample of userinterface flow usingthe StudentsDatabase templateinAccess
2016. Indesign view,you’ll see header,detail,andfootersectionsthathelppartition the formintosections like
whatwe describedearlier.
Figure 1: Student list form shown in design view. The form’s header, detail, and footer sections are visible.
Header: Inthis example,the headersectionof the formcontainsthe title of the form,formlevel navigation,
searchingandfilteringcontrols,andinformationonhow touse the form(questionmarkicon).Thisinformation
isthe mostrelevantandshouldtherefore appearatthe top of the form.The headersectionisthe firstsection
that a userseesso putimportantinformationausermustknow to use the form here.We recommendthat the
formheadersection contains:
 Title of the form
 Form or application level navigation
 Searchingandfiltering options
 Instructionsandhelpinformation
Detail: Inthisexample,the detailsectionof this formcontainsthe fields andcontrols thatdisplay the datafor
each recordinthe form’sdatasource.The details sectioncomesafterauserunderstands the general purpose of
the form byreviewingthe controlsinthe form headersection.Usersof the applicationnow know this iswhere
theyneedtotake actions on data. We recommend thatthe detail sectioncontains:
 Relevantinformationandactionstothe current form
 Controlsthatdisplaydatafrom the form’srecordsource
Footer: Inthisexample,the footersection of thisformisn’tused.Thissection isthe lastsectionthata user
interactswithastheyuse the form.We recommendthatthe footersection contains:
 Informationthatismeaningfulafterthe userhasbrowsedthe previoustwosections suchas calculated
fieldsin formsand reports
 Controlsthatallowusersto move todifferentrecordsif applicable
 If needed,supplementalinformation thatisnotappropriate inthe headersectionsuchasdeveloper
contact informationortermsandconditionsinformation
3 Navigation
Since we are designingwithaccessibilityinmind,we needtounderstandthatnoteveryone canuse the mouse
and see the screen. Keyboardingisthe onlymethodof interactionthat manypeople canuse.Thissectionof the
guide will gooverhowto designyourdatabase applications toprovide amore navigable experience usingthe
keyboardalone.
3.1Setting tab order for controls
Tabbingisthe primarymethodof navigationforauserthat reliesuponthe keyboard.Thismeansthat
configuringthe taborderof your formsis one of the most important tasksinmakingyourAccess databases
accessible.
Figure 2: Tab order command on the Access Design ribbon tab
Here is an example of aconfiguredtaborderusingthe StudentListformof the Student’s database template:
Figure 3: Students list form with its tab order set for the Form Header section
In figure 3, you can see that the Welcome command button(the buttonwiththe questionmarkcaption) isthe
firstcommandinthe tab order. We set the Welcome commandbuttonfirstinthe tab order so that users can
quickly goback to the formthat providesinstructionsonhow to use the form.The nextitemsinthe tab order
are the command buttoncontrols that are shown inlefttorightorder as theyappearat the top of the form.This
isonlyan example,andyourapplications willhave theirownuniquetaborderdependingonthe mostlogical
userexperience.
Here are some concepts to keepinmindwhenconfiguringthe taborder foryour forms:
 Minimize the numberof tabsbyplacingthe most usedcommandsnearthe top of the tab order.
 Setthe taborder of your controlssothey follow aconsistentpatternwithrespecttothe UI and not
jumparound in a somewhatrandomorder.Userswithlow vision see onlyasmall,magnifiedsectionof
the form at a time whichmeanstheycan’tsee formelements outside the magnifiedarea.
 Testout the tab order of your controls afteryouare done designing yourformsincase the ordermight
have changedsince you lastmade form modifications.
 Ensure that unimportantelementsare atthe bottomof the tab orderto deprioritize themappearingto
users.
Witha properlyconfiguredtaborder forform controls,users,regardlessof theircapability,will have abetter
experience navigatingthroughyour application.
3.2Using the F6 keyboard shortcut for navigation
Accessprovidesakeyboardshortcut,F6,useful for navigatingthrough the differentregions of the Access
interface.Inthe nextfigure,youcansee whatpatternAccessfollowswhenyoucontinuallypressF6.
 Ribbon
 Headerof the active
form(if it exists)
 Detail of the active form
(if itexists)
 Footerof the active form
(if itexists)
 Navigation pane
 View switcher
 Ribbonandrepeat
Note that if anysub form
controls existinthe
sectionsof the form,
pressingF6puts the focus
intothe sub formand thenfocusmoves throughitssectionsbefore movingontothe nextsection inthe parent
section.
Usingthe F6 keyboardshortcut provides aquick wayto navigate betweenthe differentregions of the Access
interface anddatabase objects. Usingthisnavigationtechnique furtheremphasizesthe needtoappropriately
place informationthatisrelevanttoeach areaof the application asdetailedin Section2.1of thisdocument.
4 Controls
Accessibilityfeaturesare already includedinthe controlsof Access. Insome cases,you’ll needtomake minor
configurations toyourcontrolsindesignview forthemtowork well forusers of assistive technologies. For
controls, we recommendthe following guidelines:
 Associate controlswithanappropriate label
 Provide anappropriate captionforcontrols thatdon’thave an associated label
4.1Associate labels with their respective controls
Appropriate labelsforthe variouscontrolsdisplayingdataonyour formsand reportsare needed tounderstand
the value of data controlssuch as textboxes. Notall userscansee the labelsnexttothe controlsinthe forms
and reportsusingtheirassistivetechnologies.Forformsand reports,justprovidingthe datafieldvalue,usually
shownin a textbox, isnot enough. Youshouldideally providealabel withfield controls displayingdataand
associate themtocreate a complete experienceforyourapplicationusers.
If you are creatingcontrolsforfields inyourformor reportrecordsource usingthe providedwizards, Access
shouldcreate appropriate labelsforeachof your fieldcontrols.However,through additional editsand
adjustments youmightmake whilecompletingyourformandreportdesign,youmightlose the label association
betweentwocontrols accidentally.If you needtomanually associate alabel toacontrol,follow these steps:
1) Openthe propertypane
2) Selectthe control youneedtoassociate a label with
3) Findthe label name property
Figure 4: Pressing F6 navigates users through different areas of the Access interface
4) Type in the name of the label
Figure 5: Property pane with label name property
Whenlabelsare associatedproperly,assistive technologieswill provide the information inthe label tousers
whenthose controls have focus. Forexample,if youuse ascreenreaderandyourfocus ison a textbox,the
screenreadernarratesout the associatedlabel firstandthenitnarrateswhateveristypedinto the textbox. If
youhave no associatedlabel, the screenreaderonlyreadsoutthe value inthe textbox.
4.2Captions
For elementswhere youwantto control whatis communicatedtothe useror elementswhere alabel isn’t
appropriate,youcanuse the Captionpropertyof a control to provide informationtothe assistivetechnologies
to be communicatedtothe user. For example, if youhave apicture inyour form,thenyou will wanttoprovide
an alt-textdescriptioninthe Captionproperty.
Textinthe StatusBar Text property of controlsare not accessiblysupportedin Access.Asaworkaround to this
limitation,considerputtingthattextinthe Captionproperty orintoan associated label.
5 Colors
Whenit comesto usingcolorsinyour Accessapplications,the keyprinciple torememberforuserswithcolor-
blindness isthattheycannotperceive the differencesbetweensome combinationsof colors. Youdon’tneedto
remove all colorsinthe designof yourAccessdatabase objects,butyoudo needtokeepcolorsensitivityin
mindwhencreatingyourAccessformsand reports.Youshould make sure that colorsare notthe onlymethod
of conveyingimportantinformation tothe applicationusers.Forexample, use colorplusshapesorcolorplus
textto conveyinformation.Use ared cross anda greencheckmark,for example, todistinguishthe difference
betweenanegative andapositive status.Inthisexample,you’re combiningcolorswithshapeswhichmakes the
visual elementsmore accessible.
As youdesignyourAccessdatabase objects,youmightfind situationswhere you’ll have coloredtext orother
elementsonabackgroundof anothercolor.Thisscenariomightmake it difficultforuserswhohave color-
blindnessorlowvisiondisabilitiestoperceive the variousobjectelements.Computeroperatingsystems provide
a highcontrast mode,and in the followingsections, we’ll provideresourcestochoose operatingsystem settings
that are mostperceivableforall users.
5.1High contrast mode
Operatingsystemsprovide ahighcontrastmode whichrepaintsthe userinterface withcolorsthatcanbe better
perceivedbyeveryone.
Figure 6: Windows 10 high contrast settings
In figure 5, you can see that Windows10 providesahighcontrast settingspage which allowsuserstoselect
differentthemes. Whenyou selectone of the highcontrastthemes,Windowsautomaticallyrepaintsall the
Windowsandapplicationuserinterfaces withthe specifiedcolorsinthe theme. AsanAccessapplication
developer,youshould verifythatyourAccessdatabase objectscanstill be functional andthatyoudon’thave
missingcolors.If yousee colors inyourdatabase objects,notspecifiedinthe highcontrasttheme,showingup
afterturningon highcontrastsettings,please postthis informationinthe Microsoftaccessibilityforum.
5.2Contrast ratio
Whenchoosingcolors foryour database objectssuchas formsand reports,make sure thatthe contrastratio
betweenthe control andobject elementsandthe backgroundcolorisat least4.5:1. You can check yourcolor
contrast ratio by downloadingafree tool called ColorContrastAnalyzerbythe PacielloGroup orby usinga color
contrast checkeronthe web suchas WebAIMContrast Checker.Byensuringthatthe colorcontrast ratioof the
foregroundandbackground colorsare at least4.5:1, you can be confidentthatusers of your Accessapplication
can perceive the textorelementsyoudesigned.
6 Recap of testing
Here is a quickchecklistof all the thingsmentionedinthisaccessibilitydesignguidethatyoucan use for quick
reference withyourAccessapplications.If youcheck andtest yourapplicationsusingthislist, thenyoushould
be on your wayto creatingan Accessapplication thatisusable byall.
 Thinkaboutthe flowof a user’sexperience
o Place importantinformationandcommandbuttonsatthe top – headersection
o Place formor report relevantinformationatthe middle –detailssection
o Place summarizationand overall information atthe bottom– footersection
 Checkyour configured control taborder
o Verify thatthe tab orderfor controlsfollowsalogical flow throughthe database object
o Verify thatcommandsthatare usedthe mostare at the top
 Check your controls forappropriate labels
o Verifythere are noorphanedlabels
 Check your control captions
o Verifyif captionsare needed
o Verifythatcaptionsare definedif youdon’tuse control labels
 Checkif any informationiscommunicatedusingcoloronly
o Verifythatyou’re notusingcoloronlyto distinguish application information
 Checkif highcontrast settingsimpactyourapplication
o Verifythatonly colorsinthe highcontrast theme appear inyourapplication
 Check your colorcontrast ratio
o Verifythe contrastratioisat least4.5:1
o Use WebAIMresources orColorContrast Analyzerbythe PacielloGroup
7 Walkthrough of a user scenario
7.1Introduction
Thiswalkthroughaimstoshowwhat a userwithdisabilitieswouldexperience whenusinganAccess database
that has beendesignedwithaccessibilityinmind. Thiswalkthroughwill use aseriesof screenshotswith
explanations fromthe Studentsdatabase template.
7.2Legend
Visionimpaireduserswill use assistivetechnologiestonarrate outwhatUI elementcurrentlyhasfocus.The
headphones iconwillbe usedtodenote whatuserswill hear.
Thisblue outline will highlightwhatthe user of the applicationis focusedoninthe database.
These iconsdenote whatkeysuserswill presstonavigate aroundinthe database.
7.3Walkthrough
Figure 7: The New Student button is where the user is focusing on in the Student List form
In the openingform of thisdatabase,we canconfidentlyuse the F6keyboardshortcut tonavigate tothe header
of the form.We have designedthisformtoinclude the commandbuttonsinthe headersection.The focusison
the firstcommandbutton“NewStudent” andthe screenreadercorrespondinglyreadsitout.Now let’s press
Enter.
Figure 8: Student details form for a new student
F6
“New student”
Enter
“General tab
item”
Afteropeningthe “StudentDetails”form, the focusisputintothe “General”tab item.Access tabcaptions are
recognizedbythe assistive technologyand theyare narratedoutappropriatelytoprovide uswithmore
informationonthe UI that we have focuson inthe form.
Figure 9: Filling out the form
By pressingthe Tabkeyagain,we can navigate tothe textboxes onthe form.The screenreadernarratesoutthe
label firsttoprovide contextforourtextbox. Afterfillingitin,italsoreadsoutthe currentvalue.
Tab
“Last name,
Chan”
Afterwe finishenteringall the neededinformationaboutthe studentinthe detail form,we canuse the F6
keyboardshortcut to go backto the headersection andthenuse the Tab key to getto the commandbutton
labeledClose. Atthispoint, the screenreadernarratesoutthe name of the control “Close”and thatit is a
button.PressingEnteractivatesthe commandbuttonwhich closesthisformandsavesthe student. Note that
we couldhave usedthe Tab keyto move to the Save and New commandbuttonif we wantedtostart creating
anotherstudentrecord.
Figure 10: Saving and exiting the form
Tab
“Close
button”
F6
Enter
Figure 11: Student list form with the newly added student details
We are back to the studentlistformandwe see the newlyaddedstudent’sinformationinthe firstrecordinthe
datasheet.

Contenu connexe

Similaire à Access design guide for accessibility

Discussion postArchitectural Styles Please respond to the fo.docx
Discussion postArchitectural Styles Please respond to the fo.docxDiscussion postArchitectural Styles Please respond to the fo.docx
Discussion postArchitectural Styles Please respond to the fo.docx
madlynplamondon
 
PRESS MANAGEMENT Documentation
PRESS MANAGEMENT DocumentationPRESS MANAGEMENT Documentation
PRESS MANAGEMENT Documentation
anuj_rakheja
 
Usability Test Overview
Usability Test OverviewUsability Test Overview
Usability Test Overview
Ariadne Rooney
 
PURPOSE of the project is Williams Specialty Company (WSC) reque.docx
PURPOSE of the project is Williams Specialty Company (WSC) reque.docxPURPOSE of the project is Williams Specialty Company (WSC) reque.docx
PURPOSE of the project is Williams Specialty Company (WSC) reque.docx
amrit47
 

Similaire à Access design guide for accessibility (20)

User Interface Design
User Interface DesignUser Interface Design
User Interface Design
 
SECh1516
SECh1516SECh1516
SECh1516
 
Discussion postArchitectural Styles Please respond to the fo.docx
Discussion postArchitectural Styles Please respond to the fo.docxDiscussion postArchitectural Styles Please respond to the fo.docx
Discussion postArchitectural Styles Please respond to the fo.docx
 
Sap consultancy 1
Sap consultancy 1Sap consultancy 1
Sap consultancy 1
 
Software Documentation "writing to guide- procedures"
Software Documentation "writing to guide- procedures"Software Documentation "writing to guide- procedures"
Software Documentation "writing to guide- procedures"
 
Designing With User In Mind
Designing With User In MindDesigning With User In Mind
Designing With User In Mind
 
Lesson 3 Introduction to Human Computer Interaction.pptx
Lesson 3 Introduction to Human Computer Interaction.pptxLesson 3 Introduction to Human Computer Interaction.pptx
Lesson 3 Introduction to Human Computer Interaction.pptx
 
POLITEKNIK MALAYSIA
POLITEKNIK MALAYSIAPOLITEKNIK MALAYSIA
POLITEKNIK MALAYSIA
 
A Comprehensive Guideline for Designing Most Efficient Web Forms: On Structur...
A Comprehensive Guideline for Designing Most Efficient Web Forms: On Structur...A Comprehensive Guideline for Designing Most Efficient Web Forms: On Structur...
A Comprehensive Guideline for Designing Most Efficient Web Forms: On Structur...
 
Découverte d'Einstein Analytics (Tableau CRM)
Découverte d'Einstein Analytics (Tableau CRM)Découverte d'Einstein Analytics (Tableau CRM)
Découverte d'Einstein Analytics (Tableau CRM)
 
AppBar Class In Flutter.pptx
AppBar Class In Flutter.pptxAppBar Class In Flutter.pptx
AppBar Class In Flutter.pptx
 
Usability Heuristics
Usability HeuristicsUsability Heuristics
Usability Heuristics
 
Mvp pattern
Mvp patternMvp pattern
Mvp pattern
 
Scopic UX Design Test Task.pdf
Scopic UX Design Test Task.pdfScopic UX Design Test Task.pdf
Scopic UX Design Test Task.pdf
 
PRESS MANAGEMENT Documentation
PRESS MANAGEMENT DocumentationPRESS MANAGEMENT Documentation
PRESS MANAGEMENT Documentation
 
Usability Test Overview
Usability Test OverviewUsability Test Overview
Usability Test Overview
 
HARJOT.ppt
HARJOT.pptHARJOT.ppt
HARJOT.ppt
 
Leave management ppt made by krishna ballabh gupta
Leave management ppt made by krishna ballabh gupta Leave management ppt made by krishna ballabh gupta
Leave management ppt made by krishna ballabh gupta
 
PURPOSE of the project is Williams Specialty Company (WSC) reque.docx
PURPOSE of the project is Williams Specialty Company (WSC) reque.docxPURPOSE of the project is Williams Specialty Company (WSC) reque.docx
PURPOSE of the project is Williams Specialty Company (WSC) reque.docx
 
Building accessible web components without tears
Building accessible web components without tearsBuilding accessible web components without tears
Building accessible web components without tears
 

Plus de Microsoft Accessibility

Plus de Microsoft Accessibility (20)

Updated! Windows 10 Accessibility - ATIA
Updated! Windows 10 Accessibility - ATIAUpdated! Windows 10 Accessibility - ATIA
Updated! Windows 10 Accessibility - ATIA
 
UPDATED! Microsoft Education - ATIA
UPDATED! Microsoft Education - ATIAUPDATED! Microsoft Education - ATIA
UPDATED! Microsoft Education - ATIA
 
AURC and Xbox User Research
AURC and Xbox User ResearchAURC and Xbox User Research
AURC and Xbox User Research
 
Microsoft Inclusive Classroom at FETC 2018
Microsoft Inclusive Classroom at FETC 2018Microsoft Inclusive Classroom at FETC 2018
Microsoft Inclusive Classroom at FETC 2018
 
Microsoft Education - ATIA
Microsoft Education - ATIAMicrosoft Education - ATIA
Microsoft Education - ATIA
 
Windows 10 Accessibility - ATIA
Windows 10 Accessibility - ATIAWindows 10 Accessibility - ATIA
Windows 10 Accessibility - ATIA
 
Office 365 Accessibility - ATIA
Office 365 Accessibility - ATIAOffice 365 Accessibility - ATIA
Office 365 Accessibility - ATIA
 
Microsoft Accessibility - ATIA
Microsoft Accessibility - ATIA Microsoft Accessibility - ATIA
Microsoft Accessibility - ATIA
 
Microsoft at AHG 2017
Microsoft at AHG 2017Microsoft at AHG 2017
Microsoft at AHG 2017
 
Create Inclusive Classrooms with Microsoft Education
Create Inclusive Classrooms with Microsoft EducationCreate Inclusive Classrooms with Microsoft Education
Create Inclusive Classrooms with Microsoft Education
 
Closing The Gap Schedule at Booth 101
Closing The Gap Schedule at Booth 101Closing The Gap Schedule at Booth 101
Closing The Gap Schedule at Booth 101
 
PDF/UA Support in Word 2016
PDF/UA Support in Word 2016PDF/UA Support in Word 2016
PDF/UA Support in Word 2016
 
Join us! #USBLN17 Twitter Chat
Join us! #USBLN17 Twitter ChatJoin us! #USBLN17 Twitter Chat
Join us! #USBLN17 Twitter Chat
 
PDF/UA Support in Word 2016
PDF/UA Support in Word 2016PDF/UA Support in Word 2016
PDF/UA Support in Word 2016
 
Microsoft at NFB
Microsoft at NFB Microsoft at NFB
Microsoft at NFB
 
Microsoft at NFB
Microsoft at NFBMicrosoft at NFB
Microsoft at NFB
 
Microsoft at ACB 17
Microsoft at ACB 17Microsoft at ACB 17
Microsoft at ACB 17
 
Microsoft Word - Sample Report
Microsoft Word - Sample ReportMicrosoft Word - Sample Report
Microsoft Word - Sample Report
 
Section 508 vs. EN 301 549
Section 508 vs. EN 301 549Section 508 vs. EN 301 549
Section 508 vs. EN 301 549
 
Section 508 (ICT Refresh) Chapters 4-6
Section 508 (ICT Refresh) Chapters 4-6Section 508 (ICT Refresh) Chapters 4-6
Section 508 (ICT Refresh) Chapters 4-6
 

Dernier

introduction-to-automotive Andoid os-csimmonds-ndctechtown-2021.pdf
introduction-to-automotive Andoid os-csimmonds-ndctechtown-2021.pdfintroduction-to-automotive Andoid os-csimmonds-ndctechtown-2021.pdf
introduction-to-automotive Andoid os-csimmonds-ndctechtown-2021.pdf
VishalKumarJha10
 
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICECHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
9953056974 Low Rate Call Girls In Saket, Delhi NCR
 
AI Mastery 201: Elevating Your Workflow with Advanced LLM Techniques
AI Mastery 201: Elevating Your Workflow with Advanced LLM TechniquesAI Mastery 201: Elevating Your Workflow with Advanced LLM Techniques
AI Mastery 201: Elevating Your Workflow with Advanced LLM Techniques
VictorSzoltysek
 

Dernier (20)

Unlocking the Future of AI Agents with Large Language Models
Unlocking the Future of AI Agents with Large Language ModelsUnlocking the Future of AI Agents with Large Language Models
Unlocking the Future of AI Agents with Large Language Models
 
Introducing Microsoft’s new Enterprise Work Management (EWM) Solution
Introducing Microsoft’s new Enterprise Work Management (EWM) SolutionIntroducing Microsoft’s new Enterprise Work Management (EWM) Solution
Introducing Microsoft’s new Enterprise Work Management (EWM) Solution
 
How To Use Server-Side Rendering with Nuxt.js
How To Use Server-Side Rendering with Nuxt.jsHow To Use Server-Side Rendering with Nuxt.js
How To Use Server-Side Rendering with Nuxt.js
 
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
 
Tech Tuesday-Harness the Power of Effective Resource Planning with OnePlan’s ...
Tech Tuesday-Harness the Power of Effective Resource Planning with OnePlan’s ...Tech Tuesday-Harness the Power of Effective Resource Planning with OnePlan’s ...
Tech Tuesday-Harness the Power of Effective Resource Planning with OnePlan’s ...
 
Diamond Application Development Crafting Solutions with Precision
Diamond Application Development Crafting Solutions with PrecisionDiamond Application Development Crafting Solutions with Precision
Diamond Application Development Crafting Solutions with Precision
 
Microsoft AI Transformation Partner Playbook.pdf
Microsoft AI Transformation Partner Playbook.pdfMicrosoft AI Transformation Partner Playbook.pdf
Microsoft AI Transformation Partner Playbook.pdf
 
The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...
The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...
The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...
 
introduction-to-automotive Andoid os-csimmonds-ndctechtown-2021.pdf
introduction-to-automotive Andoid os-csimmonds-ndctechtown-2021.pdfintroduction-to-automotive Andoid os-csimmonds-ndctechtown-2021.pdf
introduction-to-automotive Andoid os-csimmonds-ndctechtown-2021.pdf
 
How To Troubleshoot Collaboration Apps for the Modern Connected Worker
How To Troubleshoot Collaboration Apps for the Modern Connected WorkerHow To Troubleshoot Collaboration Apps for the Modern Connected Worker
How To Troubleshoot Collaboration Apps for the Modern Connected Worker
 
Optimizing AI for immediate response in Smart CCTV
Optimizing AI for immediate response in Smart CCTVOptimizing AI for immediate response in Smart CCTV
Optimizing AI for immediate response in Smart CCTV
 
Vip Call Girls Noida ➡️ Delhi ➡️ 9999965857 No Advance 24HRS Live
Vip Call Girls Noida ➡️ Delhi ➡️ 9999965857 No Advance 24HRS LiveVip Call Girls Noida ➡️ Delhi ➡️ 9999965857 No Advance 24HRS Live
Vip Call Girls Noida ➡️ Delhi ➡️ 9999965857 No Advance 24HRS Live
 
Learn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdf
Learn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdfLearn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdf
Learn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdf
 
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
 
Software Quality Assurance Interview Questions
Software Quality Assurance Interview QuestionsSoftware Quality Assurance Interview Questions
Software Quality Assurance Interview Questions
 
Azure_Native_Qumulo_High_Performance_Compute_Benchmarks.pdf
Azure_Native_Qumulo_High_Performance_Compute_Benchmarks.pdfAzure_Native_Qumulo_High_Performance_Compute_Benchmarks.pdf
Azure_Native_Qumulo_High_Performance_Compute_Benchmarks.pdf
 
5 Signs You Need a Fashion PLM Software.pdf
5 Signs You Need a Fashion PLM Software.pdf5 Signs You Need a Fashion PLM Software.pdf
5 Signs You Need a Fashion PLM Software.pdf
 
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICECHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
 
W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...
W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...
W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...
 
AI Mastery 201: Elevating Your Workflow with Advanced LLM Techniques
AI Mastery 201: Elevating Your Workflow with Advanced LLM TechniquesAI Mastery 201: Elevating Your Workflow with Advanced LLM Techniques
AI Mastery 201: Elevating Your Workflow with Advanced LLM Techniques
 

Access design guide for accessibility

  • 1. Access Accessibility Design Guide 1 Introduction As technologytouchesmore andmore lives, we riskexcludingmillionsof peopleunintentionallythroughour designchoices.Worldwide, more thanabillionpeople have adisability. Asdevelopers,we mustdesignsolutions that allowall users,regardlessof theircapabilities,touse ourproducts.DesigningaccessibleAccessapplications has sometimesbeenchallenging becauseof alack of guidance andeducationmaterial available.Thisdocument seekstoprovide guidance thatwill help youcreate Access databases thatare usable to everyone. Here are some keyprinciplestokeepinmindwhendesigning Accessapplications foreveryone:  Informationshould be communicated throughmultiple channels,not justvisually  Keyboardingisthe onlyinteractionthatmanyuserswill be able touse  Minimize keystrokestoaccomplish scenario-critical tasks  Use more than justcoloras a meansof communicating information 1.1 Content  2) UI flow o 2.1) Header, detail, footersections  3) Navigation o 3.1) Settingtaborder forcontrols o 3.2) Using the F6 keyboardshortcutfornavigation  4) Controls o 4.1) Labelsassociatedwiththeircontrols o 4.2) Captions  5) Colors o 5.1) High contrastmode o 5.2) Luminosityratio  6) Testingchecklist  7) Walkthrough of a user scenario 2 UI flow Whenyou begindesigninganAccess application,take some time tothinkaboutthe flow of auser’sexperience. Users needinformationthathelpsthemunderstandthe purpose of the current database objectthey’reworking withat that moment.Commandbuttons ona form,forexample, thattake formlevel actions suchas navigation and printingneedtobe discoverable immediately. Fromuserstudies,we findthata user’sfocuswill naturally start at the topof the formand thenscan down.Because of thisuserbehavior,inmostcases we recommend that youput informationaboutthe formandcommandbuttonsat the top. Below formlevel actions,we recommendthat youlimitactionsthatthe usercan take to the currentform.This iswhere youshouldputyour maincontrols anddetail information. At the bottomof formsandreports,we recommendyouput summarizations thatare relevanttothe database afterthe user isfinishedwiththe details.Onareport, for example,add controlsthatdisplayaggregationsor
  • 2. calculations atthe bottombecause thisisinformationrelevantafterthe userhasseenthe individual record details. Rememberthatthese are guidelinesandnothard andfast rulestothe designof yourformsand reports.Every Accessapplication isdifferentso designtheminaway thatprovidesthe bestlogical flow of information.Ask yourself,whatinformationwouldyoulike toknow first andwhatinformationisrelevant next? 2.1 Header, detail, footer sections In thissection, we provide anexample of userinterface flow usingthe StudentsDatabase templateinAccess 2016. Indesign view,you’ll see header,detail,andfootersectionsthathelppartition the formintosections like whatwe describedearlier. Figure 1: Student list form shown in design view. The form’s header, detail, and footer sections are visible. Header: Inthis example,the headersectionof the formcontainsthe title of the form,formlevel navigation, searchingandfilteringcontrols,andinformationonhow touse the form(questionmarkicon).Thisinformation isthe mostrelevantandshouldtherefore appearatthe top of the form.The headersectionisthe firstsection that a userseesso putimportantinformationausermustknow to use the form here.We recommendthat the formheadersection contains:  Title of the form  Form or application level navigation  Searchingandfiltering options  Instructionsandhelpinformation Detail: Inthisexample,the detailsectionof this formcontainsthe fields andcontrols thatdisplay the datafor each recordinthe form’sdatasource.The details sectioncomesafterauserunderstands the general purpose of
  • 3. the form byreviewingthe controlsinthe form headersection.Usersof the applicationnow know this iswhere theyneedtotake actions on data. We recommend thatthe detail sectioncontains:  Relevantinformationandactionstothe current form  Controlsthatdisplaydatafrom the form’srecordsource Footer: Inthisexample,the footersection of thisformisn’tused.Thissection isthe lastsectionthata user interactswithastheyuse the form.We recommendthatthe footersection contains:  Informationthatismeaningfulafterthe userhasbrowsedthe previoustwosections suchas calculated fieldsin formsand reports  Controlsthatallowusersto move todifferentrecordsif applicable  If needed,supplementalinformation thatisnotappropriate inthe headersectionsuchasdeveloper contact informationortermsandconditionsinformation 3 Navigation Since we are designingwithaccessibilityinmind,we needtounderstandthatnoteveryone canuse the mouse and see the screen. Keyboardingisthe onlymethodof interactionthat manypeople canuse.Thissectionof the guide will gooverhowto designyourdatabase applications toprovide amore navigable experience usingthe keyboardalone. 3.1Setting tab order for controls Tabbingisthe primarymethodof navigationforauserthat reliesuponthe keyboard.Thismeansthat configuringthe taborderof your formsis one of the most important tasksinmakingyourAccess databases accessible. Figure 2: Tab order command on the Access Design ribbon tab Here is an example of aconfiguredtaborderusingthe StudentListformof the Student’s database template:
  • 4. Figure 3: Students list form with its tab order set for the Form Header section In figure 3, you can see that the Welcome command button(the buttonwiththe questionmarkcaption) isthe firstcommandinthe tab order. We set the Welcome commandbuttonfirstinthe tab order so that users can quickly goback to the formthat providesinstructionsonhow to use the form.The nextitemsinthe tab order are the command buttoncontrols that are shown inlefttorightorder as theyappearat the top of the form.This isonlyan example,andyourapplications willhave theirownuniquetaborderdependingonthe mostlogical userexperience. Here are some concepts to keepinmindwhenconfiguringthe taborder foryour forms:  Minimize the numberof tabsbyplacingthe most usedcommandsnearthe top of the tab order.  Setthe taborder of your controlssothey follow aconsistentpatternwithrespecttothe UI and not jumparound in a somewhatrandomorder.Userswithlow vision see onlyasmall,magnifiedsectionof the form at a time whichmeanstheycan’tsee formelements outside the magnifiedarea.  Testout the tab order of your controls afteryouare done designing yourformsincase the ordermight have changedsince you lastmade form modifications.  Ensure that unimportantelementsare atthe bottomof the tab orderto deprioritize themappearingto users. Witha properlyconfiguredtaborder forform controls,users,regardlessof theircapability,will have abetter experience navigatingthroughyour application. 3.2Using the F6 keyboard shortcut for navigation Accessprovidesakeyboardshortcut,F6,useful for navigatingthrough the differentregions of the Access interface.Inthe nextfigure,youcansee whatpatternAccessfollowswhenyoucontinuallypressF6.
  • 5.  Ribbon  Headerof the active form(if it exists)  Detail of the active form (if itexists)  Footerof the active form (if itexists)  Navigation pane  View switcher  Ribbonandrepeat Note that if anysub form controls existinthe sectionsof the form, pressingF6puts the focus intothe sub formand thenfocusmoves throughitssectionsbefore movingontothe nextsection inthe parent section. Usingthe F6 keyboardshortcut provides aquick wayto navigate betweenthe differentregions of the Access interface anddatabase objects. Usingthisnavigationtechnique furtheremphasizesthe needtoappropriately place informationthatisrelevanttoeach areaof the application asdetailedin Section2.1of thisdocument. 4 Controls Accessibilityfeaturesare already includedinthe controlsof Access. Insome cases,you’ll needtomake minor configurations toyourcontrolsindesignview forthemtowork well forusers of assistive technologies. For controls, we recommendthe following guidelines:  Associate controlswithanappropriate label  Provide anappropriate captionforcontrols thatdon’thave an associated label 4.1Associate labels with their respective controls Appropriate labelsforthe variouscontrolsdisplayingdataonyour formsand reportsare needed tounderstand the value of data controlssuch as textboxes. Notall userscansee the labelsnexttothe controlsinthe forms and reportsusingtheirassistivetechnologies.Forformsand reports,justprovidingthe datafieldvalue,usually shownin a textbox, isnot enough. Youshouldideally providealabel withfield controls displayingdataand associate themtocreate a complete experienceforyourapplicationusers. If you are creatingcontrolsforfields inyourformor reportrecordsource usingthe providedwizards, Access shouldcreate appropriate labelsforeachof your fieldcontrols.However,through additional editsand adjustments youmightmake whilecompletingyourformandreportdesign,youmightlose the label association betweentwocontrols accidentally.If you needtomanually associate alabel toacontrol,follow these steps: 1) Openthe propertypane 2) Selectthe control youneedtoassociate a label with 3) Findthe label name property Figure 4: Pressing F6 navigates users through different areas of the Access interface
  • 6. 4) Type in the name of the label Figure 5: Property pane with label name property Whenlabelsare associatedproperly,assistive technologieswill provide the information inthe label tousers whenthose controls have focus. Forexample,if youuse ascreenreaderandyourfocus ison a textbox,the screenreadernarratesout the associatedlabel firstandthenitnarrateswhateveristypedinto the textbox. If youhave no associatedlabel, the screenreaderonlyreadsoutthe value inthe textbox. 4.2Captions For elementswhere youwantto control whatis communicatedtothe useror elementswhere alabel isn’t appropriate,youcanuse the Captionpropertyof a control to provide informationtothe assistivetechnologies to be communicatedtothe user. For example, if youhave apicture inyour form,thenyou will wanttoprovide an alt-textdescriptioninthe Captionproperty. Textinthe StatusBar Text property of controlsare not accessiblysupportedin Access.Asaworkaround to this limitation,considerputtingthattextinthe Captionproperty orintoan associated label. 5 Colors Whenit comesto usingcolorsinyour Accessapplications,the keyprinciple torememberforuserswithcolor- blindness isthattheycannotperceive the differencesbetweensome combinationsof colors. Youdon’tneedto remove all colorsinthe designof yourAccessdatabase objects,butyoudo needtokeepcolorsensitivityin mindwhencreatingyourAccessformsand reports.Youshould make sure that colorsare notthe onlymethod of conveyingimportantinformation tothe applicationusers.Forexample, use colorplusshapesorcolorplus textto conveyinformation.Use ared cross anda greencheckmark,for example, todistinguishthe difference
  • 7. betweenanegative andapositive status.Inthisexample,you’re combiningcolorswithshapeswhichmakes the visual elementsmore accessible. As youdesignyourAccessdatabase objects,youmightfind situationswhere you’ll have coloredtext orother elementsonabackgroundof anothercolor.Thisscenariomightmake it difficultforuserswhohave color- blindnessorlowvisiondisabilitiestoperceive the variousobjectelements.Computeroperatingsystems provide a highcontrast mode,and in the followingsections, we’ll provideresourcestochoose operatingsystem settings that are mostperceivableforall users. 5.1High contrast mode Operatingsystemsprovide ahighcontrastmode whichrepaintsthe userinterface withcolorsthatcanbe better perceivedbyeveryone. Figure 6: Windows 10 high contrast settings In figure 5, you can see that Windows10 providesahighcontrast settingspage which allowsuserstoselect differentthemes. Whenyou selectone of the highcontrastthemes,Windowsautomaticallyrepaintsall the Windowsandapplicationuserinterfaces withthe specifiedcolorsinthe theme. AsanAccessapplication developer,youshould verifythatyourAccessdatabase objectscanstill be functional andthatyoudon’thave missingcolors.If yousee colors inyourdatabase objects,notspecifiedinthe highcontrasttheme,showingup afterturningon highcontrastsettings,please postthis informationinthe Microsoftaccessibilityforum. 5.2Contrast ratio Whenchoosingcolors foryour database objectssuchas formsand reports,make sure thatthe contrastratio betweenthe control andobject elementsandthe backgroundcolorisat least4.5:1. You can check yourcolor contrast ratio by downloadingafree tool called ColorContrastAnalyzerbythe PacielloGroup orby usinga color contrast checkeronthe web suchas WebAIMContrast Checker.Byensuringthatthe colorcontrast ratioof the foregroundandbackground colorsare at least4.5:1, you can be confidentthatusers of your Accessapplication can perceive the textorelementsyoudesigned.
  • 8. 6 Recap of testing Here is a quickchecklistof all the thingsmentionedinthisaccessibilitydesignguidethatyoucan use for quick reference withyourAccessapplications.If youcheck andtest yourapplicationsusingthislist, thenyoushould be on your wayto creatingan Accessapplication thatisusable byall.  Thinkaboutthe flowof a user’sexperience o Place importantinformationandcommandbuttonsatthe top – headersection o Place formor report relevantinformationatthe middle –detailssection o Place summarizationand overall information atthe bottom– footersection  Checkyour configured control taborder o Verify thatthe tab orderfor controlsfollowsalogical flow throughthe database object o Verify thatcommandsthatare usedthe mostare at the top  Check your controls forappropriate labels o Verifythere are noorphanedlabels  Check your control captions o Verifyif captionsare needed o Verifythatcaptionsare definedif youdon’tuse control labels  Checkif any informationiscommunicatedusingcoloronly o Verifythatyou’re notusingcoloronlyto distinguish application information  Checkif highcontrast settingsimpactyourapplication o Verifythatonly colorsinthe highcontrast theme appear inyourapplication  Check your colorcontrast ratio o Verifythe contrastratioisat least4.5:1 o Use WebAIMresources orColorContrast Analyzerbythe PacielloGroup 7 Walkthrough of a user scenario 7.1Introduction Thiswalkthroughaimstoshowwhat a userwithdisabilitieswouldexperience whenusinganAccess database that has beendesignedwithaccessibilityinmind. Thiswalkthroughwill use aseriesof screenshotswith explanations fromthe Studentsdatabase template. 7.2Legend Visionimpaireduserswill use assistivetechnologiestonarrate outwhatUI elementcurrentlyhasfocus.The headphones iconwillbe usedtodenote whatuserswill hear. Thisblue outline will highlightwhatthe user of the applicationis focusedoninthe database. These iconsdenote whatkeysuserswill presstonavigate aroundinthe database.
  • 9. 7.3Walkthrough Figure 7: The New Student button is where the user is focusing on in the Student List form In the openingform of thisdatabase,we canconfidentlyuse the F6keyboardshortcut tonavigate tothe header of the form.We have designedthisformtoinclude the commandbuttonsinthe headersection.The focusison the firstcommandbutton“NewStudent” andthe screenreadercorrespondinglyreadsitout.Now let’s press Enter. Figure 8: Student details form for a new student F6 “New student” Enter “General tab item”
  • 10. Afteropeningthe “StudentDetails”form, the focusisputintothe “General”tab item.Access tabcaptions are recognizedbythe assistive technologyand theyare narratedoutappropriatelytoprovide uswithmore informationonthe UI that we have focuson inthe form. Figure 9: Filling out the form By pressingthe Tabkeyagain,we can navigate tothe textboxes onthe form.The screenreadernarratesoutthe label firsttoprovide contextforourtextbox. Afterfillingitin,italsoreadsoutthe currentvalue. Tab “Last name, Chan”
  • 11. Afterwe finishenteringall the neededinformationaboutthe studentinthe detail form,we canuse the F6 keyboardshortcut to go backto the headersection andthenuse the Tab key to getto the commandbutton labeledClose. Atthispoint, the screenreadernarratesoutthe name of the control “Close”and thatit is a button.PressingEnteractivatesthe commandbuttonwhich closesthisformandsavesthe student. Note that we couldhave usedthe Tab keyto move to the Save and New commandbuttonif we wantedtostart creating anotherstudentrecord. Figure 10: Saving and exiting the form Tab “Close button” F6 Enter
  • 12. Figure 11: Student list form with the newly added student details We are back to the studentlistformandwe see the newlyaddedstudent’sinformationinthe firstrecordinthe datasheet.