Improve semantic HTML for accessibility

rmshaffer · rmshaffer · commit cca7a83cac4e · 2021-03-07T08:56:16.000-05:00
diff --git a/_includes/member.html b/_includes/member.html
@@ -1,6 +1,6 @@
 <td width="112">
     {% if include.image != "" %}
-        <img src="{{ include.image }}" align="right" height="200px" alt="{{ include.name }}" />
+        <img src="{{ include.image }}" align="right" height="200px" alt="Photo of {{ include.name }}" />
     {% endif %}
 </td>
 {% if include.full_row %}
@@ -12,6 +12,6 @@ <h2>{{ include.name }}</h2>
     <script>
         emicon("{{ include.email_suffix }}", "{{ include.email_domain }}", "{{ include.email_name }}");
     </script>
-    <h4 class="contact">{{ include.title }}</h4>
+    <h3 class="contact">{{ include.title }}</h3>
     <p class="bio">{{ include.bio }}</p>
 </td>
diff --git a/assets/css/style.scss b/assets/css/style.scss
@@ -14,12 +14,12 @@ body {
 	text-align: center;
 }
 
-h1, h2, h3, h4, h5, h6, #masthead {
+h1, h2, h3, h4, h5, h6, #masthead, #affiliations {
 	font-family: Oswald, sans-serif;
 }
 
 #main-body {
-	text-align: justify;
+	text-align: left;
 	margin: 0px 50px 50px 50px;
 	width: 750px;
 }
@@ -28,12 +28,6 @@ h1, h2, h3, h4, h5, h6, #masthead {
 	text-align: center;
 }
 
-.center {
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-}
-
 #box {
 	position: relative
 }
@@ -50,6 +44,12 @@ h1, h2, h3, h4, h5, h6, #masthead {
 	vertical-align: middle;
 }
 
+#affiliations {
+  text-align: center;
+  font-weight: bold;
+  font-style: italic;
+}
+
 #contact-info {
   text-align: center;
 }
@@ -60,8 +60,11 @@ h1, h2, h3, h4, h5, h6, #masthead {
   text-align: left;
 }
 
-.caption {
-	text-align: justify;
+figure {
+  text-align: center;
+}
+
+figcaption {
 	font-size: 80%;
 	width: inherit;
 }
@@ -128,7 +131,7 @@ ul {
 	display: inline;
 }
 
-#members-grid h4 {
+#members-grid h3 {
   text-align: left;
 }
 
@@ -151,7 +154,7 @@ ul {
 
 #members-grid .bio {
 	font-size: 80%;
-	text-align: justify;
+	text-align: left;
 }
 
 #members-grid .mail-icon {
diff --git a/index.md b/index.md
@@ -4,7 +4,10 @@ title: Home
 
 # Welcome to the Ion Trap Group at UC Berkeley
 
-#### Department of Physics, University of California, Berkeley <br/> Berkeley Nanosciences and Nanoengineering Institute
+<div id="affiliations">
+	Department of Physics, University of California, Berkeley <br/>
+	Berkeley Nanosciences and Nanoengineering Institute
+</div>
 
 We trap ions to investigate various aspects of quantum physics and quantum information. The motion of trapped ions can be accurately controlled in the quantum regime. Together with the ions' excellent quantum memory capabilities, trapped ions are thus an excellent system to investigate experimental quantum information  processing. Furthermore, we couple the motion of trapped ions to bulk materials to learn more about the quantum properties of mesoscopic systems. See our
 research tab for more information about specific projects.
@@ -13,7 +16,9 @@ research tab for more information about specific projects.
 We have a limited number of undergraduate research positions available! If you are interested, please send your CV and transcript to Hartmut Haeffner (hhaeffner@berkeley.edu).
 -->
 
-<img src="/members/pics/group_photo_2019_lowres.jpg" width="600px" class="center" alt="Group photo 2019">
+<figure>
+	<img src="/members/pics/group_photo_2019_lowres.jpg" width="600px" alt="Group photo 2019" />
+</figure>
 
 <div align="center">
 	<a class="twitter-timeline" data-width="650" data-height="1000" data-dnt="true" data-theme="light" href="https://twitter.com/Berkeley_ions?ref_src=twsrc%5Etfw">
diff --git a/members/index.md b/members/index.md
@@ -5,7 +5,7 @@ title: Group Members
 # {{ page.title }}
 
 <div id="members-grid">
