13. EPMO Open Source Coordination Office Redaction File Detail Report

Produced by Araxis Merge on 9/27/2017 9:44:48 AM Central Daylight Time. See www.araxis.com for information about Merge. This report uses XHTML and CSS2, and is best viewed with a modern standards-compliant browser. For optimum results when printing this report, use landscape orientation and enable printing of background images and colours in your browser.

13.1 Files compared

#	Location	File	Last Modified
1	adk\adk\product\production\documentation	508_compliance.html	Wed Jun 7 14:02:28 2017 UTC
2	adk\adk\product\production\documentation	508_compliance.html	Tue Sep 26 13:01:51 2017 UTC

13.2 Comparison summary

Description	Between Files 1 and 2
Description	Text Blocks	Lines
Unchanged	2	1194
Changed	1	2
Inserted	0	0
Removed	0	0

13.3 Comparison options

Whitespace
Character case	Differences in character case are significant
Line endings	Differences in line endings (`CR` and `LF` characters) are ignored
CR/LF characters	Not shown in the comparison detail

13.4 Active regular expressions

No regular expressions were active.

13.5 Comparison detail

	1	<html>
	2	<h ead>
	3	<lin k href=".. /_assets/l ibs/bower/ bootstrap/ css/bootst rap.min.cs s" rel="st ylesheet">
	4	<lin k href=".. /_assets/l ibs/custom /bootstrap /accessibi lity/boots trap-acces sibility.c ss" rel="s tylesheet" >
	5	</ head>
	6	<b ody style= "margin: 2 em 2em 2em 2em">
	7	<h1> Overview</ h1>
	8	<p>
	9	PayPal provides an excelle nt library that exte nds a few of Bootstr ap's defau lt complex component s to enhan ce use wit h Assistiv e Technolo gies. Usi ng a corre ct structu re allevia tes the ne ed to prov ide custom event han dling and keyboard n avigation. The cave at is the structure must be cl osely foll owed. The PayPal as sistive li brary enha nces the f ollowing c omponents:
	10	</p>
	11	<ul role="list " aria-lab el="PayPal component s">
	12	<li ro le="listit em">Modal< /li>
	13	<li ro le="listit em">Tabs</ li>
	14	<li ro le="listit em">Dropdo wn</li>
	15	<li ro le="listit em">Alerts </li>
	16	<li ro le="listit em">Accord ion</li>
	17	<li ro le="listit em">Carous el</li>
	18	</ul >
	19	<p>
	20	Nearly every cus tom compon ent we use can be ab stracted i nto one of these obj ects, and as such it would be prudent to abstract these comp onents int o views/te mplates th at are eas ily implem ented with out the ne ed of a de veloper to concern h im or hers elf with m aintaining the prope r structur e and role s. That s aid, PayPa l recommen ds avoidin g the caro usel objec t, as it d oes not ad equately m eet WCAG 2 .0 standar ds.
	21	</p>
	22	<p>
	23	This p age is mea nt to serv e as an ex ample of i mplementat ions and p ossible us es for eac h enhanced component , as well as what cu stom work is needed when all o f the even ts are not handled b y default. Enhanced component s do not n ecessarily follow st andard Boo tstrap pat terns, so it would b e wise to not follow Bootstrap class pat terns when attemptin g to ensur e accessib ility.
	24	</p>
	25	<p>
	26	Not al l Assistiv e Technolo gies work the same a nd some de fault keyb oard navig ation func tionality may be ove rridden. Also note that some glitches m ay occur w ith non li near navig ation, suc h as dropd owns, wher e Bootstra p handles focus. In these cas es the scr een reader may attem pt to read the follo wing tab-a ble elemen t before r eading the dropdown. This gen erally can 't be avoi ded, and i s a race c ondition. Another g litch that may occur is that c ertain ite ms may be read twice .
	27	</p>
	28	<p>
	29	<h3>A few patter ns that ne ed to be o bserved wh ich are cu rrently of ten not fo llowed:</h 3>
	30	<ul role=" list" aria -label="Re quired pat terns for 508 compli ance">
	31	<l i role="li stitem">
	32	<p>
	33	All group- able objec ts need pr oper roles assigned. Bootstra p's API ca n be refer enced for this, but things suc h as group ed buttons , lists, a nd navigat ion elemen ts have sp ecific ari a roles wh ich need t o be appli ed to the parent con tainer and each elem ent within . The sou rce HTML o n this pag e can be u sed as a s tarting re ference.
	34	</p>
	35	</ li>
	36	<l i role="li stitem">
	37	<p>
	38	Any route control mu st have an element w ith the sa me id with in the pag e. For in stance, eh mp-ui/#ove rview need s and elem ent with i d="overvie w" in orde r for Assi stive Tech nologies t o be notif ied of con tent chang es. Any a nchor with href="#so me_id" nee ds a corre sponding e lement wit h the appr opriate id .
	39	</p>
	40	</li>
	41	<li role ="listitem ">
	42	<p>
	43	Th e ALT attr ibute shou ld never b e used. T o notify t he screen reader of any altern ate data a ttributes, use a spa n or div w ith class= "sr-only", or add a title attr ibute dire ctly to an actionabl e element.
	44	</p>
	45	<li role ="listitem ">
	46	<p>
	47	Us ing custom focus mod ifiers or custom key event han dling is g enerally n ot only un warranted, but will cause unde sired beha vior. Bef ore design ing a temp late, star t with det ermining w hich one o f these en hanced com ponents be st fits th e needs of the desig n. For in stance, an y floating dialogs s hould be a bstracted to a modal . Dynamic content a ttached di rectly to a DOM elem ent should use a dro pdown. In the case where an e xample use s a button or anchor in some, but not al l cases, o ther eleme nts that a re by defa ult non-fu nctional c an be subs tituted so long as t abindex="0 " and role ="button" are added (and are i mperative in order t o meet com pliance). See the m edia dropd own <a hre f="#mediad ropdown" r ole="link" >below</a> . Note th at element substitut ion may re quire cust om event h andling an d as such is not rec ommended. Manually setting fo cus can le ad to keyb oard navig ation trap s.
	48	</p>
	49	</li>
	50	</ul>
	51	</p>
	52	<h2> JUMP TO... </h2>
	53	<ul role="list " aria-lab el="Naviga tion">
	54	<li ro le="listit em"><a hre f="#modal" aria-hidd en="true"> Modal<span class="sr -only">jum p to modal </span></a ></li>
	55	<li ro le="listit em"><a hre f="#tabs" aria-hidde n="true">T abs<span c lass="sr-o nly">jump to tabs</s pan></a></ li>
	56	<li ro le="listit em"><a hre f="#dropdo wn" aria-h idden="tru e">Dropdow n<span cla ss="sr-onl y">jump to dropdown< /span></a> </li>
	57	<li ro le="listit em"><a hre f="#alert" aria-hidd en="true"> Alerts<spa n class="s r-only">ju mp to aler ts</span>< /a></li>
	58	<li ro le="listit em"><a hre f="#accord " aria-hid den="true" >Accordion <span clas s="sr-only ">jump to accordion< /span></a> </li>
	59	<li ro le="listit em"><a hre f="#other" aria-hidd en="true"> Other Comp onents<spa n class="s r-only">ju mp to othe r componen ts</span>< /a></li>
	60	<li ro le="listit em"><a hre f="#custom " aria-hid den="true" >Custom Co mponents<s pan class= "sr-only"> jump to cu stom compo nents</spa n></a></li >
	61	<li ro le="listit em"><a hre f="#extern al" aria-h idden="tru e">Externa l Links<sp an class=" sr-only">j ump to ext ernal link s</span></ a></li>
	62	</ul >
	63	<ul role="list " aria-lab el="Compon ent exampl es">
	64
	65
	66	<li ro le="listit em">
	67	<div rol e="region" id="modal " aria-lab elledby="m odalTitle" >
	68	<h4 id="mo dalTitle"> MODAL</h4>
	69	<p>
	70	<u l role="li st" aria-l abel="Moda l dialog b ehavior">
	71	<li role="list item">
	72	User a ctivates m odal butto n and moda l dialog i s announce d and moda l dialog t akes focus , which ca uses Assis tive Techn ologies to read cont ents.
	73	</li >
	74	<li role="list item">
	75	The ta b key will navigate through th e modal's actionable items and will not allow the user to ta b outside of the mod al until i t has been closed.
	76	</li >
	77	<li role="list item">
	78	Activa ting butto n which ha s data-dis miss="moda l" or hitt ing escape key by de fault will close mod al and ret urn focus to trigger button (s o long as trigger bu tton has d ata-toggle and data- target att ributes) w ithout the need for custom cod ing. If t he trigger button us es JavaScr ipt to tog gle the mo dal, the d eveloper w ill need t o custom c ode focus handling t o return f ocus to tr igger butt on.
	79	</li >
	80	</ ul>
	81	</p>
	82	<!-- BEGIN MODAL EXA MPLE -->
	83	<!-- Note that class es, tabind ex="-1", r oles, and aria-label lby with a ppropriate ID are re quired -->
	84	<div id="m yModalId" class="mod al fade" d ata-keyboa rd="true" tabindex=" -1" role=" dialog" ar ia-labelle dby="modal -title" ar ia-hidden= "true">
	85	<div class ="modal-di alog">
	86	<d iv class=" modal-cont ent">
	87	<div class="mo dal-header ">
	88	<but ton type=" button" cl ass="close " data-dis miss="moda l" aria-hi dden="true ">×< /button>
	89	<h4 class="mod al-title" id="modal- title">Mod al Heading </h4>
	90	</di v>
	91	<div class="mo dal-body">
	92	<p>H ere is all my conten t</p>
	93	</di v>
	94	<div class="mo dal-footer ">
	95	<but ton type=" button" cl ass="btn b tn-default " data-dis miss="moda l">Close</ button>
	96	<but ton type=" button" cl ass="btn b tn-primary ">Save cha nges</butt on>
	97	</di v>
	98	</ div>
	99	</div>
	100	</div>
	101	<!-- END M ODAL EXAMP LE -->
	102	<!--
	103	Pr ogramatica lly openin g a modal requires o ne to retu rn focus t o the item that trig gered the modal once it's clos ed manuall y. If dat a-toggle a nd data-ta rget are u sed, this is handled automatic ally.
	104	-->
	105	<button ty pe="button " id="myMo dalButton" class="bt n btn-defa ult" data- toggle="mo dal" data- target="#m yModalId"> OPEN MODAL </button>
	106	<br/><br/>
	107	</div>
	108	</li>
	109
	110
	111	<li ro le="listit em">
	112	<div rol e="region" id="tabs" aria-labe lledby="ta bTitle">
	113	<h4 id="ta bTitle">TA BS</h4>
	114	<p>
	115	<u l role="li st" aria-l abel="tab behavior">
	116	<li role="list item">
	117	When u ser naviga tes to tab group, th e first ta b into the group wil l land on the tab th at has cla ss="active " applied.
	118	</li >
	119	<li role="list item">
	120	Naviga tion betwe en tabs is accomplis hed with a rrow keys. Arrow na vigation w ill cause selection wrap (on t he last it em, a righ t key will land on t he first i tem).
	121	</li >
	122	<li role="list item">
	123	Tabbin g from the tab group will land on the co ntents of the tab-co ntent area and Assis tive Techn ologies wi ll read th e contents . From he re, shift+ tab will n avigate ba ck to the active tab , and tab will move out to the next acti onable ite m in the D OM.
	124	</li >
	125	</ ul>
	126	</p>
	127	<div id="n ormalTab">
	128	<h 5>STANDARD TAB</h5>
	129	<! -- BEGIN T AB EXAMPLE -->
	130	<! --
	131	href ="#tab[#]" and class es are req uired. Co ntents of each tab d iv is not important.
	132	No c ustom even t or key h andling sh ould be us ed.
	133	Orde r of this structure should be maintained .
	134	-- >
	135	<u l id="myTa b" class=" nav nav-ta bs">
	136	<l i class="a ctive"><a href="#tab 1" data-to ggle="tab" >TAB1</a>< /li>
	137	<li><a hre f="#tab2" data-toggl e="tab">TA B2</a></li >
	138	<l i><a href= "#tab3" da ta-toggle= "tab">TAB3 </a></li>
	139	</ul>
	140	<d iv id="myT abContent" class="ta b-content" >
	141	<d iv class=" tab-pane f ade in act ive" id="t ab1">
	142	<p>C ontents of Tab #1</p >
	143	</ div>
	144	<div class ="tab-pane fade" id= "tab2">
	145	<p>C ontents of Tab #2</p >
	146	</ div>
	147	<div class ="tab-pane fade" id= "tab3">
	148	<p>C ontents of Tab #3</p >
	149	</ div>
	150	</div>
	151	<! -- END TAB EXAMPLE - ->
	152	</div>
	153	<br/>
	154	<div id="u psidedownT ab">
	155	<h 5>REVERSED TAB</h5>
	156	<p >
	157	This is meant to demonst rate that the placem ent is not important . However , it shoul d be noted that this format is discourag ed since t he DOM ord er is illo gical for keyboard n avigation. In gener al, action able eleme nts should be in the DOM befor e dynamic content.
	158	</ p>
	159	<! -- BEGIN T AB EXAMPLE -->
	160	<! --
	161	href ="#tab[#]" and class es are req uired. Co ntents of each tab d iv is not important.
	162	No c ustom even t or key h andling sh ould be us ed.
	163	-- >
	164	<d iv id="myU TabContent " class="t ab-content ">
	165	<d iv class=" tab-pane a ctive" id= "utab1">
	166	<p>< input role ="search"/ > Search f or somethi ng</p>
	167	</ div>
	168	<div class ="tab-pane " id="utab 2">
	169	<p>< button rol e="button" class="bt n btn-defa ult">DO SO METHING</b utton></p>
	170	</ div>
	171	<div class ="tab-pane " id="utab 3">
	172	<p>D isplay som ething</p>
	173	</ div>
	174	</div>
	175	<u l id="myUT ab" class= "nav nav-t abs">
	176	<l i class="a ctive"><a href="#uta b1" data-t oggle="tab ">TAB 1</a ></li>
	177	<li><a hre f="#utab2" data-togg le="tab">T AB 2</a></ li>
	178	<l i><a href= "#utab3" d ata-toggle ="tab">TAB 3</a></li >
	179	</ul>
	180	<! -- END TAB EXAMPLE - ->
	181	</div>
	182	<br/><br/>
	183	</div>
	184	</li>
	185
	186
	187	<li ro le="listit em">
	188	<div rol e="region" id="dropd own" aria- labelledby ="dropdown Title">
	189	<h4 id="dr opdownTitl e">DROPDOW NS</h4>
	190	<p>
	191	<u l role="li st" aria-l abel="drop down behav ior">
	192	<li role="list item">
	193	When u ser naviga tes to dro pdown, spa ce, enter, click, or down arro w will ope n the drop down. The first ele ment will take focus automatic ally. Som e Assistiv e Technolo gies will override t he behavio r and may assert tha t a tab is required to focus o n the firs t element.
	194	</li >
	195	<li role="list item">
	196	Naviga tion betwe en dropdow n items is accomplis hed with a rrow keys. Arrow na vigation d oes not wr ap. If th ere is onl y one list item, as is the cas e for the media drop down examp le, arrow keys do no thing.
	197	</li >
	198	<li role="list item">
	199	Tabbin g from the dropdown will land on the nex t actionab le item an d the drop down will be closed. Shift ta b will lan d on the d ropdown ac tivation b utton and automatica lly close the dropdo wn and ann ounce that it is col lapsed.
	200	</li >
	201	</ ul>
	202	</p>
	203	<div id="n avdropdown ">
	204	<h 5>DROPDOWN FOR NAV</ h5>
	205	<! -- BEGIN N AVIGATION DROPDOWN E XAMPLE -->
	206	<d iv class=" dropdown">
	207	<a id="drop1 " href="#" role="but ton" class ="dropdown -toggle bt n btn-defa ult" data- toggle="dr opdown" ar ia-expande d="true">D ropdown <b class="ca ret"></b>< /a> <!-- r ole, and d ata-toggle are cruci al -->
	208	<u l class="d ropdown-me nu" role=" menu" aria -labelledb y="drop1">
	209	<li><a h ref="#">Ac tion</a></ li> <!-- n eed to fol low the st ructure -- >
	210	<li><a h ref="#">An other acti on</a></li >
	211	<li><a h ref="#">An d another action</a> </li>
	212	</ ul>
	213	</div>
	214	<! -- END NAV IGATION DR OPDOWN EXA MPLE -->
	215	</div>
	216	<br/>
	217	<div id="m ediadropdo wn">
	218	<h 5>MEDIA DR OPDOWN</h5 >
	219	<! -- BEGIN M EDIA DROPD OWN EXAMPL E -->
	220	<div id="m yDropDownI d" class=" dropdown">
	221	<div i d="myDropd ownButtonI d" role="b utton" dat a-toggle=" dropdown" tabindex=" 0">
	222	<! -- role an d data-tog gle are re quired if an anchor is used;
	223	if a div, ta bindex mus t be appli ed as well -->
	224	<! -- if this is NOT an anchor, e nter will not trigge r the drop down and this must be handled manually (see scrip ts) -->
	225	<d iv class=" btn btn-de fault">
	226	THIS IS PART OF TH E BUTTON T HAT OPENS MY DROPDOW N (style i s irreleva nt on this element)
	227	</ div>
	228	</div>
	229	<u l class="d ropdown-me nu" role=" menu" aria -labelledb y="myDropd ownButtonI d">
	230	<l i>
	231	<a href= "#" class= "container -fluid">
	232	<!-- Thi s must be an anchor in order f or autosel ect into t he first e lement to work -->
	233	<!-- Not e that AT might over ride this functional ity -->
	234	<ul>
	235	<li>So me stuff t o display< /li>
	236	<li>So me more st uff to dis play</li>
	237	</ul >
	238	</a>
	239	</ li>
	240	</ul>
	241	</div>
	242	<! -- END MED IA DROPDOW N EXAMPLE -->
	243	</div>
	244	<br/><br />
	245	</div>
	246	</li>
	247
	248
	249	<li ro le="listit em">
	250	<div rol e="region" id="alert " aria-lab elledby="a lertTitle" >
	251	<h4 id="al ertTitle"> ALERTS</h4 >
	252	<p>
	253	<u l role="li st" aria-l abel="aler t behavior ">
	254	<li role="list item">
	255	An ale rt is a si mple compo nent that requires s ome custom handling of focus e vents. Se e this sou rce code f or example s on how t o handle t his. In t his exampl e, when th e alert is dismissed , the page will need to be rel oaded to t rigger it again. Da ta-dismiss on an ale rt destroy s the DOM element, b ut custom code may b e required to destro y the Back bone view.
	256	</li >
	257	<li role="list item">
	258	Dismis sable aler ts should be used fo r server s ide error handling a nd fixed a lerts shou ld be used for clien t side val idation.
	259	</li >
	260	<li role="list item">
	261	A Dism issable al ert takes focus when it is mad e visible, and when dismissed focus retu rns to the actionabl e element that trigg ered the a lert
	262	</li >
	263	<li role="list item">
	264	Fixed alerts tak e focus wh en a valid ation erro r occurs. The actua l alert sh ould be an actionabl e element which retu rns focus to the ele ment that failed val idation.
	265	</li >
	266	</ ul>
	267	</p>
	268	<div id="d ismissable Alert">
	269	<h 5>DISMISSA BLE ALERT< /h5>
	270	<b utton id=" alertTrigg erButton" role="butt on" data-t oggle="ale rt" data-t arget="#my Alert">Thi s action t riggers an alert</bu tton>
	271	<! -- BEGIN D ISMISSABLE ALERT EXA MPLE -->
	272	<d iv id="myA lert" clas s="alert a lert-dange r fade" st yle="width :800px" ta bindex="0" hidden>
	273	<b utton type ="button" class="clo se" data-d ismiss="al ert" aria- descriptio n="dismiss error">
	274	<spa n aria-hid den="true" >×</ span>
	275	<spa n class="s r-only">di smiss erro r</span>
	276	</ button>
	277	<s pan class= "sr-only"> Error:</sp an>
	278	<s trong>Some thing is b usted!</st rong> This thing is broken
	279	<p>
	280	<s trong>Focu s Manageme nt : </str ong>
	281	<p >
	282	When the alert is dismissed with keybo ard make s ure the fo cus is tra nsferred b ack to the element w hich fired this aler t. This i s not hand led by def ault and r equires cu stom event handling. See the source cod e for this page.
	283	</ p>
	284	<p >
	285	Note tha t this ele ment is no t dynamica lly genera ted in thi s example so when di smiss is t riggered t he element is automa tically de stroyed. In typical use we wo uld genera ted this e lement and inject it into a re gion which would avo id the fir st concern and allow us to reo pen this a lert once closed sin ce the DOM elements would be g enerated a gain.
	286	< /p>
	287	</p>
	288	</div>
	289	<!-- END D IMISSABLE ALERT EXAM PLE -->
	290	</div>
	291	<div id="f ixedAlert" >
	292	<h 5>FIXED AL ERT</h5>
	293	<! -- BEGIN A LERT EXAMP LE -->
	294	<! --
	295	Most of this i s handled with the J S at the b ottom
	296	The error mess age takes focus when the valid ation erro r is throw n
	297	Note that the message is actually a trigger which navi gates to t he erroneo us field
	298	-- >
	299	<div id="f ixedAlertC ontainer" style="wid th:600px" hidden></d iv>
	300	<input id= "alertInpu t" role="s earch"><sp an> enter some text and press enter (re quires mor e than 3 c haracters) </span>
	301	<!-- END A LERT EXAMP LE -->
	302	</div>
	303	<br/><br/>
	304	</div>
	305	</li >
	306
	307
	308	<li ro le="listit em">
	309	<div rol e="region" id="accor d" aria-la belledby=" accordionT itle">
	310	<h4 id="ac cordionTit le">ACCORD ION</h4>
	311	<p>
	312	<u l role="li st" aria-l abel="acco rdion beha vior">
	313	<li role="list item">
	314	When u ser naviga tes to an accordion, the accor dion heade r that cor responds w ith the ac cordion bo dy contain ing class= "in" will be selecte d.
	315	</li >
	316	<li role="list item">
	317	Tab fr om an acco rdion head er will en ter the ac cordion bo dy and ann ounce the contents. Another t ab will le ave the ac cordion ob ject all t ogether. Shft+tab f rom the ac cordion bo dy will se lect the t ab corresp onding to the accord ion body.
	318	</li >
	319	<li role="list item">
	320	Naviga tion betwe en accordi on headers is accomp lished usi ng the up and down a rrow keys and this s election w raps.
	321	</li >
	322	</ ul>
	323	</p>
	324	<h5>ACCORD ION</h5>
	325	<!-- BEGIN ACCORDION EXAMPLE - ->
	326	<!-- the c lass hiera rchy is im portant as well as t he href an d data-par ent -->
	327	<div class ="panel-gr oup" id="a ccordion"> <!-- this is the ac tual accor dion objec t. Ensure the id is unique -- >
	328	<d iv class=" panel pane l-default" >
	329	<div cla ss="panel- heading">
	330	<h4 cl ass="panel -title">
	331	<a c lass="acco rdion-togg le" data-t oggle="col lapse" dat a-parent=" #accordion " href="#c ollapseOne ">
	332	Co llapsible Group Item #1
	333	</a>
	334	</h4>
	335	</div>
	336	<div id= "collapseO ne" class= "panel-col lapse coll apse in">
	337	<div cla ss="panel- body">
	338	We a pply the c lass 'in' to the div , which co ntains the collapse field to d efault to an accordi on item be ing render ed by defa ult.
	339	</div>
	340	</div>
	341	</div>
	342	<d iv class=" panel pane l-default" >
	343	<div cla ss="panel- heading">
	344	<h4 cl ass="panel -title">
	345	<a c lass="acco rdion-togg le" data-t oggle="col lapse" dat a-parent=" #accordion " href="#c ollapseTwo ">
	346	Co llapsible Group Item #2
	347	</a>
	348	</h4>
	349	</div>
	350	<div id= "collapseT wo" class= "panel-col lapse coll apse">
	351	<div c lass="pane l-body">
	352	The class 'in' is automa tically ap plied to m y ancestor which con tains the 'collapse' class whe n we toggl e the acco rion item.
	353	</div>
	354	</div>
	355	</div>
	356	<d iv class=" panel pane l-default" >
	357	<div cla ss="panel- heading">
	358	<h4 cl ass="panel -title">
	359	<a c lass="acco rdion-togg le" data-t oggle="col lapse" dat a-parent=" #accordion " href="#c ollapseThr ee">
	360	Co llapsible Group Item #3
	361	</a>
	362	</h4>
	363	</div>
	364	<div id= "collapseT hree" clas s="panel-c ollapse co llapse">
	365	<div c lass="pane l-body">
	366	Note that thes e are aggr egated as a group an d with thi s implemen tation onl y one acco rdion item will be v isible at a time. F unctionall y this ite m is handl ed as a so rt of hori zontal tab structure .
	367	</div>
	368	</div>
	369	</ div>
	370	</div>
	371	<!-- END A CCORDION E XAMPLE -->
	372	</div>
	373	<br/><br />
	374	</li >
	375
	376
	377	<li ro le="listit em">
	378	<div rol e="region" id="other " aria-lab elledby="s mallCompon entsTitle" >
	379	<h4 id="sm allCompone ntsTitle"> OTHER COMP ONENTS</h4 >
	380	<p>
	381	Th ese compon ents are n ot keyboar d navigabl e. Instea d, the tit le attribu te and spa ns using c lass="sr-o nly" are u sed to inf orm Assist ive Techno logies. T he span ap proach is redundant since titl e or data- original-t itle must be supplie d but not all Assist ive Techno logies wor k the same .
	382	</p>
	383	<ul>
	384	<l i>
	385	<h5> TOOLTIPS</ h5>
	386	<p>
	387	Here is an example o f a <a hre f="#" data -toggle="t ooltip" da ta-origina l-title="U sing an an chor tag.. .">tooltip <span clas s="sr-only ">Using an anchor ta g...</span ></a><br/>
	388	...and her e one with a button
	389	<butto n type="bu tton" clas s="btn btn -default" data-toggl e="tooltip " data-pla cement="le ft" title= "Tooltip o n left">To oltip Butt on<span cl ass="sr-on ly">Toolti p on left< /span></bu tton><br/>
	390	...and using a s pan \|<span tabindex= "0" data-t oggle="too ltip" data -placement ="bottom" title="I'm a span to oltip">hov er me<span class="sr -only">I'm a span to oltip</spa n></span>\| <br/>
	391	<ul>
	392	<li>
	393	Note that one should not use A LT attribu tes under any circum stance to aid the As sistive Te chnologies . Instead use a spa n with cla ss="sr-onl y", or sim ply a titl e attribut e.
	394	</li>
	395	<li>
	396	$('[data-t oggle="too ltip"]').t ooltip(); must be ex plicitly c alled to i nitialize tooltips. It is opt -in only.
	397	</li>
	398	</ul>
	399	</p>
	400	</ li>
	401	<l i>
	402	<h5> POPOVER</h 5>
	403	<p>
	404	<a tabinde x="0" clas s="btn btn -default" role="butt on" data-t oggle="pop over" data -trigger=" focus" tit le="Dismis sible popo ver" data- content="T his is the content t hat will b e displaye d in the p opover">Di smissible popover<sp an class=" sr-only">T his is the content t hat will b e displaye d in the p opover</sp an></a>
	405	</p>
	406	<ul>
	407	<li>
	408	Like too ltip, use a span wit h class="s r-only" to inform As sistive Te chnologies of data-c ontent
	409	</li>
	410	<li>
	411	Always u se an anch or to ensu re cross-b rowser com patibility . Tabinde x is requi red as wel l.
	412	</li>
	413	<li>
	414	$('[data -toggle="p opover"]') .popover() ; must be explicitly called to initializ e popover. It is op t-in only.
	415	</li>
	416	</ul >
	417	</ li>
	418	</ul>
	419	<div>
	420	<br/><br />
	421	</li >
	422
	423
	424	<li ro le="listit em">
	425	<div rol e="region" id="custo m" aria-la belledby=" customComp onents">
	426	<h4 id="cu stomCompon ents">CUST OM COMPONE NTS</h4>
	427	<p>
	428	Th ere will b e times wh en no Boot strap obje ct satisfi es the nee ds of the design. I n these ca ses, it wi ll be enti rely up to the devel oper to im plement an adequate solution. The follo wing is on e of these cases. T here is a grid that when an it em within the grid i s clicked informatio n in a box to the ri ght will b e updated dynamicall y. To sat isfy 508, when this click happ en, focus needs to s hift to th e box that was updat ed. Shift +tab needs to return focus to the row th at trigger ed the cha nge. Arro w key navi gation wil l be used in the gri d itself.
	429	</p>
	430	<!-- BEGIN CUSTOM CO MPONENTS E XAMPLE -->
	431	<div style ="width:10 0%; height :20%">
	432	<d iv style=" width:50%; float:lef t;"> <!-- a containe r to keep the "grid" -->
	433	<div class="pa nel-group" id="macco rdion"> <! -- this is the actua l accordio n object. Ensure th e id is un ique -->
	434	<div c lass="pane l panel-de fault">
	435	<d iv class=" panel-head ing">
	436	<h4 class= "panel-tit le">
	437	<a id="m CollapseA1 " class="a ccordion-t oggle" dat a-toggle=" collapse" data-paren t="#maccor dion" href ="#mcollap seOne">
	438	Collap sible Grou p Item #1
	439	</a>
	440	</h4>
	441	</ div>
	442	</di v>
	443	<div c lass="pane l panel-de fault">
	444	<d iv class=" panel-head ing">
	445	<h4 class= "panel-tit le">
	446	<a id="m CollapseA2 " class="a ccordion-t oggle" dat a-toggle=" collapse" data-paren t="#maccor dion" href ="#mcollap seOne">
	447	Collap sible Grou p Item #2
	448	</a>
	449	</h4>
	450	</ div>
	451	</div>
	452	<div c lass="pane l panel-de fault">
	453	<d iv class=" panel-head ing">
	454	<h4 class= "panel-tit le">
	455	<a id="m CollapseA3 " class="a ccordion-t oggle" dat a-toggle=" collapse" data-paren t="#maccor dion" href ="#mcollap seOne">
	456	Collap sible Grou p Item #3
	457	</a>
	458	</h4>
	459	</ div>
	460	</div>
	461	</di v>
	462	</ div>
	463	<d iv style=" width:50%; float:rig ht"> <!-- a containe r to hold the conten ts -->
	464	<div id="mcoll apseOne" c lass="pane l-collapse collapse in">
	465	<div c lass="pane l-body" ta bindex="0" >
	466	Ever yone is po inting to me! I'm g oing to sw ap out som e content dyanmicall y when you click the links
	467	<pre id="mcoll apseConten ts" class= "row"></pr e>
	468	</div>
	469	</div>
	470	</ div>
	471	</div>
	472	<!-- END C USTOM COMP ONENTS EXA MPLE -->
	473	</div>
	474	<br/><br />
	475	</li>
	476
	477
	478	<li ro le="listit em">
	479	<div rol e="region" id="exter nal" aria- labelledby ="external References ">
	480	<h4 id=" externalRe ferences"> EXTERNAL R EFERENCES< /h4>
	481	<ul>
	482	<li><a h ref="http: //www.w3.o rg/TR/WCAG 20/">WCAG 2.0 Docume ntation</a ></li>
	483	<li><a h ref="https ://paypal. github.io/ bootstrap- accessibil ity-plugin /demo.html ">PayPal A ccessibili ty Library </a> (Clic k link in header to load libra ry)</li>
	484	<li><a hre f="http:// getbootstr ap.com/com ponents/"> Bootstrap Components </a></li>
	485	<li><a hre f="http:// www.sectio n508. DNS /">VA Sect ion 508</a ></li>
	486	</ul>
	487	</li >
	488
	489
	490	</ul >
	491	<scr ipt src=". ./_assets/ libs/bower /jquery/jq uery.min.j s"></scrip t>
	492	<scr ipt src=". ./_assets/ libs/bower /bootstrap /bootstrap .min.js">< /script>
	493	<scr ipt src=". ./_assets/ libs/custo m/bootstra p/accessib ility/boot strap-acce ssibility. min.js"></ script>
	494	<scr ipt type=" text/javas cript">
	495	$(func tion () {
	496	$('[role ="region" ]').attr(' tabindex', 0);
	497	//Sets o ur regions so that w e can tab to them.
	498	//Not a requiremen t but it m akes navig ation easi er when te sting this page and is meant t o show how this coul d be done globally
	499
	500	$('[data -toggle="t ooltip"]') .tooltip() ; //initia lize toolt ip
	501	$('[data -toggle="p opover"]') .popover() ; //initia lize popup
	502
	503	//create new event s so we do n't have t o check al l the time
	504	$(docume nt).on('ke ydown', fu nction(e) {
	505	var code = e.keyCode \|\| e.whic h;
	506	switch(cod e) {
	507	ca se 13:
	508	$(e. target).tr igger('ent erkeypress ').trigger ('submitke ypress');
	509	brea k;
	510	ca se 32:
	511	$(e. target).tr igger('spa cekeypress ').trigger ('submitke ypress');
	512	brea k;
	513	ca se 37:
	514	$(e. target).tr igger('lef tarrowpres s').trigge r('previou sitempress ');
	515	brea k;
	516	ca se 38:
	517	$(e. target).tr igger('upa rrowpress' ).trigger( 'previousi tempress') ;
	518	brea k;
	519	ca se 39:
	520	$(e. target).tr igger('rig htarrowpre ss').trigg er('nextit empress');
	521	brea k;
	522	ca se 40:
	523	$(e. target).tr igger('dow narrowpres s').trigge r('nextite mpress');
	524	brea k;
	525	}
	526	});
	527
	528	//custom code to m ake enter key work f or dropdow n with DIV element
	529	$('#myDr opdownButt onId').on( 'submitkey press', fu nction(e) {
	530	$('#myDrop DownId .dr opdown-men u').dropdo wn('toggle ');
	531	});
	532
	533	//custom code for dismissabl e alert
	534	$('[data -target="# myAlert"]' ).on('clic k', functi on(e) {
	535	//Get the alert, add the class 'in', giv e it focus , and
	536	//set the closed.bs. alert trig ger to ret urn focus to the but ton that t riggered i t.
	537	$('#myAler t').on('cl osed.bs.al ert', func tion(e) {
	538	$( '[data-tar get="#myAl ert"]').fo cus();
	539	// You might need to en sure the B ackbone vi ew is dest royed here as well t o avoid me mory leaks
	540	// This would look simi lar to the following (note thi s is untes ted) and w ould be se t in the a lert view' s init:
	541	// this.$el.o n('closed. bs.alert', function( e) {
	542	// this .destroy() ;
	543	// },this);
	544	}).addClas s('in').sh ow().focus ();
	545	});
	546
	547	//custom code for fixed aler t
	548	$('#aler tInput').o n('submitk eypress', function(e ) {
	549	var code = e.keyCode \|\| e.whic h;
	550	var self = $(this),
	551	charCount = self.val ().length,
	552	alert = $( '#fixedAle rtContaine r'),
	553	alertText = '<div id ="alertMes sage" tabi ndex=0 tar get="'+sel f.attr('id ')+'" clas s="alert-d anger aler t fade in" role="ale rt"><span class="sr- only">Erro r:</span>< strong>HEY !</strong> You need to enter m ore than t hree chara cters</div >',
	554	msgContain er;
	555	if(charCou nt <= 3) {
	556	al ert.show() .html(aler tText);
	557	ms gContainer = $("#ale rtMessage" );
	558	ms gContainer .focus().o n('submitk eypress', function(e ) {
	559	$('# '+msgConta iner.attr( 'target')) .focus();
	560	}) ;
	561	se lf.attr('a ria-invali d', true);
	562	} else {
	563	$( '#alertMes sage').ale rt('close' );
	564	$( '#alertMes sage').on( 'close.bs. alert', fu nction(e) {
	565	aler t.empty(). hide();
	566	}) ;
	567	se lf.attr('a ria-invali d', false) ;
	568	}
	569	});
	570
	571	//Custom event han dling for modified a ccordion e xample
	572	/*
	573	$('[data -parent="# maccordion "]').on('c lick submi tkeypress' , function (e) {
	574	$('#mcolla pseOne').o ne('hidden .bs.collap se', funct ion(e){
	575	$( this).coll apse('show ');
	576	});
	577	});
	578	*/
	579	$("#mCol lapseA1"). on('click submitkeyp ress', fun ction(e) {
	580	$('#mcolla pseOne').o ne('hidden .bs.collap se', funct ion(e){
	581	$( this).find ('#mcollap seContents ').text("Y OU CLICKED ON THE FI RST ONE!") ;
	582	});
	583	});
	584	$("#mCol lapseA2"). on('click submitkeyp ress', fun ction(e) {
	585	$('#mcolla pseOne').o ne('hidden .bs.collap se', funct ion(e){
	586	$( this).find ('#mcollap seContents ').text("Y OU CLICKED ON THE SE COND ONE!" );
	587	});
	588	});
	589	$("#mCol lapseA3"). on('click submitkeyp ress', fun ction(e) {
	590	$('#mcolla pseOne').o ne('hidden .bs.collap se', funct ion(e){
	591	$( this).find ('#mcollap seContents ').text("Y OU CLICKED ON THE LA ST ONE!");
	592	});
	593	});
	594
	595	});
	596	</sc ript>
	597	</ body>
	598	</html>