-  <table>
+  <table role="presentation">
     <tr>
       {% include member.html
           full_row=true
@@ -230,8 +230,11 @@ title: Group Members
 | Christopher Reilly | Alex Georges | Jessica Yu | Andre He | Thomas Lloyd |
 | Zhao Zhang | Nadav Drechsler | Lara Ostertag | Samuel Cui | Tim Guo |
 
-<br/>
-
-| <img src="/members/pics/groupphoto_2018_final.jpg" width="375px" alt="Group photo 2018"/> |<img src="/members/pics/group_photo_2017.JPG" width="375px" alt="Group photo 2017"/> |
-| <img src="/members/pics/group_fall2015.JPG" width="375px" alt="Group photo fall 2015"/> | <img src="/members/pics/group_photo_2015.jpg" width="375px" alt="Group photo spring 2015"/> |
-| <img src="/members/pics/group_pic_2014.jpg" width="375px" alt="Group photo 2014"/> | <img src="/members/pics/group_picture_2013_IMG_6170_lower_res.JPG" width="375px" alt="Group photo 2013"/> |
+<figure>
+  <img src="/members/pics/groupphoto_2018_final.jpg" width="325px" alt="Group photo 2018"/>
+  <img src="/members/pics/group_photo_2017.JPG" width="325px" alt="Group photo 2017"/>
+  <img src="/members/pics/group_fall2015.JPG" width="325px" alt="Group photo fall 2015"/>
+  <img src="/members/pics/group_photo_2015.jpg" width="325px" alt="Group photo spring 2015"/>
+  <img src="/members/pics/group_pic_2014.jpg" width="325px" alt="Group photo 2014"/>
+  <img src="/members/pics/group_picture_2013_IMG_6170_lower_res.JPG" width="325px" alt="Group photo 2013"/>
+</figure>
diff --git a/research/eQIP/index.md b/research/eQIP/index.md
@@ -4,7 +4,12 @@ title: Electron Quantum Information Processing
 
 # {{ page.title }}
 
-<img src="/research/eQIP/Trap.png" alt="Electron trap" width="655.5" height="350.25" class="center" />
+<figure>
+    <img src="/research/eQIP/Trap.png" alt="Electron trap" height="350" />
+    <figcaption>
+        Proposed schematic for electron trap.
+    </figcaption>
+</figure>
 
 Trapped ions are currently one of the most promising candidates for
 building quantum computers. Building large-scale devices with trapped
@@ -26,6 +31,5 @@ The combination of fast gate operations and long coherence times make
 electrons a very attractive system, that could rival trapped ions and
 superconducting circuits in the long run.
 
-[Phys. Rev. A 95, 012312 (2017)](http://journals.aps.org/pra/abstract/10.1103/PhysRevA.95.012312), [arXiv:1611.00130](http://arxiv.org/abs/1611.00130).  
-
-[New J. Phys. 15, 073017 (2013)](http://iopscience.iop.org/1367-2630/15/7/073017/), [arXiv:1304.4710](http://arxiv.org/abs/1304.4710).
+[Phys. Rev. A 95, 012312 (2017)](http://journals.aps.org/pra/abstract/10.1103/PhysRevA.95.012312), [arXiv:1611.00130](http://arxiv.org/abs/1611.00130)  
+[New J. Phys. 15, 073017 (2013)](http://iopscience.iop.org/1367-2630/15/7/073017/), [arXiv:1304.4710](http://arxiv.org/abs/1304.4710)  
diff --git a/research/quantum-computing/index.md b/research/quantum-computing/index.md
@@ -13,8 +13,9 @@ field noise emerging from the trap electrodes as this noise leads to heating of
 interferes with the most popular quantum gates for trapped ions. In order to attack this problem,
 we combine an ion trap with variable temperature together with surface cleaning and analyzation tools.
 
-<table class="image" align="center"><caption class="caption" align="bottom" style="caption-side: bottom">
-Argon cleaning of a planar trap.
-</caption>
-<TR><TD><img src="/research/quantum-computing/argon_cleaning.jpg" alt="Argon cleaning of a planar trap" class="center" height="400" ></TD></TR>
-</table>
+<figure>
+    <img src="/research/quantum-computing/argon_cleaning.jpg" alt="Photo of argon cleaning process" height="400" />
+    <figcaption>
+        Argon cleaning of a planar trap.
+    </figcaption>
+</figure>
diff --git a/research/quantum-electronics/index.md b/research/quantum-electronics/index.md
@@ -12,23 +12,23 @@ between 50 &mu;m and 300 &mu;m above the surface, using only DC electrodes, crea
 precision electric-field noise detection, trapping of vertical ion strings without excess micromotion,
 and potential applications for scalable quantum computers with surface ion traps.
 
-<table class="image" align="center">
-<caption class="caption" align="bottom" style="caption-side: bottom">
-	Fig. 1. (a) False-color microscope image of the microfabricated four-rf-electrode trap.
-	Static voltages are applied to electrodes labeled dc, and rf electrodes are labeled rf+-
-	according to the signal phase. (b) Top-down view of xy-plane rf pseudopotentials at a
-	height of z = 175 &mu;m, with electrode geometry shown for reference.
-	(c) Side view of rf potentials.
-</caption>
-<TR><TD><img src="/research/quantum-electronics/SingleTrap.jpeg" alt="Trap layout and potentials" height="200"></TD></TR>
-</table>
-	
-<table class="image" align="center">
-<caption class="caption" align="bottom" style="caption-side: bottom">
-	Fig. 2. Simulated shuttling of the ion perpendicular to the trap surface.
-</caption>
-<TR><TD><img src="/research/quantum-electronics/potential_lines.gif" alt="Potential during ion shuttling" height="350"></TD></TR>
-</table>
+<figure>
+	<img src="/research/quantum-electronics/SingleTrap.jpeg" alt="Trap layout and potentials" height="200" />
+	<figcaption>
+		Fig. 1. (a) False-color microscope image of the microfabricated four-rf-electrode trap.
+		Static voltages are applied to electrodes labeled dc, and rf electrodes are labeled rf+-
+		according to the signal phase. (b) Top-down view of xy-plane rf pseudopotentials at a
+		height of z = 175 &mu;m, with electrode geometry shown for reference.
+		(c) Side view of rf potentials.
+	</figcaption>
+</figure>
+
+<figure>
+	<img src="/research/quantum-electronics/potential_lines.gif" alt="Potential during ion shuttling" height="350" />
+	<figcaption>
+		Fig. 2. Simulated shuttling of the ion perpendicular to the trap surface.
+	</figcaption>
+</figure>
 
 ## Electric-field noise vs. ion height
 
@@ -38,14 +38,14 @@ We find the distance dependence of the noise to scale as d<sup>-2.6</sup> in our
 which is consistent with 1/f noise. With significant evidence that we are not limited by technical
 noise sources, our distance scaling data is consistent with a noise correlation length of about 100
 &mu;m at the trap surface.
-	
-<table class="image" align="center">
-	<caption class="caption" align="bottom" style="caption-side: bottom">
+
+<figure>
+	<img src="/research/quantum-electronics/DistanceScaling.png" alt="Heating rate vs. distance" height="300" />
+	<figcaption>
 		Fig. 3. Planar (blue) and normal (red) heating rates as a function of ion-surface distance for a
 		fixed secular frequency of 1 MHz. Power-law fits are overlayed for reference.
-	</caption>
-	<TR><TD><img src="/research/quantum-electronics/DistanceScaling.png" alt="Heating rate vs. distance" height="300"></TD></TR>
-</table>
+	</figcaption>
+</figure>
 
 ## Quantum information transfer through a classical conductor
 
@@ -56,14 +56,14 @@ size of 50 &mu;m. This inter-trap coupling may be used for scalable quantum comp
 species that are not directly accessible to laser cooling, non-invasive study of superconductors,
 and realization of hybrid systems by coupling an ion-trap quantum computer to a solid-state quantum computer,
 e.g. a system of Josephson junctions.
-	
-<table class="image" align="center">
-<caption class="caption" align="bottom" style="caption-side: bottom">
-	Fig. 4. Schematic of coupling trap. The two trapping regions are located above the centers of the red squares,
-	which are connected via an electrically floating wire. Out-of-phase RF is applied to the green electrodes,
-	and DC is applied to the blue electrodes.
-</caption>
-<TR><TD><img src="/research/quantum-electronics/DoubleTrap.png" alt="Double trap" height="300"></TD></TR>
-</table>
+
+<figure>
+	<img src="/research/quantum-electronics/DoubleTrap.png" alt="Double trap" height="300" />
+	<figcaption>
+		Fig. 4. Schematic of coupling trap. The two trapping regions are located above the centers of the red squares,
+		which are connected via an electrically floating wire. Out-of-phase RF is applied to the green electrodes,
+		and DC is applied to the blue electrodes.
+	</figcaption>
+</figure>
 
 This project is supported by AFOSR project "Prototype solid state quantum interface for trapped ions".
diff --git a/research/quantum-emulation/index.md b/research/quantum-emulation/index.md
@@ -27,9 +27,16 @@ In collaboration with Birgitta Whaley (University of California, Berkeley) and M
 we aim to bring new understanding to energy transduction and transport in materials, and help improve the design of
 new photodetectors and new photovoltaic systems.
 
-More details can be found in: [Phys. Rev. X 8, 011038 (2018)](https://journals.aps.org/prx/abstract/10.1103/PhysRevX.8.011038).
+More details can be found in:  
+[Phys. Rev. X 8, 011038 (2018)](https://journals.aps.org/prx/abstract/10.1103/PhysRevX.8.011038)
 
-<img src="/research/quantum-emulation/VAET_section.jpg" width="558" alt="Vibrationally-assisted energy transfer" class="center" />
+<figure>
+	<img src="/research/quantum-emulation/VAET_section.jpg" alt="Figures related to vibrationally-assisted energy transfer experiment" />
+	<figcaption>
+		Schematic illustrations of the VAET process, the ion trap apparatus, the implementation of the experiment,
+        and the experimental energy transfer results. Figures from Phys. Rev. X 8, 011038.
+	</figcaption>
+</figure>
 
 ## Verifying an analog quantum simulator
 
@@ -47,26 +54,27 @@ operating consistently, but that it is also operating faithfully according to th
 Such techniques can be applied to subsets of a larger system to allow an experimentalist to characterize
 and diagnose the behavior in a scalable way.
 
-More information is available at: [npj Quantum Inf. 7, 46 (2021)](https://www.nature.com/articles/s41534-021-00380-8).
+More information is available at:  
+[npj Quantum Inf. 7, 46 (2021)](https://www.nature.com/articles/s41534-021-00380-8)
 
-<table class="image" align="center">
-<caption class="caption" align="bottom" style="caption-side: bottom">
-    <b>Illustration of verification protocols for analog
-    quantum simulators.</b> Various protocols yield information
-    about the accuracy of a quantum simulator by propagating
-    a state along a closed loop and verifying to what degree the
-    system returns to its original state, labeled here as |0&#10217;.
-    The state |&#968;&#10217; denotes the state of the system after applying the dynamics of Hamiltonian <i>H</i>
-    for a time &#964;, whereas the state |&#632;&#10217; denotes an arbitrary state.
-    <br/>(a) <i>Time-reversal analog verification:</i> Running an analog simulation forward in time, followed by the same analog simulation backward in time.
-    <br/>(b) <i>Multi-basis analog verification:</i> Running an analog simulation forward in time, rotating the state, performing the
-    backward simulation by an analog version in the rotated basis, and finally rotating the state back.
-    <br/>(c) <i>Randomized analog verification:</i> Running a random sequence of subsets of the Hamiltonian terms
-    (denoted as <i>H</i><sub>rand</sub>), followed by an inversion sequence of subsets of the Hamiltonian terms which has been
-    calculated to return the system approximately to a basis state.
-</caption>
-<TR><TD><img src="/research/quantum-emulation/verification-protocols.png" alt="Illustration of verification protocols for analog quantum simulators" width="500"></TD></TR>
-</table>
+<figure>
+	<img src="/research/quantum-emulation/verification-protocols.png" alt="Diagrams of verification protocols for analog quantum simulators" width="500" />
+	<figcaption>
+        <b>Illustration of verification protocols for analog
+        quantum simulators.</b> Various protocols yield information
+        about the accuracy of a quantum simulator by propagating
+        a state along a closed loop and verifying to what degree the
+        system returns to its original state, labeled here as |0&#10217;.
+        The state |&#968;&#10217; denotes the state of the system after applying the dynamics of Hamiltonian <i>H</i>
+        for a time &#964;, whereas the state |&#632;&#10217; denotes an arbitrary state.
+        <br/>(a) <i>Time-reversal analog verification:</i> Running an analog simulation forward in time, followed by the same analog simulation backward in time.
+        <br/>(b) <i>Multi-basis analog verification:</i> Running an analog simulation forward in time, rotating the state, performing the
+        backward simulation by an analog version in the rotated basis, and finally rotating the state back.
+        <br/>(c) <i>Randomized analog verification:</i> Running a random sequence of subsets of the Hamiltonian terms
+        (denoted as <i>H</i><sub>rand</sub>), followed by an inversion sequence of subsets of the Hamiltonian terms which has been
+        calculated to return the system approximately to a basis state.
+	</figcaption>
+</figure>
 
 ## Precision measurements using trapped ions
 
@@ -86,9 +94,14 @@ states may yield substantial further improvements. Our measurements improve the
 local Lorentz invariance of the electron using calcium ions by factor of two to about 5e-19.
 
 More details can be found in:  
-[Nature 517, 592 (2015)](http://dx.doi.org/10.1038/nature14091).  
-[Nature Physics 12, 465-468 (2016)](http://www.nature.com/nphys/journal/vaop/ncurrent/full/nphys3610.html).  
-[Phys. Rev. Lett. 120, 103202 (2018)](https://journals.aps.org/prl/abstract/10.1103/PhysRevLett.120.103202).  
-[Phys. Rev. Lett. 122, 123605 (2019)](https://journals.aps.org/prl/abstract/10.1103/PhysRevLett.122.123605).
+[Nature 517, 592 (2015)](http://dx.doi.org/10.1038/nature14091)  
+[Nature Physics 12, 465-468 (2016)](http://www.nature.com/nphys/journal/vaop/ncurrent/full/nphys3610.html)  
+[Phys. Rev. Lett. 120, 103202 (2018)](https://journals.aps.org/prl/abstract/10.1103/PhysRevLett.120.103202)  
+[Phys. Rev. Lett. 122, 123605 (2019)](https://journals.aps.org/prl/abstract/10.1103/PhysRevLett.122.123605)
 
-<img src="/research/quantum-emulation/Lattice_section_web.jpg" width="600" alt="Experimental test of local Lorentz invariance" class="center" />
+<figure>
+    <img src="/research/quantum-emulation/Lattice_section_web.jpg" alt="Experimental test of local Lorentz invariance" width="650" />
+    <figcaption>
+        Overview of local Lorentz invariance test and results.
+    </figcaption>
+</figure>
diff --git a/research/ring-trap/index.md b/research/ring-trap/index.md
diff --git a/research/staq/index.md b/research/staq/index.md
diff --git a/visitors/index.md b/visitors/index.md

Original file line number	Diff line number	Diff line change
`@@ -14,12 +14,12 @@ body {`
`14`	`14`	`text-align: center;`
`15`	`15`	`}`
`16`	`16`
`17`		`-h1, h2, h3, h4, h5, h6, #masthead {`
	`17`	`+h1, h2, h3, h4, h5, h6, #masthead, #affiliations {`
`18`	`18`	`font-family: Oswald, sans-serif;`
`19`	`19`	`}`
`20`	`20`
`21`	`21`	`#main-body {`
`22`		`- text-align: justify;`
	`22`	`+ text-align: left;`
`23`	`23`	`margin: 0px 50px 50px 50px;`
`24`	`24`	`width: 750px;`
`25`	`25`	`}`
`@@ -28,12 +28,6 @@ h1, h2, h3, h4, h5, h6, #masthead {`
`28`	`28`	`text-align: center;`
`29`	`29`	`}`
`30`	`30`
`31`		`-.center {`
`32`		`- display: block;`
`33`		`- margin-left: auto;`
`34`		`- margin-right: auto;`
`35`		`-}`
`36`		`-`
`37`	`31`	`#box {`
`38`	`32`	`position: relative`
`39`	`33`	`}`
`@@ -50,6 +44,12 @@ h1, h2, h3, h4, h5, h6, #masthead {`
`50`	`44`	`vertical-align: middle;`
`51`	`45`	`}`
`52`	`46`
	`47`	`+#affiliations {`
	`48`	`+ text-align: center;`
	`49`	`+ font-weight: bold;`
	`50`	`+ font-style: italic;`
	`51`	`+}`
	`52`	`+`
`53`	`53`	`#contact-info {`
`54`	`54`	`text-align: center;`
`55`	`55`	`}`
`@@ -60,8 +60,11 @@ h1, h2, h3, h4, h5, h6, #masthead {`
`60`	`60`	`text-align: left;`
`61`	`61`	`}`
`62`	`62`
`63`		`-.caption {`
`64`		`- text-align: justify;`
	`63`	`+figure {`
	`64`	`+ text-align: center;`
	`65`	`+}`
	`66`	`+`
	`67`	`+figcaption {`
`65`	`68`	`font-size: 80%;`
`66`	`69`	`width: inherit;`
`67`	`70`	`}`
`@@ -128,7 +131,7 @@ ul {`
`128`	`131`	`display: inline;`
`129`	`132`	`}`
`130`	`133`
`131`		`-#members-grid h4 {`
	`134`	`+#members-grid h3 {`
`132`	`135`	`text-align: left;`
`133`	`136`	`}`
`134`	`137`
`@@ -151,7 +154,7 @@ ul {`
`151`	`154`
`152`	`155`	`#members-grid .bio {`
`153`	`156`	`font-size: 80%;`
`154`		`- text-align: justify;`
	`157`	`+ text-align: left;`
`155`	`158`	`}`
`156`	`159`
`157`	`160`	`#members-grid .mail-icon {`